Beaver Builder használata: lépésről lépésre útmutató

Te is azok közé a tevékeny emberek közé tartozol, akik elhatározták, hogy saját magok készítik el a weboldalukat, de elakadtak, mert nem jártasak a kódolásban. Nos, vége ennek a bizonytalanságnak, új jövő körvonalazódik! Létezik a problémára egy nagyon korrekt és erőteljes megoldás.

A Beaver Builder használata

A Beaver Builder egy egyszerű kezelőfelülettel rendelkező,  „fogd és vidd” rendszerű oldalépítő plugin (page builder), ami segít a weboldalad létrehozásában kódírás nélkül. Létrehozhatod weblapod úgy, hogy egyszerűen kiválasztod és a helyére húzod a szükséges modult vagy a tartalmat, majd a széles beállítási lehetőségek közül választva megformázod ízlésednek megfelelően, és kész! A Beaver Builder maga megalkotja az ehhez szükséges kódrészt.

A Beaver Builder a landoló oldalak készítésére többféle modullal és több mint 30 előre elkészített sablonnal érkezik. Ezen kívül még 25 tartalmi oldal megjelenés közül választhatsz!

A sablonok szerkesztése és testreszabása egyszerű. Ezt megteheted úgy, hogy hozzáadsz vagy eltávolítasz a sablonban látni kívánt modulokat, és mindezt valós időben is történhet.

Tehát ugorjunk neki, és nézzük meg, hogyan telepítheted ezt a fantasztikus bővítményt a weboldaladra.

A Beaver Builder telepítési útmutatója lépésről lépésre

1. lépés: Az első dolog, amit meg kell tenned, hogy nyisd meg a WordPress adminisztrátori felületét. Majd válaszd ki a „Bővítmények” menüpontot és kattints az „Új hozzáadása” gombra.

2. lépés: Kattints a „Feltöltés” gombra az oldal tetején.

3. lépés: Töltsd fel a Beaver Builder plugint, majd kattints a „Telepítés most” gombra.

4. lépés: Kattints az „Aktiválás” gombra a bővítmény engedélyezéséhez.

Gratulálok! Sikeresen telepítetted a plugint a weboldaladra!

Ahogy látod, a példában a Beaver Builder PRO verziója lett telepítve, azon egyszerű oknál fogva, mert nekem van a programhoz előfizetésem. Ha az ingyenes verziót akarod kipróbálni, azt könnyen letöltheted a wordpress.org oldaláról.

Most, hogy végeztünk a telepítéssel, elkezdhetjük megtanulni, hogyan készítsünk egy teljes oldalt a Beaver Builder használata segítségével, de mielőtt továbblépnénk, először tisztázni kell néhány alapvető dolgot.

Általános beállítások

Az általános beállítások az egész weboldaladra vonatkozó opciók. Ha módosítod ezeket a beállításokat, a változtatás az összes oldalon jelentkezni fog, nem csak az aktuális oldalon.

A globális beállítások elérése nagyon egyszerű. Íme a lépések:

1. lépés: Az oldalépítő elindítása után kattints az Eszközök gombra az ablak bal felső sarkában.

2. lépés: Ezután válaszd ki az „Általános beállítások” elemet, és máris a Globális beállítások szakaszban vagy!

Itt van egy kép, amely bemutatja, hogyan néznek ki a globális beállítások:

Az Általános beállítások panelen számos lehetőség található, például margók, padding, a weboldal maximális szélessége stb., és egyéni CSS-t és JavaScriptet is hozzáadhatsz, ha akarsz.

Beaver Builder téma

A Beaver Builder (bővítmény) az alaptermék, amely hozzáférést biztosít a tartalomterület szerkesztéséhez és módosításához. Másik részről a Beaver Builder téma segít a többit megváltoztatni (fejléc, lábléc, oldalsávok stb.) kivéve a tartalmi területet.

