A Gutenberg szerkesztő használata WordPress oldalakon

A Gutenberg szerkesztő egy blokk-alapú vizuális szöveg- és weboldalszerkesztő, és egyben a WordPress alapvető részeként funkcionál.
Gutenberg szerkesztő WordPress

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.

Weboldal készítés

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:

WordPress Gutenberg

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.

Gutenberg szerkesztő

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.).

Gutenberg használata

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.

Gutenberg blokkszerkesztő

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.

Blokkok sorba rendezése

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.

Gutenberg előnézet

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.

Bejegyzés közzététele

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

❓ Mi az a Gutenberg szerkesztő?

A WordPress CMS rendszer alapvető blokkszerkesztője.

❓ Milyen Gutenberg alternatívák vannak?

Az Elementor egy szintén hatékony weboldalkészítő bővítmény.

❓ Hogyan működik a Gutenberg?

Tartalomblokkok segítségével, egyszerű behúzással vagy hozzáadással.

Oszd meg! Küldd el! Nyomtasd ki!

Facebook
LinkedIn
Email
Nyomtatás
Picture of Dávid Ádám

Dávid Ádám

Dávid Ádám vagyok, a Kiszervezett Marketing Kft. alapítója, az online marketing megszállottja.

160+ szöveges ötcsillagos ügyfélvéleményünkkel előrevetítjük, hogy milyen egy igazán profin megtervezett, ügyfélközpontú marketing ügynökséggel dolgozni.

A Kiszervezett Marketing 13x-os Marketing Diamond Awards-díjas ügynökség. Ezt a díjat a Magyar Marketing Szövetség ítélte oda számunkra, ami bizonyítja, hogy szakmailag kimagasló szolgáltatásokat nyújtunk az online marketing területén.

Büszkék vagyunk arra, hogy 2023-ban a Kiszervezett Marketing Kft. lett Az Év Marketing Nagykövete!

A Kiszervezett Marketing az a marketing ügynökség, amely nem olyan, mint a suszter és a cipője.

Ezt alátámasztja a 470+ szakmai blogcikkünk is, amelynek köszönhetően több mint 275.000 látogatónk van éves szinten a saját weboldalukon a Google Keresőből, fizetett hirdetések nélkül. Mindezt alig két év alatt értük el.

A megtervezett médiamegjelenésekkel folyamatosan ott vagyunk nagy hírportálok hasábjain a területünk szakértőjeként. Párat kiemelve: penzcentrum.hu, vg.hu, hrportal.hu, origo.hu, blikk.hu, metropol.hu.

Azért lehetünk Google Partnerek, mert rendelkezünk a Google által elismert szakértővel. Az ügyfeleink hirdetési kampányai kivétel nélkül minden esetben elérik a minimum 70%-os optimalizáltságot.

Tartottam már szakmai előadást több egyetemen online marketing témában, többek között: BME, BGE, ELTE, MATE, Óbudai Egyetem. Emellett a Magyar Marketing Fesztivál rendszeres előadójaként mutatom be a siker kulcsát a digitális térben.

Hogyan legyen vevőszerző weboldalam?

HOVÁ KÜLDHETJÜK AZ INGYENES E-BOOKUNKAT?

Ajánlatkérés

FONTOS1: Mindössze 60 másodperc az ajánlatkérés!
FONTOS2: Töltsd ki 100%-ra a kapcsolatfelvételt, csak abban az esetben kapjuk meg az ajánlatkérésed!
Szuper kezdés! Folytasd, már csak két apró lépés van hátra!
Nagyszerű! Még egy utolsó lépés, és minden kész az ajánlatkéréshez!

Ajánlatkérés

FONTOS1: Mindössze 60 másodperc az ajánlatkérés!
FONTOS2: Töltsd ki 100%-ra a kapcsolatfelvételt, csak abban az esetben kapjuk meg az ajánlatkérésed!
Szuper kezdés! Folytasd, már csak két apró lépés van hátra!
Nagyszerű! Még egy utolsó lépés, és minden kész az ajánlatkéréshez!

