4.2 Az elementor használata
4.2.1 Az Elementor használata
Az Elementor egy oldalépítő bővítmény, ami lehetővé teszi, hogy egy „látványkonyhában” rakjuk össze a weboldalunkat, rendelkezésre álló elemekből.
A telepítését az Eszközök oldalon az űrlapon kell kérned. Minden műhelytag számára biztosítom a prémium licenszt 1-2 szolgálati weboldalhoz.
A bővítmények menüpontban „Új hozzáadása” alatt keresd az Elementort a WordPress piacteréről. Telepítsd a szokott módon!
Adj hozzá egy új felhasználót ADMIN jogosultsággal, és adj is meg hozzá egy jelszót, amit másutt nem használsz!
Az Eszközök oldalon találod az űrlapot, amelyen kérheted az Elementor telepítését. Minden Műhely tagnak biztosítom 1-2 szolgálati weboldalhoz az Elementor pro licenszét.
Az Elementor oldalépítő
- SZAKASZOKAT ad az oldalunkhoz, azon belül
- OSZLOPOKAT hoz létre, egy szakaszon belül 1 vagy több oszlopot is létrehozhatunk
- Az oszlopokhoz pedig tartalmi MODULOKAT vagy „widgeteket” adhatunk, pl. címsor, szöveg, kép, gomb, vagy egyéb összetettebb elemek, pl. a „Call to Action”
SZAKASZOK és OSZLOPOK esetében
- Elrendezés: mérete, elrendezése
- Stílus: Háttér és megjelenés szerkesztése
- Haladó: Trükkös megoldások – A legfontosabb itt a MARGÓ és a BELSŐ MARGÓ (Padding)
MODULOK esetében
- Tartalom – megjelenő tartalom, vagy megjelenítendő fájlok, hivatkozások, egybek
- Stílus
- Haladó
4.2.2 Elementor weboldal beállítások
4.2.3 Fejléc készítése Elementorral
4.2.4 Lábléc készítése Elementorral
Az Elementor lehetőséget ad globális szín- font- és egyéb stílusbeállításokra. Ez hatalmas segítség, hogy az oldalunk egységes képet mutasson.
Az egyes moduloknál, ha nem az Alapértelmezett beállítás van érvényben, akkor az ott beállítottak azon a helyen felülírják a globális stílust.
Törekedjünk az egységes megjelenésre, a globális
A WordPress Vezérlőpult menüjében az Elementor alatt eggyel jelenik meg a Sablonok, azon belül pedig a Theme Builder.
Itt adjunk hozzá egy „új fejlécet.” Ez mostmár szerkeszthető Elementorral.
VIGYÁZAT! A Sablonok sajnos megtévesztő kifejezés. Más ponton ugyanez a WordPress Sablonokat jelöli (mint pl. nálunk most a Generate Press). Ezen a ponton azonban az Elementor globális „Sablonjait”, pl. a Fejlécet, vagy a Láblécet.
Barátkozzunk meg ezzel az ellentmondással!
A közzétételnél meg kell adnunk a szabályt is, ami alapján megjelenik.
Legegyszerűbb az, hogy „a teljes oldalon” azaz „Entire site”
Más szabályokat is megadhatunk, INCLUDE és EXCLUDE előtaggal, azaz hol jelenjen meg, és milyen helyeket zárjunk ki.
Hasonlóan a Theme Builderben tudunk hozzáadni globális láblécet is.
Szerkeszteni és közzétenni is hasonlóan kell.
Láblécben tipikusan a fontosabb adatokat, elérhetőségeket, oldaltérképet, kötelező dokumentumokat, impresszumot szoktunk megjeleníteni.
Elementorral törekedjünk az egységes stílus kialakítására! Használjuk a Webhelybeállítások alapértelmezett stílusát!
Az egyes modulok stílusát egy példányban állítsuk be tökéletesre, és utána kettőzzük meg őket, ha több példányban is szükség van rá!
4.3 A főoldal elkészítése
4.3.1 A főoldal elkészítése 1. rész
Háttérkép, lapozó, vagy háttérvideó beállítása.
Címsorok és szövegek a színes háttéren, vagy háttérképen nem mindig érvényesülnek jól. Itt érdemes körültekintőnek lenni.
4.3.2 A főoldal elkészítése 2. rész
A következő blokkban két oszlopban helyezzük el két kiemelt alkalmunk információit és a helyszínt.
Címsorokat, szövegdobozt, „ikondobozokat” és gombot állítunk be.
4.3.3 A főoldal elkészítése 3. rész
Egy újabb szakasz, markánsan különböző sötét háttérrel. A gomb a bemutatkozó aloldalunkra vezet.
A főoldalon csupán egy csalogató gombot teszünk ki. A szakaszunk háttere egy kép, amelyre egy „lejátszás” ikont teszünk, címsor, szöveg és gomb kíséretében.
Az archivum külön aloldalon lesz.
Az ikont áttetszőre állítjuk, ami így a lejátszók megjelenését imitálja.
4.3.4 A főoldal elkészítése 4. rész
A CTA, vagy cselkvésre hívás egy fontos fogalom a marketingben. Az Elementornak erre van egy kész megoldása is.
Kép, Címsor, szöveg és gomb ízlésesen elrendezve.
Két ilyen CTA modult tettünk most egymás mellé.
Megoldottuk, hogy megfelelő gombszíne, animációja, kerete legyen, és egymás mellett, egyformán magasak legyenek.
4.3.5 A főoldal elkészítése 5. rész
Sokféle módon oszthatunk meg bizonyságtételeket, emberi történeteket az oldalon.
Lehet ez blogbejegyzés (ld következő videó), vagy összerakhatunk egy kép-cím-szöveg-gomb kombót magunk is, esetleg lehet ez is egy CTA gomb.
Itt most egy látványos, bár kicsit trükkös megoldást mutatok. Ez a testimonial-carousel, avagy a „visszajelzés-lapozó”.
Mivel ebben a modulban nincs lehetőség kattintható linket beilleszteni, mi pedig szeretnénk, ha a történetünknek lenne egy teljes verziója valahol az oldalon, így javaslom, hogy a „cím” mezőben helyezzük el az alábbi kódot:
<a href="#" target="_blank">A teljes történet itt</a>
Ahol a # helyére a történet oldalának, vagy bejegyzésének címét másoljuk be! A </a> előtti szövegrész természetesen szabadon módosítható.
4.4 Aloldalak készítése
4.4.1 A blog oldal elkészítése
4.4.2 A Kapcsolat oldal elkészítése
A Generate Press áldal beállított blog oldalt kikukázzuk, és helyette Elementorban készítjük el a saját blog oldalunkat.
Ehhez beillesztjük a Bejegyzések modult a teljes szélességű szakaszba.
A főoldalon szintén beállítunk egy Bejegyzések modult, ahová 3 bejegyzést engedünk betölteni, így itt mindig csak a három legfrissebb bejegyzésünk jelenik meg.
A blog oldalon érdemes 9 vagy 12 bejegyzést engedni, és be kell állítani az oldalszámot és a lapozást, ami a Bejegyzések modulban szintén elérhető.
Az Űrlap mezőit sokoldalúan állíthatjuk össze. Használhatjuk feliratkozásra, visszajelzésre, tesztkitöltésre. Lehet többlépéses is az űrlapunk.
A küldés utáni műveletben állíthatjuk be az e-mail küldését megadott címekre, és/vagy összekötést hírlevél listával (pl MailerLite, amit később használni is fogunk), illetve köszönő oldalra irányíthatjuk át a kitöltőt.
Fontos, hogy egy Acceptance mezővel fogadtassuk el az adatkezelést. Erről később bővebben is lesz szó.
Az ikonlista áll egy ikonból, szövegből, és esetleg egy kattintható linkből. Ennek a segítségével felsorolásokat, un. „bulletpointokat” tudunk használni, vagy a különféle elérhetőségeinket tudjuk felsorolni.
A láblécben már találkoztunk ezzel. A különfélse közösségi oldalak megjelenítése könnyen és látványosan megoldható így.