A Beaver Builder téma a Beaver Builder Pro Pack csomagjával érkezik, amely a Beaver Builder plugint is tartalmazza. A Beaver Builder témát kötelező megvenni, ha teljes irányítást akarsz szerezni az oldalad felett. Így szabadon szerkeszthetsz mindent, beleértve a fejlécet és a láblécet is, hatalmas szabadságot ad a weboldalad szerkesztésében. A weboldalad lesz a te homokozód, ahol bármit létrehozhatsz!

Ebben az oktatóanyagban is a Beaver Builder témát fogjuk használni a szükséges változtatások végrehajtásához. A téma birtokában a saját landoló oldal elkészítése csupán percekbe kerül!

Sorelrendezések

Készítettél már vázlatot bármiről, mielőtt bármit is rajzoltál? Emlékszel arra a blokkokból álló sablonra, amelyet azért készítesz, hogy megbizonyosodj arról, melyik terv hova kerül? A sorelrendezések pontosan ugyanazok.

Ha 4 oszlopos elrendezést szúrsz be, négy különböző blokkot (oszlopot) kapsz a négy különböző modul hozzáadásához. Több oszlopelrendezéssel több elem beillesztésének a szabadsága is megvan, ami azt jelenti, hogy nem muszáj egyetlen modult beszúrnod egy sorba.

Például, ha egyéni ajánlatokat szeretnél készíteni visszaszámlálóval, 2 oszlopos sorelrendezést választhatsz. Helyezd be a visszaszámlálót az első és a másik oszlopba, add meg a leírást és az átirányítási hivatkozást. Ne aggódj, ha teljesen összezavarodsz. Mindezt a későbbiekben részletesen kifejtjük.

A Beaver Builder kilenc különböző típusú sorelrendezéssel rendelkezik. 1 oszlop, 2 oszlop, 3 oszlop, 4 oszlop, 5 oszlop, 6 oszlop, bal oldalsáv, jobb oldalsáv, bal és jobb oldalsáv. Mindegyik eltérő elrendezési stílussal és eltérő oszlopszerkezettel rendelkezik.

Hogyan illeszthetsz be sorelrendezést az oldaladba a Beaver Builder segítségével?

1. lépés: Nyisd meg a szerkeszteni kívánt oldalon az oldalépítőt, és kattints a jobb felső sarokban a „+” gombra.
2. lépés: A megjelenő ablakban válaszd a „Sorok” fület egyszeri rákattintással.
3. lépés: Egyszerűen válaszd ki a kívánt elrendezést, és húzd át a weblapodon oda, ahol használni szeretnéd.

A Builder automatikusan beállítja a többi elemet, hogy helyet adjon az egyéni sornak.

Modulok

A modulokat weboldalad alapvető építőköveinek tekintheted. Egy weboldalnak olyan együttműködő modulok kombinációjára van szüksége, amik a legcsodálatosabb élményt és az interakció szabadságát nyújtják a felhasználóknak. Ilyen modulok például a kapcscsolatfelvételi űrlap a weblapodon, az Email cím mező, az előfizetést visszaigazoló szöveges üzenet stb.

A Beaver Builderhez sok modul tartozik, és mindegyiknek egyedi feladata van. A készítők egyetlen weblap-zónát sem hagytak érintetlenül. A csomag minden olyan modult tartalmaz, amelyre valaha is gondolhatsz, egy gombtól a visszaszámlálóig. Akkor tanuljunk…

Hogyan lehet modult hozzáadni a weboldaladhoz a Beaver Builder segítségével?

1. lépés: Navigálj a kívánt oldalra, nyisd meg a Beaver Builder szerkesztőt, és kattints az oldal jobb felső sarkában található „+” gombra.

2. lépés: Válassz a „Szabványos modulok” és a „WordPress widgetek” lehetőség küzül.

3. lépés: Keresd meg a kívánt modult, majd egyszerűen húzd oda, ahol látni szeretnéd az oldalon, és kész.

