Az új kedvenc: a drag&drop sablonok, avagy tapasztalataink a Page Builderrel

Egyre népszerűbbek a weboldalak felépítésében az úgynevezett drag&drop sablonok. Ezek azok a sablonok, amelyek használatakor az alapértelmezett WordPress szerkesztőfelületen kívül egy kiegészítő eszköz is a rendelkezésedre áll a tartalmaid elrendezéséhez: a Page Builder.

A mi kedvencünk ezek közül az ElegantThemes gyártotta univerzális sablon, a Divi.

Drag&Drop Page Builder funkciót a bejegyzésszerkesztőben a Use Page Builder gombbal tudod aktiválni. Akár oldalanként is más és más lehet a megjelenés. Néhány oldaladat, például a bejegyzések (cikkek) oldalait érdemes meghagyni a hagyományos felépítésben, fejléccel, menüsorral, oldalsávval, widgetekkel, de a főoldalt, a termékedet bemutató oldaladat vagy egy értékesítési / érkezési oldalt (azaz sales oldalt vagy landing page-et) elkészíthetsz ezzel az egyedi oldalépítővel, egészen különlegesre és látványosra.

A Page Builderben sávonként állíthatsz be mindent. Ezeket a sávokat a rendszer section-nek hívja. Mindegyiknek a hátterét egyenként tudod beállítani, így akár minden egyes section más színű vagy más háttérképű lehet.

Minden section-ben be kell állítanod a rendelkezésedre álló terület függőleges felosztását, azaz meg kell határoznod az oszlopokat (Insert Columns). 1/2 – 1/2 vagy 1/3 – 2/3 vagy 1/3 – 1/3 – 1/3 és így tovább – rengeteg lehetőség közül választhatsz.

A következő lépés, hogy az oszlopon belül elhelyezed a kívánt modult (Insert Module). Ez lehet kép, szöveg, diavetítés, térkép, audio fájl, bejelentkeztető felület és még sok minden más.

Miután kiválasztottad a modul típusát, akkor már egy megszokott WordPress-es szerkesztőfelülethez jutsz, illetve nagyon egyértelműen mondja az utasításokat, hogy mit tegyél.

FONTOS: minden egyes modult nevezz el! Így nem kell majd később azzal sok időt eltölts, hogy rájöjj, hogy a weboldal egy adott helye melyik modulban is lehet. Ezt megteheted minden egyes modulnál az Admin Label mező kitöltésével. Itt eredetileg a modul típusának a neve áll, pl Text, de ehelyett érdemes beleírni például egy hosszabb szöveg első mondatát, akár rövidítve, vagy a kép, audio fájl nevét. A lényeg, hogy később ránézésre tudd, hogy melyik modul melyik részhez tartozik. Így könnyedén tudsz később is változtatni rajta.

Az ilyen felépítésű sablonok, így a Divi is, előszeretettel használják a Parallax effektet, azaz azt, hogy a section háttérképek előtt lehet görgetni a tartalmat, az illusztációként használt képek pedig látványos animációval úszhatnak be a lapra. Elérhető ezen kívül néhány szintén nagyon látványos számláló is és egyéb kisebb okosságok. Ezeket az effekteket a Modul settings-ben tudod beállítani. Az Animation mezőben tudod kiválasztani a beúszás irányát, módját, illetve ki is kapcsolhatod, ha nem szeretnéd, hogy ennyire dinamikus legyen az oldalad.

Szerző:

Iratkozz fel hírlevelünkre!

Javasolt eszközök:

Banner250x250.png
Elementor Pro
Generatepress Logo White Asset
GeneratePress
Divi 4.0
Divihello
Prémium támogatás és ajándék Divi licence
Adatvedelem.png
ADATVÉDELEM minta
Aszf.png
Webshop ÁSZF minta

Elkészült az ingyenes alapozó tanfolyamunk és elérhető a YouTube csatornánkon amíg az új weboldal készül.