Ajánlatkérés

FONTOS1: Mindössze 60 másodperc az ajánlatkérés!
FONTOS2: Töltsd ki 100%-ra a kapcsolatfelvételt, csak abban az esetben kapjuk meg az ajánlatkérésed!
Szuper kezdés! Folytasd, már csak két apró lépés van hátra!
Nagyszerű! Még egy utolsó lépés, és minden kész az ajánlatkéréshez!

Ajánlatkérés

FONTOS1: Mindössze 60 másodperc az ajánlatkérés!
FONTOS2: Töltsd ki 100%-ra a kapcsolatfelvételt, csak abban az esetben kapjuk meg az ajánlatkérésed!
Szuper kezdés! Folytasd, már csak két apró lépés van hátra!
Nagyszerű! Még egy utolsó lépés, és minden kész az ajánlatkéréshez!

Ajánlatkérés

FONTOS1: Mindössze 60 másodperc az ajánlatkérés!
FONTOS2: Töltsd ki 100%-ra a kapcsolatfelvételt, csak abban az esetben kapjuk meg az ajánlatkérésed!
Szuper kezdés! Folytasd, már csak két apró lépés van hátra!
Nagyszerű! Még egy utolsó lépés, és minden kész az ajánlatkéréshez!

Ajánlatkérés

FONTOS1: Mindössze 60 másodperc az ajánlatkérés!
FONTOS2: Töltsd ki 100%-ra a kapcsolatfelvételt, csak abban az esetben kapjuk meg az ajánlatkérésed!
Szuper kezdés! Folytasd, már csak két apró lépés van hátra!
Nagyszerű! Még egy utolsó lépés, és minden kész az ajánlatkéréshez!

Ajánlatkérés

FONTOS1: Mindössze 60 másodperc az ajánlatkérés!
FONTOS2: Töltsd ki 100%-ra a kapcsolatfelvételt, csak abban az esetben kapjuk meg az ajánlatkérésed!
Szuper kezdés! Folytasd, már csak két apró lépés van hátra!
Nagyszerű! Még egy utolsó lépés, és minden kész az ajánlatkéréshez!

Ajánlatkérés

FONTOS1: Mindössze 60 másodperc az ajánlatkérés!
FONTOS2: Töltsd ki 100%-ra a kapcsolatfelvételt, csak abban az esetben kapjuk meg az ajánlatkérésed!
Szuper kezdés! Folytasd, már csak két apró lépés van hátra!
Nagyszerű! Még egy utolsó lépés, és minden kész az ajánlatkéréshez!

Ajánlatkérés

FONTOS1: Mindössze 60 másodperc az ajánlatkérés!
FONTOS2: Töltsd ki 100%-ra a kapcsolatfelvételt, csak abban az esetben kapjuk meg az ajánlatkérésed!
Szuper kezdés! Folytasd, már csak két apró lépés van hátra!
Nagyszerű! Még egy utolsó lépés, és minden kész az ajánlatkéréshez!

Ajánlatkérés

FONTOS1: Mindössze 60 másodperc az ajánlatkérés!
FONTOS2: Töltsd ki 100%-ra a kapcsolatfelvételt, csak abban az esetben kapjuk meg az ajánlatkérésed!
Szuper kezdés! Folytasd, már csak két apró lépés van hátra!
Nagyszerű! Még egy utolsó lépés, és minden kész az ajánlatkéréshez!

Ajánlatkérés

FONTOS1: Mindössze 60 másodperc az ajánlatkérés!
FONTOS2: Töltsd ki 100%-ra a kapcsolatfelvételt, csak abban az esetben kapjuk meg az ajánlatkérésed!
Szuper kezdés! Folytasd, már csak két apró lépés van hátra!
Nagyszerű! Még egy utolsó lépés, és minden kész az ajánlatkéréshez!

Ajánlatkérés

