A professzionális megjelenésű weboldal megtervezése nem mindenki számára készült, különösen, mivel mindannyian úgy éreztük, hogy feltétlenül szükségünk van kódolási és webdesign szakemberekre. Manapság új eszközöket látunk megjelenni a WordPress ökoszisztéma számára annak érdekében, hogy egyre egyszerűbb megoldást nyújtsunk egy weboldal tervezésére, és ez a legtöbb kezdő számára elérhető.

A WordPress elrendezéseinek kialakításakor már be kellett nyújtanunk a plugint Visual Composer, ami határozottan az egyik legjobb eszköz az elrendezés tervezésénél. Meg kell azonban jegyezni, hogy ez a megoldás nem mindenki számára megfelelő. Ez az oka annak, hogy ebben az oktatóanyagban részletesebben bemutatjuk a WordPress plugint Elementor, amely a WordPress plugint freemium (ingyenes, de előfizetéssel bővíthető).

Hol szerezhető be az Elementor a WordPress-hez

Komolyan fontolgatjuk, hogy felhívja Önt a plugin lehetőségeire, és az ingyenes megoldás segít Önnek az induláshoz penny fizetése nélkül. Ez az ingyenes megoldás elérhető a következő oldalon: WordPress.org. Lenni WordPress plugint, ez utóbbi ugyanúgy telepítve van, mint a többi plugin az irányítópulton. 

Ha a plugin teljes mértékben kielégíti Önt, akkor a teljes licencet megszerezheti a webhely összes funkciójával hivatalos elem.

Az Elementor főbb jellemzői

Mielőtt elkezdené a bemutatót a plugin áttekintésével, először megismertetjük a plugin főbb jellemzőivel (ingyenes és teljes verzió).

Ingyenes verzió Teljes verzió
Több oszlop Navigációs menü, cikk
Modulok szövegei, címek Modulok WooCommerce (termékek, kategóriák)
Videomodulok, kép, körhinta, galériák, Soundcloud Facebook integráció (oldal, gomb, megjegyzések)
Megosztási modul Ár táblázat
HTML modul Portfólió, űrlap
Modul a WordPress widgethez Kutatási modul

 

Ne feledje, hogy ez egy kissé kimerítő felsorolás a plugin által kínált különféle szolgáltatásokról. További részleteket itt talál honlapjuk feltárása.

Kezdje el az Elementort

Itt nem fogjuk lefedni a teljes telepítési folyamatot. Mivel ez egy WordPress bővítmény, a telepítési eljárást már itt ismertettük egy előző bemutató. A telepítés után azonban a plugin kezdőlapjára kerül.

delementor.png bemutató oldal

Ha ez az oldal van a képernyőn, akkor megfelelően telepítette a Elementor plugin. Jelenleg a teljes verziót használjuk ehhez az oktatóanyaghoz, de a felület nem térhet el túlságosan az ingyenes verziótól.

Mielőtt a szerkesztő felületre lépne, meghívom Önt, hogy regisztrálja a licencét. Ez csak azokra érvényes, akik a teljes verziót választották. Ha rendelkezik ingyenes verzióval, akkor ugorjon a következő szakaszra. A licenc regisztrálásához a WordPressen értesítést fogsz kapni, amely a licenc regisztrálására szólítja fel.

értesítés plugin elementor.png

Tehát csak kattintson rá, hogy a regisztrációs oldalra lépjen, és kattintson a gombra Aktiválja.

egy licencelem regisztrálása elementor.png

Általában szüksége lesz a visszaigazoló oldalra, ha a licenc érvényes.

aktív licenc elementor.png

Ha nem érkezik meg erre az oldalra, további információkért forduljon a bővítmény fejlesztőihez segítség a problémához.

Az Elementor használata

Az Elementor a Pages and Posts on WordPress webhelyen dolgozik. Akár a klasszikus, akár az új Gutenberg felületet használja, megjelenik egy gomb, amely az Elementor készítő használatára ösztönzi.

constructor elementor.png

A gyakorlatban nem mindig kell szerkesztenie a bejegyzéseit az Elementor használatával. Ezért arra kérlek benneteket, hogy a plugint csak az oldalakon használja. A gombra kattintva elérheti az Elementor tervezőfelületét, amely déjà vu-t ad (azok számára, akik a WordPress Customizer programot használják).

