A legjobb eredeti WordPress blokkok [gyors áttekintés]

Útmutatót adunk a Gutenberg WordPress szerkesztő és a blokkok használatáról. Kérjük, olvassa el a blokkok változásairól szóló híreket, amelyek a legközelebbi 5.4-es verzióban érkeznek. Kiválasztottuk a leggyakrabban használt blokkokat, amelyeket minden weboldalon kötelező használni. Amint megjelenik, további részleteket fogunk közzétenni az összes funkcióról. [...]

Amikor a WordPress 2018-ban bejelentette az új Gutenberg szerkesztőt, izgatottan vártuk. Most, pár évvel később hatalmas előrelépést látunk. A Gutenberg WordPress szerkesztő egy nagyszerű eszköz a weboldal készítéséhez.

A címen AitThemes CitadelaWP bővítmények, létrehozhat speciális tartalmat egy cég, vállalkozás, blog vagy nonprofit weboldal bemutatásához. Vagy akár egy új online vállalkozás indításához. A weboldal sebessége és a weboldal szerkesztésének egyszerűsége a legfontosabb tényezők.

Mi az a blokk?

A Gutenberg WordPress blokkok a weboldal építő egységei. Mindegyiknek megvan a maga speciális helye és célja. Nagyon fontos, hogy egy adott tartalomtípushoz a megfelelő WordPress blokkot használjuk.

De hogyan találja meg a legmegfelelőbb blokkot, amely megfelel a szándékának?

A WordPress blokkok jobb megértéséhez elkészítettük ezt az áttekintést a legnépszerűbb blokkokról.

Szöveges tartalmi blokkok

Számos blokk létezik, amelyeket szöveges tartalom beillesztésére használhat a weboldalán. Több blokkot is használhat. A WordPress 5.4-től van egy új beállítás, megváltoztathatod a szöveg színét.

• bekezdés
• Cím:
• Idézet
• Lista
• Pullquote
• Asztal
• Vers
• Előformázott

Kivéve ezt, a Klasszikus blokkot használja, ami egy hosszú bekezdésnél praktikusabb lehet.

Gomb blokk

Egy meggyőző CTA gomb létrehozása a WordPressben szuper egyszerűvé vált a Button block segítségével. Nem kell egyéni CSS-t megadnod vagy HTML-t értened. Megadhatod - de nem muszáj - a kedvenc színed hexadecimális kódját, hogy a gomb szép és figyelemfelkeltő legyen.

Hol használjuk a gombblokkot?

Amint a látogató eljut a weboldalára, arra szeretné ösztönözni, hogy cselekedjen. Erre szolgálnak a CTA gombok.

Általánosságban 3 olyan hely van, ahol a WordPress Button blokkot érdemes használni:

• Főoldal - a cél eléréséhez vezető művelet elvégzése, például feliratkozás a hírlevélre, különleges ajánlatok felfedezése vagy ingyenes próbaverzióra való regisztráció.
• Termékoldal - attól függően, hogy a termékoldal hogyan van vezetve, lehet 1 CTA gomb (VÁSÁRLÁS) vagy több gomb, pl. termék részletek, vásárlás, hozzáadás a kívánságlistához stb.
• Blog - A CTA gombok utalhatnak egy másik hasznos cikkre vagy az Ön termékének/szolgáltatásának megvásárlására.

Gombblokk beállítások

Az Ellenőrben, a jobb oldalon könnyen kezelheti a gomb beállításait:

• Stílus
• Háttérszín
• Betűszín
• Határ

A CTA gombra írt szövegnek rövidnek és egyértelműnek kell lennie, és arra a cselekvésre kell ösztönöznie a webes látogatókat, amit szeretne, hogy megtegyenek.

Újdonságok a következő WordPress 5.4 verzióban (kiadás 2020. március 31.)

A Button blokkot egy új Buttonra cserélik.s blokk.
Az új névből feltételezhető, hogy egy blokk konténerben egyenként több gombot is létrehozhatsz majd. Gyakran van szükség például arra, hogy egyszerre két CTA-t hozzunk létre: Vásároljon most és Bővebben. Emellett néhány új stílus- és színbeállítás is érkezik. Válassza ki a kitöltés vagy a körvonal stílusát, majd a háttér színét. Választhat egyszínű vagy színátmenetes hátteret. Néhány előbeállítás kiindulási pontként elérhető lesz a könnyebb finomhangoláshoz. A jó hír, hogy az összes meglévő gombblokk működni fog, nem kell áttelepíteni őket.

Oszlopok blokk

A Columns blokk egy csodálatos WordPress blokk, amely új elrendezések előtt nyitja meg az ajtókat. Több lehetőséget ad az oldalelemek elrendezésének, ami több tervezési alternatívát eredményez.

A Columns blokkal való munka egyszerű:

• Nincs extra plugin telepítés.
• Nincs szükség kódolásra.
• Mindössze egy kis érzék kell a rendezett kialakításhoz.