FONTOS1: Mindössze 60 másodperc az ajánlatkérés!
FONTOS2: Töltsd ki 100%-ra a kapcsolatfelvételt, csak abban az esetben kapjuk meg az ajánlatkérésed!
Szuper kezdés! Folytasd, már csak két apró lépés van hátra!
Nagyszerű! Még egy utolsó lépés, és minden kész az ajánlatkéréshez!

Hogyan legyen vevőszerző weboldalam?

Töltsd le az e-bookot, és a megvalósítás menete is kristálytiszta lesz előtted.

Készítettünk egy 5 részből álló videós útmutatót, hogy könnyen tudd telepíteni!

PLUSZ: Kuponkód az emailben, amivel -10% az első 3 hónapból!

Készítettünk egy 5 részből álló videós útmutatót, hogy könnyen tudd telepíteni!

PLUSZ: Kuponkód az emailben, amivel -10% az első 3 hónapból!

Készítettünk egy 5 részből álló videós útmutatót, hogy könnyen tudd telepíteni!

PLUSZ: Kuponkód az emailben, amivel -10% az első 3 hónapból!

Ajánlatkérés

FONTOS1: Töltsd ki 100%-ra a kapcsolatfelvételt, csak abban az esetben kapjuk meg az ajánlatkérésed!
FONTOS2: Mindössze 60 másodperc az ajánlatkérés!
Szuper kezdés! Folytasd, már csak két apró lépés van hátra!
Nagyszerű! Még egy utolsó lépés, és minden kész az ajánlatkéréshez!

Ajánlatkérés

FONTOS1: Mindössze 60 másodperc az ajánlatkérés!
FONTOS2: Töltsd ki 100%-ra a kapcsolatfelvételt, csak abban az esetben kapjuk meg az ajánlatkérésed!
Szuper kezdés! Folytasd, már csak két apró lépés van hátra!
Nagyszerű! Még egy utolsó lépés, és minden kész az ajánlatkéréshez!

Ajánlatkérés

FONTOS1: Mindössze 60 másodperc az ajánlatkérés!
FONTOS2: Töltsd ki 100%-ra a kapcsolatfelvételt, csak abban az esetben kapjuk meg az ajánlatkérésed!
Szuper kezdés! Folytasd, már csak két apró lépés van hátra!
Nagyszerű! Még egy utolsó lépés, és minden kész az ajánlatkéréshez!

Ajánlatkérés

FONTOS1: Mindössze 60 másodperc az ajánlatkérés!
FONTOS2: Töltsd ki 100%-ra a kapcsolatfelvételt, csak abban az esetben kapjuk meg az ajánlatkérésed!
Szuper kezdés! Folytasd, már csak két apró lépés van hátra!
Nagyszerű! Még egy utolsó lépés, és minden kész az ajánlatkéréshez!

Ajánlatkérés

FONTOS1: Mindössze 60 másodperc az ajánlatkérés!
FONTOS2: Töltsd ki 100%-ra a kapcsolatfelvételt, csak abban az esetben kapjuk meg az ajánlatkérésed!
Szuper kezdés! Folytasd, már csak két apró lépés van hátra!
Nagyszerű! Még egy utolsó lépés, és minden kész az ajánlatkéréshez!

Ajánlatkérés

FONTOS1: Mindössze 60 másodperc az ajánlatkérés!
FONTOS2: Töltsd ki 100%-ra a kapcsolatfelvételt, csak abban az esetben kapjuk meg az ajánlatkérésed!
Szuper kezdés! Folytasd, már csak két apró lépés van hátra!
Nagyszerű! Még egy utolsó lépés, és minden kész az ajánlatkéréshez!

Ajánlatkérés

FONTOS1: Mindössze 60 másodperc az ajánlatkérés!
FONTOS2: Töltsd ki 100%-ra a kapcsolatfelvételt, csak abban az esetben kapjuk meg az ajánlatkérésed!
Szuper kezdés! Folytasd, már csak két apró lépés van hátra!
Nagyszerű! Még egy utolsó lépés, és minden kész az ajánlatkéréshez!