Az első oldal felépítése tárolókkal

A tárolók (konténerek) váltották fel a régi szakasz-oszlop rendszert: rugalmasabbak, és könnyebb velük oldalt építeni. Ebben a fejezetben egy nyitó, úgynevezett „hero” részt építesz: nagy, feltűnő rész az oldal tetején, ami megragadja a látogató figyelmét.

Mielőtt nekilátsz, hozz létre egy új oldalt (Oldalak → Új oldal hozzáadása), és nyisd meg az Elementor szerkesztőben. A felső sávon találod az Elem hozzáadása gombot, az Előzményeket, az Oldal beállításait, a Szerkezet nézetet, az előnézetet és a Közzététel gombot.

Az elrendezés kiválasztása

1. Az oldal üres részén kattints a + gombra. (A mappa ikon sablon importálását indítja, most nem az kell.)
2. A Melyik elrendezést szeretnéd használni? kérdésnél válaszd a Flexbox vagy a Rács elrendezést. Most a Flexbox kell.

https://minta-bolt.hu/wp-admin/post.php?post=8&action=elementor

Az ablakban a Flexbox és a Rács közül választhatsz.

3. A Válaszd ki a szerkezetedet nézetben dönts a tároló szerkezetéről. Az első két lehetőség egyetlen tároló: az egyik Oszlop irányú (az elemek egymás alatt), a másik Sor irányú (egymás mellett). A többi egymás mellé tett, több részes szerkezet. A hero részhez az egy tárolós, oszlop irányú elrendezés kell, mert az elemek függőlegesen követik egymást.

https://minta-bolt.hu/wp-admin/post.php?post=8&action=elementor

Az első sorban az egy tárolós szerkezetek vannak, a nyilak az irányt jelzik.

A tároló beállítása

A tároló létrehozása után a bal oldali panel a Flexbox szerkesztése nézetre vált. Három füle van: Általános, Stílus és Interakciók. Ha a panel nem váltott át, kattints a tároló kijelölő sávjára a vásznon.

A Stílus fülön szekciók vannak: Elrendezés, Térközök, Méret, Pozíció, Tipográfia, Háttér, Szegély, Hatások és Egyedi CSS.

Méret

A hero rész legyen legalább 540 képpont magas.

1. Nyisd ki a Méret szekciót.
2. A Minimális magasság mezőbe írd be: 540 (PX).

https://minta-bolt.hu/wp-admin/post.php?post=8&action=elementor

A szekcióban a Szélesség, Magasság, Minimális és Maximális szélesség és magasság mezők és a Túlcsordulás is itt van.

Elrendezés

A hero szövege a tároló közepén legyen: ehhez a tartalmat és az elemeket középre igazítod.

1. Nyisd ki az Elrendezés szekciót.
2. A Megjelenítés értéke Flex, az Irány pedig a lefelé mutató nyíl (oszlop).
3. A Tartalom igazítása és az Elemek igazítása sorban válaszd a középre igazítást.

https://minta-bolt.hu/wp-admin/post.php?post=8&action=elementor

A szekcióban beállíthatod a Hézagokat (Oszlop és Sor) és a Tördelést is.

Háttér

A hero rész jellemzően háttérképet kap, hogy kitöltse az egész tárolót. A Háttér szekcióban a háttér átfedését (Szín) és a Vágást állítod. Képet a WordPress Média könyvtárából választasz: ha még nincs feltöltve, kattints a Fájlok feltöltése, majd a Fájlok kiválasztása gombra, válaszd ki a fájlt, adj neki alternatív szöveget és feliratot (ez segíti a keresőoptimalizálást és az akadálymentességet), végül kattints a Média beszúrása gombra.

A háttérkép elhelyezésénél a jellemző beállítás: középre igazított pozíció, nem ismétlődő, a tárolót kitöltő (borító) méret. Így egyetlen nagy kép fedi az egész részt.

Szövegek és gomb hozzáadása

A hero szövege két külön stílusú címsorból áll, alattuk egy gomb van. Mindhárom elem az Elemek panelről kerül a tárolóba: előbb jelöld ki a tárolót, aztán kattints az elemre (lásd az Elemek hozzáadása fejezetet), vagy húzd a tárolóba.

Az első címsor

1. Jelöld ki a tárolót, nyisd meg a felső sáv Elem hozzáadása gombját, és kattints a Címsor elemre.
2. Az Általános fül Tartalom részén a Cím mezőbe írd be a szöveget, például: „Teljes testedzés”.
3. A Beállítások részen a Címke mezőben a címsor szintjét (például H2) választhatod ki.

https://minta-bolt.hu/wp-admin/post.php?post=8&action=elementor

A Cím mező kis szövegszerkesztő: félkövér, dőlt, áthúzott, felső és alsó index, és link is beállítható benne.

A címsor megjelenését a Stílus fülön állítod: itt a szöveg színe, a betűtípus, a méret, a vastagság, a sormagasság és a többi tipográfiai beállítás van.

A második címsor

1. Húzz egy újabb Címsor elemet az első alá (vagy jelöld ki az elsőt, és kattints a Címsor elemre).
2. Írd be a szöveget a Cím mezőbe, például: „Told át a határaidat”.
3. A Stílus fülön a nagyobb betűméret, a vastagabb betű és a nagybetűs átalakítás kiemeli a mondatot.

A gomb

A gomb a látogatót egy következő oldalra, például az árak oldalára viszi.

1. Kattints a Gomb elemre az Elem hozzáadása panelen.
2. Az Általános fül Tartalom részén a Gomb szövege mezőbe írd be a feliratot, például: „Árak megtekintése”.
3. A Beállítások részen a Link mezővel megadhatod, hova vigyen a gomb.
4. A Stílus fülön a színt, a háttérszínt, a betűtípust és a térközöket (belső margót) állíthatod.

https://minta-bolt.hu/wp-admin/post.php?post=8&action=elementor

A Gomb szövege mezőben írd át a feliratot; a Link mezővel adhatod meg a célt.

Az eredmény

A kész tároló a két címsort és a gombot függőlegesen egymás alatt tartalmazza.

https://minta-bolt.hu/wp-admin/post.php?post=8&action=elementor

A vásznon a két címsor és a gomb egymás alatt látszik, a panel a gomb beállításait mutatja.

Az oldal mentéséhez és élesítéséhez kattints a Közzététel gombra.

Merre tovább

Az oldal további részeit új tárolókkal építheted a hero alá. Használhatsz kész webhelykészletet is (kitet), és azt a saját igényeidre szabhatod; a készletet akár csak azért is alkalmazhatod, hogy lásd, hogyan építenek vele a szakemberek. Ha az egész webhely szerkezetét a nulláról szeretnéd megtervezni, ahhoz a Téma építőt (Theme Builder) használd.