A korábbi, a WordPress blokkszerkesztő megjelenése előtt át kellett esned a korábbi gondokon, a Columns WordPress blokk használata szuper egyszerű.

Hogyan használjuk az oszlopok blokkot?

Ahogy fentebb már jeleztük, a Columns blokkot 2 módon lehet használni:

• A szövegek áramlásának megszervezése (egy blogbejegyzésben vagy a szokásos oldalon).
• Más blokkok oszlopokba rendezése.

Ha a szöveget oszlopokba rendezi, például egy blogbejegyzésen belül, növeli az olvashatóságot, és átláthatóbbá és felhasználóbarátabbá teszi weboldalát.

Ha azonban a Columns blokkot más blokkok, például képek, szövegek és gombok elhelyezésére használja, akkor a kiválasztott oldal teljes elrendezését megváltoztatja, és új designt hoz létre.

Oszlopblokk beállítások

Miután beszúrta az oszlopblokkot az oldalra, válassza ki, hány oszlopot szeretne. Ez 2 és 6 oszlop között bármennyi lehet. Ezután elkezdheti begépelni a szöveget, vagy blokkokat adhat hozzá az egyes oszlopokhoz.

Az oszlopblokk tartalmának igazítása külön-külön beállítható az egész blokkra és az egyes oszlopokra is. Még az oszlop szélességének arányát is kiválaszthatja. Így az egyik oszlop lehet szélesebb, mint a másik.

Fedlap blokk

Beszéljünk a weboldalad fejlécéről. Ez az a rész, amely meghatározza az első benyomást, amikor valaki a honlapodra érkezik. Elég fontos, nem igaz? És tudtad, hogy a Cover blokkot bármelyik oldalad fejléceként használhatod?

A Cover a WordPress alapblokkjai, amelyek segítenek lenyűgözni a webes látogatókat. Különösen akkor, ha jól használják, vagy jobban mondva, ha szépen beillesztik a webdesignodba.

Hol használjuk a Cover blockot?

Mint fentebb említettük, a Cover block bármelyik oldaladon használható. Ráadásul bárhová hozzáadható az oldalhoz, ellentétben a weboldalad fejlécével, amely a weboldalad tetején van rögzítve.

A fedőblokk használható:

• Bármely oldal fejléce, beleértve a főoldalt is.
• A termékoldalon használt szöveggel felülírt kép vagy videó.
• Tartalomelválasztó a blogbejegyzésben.

Fedlapblokk beállítások

A Cover blokk beállítása nagyon egyszerű. Először is válasszon egy képet vagy videót háttérnek. Helyette egyetlen színt is használhat. Ha beállította a hátteret, adjon hozzá egy címet és egy feliratot. 

Kiválaszthatja a blokk igazítását, és természetesen a benne lévő szöveg igazítását is.

A borítóblokk igazítása a következő lehetőségeket kínálja:

• Balra igazítás
• Align Center
• Jobbra igazítás
• Széles szélesség
• Teljes szélességben

Személyes kedvencem a színátfedés, amely az ellenőrben érhető el - a Cover blokk háttérképe tetszőleges színűre hangolható. A testreszabott betűmérettel és színnel együtt gyönyörű kontrasztokat hozhat létre, és a borítóblokk végső megjelenése elképesztő lesz.

A WordPress 5.4-től az egyszínű háttér helyett választhatod a gradiens hátteret.

Galéria blokk

Mutassa be a képeket weboldalán a Galéria blokk segítségével. Ezt a szabványos WordPress blokkot úgy terveztük, hogy a képeket tárolja, és szépen megjelenítse őket a weboldal bármelyik oldalán. A többi WordPress blokkhoz hasonlóan a Galéria blokk is bárhol elhelyezhető a weboldalon vagy a blogbejegyzésen belül.

A képek feltöltése történhet a fájlok kiválasztásával a médiatárból, a számítógépről vagy a drag&drop funkció segítségével.

Hol használjuk a Galéria blokkot?

A weboldal típusától függően lehet, hogy komplex fotógalériát vagy egyszerű képbemutatót szeretne létrehozni. A Galéria blokkot használhatja:

• Az Ön honlapja
• A fotógaléria albumaként létrehozott egyedi aloldalak
• Termék oldalak
• Blogbejegyzés

Galéria blokk beállításai

A Galéria blokk különböző igazítási lehetőségein kívül van még néhány érdekes lehetőség ebben a blokkban, például:

• A képek oszlopainak száma.
• Képkivágás, hogy a kép mérete megegyezzen (a legkisebb kép méretével).
• Hiperhivatkozás, hogy lehetőséget adjon egy másik oldalra vagy médiafájlra való hivatkozásra.

Képblokk

A képblokk nem más, mint egy kép megjelenítésére szolgáló blokk a weboldalon.

