A Gutenberg szerkesztő használata WordPress oldalakon
A WordPress weboldal készítés rendkívül népszerű, hiszen a legelterjedtebb tartalomkezelő rendszerről beszélünk. Az egyik alapvető összetevője a Gutenberg szerkesztő, amellyel bejegyzéseket és oldalakat adhatunk hozzá a webhelyünkhöz. Ezt a blogbejegyzést is a Gutenberggel készítettük el! 🙂
1. Mi az a Gutenberg szerkesztő?
A Gutenberg szerkesztő egy WordPress alapú vizuális szerkesztő, amelyet a WordPress 5.0 verziójával vezettek be. A Gutenberg projekt célja az volt, hogy átalakítsa a WordPress tartalomkezelő rendszert, és lehetővé tegye a felhasználóknak, hogy könnyebben és gyorsabban szerkeszthessék weboldalaik tartalmát.
A Gutenberg szerkesztő a hagyományos WordPress szerkesztőtől eltérő megközelítést alkalmaz. Míg a hagyományos szerkesztő egy egyszerű szövegmező, ahol HTML-kódot és rövidkódokat használhatunk a tartalom létrehozásához, a Gutenberg blokkokra épül. A blokkok olyan önálló egységek, amelyek különböző típusú tartalmi elemeket vagy funkciókat tartalmaznak, például szöveget, képeket, videókat, címsorokat, idézeteket, galériákat stb. A felhasználók egyszerűen beilleszthetik vagy behúzhatják a kívánt blokkokat a szerkesztőfelületre, majd tetszés szerint testre szabhatják azokat a beépített eszközök segítségével.
A WordPress Gutenberg blokkszerkesztője megkönnyíti a weboldalak tartalmának dinamikusabb és vizuálisan jobban átlátható létrehozását, ezzel segítve a felhasználóknak abban, hogy jobban kihasználják a WordPress lehetőségeit kódolási ismeretek nélkül is. Ezáltal a WordPress könnyebben kezelhetővé válik azok számára, akik nem jártasak a webfejlesztés területén.
2. Hogyan működik a Gutenberg szerkesztő?
A Gutenberg szerkesztő a WordPress tartalomkezelő rendszer része, és egy modern, blokk-alapú vizuális szerkesztőfelületet kínál a weboldalak létrehozásához és szerkesztéséhez. A Gutenberg alapelve az, hogy a weboldal tartalmát különböző blokkokra osztja, és a felhasználók egyszerűen hozzáadhatnak, szerkeszthetnek és válogathatnak ezekből a blokkokból anélkül, hogy mélyrehatóan érteniük kellene a webfejlesztéshez vagy a HTML-hez.
Így néz ki például a fenti rész a Gutenberg szerkesztőben:
Ahogy látható, a bejegyzés tartalma blokkokra van osztva (H1 címsor, bekezdés, kép, H2 címsor, bekezdés).
2.1. Blokk hozzáadása
Amikor elkezded létrehozni vagy szerkeszteni a weboldal vagy bejegyzés tartalmát, új blokkokat adhatsz hozzá a szerkesztőfelülethez. A blokkokat különböző típusú tartalmak vagy funkciók biztosításához használhatod, például szöveghez, képekhez, videókhoz, címekhez, idézetekhez, vázlatpontokhoz, felsorolásokhoz.
A blokk hozzáadásához kattints a jobb felső sarokban található „+” ikonra, majd egyszerűen húzd be a kívánt helyre azt a blokkot, amelyiket az oldalon használni szeretnéd.
2.2. Gutenberg blokkok szerkesztése
Miután hozzáadtad a tartalomblokkot, az a Gutenberg szerkesztő felületen megjelenik, és a blokk tartalmát vagy tulajdonságait könnyedén testre szabhatod. A beépített eszközök segítségével módosíthatod a szövegméretet, a szövegszínt, a betűtípust, a képek elrendezését, a linkeket, az idézetek kinézetét és más elemeket.
Minden blokkhoz specifikus beállítások és lehetőségek tartoznak, ahogy ez az alábbi képen is látható, ahol az egyik bekezdés testreszabási lehetőségeit láthatjuk a képernyő jobb oldalán (szövegszín, háttérszín, betűméret, betűtípus, HTML horgonyszöveg, stb.).
Egy kép esetén már teljesen megváltoznak a beállítható paraméterek: helyettesítő szöveg (Alt Text), szélesség, magasság, képarány, felbontás, stb.
2.3. Blokkok mozgatása és rendezése
A Gutenberg lehetővé teszi a blokkok egyszerű mozgatását és elrendezését a szerkesztőfelületen belül. Egyszerűen húzd át a blokkot egy másik helyre, vagy használd a nyilakat a blokkok felfelé vagy lefelé mozgatásához. De használhatod a bal felső sarokban elérhető listanézetet is, ahol szintén könnyen mozgathatók a blokkok.
2.4. Globális beállítások és előnézet
A Gutenberg szerkesztőben van lehetőség előnézetre, ahol láthatod, hogyan fog kinézni a tartalom a közzétett weboldalon. Emellett a globális beállításokkal az egész weboldalt módosíthatod, például a betűtípust vagy a lábléc elemeit a teljes webhelyen. Megtekintheted, hogyan fog kinézni a bejegyzés asztali számítógépen, táblagépen vagy mobilon. A Gutenberg szerkesztő tehát lehetőséget ad az előnézetre az oldal vagy bejegyzés publikálása előtt.
2.5. Mentés és közzététel
Amikor elégedett vagy a tartalommal, mentheted a változtatásokat vázlatként, vagy közzéteheted az oldalt. A WordPress automatikusan menti a frissített változatokat az oldalakból, így nem veszítesz el semmit. Kattints a jobb felső sarokban található „Közzététel” gombra.
3. A Gutenberg WordPress szerkesztő elérése
A Gutenberg szerkesztő elérése alapértelmezetten működik a WordPress legújabb verzióiban (5.0 vagy újabb), hiszen a Gutenberg szerkesztő már alapból be van építve a tartalomkezelő rendszerbe.
1) Bejelentkezés WordPress vezérlőpultjára: először is be kell jelentkezned a WordPress adminisztrációs felületére az adminisztrátori felhasználóneveddel és jelszavaddal.
2) Szerkesztési felület megnyitása: válassz egy meglévő oldalt vagy hozz létre egy újat, amit szeretnél szerkeszteni. Ehhez navigálj az „Oldalak” vagy a „Bejegyzések” menüponthoz a WordPress vezérlőpult bal oldalán.
3) Gutenberg blokkszerkesztő indítása: amikor az oldal szerkesztési felületén vagy, a Gutenberg szerkesztő alapértelmezett szerkesztőként jelenik meg. Látni fogod a blokk-alapú szerkesztőfelületet, amely lehetővé teszi a tartalom létrehozását és testre szabását.
4) Blokkok hozzáadása és szerkesztése: a Gutenberg szerkesztőben a tartalom létrehozásához és szerkesztéséhez egyszerűen kattints a „+” ikonra, majd választhatsz a különböző blokkok közül. A blokkokat könnyedén mozgathatod és testre szabhatod, és minden tartalomblokkhoz specifikus beállítások állnak rendelkezésre.
5) Mentés és közzététel: miután elkészítetted a bejegyzés vagy oldal tartalmát, kattints a „Közzététel” gombra a jobb felső sarokban, hogy publikáld az oldalt nyilvánosan is.
Alapértelmezett módon a Gutenberg szerkesztő már telepítve van a WordPressre, tehát nincs szükség külön telepítésre. Ha viszont valamilyen oknál fogva nem találod vagy nem működik a Gutenberg, ellenőrizd, hogy valóban a legfrissebb WordPress verzió van telepítve a weboldaladon (WordPress weboldal készítés szupercikk).
4. A Gutenberg használata: blokkok
A Gutenberg szerkesztőben számos különböző típusú blokk áll rendelkezésre, amelyek segítségével változatos és komplex tartalmakat hozhatsz létre weboldaladon.
1) Szöveg blokkok: bekezdés, H1-H4 címsorok, listák, idézet, kód, előreformázott szöveg, kiemelt idézet, táblázat, vers, lábjegyzetek, Ninja Forms űrlapok.
2) Média blokkok: kép, galéria, borítókép, fájlok, audió, média és szöveg, videó.
3) Kinézet blokkok: CTA gombok, oszlopok, csoportok, alá- és mellérendelő láncok, oldaltörés, elválasztó vonal, helykitöltő.
4) Widgetek: archívumok, naptár, kategória lista, egyéni HTML, legutóbbi hozzászólások és bejegyzések listája, RSS, keresés, rövidkód, címkefelhő, közösségi média ikonok.
5) Sablon blokkok: navigáció, honlap címe, elnevezése, bejegyzések listája, terméknév, kivonat, termékleírás, bejegyzés kiemelt képe, szerzője, dátuma, kategóriák, címkék, hozzászólások, be/kijelentkezés.
6) Beágyazások: Twitter, YouTube, SoundCloud, Spotify, Flickr, Vimeo, Reddit, Pocket Casts, Tumblr, TikTok, Slideshare, Pinterest, stb.
7) WooCommerce blokkok: termékkereső, vélemények, vásárlói fiókok, termékkategóriák, legújabb termékek, akciós termékek, legjobban fogyó termékek, bevásárlókosár, termékcímkék, fizetési oldal, stb.
Az elérhető Gutenberg blokkok száma függ attól, hogy a WordPress oldalon milyen sablon fut, illetve mely bővítményeket telepítetted fel az oldaladra. Hiszen vannak olyan bővítmények, amelyek új widgeteket vagy tartalomblokkokat tesznek elérhetővé (pl. JetEngine).
5. Összefoglaló
A Gutenberg a WordPress alapvető szerkesztője, amellyel bejegyzések és oldalakat hozhatsz létre.
Blokk-alapú vizuális szerkesztő, vagyis a drag-and-drop elve alapján a tartalmi blokkokat csak be kell húzni a szerkesztőfelületre, és már testre is szabhatod őket.
Ha érdekel a WordPress honlap készítés, akkor olvasd el WordPress weboldal készítés árak cikkünket, vagy lépj velünk kapcsolatba! 🙂
Hibát találtál? Írj nekünk az alábbi e-mail címre: szerk@kiszervezettmarketing.hu
6. Gyakran ismételt kérdések és válaszok
A WordPress CMS rendszer alapvető blokkszerkesztője.
Az Elementor egy szintén hatékony weboldalkészítő bővítmény.
Tartalomblokkok segítségével, egyszerű behúzással vagy hozzáadással.