Sok egyéb változtatást is végrehajthatsz a widgeteken. Később mindegyiket külön-külön fogjuk látni. Most már készen állunk az első nyitóoldal létrehozására, ugorjunk neki!

Hogyan készíts landoló oldalt weboldaladhoz a Beaver Builder használata által?

Egy komplett nyitóoldal létrehozása biztos ijesztően hangzik, de valójában rendkívül kényelmes. Akár hiszed, akár nem, 5 percen belül elkészítheted a teljes landoló oldalad! Hihetetlennek tűnik, ugye?

Mivel a Beaver Builder csaknem 30 előre elkészített nyitóoldal sablont tartalmaz, egy előre megtervezett sablont választunk. A Beaver Builder nyitóoldal-sablonkönyvtárában több lenyűgöző dizájn megtalálható. Tehát ebben a példában a sablonok egyikével készítünk egy céloldalt.

Lássunk neki az első landoló oldalnak lépésről lépésre:

1. lépés: Először létre kell hoznod egy új oldalt a wordpressedben. Ehhez lépj az adminisztrációs területre, kattints az oldalakra, majd az új oldal hozzáadása lehetőségre.

2. lépés: A WordPress új oldal képernyőjén nézd meg a képernyő jobb oldalát. Meg fogod találni az Oldal tulajdonságok panelt. Válaszd a „Nincs fejléc/lábléc” lehetőséget a Sablon opciónál. Ez a lépés el fogja távolítani az oldaladról a fejlécet és a láblécet.

3. lépés: A címsor alatt keresd meg a „Beaver Builder fület”. Kattints rá, és ezzel elindul az oldalépítő. Ha először indítod el a Beaver Buildert, egy oktatóanyag jelenik meg. Ezt nyugodtan kihagyhatod, mivel itt mindent elmagyarázunk

4. lépés: Ahogy a szerkesztő megnyílik, lesz egy ablak a jobb oldalon, ahol navigálj a sablonok fülre. Válaszd ki a kívánt sablonok közül bármelyiket. A sablont később is módosíthatod.

A példában az egyik „Landing” nevú sablont választottam, de ha neked másik jobban tetszik, válassz másikat.

5. lépés: A kiválasztás után láthatod, hogy a weboldal automatikusan betöltődik.

6. lépés: Most már csak ezt az oldalt kell szerkesztenünk, hogy olyan legyen, amilyennek szeretnénk. Kezdjük az üdvözlő címsorral. Kattints az „Strugging to create….” címre. Ezzel megnyílik a cím szerkesztésének lehetősége.

7. lépés: Az Általános lapon módosítsd a címsort „Struggling to create….” helyett legyen „Tényleg egyszerű a beaver Builder használata?”

8. lépés: Most lépjünk tovább, és módosítsuk a betűtípust valami másra. Ehhez lépj a Stílus fülre, és a Typography panel alatt találod a Betűkészlet opciót. Válaszd ki a kívánt másik betűtípust. „Verdana” betűtípussal megyünk tovább. Kattints a Mentés gombra.

9. lépés: A Címsor alatt van egy alcím. Módosítsd ezt is tetszőleges szöveggel. A következőt használom: „Görgess le a konkrét információkért!”. Csak kattints a szövegre, és amikor a szerkesztő megnyílik, cseréld ki a szöveget, és kattints a mentés gombra.

10. lépés: Mivel nem szeretném, hogy a gomb itt legyen, ezért a gomb modul bal felső sarkában található „x” gombra kattintva távolítom el a gombot. Amikor megjelenik a törlést megerősítő üzenet, kattints az Igen gombra az eltávolításhoz.

11. lépés: Görgess le, és végezd el a kívánt módosításokat úgy, hogy egyszerűen kattints a modulokra, és módosítsd a beállításokat választásod szerint. A címszöveget és a szövegbekezdést is megváltoztattam a fent említett lépések végrehajtásával. Itt vannak az általam végrehajtott változtatások.

12. lépés: A képek is könnyen módosíthatók.