Így van. Ha csak egy képet akarsz hozzáadni bármelyik oldaladhoz, akkor használd az Image WordPress blokkot. Lehet, hogy hasonlít a többi bemutatott blokkhoz, de vannak jelentős különbségek, amelyek tökéletessé teszik az egyes képekhez.

Mikor használjuk a képblokkot?

A képblokkot különösen akkor kell használni, ha a képen megjelenített objektum különösen fontos a webes látogató számára:

• Ragadja meg a webes látogató figyelmét egy különleges képpel.
• Kép megjelenítése felirattal.
• Mutasson infografikákat, amelyek segítenek a látogatóknak jobban megérteni a tárgyalt témát.

Képblokk beállítások

Az Image WordPress blokk egyik legnagyobb előnye a képméret beállításai. Könnyedén átméretezhetsz egy képet a sarkánál fogva húzva, választhatsz egy fix méretet pixelben, vagy meghatározhatod a méretet százalékban.

Egy másik jelentős lehetőség az alternatív szöveg, a felirat és a link beviteli mezői. Erősen ajánlom ezeknek a mezőknek a használatát, mivel fontos szerepet játszanak az oldalon belüli SEO-ban.

Média és szövegblokk

Térjünk át a fejlettebb oldalelrendezésekre, amelyeket a Media & text block segítségével hozhat létre. Ez az alapvető WordPress blokk lehetővé teszi a média & szöveg egymás melletti kombinálását, esztétikus és kontextusfüggő módon.

Hol használhatom a Média és szövegblokkot?

Bár a Média és szöveg blokk leginkább blogbejegyzésekben használható, egy kis fantáziával máshol is használhatja. Például egy szép termék- vagy szolgáltatás-áttekintést készíthet egymás melletti kép és szöveg használatával.

Ne felejtsen el hozzáadni egy Gomb blokkot a Média és szöveg blokk szöveges részéhez, ha termék/szolgáltatás áttekintésként használja. Így bármelyik oldalon szép CTA szekciót tervezhet.

A Media & text block előnyei

• Összehozza a képet és a szöveget, amelyek kontextuálisan illeszkednek egymáshoz.
• A kép helytelen elhelyezésének elkerülése a blogbejegyzésen belül.
• Segítség az oldal reszponzivitásához (használja a "Stack on mobile" funkciót).

Média és szövegblokk beállítások

A Média és szöveg blokk beállításait vizsgálva számos igazítási lehetőséget fogsz észrevenni, amelyek közül néhány egyedi, a legtöbb más blokkhoz képest.

Érdekes és hasznos beállítása ennek a blokknak a háttérszín. Az egymáshoz illeszkedő kép és szöveg körüli terület színezésével vizuálisan kiemelheti a kapcsolatukat.

Link beillesztése a WordPress 5.4-es verziójából (31.3.2020). Választhat linket, médiafájlt vagy csatolmányoldalt.

Asztalblokk

A táblázatos blokk az egyik példa arra, hogy a WordPress hogyan javult a WordPress blokkszerkesztő bevezetése után az 5.0-s verzióban és azon túl. Míg korábban pluginra volt szükséged ahhoz, hogy táblázatot illessz be a WordPress webhelyedbe, most egyszerűen használhatod a Table blokkot.

Hol használjuk a táblatömböt?

A táblázatok óriási szerepet játszanak a hasznos tartalom áttekinthető és jól rendszerezett formában történő megjelenítésében. Bizonyára a legtöbb weboldal használ táblázatokat. Íme néhány példa a táblázatok használatára különböző weboldalakon:

• Az adatok összehasonlítása
• Árképzési táblázatok
• A termék műszaki adatai
• Receptek
• Tagsági csomagok áttekintése

Az, hogy a Table block az ingyenes WordPress mag része, igazán csodálatos.

Asztalblokk beállításai

Amikor beilleszt egy táblázatblokkot az oldalra, meg kell határoznia a táblázat oszlopainak és sorainak számát. Ne aggódjon, ez a szám nem rögzített. Bármikor hozzáadhat további sorokat és oszlopokat (vagy eltávolíthatja őket).

Ezután válassza ki az asztal stílusát: alapértelmezett vagy csíkos. Lépjen tovább az igazítás és a betűtípus stílusára, végül pedig töltse ki a táblázatot, mielőtt befejezné azt.

További lehetőségek:

• Háttérszín
• Fix szélességű cellák
• Fejléc
• Lábléc
• Link (a táblázatban lévő szöveges bejegyzés más oldalakra is hivatkozhat)

Melyik blokkot szeretnéd legközelebb látni?

Reméljük, hogy élvezted, hogy elolvastad a válogatott, nagyon hasznos WordPress alapblokkokat - amelyek mindenki számára ingyenesen elérhetők. Kérjük, ossza meg velünk, mely blokkokról szeretne legközelebb olvasni, vagy mely funkciókat tartja még mindig hiányosnak a WordPress core-ban. Köszönjük az olvasást!