Nyitó rész (intro) készítése konténerrel

Az oldal első, üdvözlő része általában egy cím és egy rövid szlogen. Jó hely az első interakcióra is: gombokkal tovább vezetheted a látogatót további információhoz vagy egy vásárláshoz. Itt egyetlen konténerből építed fel.

Konténer hozzáadása

1. Hozz létre egy új oldalt, és nyisd meg az Elementorral.
2. Kattints a + jelre, és válaszd az egyoszlopos (egy konténeres) elrendezést.
3. Az Elrendezés fülön a Szélesség legyen Teljes szélesség.
4. A Minimális magasság legyen például 60 VH.
5. A Stílus fülön adj a konténernek színt vagy háttérképet. Időt spórolsz, ha globális színt választasz.

Üdvözlő cím

1. Húzz egy Címsor widgetet a konténerbe.
2. A HTML-címke maradhat az alapértelmezett H2.
3. Az igazítás legyen Középre.
4. A Stílus fülön kézzel is formázhatod, vagy választhatsz globális stílust.
5. A Haladó fülön a Szélesség legyen 100%, hogy a cím a konténer teljes szélességét használhassa. Erre a későbbi lépésekben lesz szükség.

Szlogen

1. Húzz be még egy Címsor widgetet.
2. A HTML-címke legyen H3.
3. Az igazítás itt is Középre.
4. A Stílus fülön formázd meg, vagy használd a globális stílusokat.
5. A Haladó fülön a Szélesség ismét 100%.

Gombok

1. Húzz egy Gomb widgetet a konténerbe.
2. A méret legyen Nagy.
3. Hivatkozást is adhatsz neki, a példában ez üres marad.
4. Kattints a gombra jobb gombbal, és válaszd a másolást, így lesz két gombod.

A konténer rugalmas tulajdonságai

A widgetek a helyükön vannak, de még el kell rendezned őket. Szerkeszd a konténert, és nyisd meg az Elrendezés fül Tételek részét.

1. Az Irány legyen vízszintes sor. Ettől az elemek egymás mellé szorulnak, de ezt a következő lépés rendezi.
2. Kapcsold be a Tördelés beállítást. Így a 100% szélességű címek külön sort kapnak.
3. A Tartalom igazítása legyen Középre. A gombok így a címek alá, középre kerülnek.
4. A Tördelés alatt megjelenő második igazítási mezőben (a tördelésnél látható elemigazításnál) válaszd a Középre értéket.
5. A Hézagok értékét növeld a kívánt mértékre (például 34 PX).

Reszponzív nézetek

Nézd meg a tablet és mobil nézetet is. Ha a betűtípusokhoz és a gombokhoz globális beállításokat használtál, valószínűleg csak a konténer magasságát és a hézagokat kell módosítanod.

Variációk

A rugalmas tulajdonságok különböző kombinációival sokféle elrendezés készíthető. Ha például háttérképet adsz a konténernek, és a tartalmat jobb alulra igazítod, ugyanez az egyszerű szerkezet kifinomultabbnak hat.

A többi gyakori szakaszt az Alapelrendezések konténerekkel fejezetben találod, a beállításokat pedig az Elrendezés fül fejezetben.