12(A) lépés: Kattints a képre, vagy kattints a kis csavarkulcs ikonra a kép sarkában. Megnyílik a fényképbeállítások ablaka.

12(B) lépés: Kattints a „Fénykép kiválasztása” hivatkozásra az általános lapon, és válaszd ki a kívánt képet és csak kattints a mentés gombra. A módosítások azonnal megtörténnek.

Ismételd meg ezt a lépést az összes módosítani kívánt képnél.

Ha meg szeretnéd változtatni a képet a háttérben, kattints az adott sor csavarkulcs ikonjára, és keresd meg a Stílus lapfülön a háttérkép beállításait, ahol bármit meg tudsz változtatni. A módosításaid a mentés gomb megnyomásával lesznek elfogadva.

A landoló oldalunk bal oldali része még kicsit üres, igaz? Adjunk hozzá valamit. Kövesd a korábban tárgyalt lépéseket és adj hozzá egy térképet a bal oldali oszlophoz.

A Térkép modul áthúzása után add meg a hely címét. nálam most az egyesült királyság a térkép központja. Állítsd be a helyet, változtasd meg a magasságot úgy, hogy illeszkedjen a jobb oldali oszlophoz és kattints a Mentés gombra.

Úgy gondoltam, hogy egy kis magyarázatnak több értelme lenne, ezért egy másik címsor modult is hozzáadtam a térképhez. Így csináltam.

1. lépés: Egy egyszerű címsort adtam a térkép fölé drag and drop és vidd művelettel.

2. lépés: A szöveget „Görgess le az ajánlatunkért címmel adtam hozzá a címsorhoz.

3. lépés: Kicsit testreszabtam az attribútumokat, és ezeket a változtatásokat végeztem el.

Igazítás – Középre
Betűszín – Sárga
Betűtípus – Verdana
Betűméret – egyéni (27)

4. lépés: Kattints a Mentés gombra.

A szükségtelen sorokat nyugodtan törölheted a landoló oldalról a sorok bal felső sarkában megjelenő ikonsor utolsó „X” elemével.

Nem kell aggódnod a törölt sorok alatti résszel. A Beaver Builder automatikusan feljebb helyezte azokat a sorokat, amelyek az eltávolított részek alatt vannak.
Ha végeztél, kattints a jobb felső sarokban a „Kész” gombra, majd nyomj rá a „Publish” gombra.

A változtatásaid ezt követően fognak élesben megjelenni a weboldalon.

Gratulálunk! Tökéletes nyitóoldala van a weboldaladnak!
(Na jó. Innen még lehet javulni! 😀 )

De várj! Valami hiányzik. Ez eddig csak egy oldal a weboldalon. Be kell állítanunk, hogy ez az oldal legyen a kezdőlap. Ehhez kövesd a lépéseket.

Hogyan tedd egyéni oldad weblapod kezdőlapjává?

1. lépés: Lépj a WordPress vezérlőpultba és kattints a Megjelenés -> Testreszabás lehetőségre, ahol megnyílik a webhelyszerkesztő.

2. lépés: Keresd meg a bal oldalsávban a Beállítások lehetőséget, és válaszd ki. Nyomj rá a „Kezdőoldal beállítások”-ra.

3. lépés: Kattints a „statikus oldal” opcióra, és válaszd ki az imént létrehoztál „Kezdőlap” nevű oldalt.

4. lépés: Kattints a felső „Közzététel” opcióra, és a beállításod megjelenik az interneten.

Gratulálunk! Végre az előbb elkészített oldalad lett a kezdőlapod!

Nem volt olyan nehéz, igaz? Milliószor könnyebben és gyorsabban ment, mintha mindent apránként végig kellett volna kódolni. Most csak egy nyitóoldalt készítettünk. A Beaver Builder segítségével tetszőleges számú és akármilyen szerkezetű oldalt elkészíthetsz.

Ez csak a Beaver Builder egyetlen csodája volt.