Hogyan készítsünk oszlopokat a WordPressben plugin nélkül

Hogyan készítsünk oszlopokat a WordPressben plugin nélkül

A tartalom oszlopokba rendezése gyerekjáték a WordPress Columns blokknak köszönhetően. Ez a blokk az alapvető blokkok közé tartozik, amelyek minden WP témában használhatók. A Columns blokk legfeljebb 6 oszlopot tartalmazhat. Így tehát 6 különböző tartalom lehet egymás mellett. Ma mi...

Ma megmutatjuk, hogyan lehet oszlopokat készíteni a WordPressben plugin nélkül - a Columns blokk használatával. Emellett összefoglalót is hozunk nektek legújabb funkciók a WP 5.3 verzióból frissítés.

Ebben a bemutatóban a következőkről találsz információkat:

Mi a célja az oszlopoknak

A weboldal oszlopai többféleképpen is alkalmazhatók. Először is áttekinthetőbbé, olvashatóbbá és könnyebben böngészhetővé tehetik a tartalmat. A tartalom oszlopokba rendezésével kiemelheti a fontos információkat vagy paramétereket.

Például több oszlopos elrendezést használhat szolgáltatásainak bemutatására. Adjon hozzá szemléltető képet, leírást vagy gombot. A képet természetesen kattinthatóvá teheti.

Több oszlopos elrendezés szolgáltatásokkal
Több oszlopos elrendezés szolgáltatásokkal

A szolgáltatásokhoz hasonlóan a WordPressben is használhatsz oszlopokat a termékek vagy termékkategóriák megjelenítésére. Ez ideális, ha egyszerű üzleti weboldalad van.

Több oszlopos elrendezés termékekkel és kategóriákkal
A termékek és kategóriák megjelenítésére használt oszlopok

A blogbejegyzésekben oszlopokat használhat a tartalom elkülönítésére. Szöveget, felsoroláspontokat vagy képeket helyezhet egymás mellé.

Elkülönített tartalom oszlopok használatával
Oszlopok használata a tartalom elkülönítésére

Hogyan működtek az oszlopok a régi szerkesztőben

A WordPress 5+ előtt, ha több oszlopos tartalmat akartál létrehozni, akkor táblázatokat kellett használnod. Ez sokkal nehezebb volt, mint a legújabb szerkesztőben. Mi több, általában gond volt a stílusokkal és a táblázatok megjelenítésével a mobileszközökön. Hogyan működött ez régen?

Több lehetőséged is volt arra, hogyan hozhatsz létre oszlopokat a WordPress weboldalon:

1. HTML kód kézi beillesztése a szövegszerkesztőbe

<table>
  <tr>
    <td></td>
    <td></td>
  </tr>
</table>

Ezt a megközelítést főleg a fejlesztők használták, akik gyorsan tudtak táblázatot vagy oszlopot létrehozni az igényeik alapján. Hátránya volt, hogy nem minden WordPress téma tudta jól kezelni az oszlopokat. A táblázatok általában nem voltak tökéletesek, és az átlagfelhasználó nem tudta könnyen megoldani az összes lehetséges problémát.

2. Táblázatok engedélyezése a WordPress szerkesztőben

Mivel a WordPress a TinyMCE szerkesztőt használta, lehetővé vált, hogy a táblázatok szerkesztésére funkciókat lehessen használni. Ha többet szeretne megtudni, akkor minden részletet megtalálhat ebben a fórumban. Ha ugyanezt teszi az AIT témáinkkal, a táblázatok helyesen fognak működni.

3. Az oszlopok elem használata az AIT témákban

Ha valamelyik régebbi WordPress témánkat használja, akkor bizonyára ismeri a Columns elemet. Ezt az elemet oszlopok hozzáadására használhatod az oldalakon belül. Ez egy rendelhető elem, vagyis bárhol elhelyezheted, ahol szükséged van rá. Előnye, hogy oldalakon belül variálható.

Oszlopok elem
Megrendelhető elem oszlopok - bármely AIT témában használhatod

