Hero szakasz készítése konténerrel

A hero az oldal egyik leggyakoribb része: nagy kép és szöveg, általában 50/50 arányban. Lehet bemutatkozás, életrajz, küldetés vagy egy termék ajánlója. Itt a legegyszerűbb, kevés elemből álló módon építed meg konténerrel.

Ha több képre vagy további tartalomra van szükség, a képeket egy külön konténerbe teheted. Ebben a példában erre nincs szükség, és csak felesleges burkolót eredményezne.

Szülő konténer

1. Hozz létre vagy nyiss meg egy oldalt az Elementorral.
2. Kattints a + jelre, és válaszd az egyoszlopos elrendezést.
3. Az Elrendezés fülön a Magasság legyen 60 VH.
4. A Tételek résznél az Irány legyen vízszintes sor.
5. Az elemek igazítása legyen Középre.
6. A Haladó fülön adj a konténernek paddinget (például 21 PX).

Kép

1. Húzz egy Kép widgetet a konténerbe.
2. Válassz képet a médiatárból. A kép legyen előre előkészítve és optimalizálva.
3. A Haladó fülön a Szélesség értéke legyen 50%.
4. A Stílus fülön további hatásokat is megadhatsz, a példában doboz árnyéka látszik.

Gyermek konténer

1. Húzz egy új konténert a kép jobb (vagy bal) oldalára.
2. Az Elrendezés fülön válaszd a Teljes szélesség lehetőséget.
3. A konténer Szélessége legyen 50%.
4. A Minimális magasság igazodjon a képhez (például 55 VH).
5. A Stílus fülön adhatsz további beállításokat, a példában egy 2 PX-es szegély segít a tájékozódásban.

Tartalom

1. Húzz egy Címsor widgetet a gyermek konténerbe, és szerkeszd a szövegét.
2. Alá húzz egy Szövegszerkesztő widgetet: ez a hero szövege. A gyorsabb munkához készítsd elő a szöveget, hogy csak beilleszteni kelljen.
3. Adj cselekvésre hívást: tegyél alá egy Gomb widgetet, amely oldalra, bejegyzésre vagy termékre mutathat.
4. A végső finomhoz térj vissza a konténer elrendezéséhez.
5. A Tartalom igazítása mezőben válaszd az Egyenletes térköz értéket, így a tartalom egyenletesen oszlik el.
6. Ha szegélyt használsz, a gyermek konténer Haladó fülén adhatsz neki még paddinget (például 13 PX).

Reszponzív nézetek

1. Nyisd meg a reszponzív nézeteket a panel alján lévő ikonnal.
2. Nézd meg a tablet és a mobil nézetet.
3. Kisebb módosításokkal (a szöveg méretével és a kép szélességével) igazítsd a tervhez.

Dinamikus tartalom

A legtöbb widget használhat dinamikus címkéket kiemelt képhez, metaadatokhoz, egyéni mezőkhöz és WooCommerce-termékekhez. Ezzel a hero a termék adataiból töltődik fel: a kép lehet a termék kiemelt képe hivatkozással, a címsor, a szöveg és a gomb pedig szintén automatikusan frissülhet. A Gomb widgetet egyedi kosárba helyező gombra is cserélheted, így rögtön vásárolni lehet belőle. Ha a terméket szerkeszted a WooCommerce-ben, a hero is követi a változást.

A többi elrendezést az Alapelrendezések konténerekkel fejezet foglalja össze.