bemutató felület elementor.png

Tehát bal oldalon vannak a plugin által kínált különféle vezérlők, a jobb oldalon pedig a változások élő előnézete látható. Ebben az oktatóanyagban a Twenty Sixteen WordPress témát használjuk.

Elementor szakaszok

Az Elementor szakaszai az Elementor által kínált funkcióblokkok csoportjai. A szakaszok száma attól függ, hogy a teljes verziót használja-e, és hogy használja-e WooCommerce, Yoast SEO vagy más kompatibilis bővítmények. Ezektől a feltételektől függően több vagy kevesebb szakasz lesz a felületén. Mivel a teljes verziót használjuk a bővítménnyel WooCommerce aktiválva, így néz ki a felületünk.

elem elementor.png

Hogyan helyezzünk el egy Elementor blokkot

Miután kibontott egy szakaszt, megtalálja az Elementor blokkokat. A különféle Elementor blokkokat a "Drag & Drop" a pontozott vonalakkal kiemelt területre helyezi.

blokk hozzáadása elementors.png

Hogyan válasszuk ki az Elementor elrendezését

Mielőtt hozzáadna egy blokkot az Elementorhoz, ne felejtse el elrendezni a kijelölt szakaszban található "+" gombra kattintva.

válasszon egy elrendezést elementor.png

Az Ön igényeinek megfelelően válassza ki a legmegfelelőbb elrendezést. Miután kiválasztotta az elrendezést, ki kell jelölnie a szakasz ábrázolását ugyanazon a területen. Ebben a szakaszban ugyanannyi oszlop jelenik meg, amely megfelel a választásnak. Esetemben 3 oszlopos oszlopot választottam.

elementor szekció zone.png segítségével

A különböző "+" előjelű blokkok azok a területek, amelyek elfogadják az Elementor blokkokat. Ha hozzáad egy Elementor blokkot anélkül, hogy először elrendezést választana, alapértelmezés szerint az egyetlen oszlop elrendezés kerül kiválasztásra.

Az Elementor szakaszok átrendezhetők egymás között, ugyanazon „drag & drop” elv alapján. Törölhet egy szakaszt is, ha már nem kívánja használni.

egy szakasz mozgatása elementor.png

Itt van egy példa egy szakaszra, amely 2 blokkot tartalmaz, nevezetesen a címblokkot és a szövegblokkot.

2 blocs.png szekcióelem

Egyéb tervezési eszközök használata

Miután befejezte a tervezést, az egyik dolog, amit meg kell tennie, a munka mentése. Ezt az opciót megtalálja az Elementor különböző szakaszait megjelenítő szakasz legalsó részén.

elementor.png biztonsági mentés

Kiválaszthatja a mentést közvetlenül (Közzététel), és mentést piszkozatként vagy sablonként. Ezeket a különböző pontokat később még jobban megvizsgáljuk.

A tervezés során érdemes megtekintenie a változásokat az Elementor további felülete nélkül is. Csak annyit kell tennie, hogy rákattint a szem ikonra.

A módosítások előnézete elemor.png

Előfordul, hogy a tervezés során hiba lép fel (akaratlan fellépés). Ebben az esetben az Elementor előzményeket kínál, amelyek lehetővé teszik az összes művelet navigálását.

Actions elementor.png

Ez lehetővé teszi, hogy könnyedén visszatérhessen.

A "Böngésző" opció, amely közvetlenül az előzmények gomb előtt található, lehetővé teszi a különböző szakaszok további módosítását a látogatók által használt böngészőhöz képest. Ez az opció hozzáférést biztosít a szakaszstruktúrák (oszlopszélesség) speciális módosításához. Itt nagyon óvatosan kell változtatnia.

böngésző opció elementor.png

A "Beállítások" gombbal módosíthatja az oldalra vonatkozó opciókat, például a címet, a kiemelt képet vagy az állapotot.

elementor.png beállítások

Ennyi ehhez a bemutatóhoz, a következő oktatóanyagunkban többet fogunk felfedezni az Elementorral. Ne habozzon megnézni a Hivatalos oldal amely sokkal sikeresebb példákat kínál.