4. Letöltés 3rd party plugin a táblázatok kezeléséhez

Egy másik megoldás arra, hogyan lehet oszlopokat létrehozni a WordPress bejegyzésekben és oldalakban, az volt, hogy letöltsd a táblázatok létrehozására szolgáló egyik elérhető plugint. Ezek a pluginek lehetővé teszik oszlopok/táblák hozzáadását néhány kattintással, kódolás nélkül. Ezt kevésbé tapasztalt felhasználók is használhatták.

Hogyan készítsünk oszlopokat a WordPressben plugin nélkül (a blokkszerkesztőben)

Az új blokkszerkesztőnek köszönhetően az oszlopok létrehozása rendkívül egyszerűvé vált. Ha még mindig a régi WordPress-t használod, akkor itt az ideje frissíteni a legújabb verzióra. A Columns blokk segítségével egyszerűen, néhány kattintással oszlopokat adhatsz hozzá és kezelhetsz.

Ez a blokk üdvözlendő változás mindazok számára, akik több oszlopos tartalommal szeretnének dolgozni, termékeket bemutatni vagy blogot írni, és nincs programozási tapasztalatuk.

Nézzük meg, hogyan lehet oszlopok blokkot hozzáadni, és hogyan lehet oszlopokat létrehozni a WordPressben plugin nélkül:

  • Az első lehetőség a "+" gombra kattintás a felső sávban, és válassza ki az oszlopok blokkot a rendelkezésre álló blokkok közül.
  • A második lehetőség, hogy a szerkesztőn belül bárhol a "+" gombra kattint.
A WordPressben oszlopok hozzáadása a "+" gombra kattintva
Oszlopok hozzáadása a WordPressben a "+" gombra kattintva
Oszlopok blokk hozzáadása a "/" szlávokkal
Oszlopok hozzáadása a WordPressben a "/" perjel használatával

WordPress oszlopok blokk előre definiált elrendezései (ÚJ a WP 5.3-tól)

A legújabb verzió hatalmas fejlesztéseket hozott az oszlopok beállításaiban. Először is alapértelmezett elrendezési stílusok állnak rendelkezésre. Mit jelent ez?

A felhasználók a tartalmi területhez új blokk hozzáadása során választhatják ki az elrendezést és az igazítási stílust. Az előre definiált elrendezések nagyon hasznosak lehetnek - különösen azoknak a felhasználóknak, akik nem rendelkeznek fejlett WordPress-ismeretekkel. Ez a funkció azt képviseli, hogyan képzeljük el azt a módot, ahogyan oszlopokat készíthetünk a WordPressben (plugin vagy más kiegészítő nélkül).

Előre definiált elrendezések az oszlopok blokkban
Előre meghatározott elrendezési lehetőségek

 

Ha nem szeretnél előre definiált elrendezést választani a WordPress Columns blokkban, egyszerűen hagyd ki. Ennek a lépésnek a kihagyása után a tartalom 2 azonos részre/ két különálló oszlopra lesz szétválasztva, amelyek szerkeszthetők.

Létrehozott oszlopok blokk
Oszlopok blokk 2 alapértelmezett területtel (oszlopok), amelyeket szerkeszthetsz.

Oszlopok Blokk alapbeállítások

Maga a WordPress Columns blokk nem rendelkezik sok lehetőséggel. Hogy miért van ez így, azt később elmagyarázzuk. A felső sávban az igazítást szélesre vagy teljes szélességre változtathatod. Ezt az igazítást akkor változtathatod meg, ha az aktív témád támogatja.

Az oszlopok blokk felső eszköztára
Felső eszköztár igazítási lehetőségekkel

A legfontosabb Columns blokk beállítása a jobb oldali ellenőr oldalsáv oszlopainak száma. Alapértelmezés szerint 2 oszlop van, de ezt a számot 6-ra növelheti. Ezt az egérrel vagy egy szám megadásával módosíthatja. Hogy hogyan néz ki, azt rögtön látni fogja, miután növelte vagy csökkentette az oszlopokat. A blokk dinamikusan változtatja magát a csúszkától függően.

Az oszlopok számának módosítása
Mozgassa a csúszkával az oszlopok számának megváltoztatásához, ahogyan szükséges

Nagyon praktikus, mert az oszlopok számát szó szerint másodpercek alatt megváltoztathatja a beállítások vagy a kódolás bonyolult módosítása nélkül.

A WordPress szerkesztő többi blokkjához hasonlóan a Columns blokkba is beilleszthet Egyéni CSS osztályokat.

Block appender a blokkokkal való gördülékenyebb munkához

Az oszlopok blokk azért különleges, mert több blokkot is létrehozhatsz vele. Az új verzió megjelenéséig elég nehéz volt egyedi blokkokkal dolgozni. Amikor hozzá akartál adni egy blokkot, nem tudtad, hogy pontosan hova kell kattintani. A Block appendernek (és a háttérszín szerinti megkülönböztetésnek) köszönhetően könnyebb a megfelelő oszlopba tartalmat beszúrni.

Blokk appender a WordPress oszlopok blokkban
Blokk appender háttérszínnel

Hogyan dolgozzunk a WordPress oszlopok blokkjával

A Columns blokk szépsége, hogy minden oszlop más blokkokat is beágyazhat. Ez lehet bekezdés, képblokk vagy gombblokk. Az oszlopok maximális száma 6, ezért több oszlopos tartalmat hozhat létre, ahogyan csak szüksége van rá. Mint korábban említettük, a termékek bemutatásához a termék képét, nevét, árát és gombját egymás mellé helyezheti.

Különböző típusú tartalmak több oszlopos elrendezésben
A Columns blokk segítségével különböző típusú tartalmakat mutathat be egymás mellett.

Több oszlopblokkot is használhat egymás alatt, hogy rácsot hozzon létre. Használhatja szolgáltatásainak bemutatására vagy fontos funkciók promóciójára.

Oszlopok blokk' rácshatás
Az egymás alá helyezett oszlopok blokkok rácshatása

Beágyazott blokkok szerkesztése

Mint már említettük, más blokkokat is beágyazhatsz az oszlopokba. Minden egyes beágyazott blokk minden beállítása elérhető. Ez azt jelenti, hogy ha a Kép blokkot oszlopba helyezi, pontosan ugyanúgy szerkesztheti, mint az önálló oszlopban. Képblokk.

Képblokk szerkesztése beágyazott blokkként
A Columns blokkba ágyazott Image blokk elérhető beállításai

Következtetés: Oszlopok blokk előnyei

A WordPress blokkszerkesztő felszabadítása és az oszlopok használata az oldalakon és a hozzászólásokban jelentősen leegyszerűsítette a felhasználók munkáját a tartalommal. A WordPress oszlopok blokknak köszönhetően többé nem fontos, hogy harmadik féltől származó megoldásokat használjunk vagy HTML kódot írjunk. Az oszlopok hozzáadása vagy törlése néhány kattintással lehetséges. Minden nagyon intuitív és gyors a kevésbé technikás felhasználók számára is.

A több oszlopos elrendezésben lévő tartalma szépen igazodik a rácshálóhoz. A reszponzív változatban is azonnal jól fog kinézni.

Keményen dolgoztunk az új Citadela WordPress témán, amelyet kifejezetten a WordPress blokkszerkesztőhöz fejlesztettünk ki. Tudjon meg többet az Citadela témáról és a rendelkezésre álló elrendezési csomagokról.

2 gondolat a következőről: „How to make columns in WordPress without plugin

    1. Hello David,

      köszönöm, hogy írtál. Aktiválnia kell a Gutenberg szerkesztőt, amely lehetőséget kínál az egyes oszlopok kiválasztására, a Beállítások oldalsávban (jobb oldalon) beállíthatja a szélességét.

      Üdvözlettel!
      Zlatko
      AIT csapat

Hozzászólások lezárva.