Tapasztalatom szerint a weboldal tulajdonosok meglehetősen nagy hányada úgy van a honlapjával, mint én a lovakkal: nem merek hozzájuk érni, mert úgy érzem, abból semmi jó nem származna. Hátul rúgnak, elől harapnak, középen meg minek, ha úgysem merek felmászni rájuk. Túl magasak, és amúgy is leesnék.
Nos, a honlapok nem harapnak és rúgnak ugyan, de az igaz, hogy nem érdemes bárhol és bárhogyan hozzájuk nyúlni. Értő módon kezelve őket szelídek, alakíthatók, másként viszont megvadulhatnak.
Sokféle weboldal létezik, lehetetlen olyan használati útmutatót írni, amely mindegyikre érvényes lenne. Most épp ezért csak a WordPress Divi sablonnal készült honlapok megszelídítéséről írok.
Mi az a Divi?
Az Elegant Themes által készített Divi WordPress téma a legnépszerűbb jelenleg a világon.
Minden típusú webhelyre alkalmas, beleértve a webshopokat is. Népszerűségét elsősorban beépített „frontend” szerkesztőjének, az ún. Divi Builder-nek köszönheti. Ennek a „Visual Builder”-nek nagyszámú előre elkészített modulja létezik. Ezeket némi szakértelemmel olyanná varázsolhatja a fejlesztő, amilyenné csak szeretné a leendő honlaptulajdonos. Ráadásul a Divivel készült weboldalak mobilon is jól néznek ki, nem csak asztali gépeken.
A Divi sablonok felépítése
Egy-egy oldal a Diviben ún. szakaszokból, sorokból és modulokból épül fel. Ezek mindegyike szerkeszthető, valamint egérrel megragadva áthelyezhető. Az egyes elemek áthelyezése lényegesen megváltoztathatja az oldal kinézetét, ahogyan a szakaszok és sorok szerkesztése is. Ezek tehát a Divi „harapós részei”. A modulokat már nyugodtabban lehet simogatni.
A további információk segítségével a DizájnExpressz homokozójában nyugodtan gyakorolhatsz:
https://dizajnexpressz.hu/homokozo/
A szerkesztés alapjai
1. Belépve kattints a „A honlap megtekintése” gombra, majd nyisd meg a honlapodnak azt az oldalát, amelyet szerkeszteni szeretnél!
2. Kattints a felső sötét menüsávban elhelyezett „Visual Builder engedélyezése” szövegre!
Ekkor betöltődik az ún. „frontend” szerkesztőfelület. Ha mozgatod az egeret az oldalon, különböző színű keretek jelennek meg:
Kék –> ezek a szakaszok, melyek „haraphatnak” – Ha teljesen kezdő vagy a Divivel készült oldalak szerkesztésében, nem érdemes hozzájuk nyúlnod.
Zöld –> ezek a sorok, melyek szintén haraphatnak.
Fekete –> ezek a modulok, a simogatható elemek. Nyugodtan szerkeszthetők. Átalakításuk könnyű, azonnal látható a módosításuk eredménye.
Sárga vagy sárgászöld –> ezek ún. globális elemek, amelyek megváltoztatása a honlap más oldalain is változást eredményezhet. Lehetnek szakaszok, sorok és modulok is. A modulokat is csak akkor változtasd meg, ha tisztában vagy vele, ezzel mindenhol módosulni fognak a weboldalon!
3. A fogaskerékre kattintva válik lehetővé az egyes elemek szerkesztése, beállításainak módosítása. Megjelenik egy felugró ablak, mely áthelyezhető az egérrel (bal gombot hosszan lenyomva és húzva az egeret).
Át is méretezhető a jobb alsó sarkánál fogva.
Beállítástól függően 1-4 fül látható a felső menüsávban. Ha admin vagy, akkor általában 3, de ha pl. popup az adott szakasz (felugró ablak), akkor 4 is lehet. A Tartalom fül a legfontosabb a számodra. Ennek módosítása jár a legkevesebb kockázattal is.
4. Ha valamit módosítasz az oldalon, 2 eset lehetséges: vagy elégedett vagy a változtatások eredményével, vagy nem.
Ha elégedett vagy az eredménnyel, mentsd el, amit csináltál:
Kattints az oldal alján, középen látható lila gombra (3 fehér pötty van rajta), majd az ekkor a jobb alsó sarokban megjelenő zöld színű Mentés gombra!
Ha vissza szeretnéd vonni a módosításokat, azt is megteheted:
A lila gombok között van egy, amelyen egy kicsi óra látható. (Jobb szélről a 2.) Erre kattintva megjelenik egy felugró ablak, amelyben láthatók a szerkesztési előzmények. Válaszd ki a neked megfelelőt, majd kattints a zöld gombra (a pipa jelre)!
5. Amikor végeztél a szerkesztéssel és elmentetted az oldalt, a „Kilépés a Visual Builderből” gombra kell kattintanod.
Szövegek módosítása
Szövegek nem csak szövegmodulban szerepelhetnek, de előfordulásuk ott a leggyakoribb. Máshol inkább csak címek jelennek meg.
Amikor a szövegmodul fogaskerekére kattintasz, megjelenik egy felugró ablak. Szerkesztheted a szöveget vizuális szerkesztővel és html szerkesztővel is. Ha nem vagy otthon a kódolásban, akkor a vizuális szerkesztőt ajánljuk. Beállíthatod benne pl. a megjelenítendő szöveg színét, elhelyezését, adhatsz hozzá képeket is (Média hozzáadása).
Ha úgy érzed elkészültél, kattints a modul jobb alsó sarkában lévő mentés gombra, majd mentsd el az egész oldalt is a lap alján lévő zöld mentés gombbal!
Képek cseréje
Képek nem csak képmodulban lehetnek elhelyezve egy oldalon, hanem bármely más modul, sor vagy szakasz háttérképeként is.
Először meg kell keresned, hogy a két lehetséges variáció közül melyikről van szó.
Ha a kép fölé mozgatod az egeret és megjelenik a fekete keret, akkor valószínűleg képmodulban van elhelyezve a kép. Ekkor kattints a kis fogaskerékre, majd a Tartalom fülön magára a képre.
Megnyílik a Médiatár, ahol kiválaszthatod azt, amire cserélni szeretnéd. Ha előzetesen nem töltötted fel az új képet a Médiatárba, azt még most is megteheted a Fájl feltöltése fülön. Érdemes hasonló méretű képet választani, mint amely eredetileg szerepelt az oldalon. Ellenkező esetben a megjelenő kép elmosódott lehet.
A „Kép feltöltése” gomba kattintás előtt meg kell nézni, hogy az „Alternatív szöveg” mező ki van-e töltve. Ez a szöveg akkor jelenik meg, ha valamilyen ok miatt nem töltődik be a weboldalon a kép. A felolvasó programok is ezt használják. Ha mégis elfelejtetted volna, a kép modul „Haladó” fülén (ha megjelenik neked), az „Attribútumok”-at választva még mindig beírhatod az alternatív szöveget.
Ne feledkezz meg a zöld mentés gombról!
Ha a kép fölött nem jelenik meg a képmodul fekete kerete, akkor az valamelyik elemnek a háttérképe lehet, akár egy soré vagy egy szakaszé is. Cseréjéhez először meg kell keresned az adott elemet.
A Tartalom fülön a Háttér menüpontban találod meg a képet.
Ha megtaláltad a helyét, az eljárás már ugyanaz, mint az előbbi esetben. Kattintás a képre, választás a médiatárból vagy új kép feltöltése, majd mentés. Háttérkép esetében nem szükséges az alternatív szöveg megadása.
Fülszöveg szerkesztése
A fülszöveg modulok képet vagy ikont és szöveget is tartalmaznak, gyakran használják őket a fejlesztők.
A Tartalom fülön kiválaszthatod, hogy képet vagy ikont jelenítsenek-e meg. Választhatsz az ikonok közül és a képet is kicserélheted.
A Tervezés fülön megadhatod, hogy az ikon vagy kép fent vagy pedig bal oldalon jelenjen-e meg.
Ugyancsak a Tartalom fülön megadhatod a címet és a „Törzsszöveg”-et is, amely a modulban megjelenik.
Gomb szerkesztése
A gombok vagy más néven „button”-ok igen fontos szerepet töltenek be a weboldalakon. Ezek az elemek teszik lehetővé, hogy a látogatók átugorhassanak az oldal egy másik pontjára, egy másik oldalra vagy akár egy másik weboldalra. Segítségükkel vásárolhatnak a webshopokban, de akár felugró ablakokat is megnyithatnak.
Általában gombmodulokban szerkeszthetők. Megváltoztathatod a gombon megjelenő szöveget, a célt is, ahová a látogatót irányítani szeretnéd.
A gombok kinézete is módosítható, de ezzel a lehetőséggel csínján kell bánni. Furcsán néz ki, ha egy weboldalon ahány gomb van, annyiféle a kinézetük.
Kapcsolati űrlap
Ha szeretnéd, hogy a látogatóid felvehessék veled a kapcsolatot, nem árt legalább egy ilyen űrlapot is elhelyezni a honlapodon. Ennek szerkesztése már egy picivel több szakértelmet kíván. Valójában csak akkor érdemes hozzányúlnod, ha megváltozott az email címed.
Először nyisd meg szerkesztésre a modult!
A felugró ablakban a Tartalom fülön válaszd ki az „Email cím”-et és módosítsd a címedet, majd kattints a mentés gombra! Ne felejtsd el az egész oldalt is elmenteni utána!
Közösségi ikonok
Ha van Facebook, Instagram vagy más közösségi oldalad, azokat is érdemes feltüntetni „Közösségi média követés” modulban.
A modul szerkesztésre megnyitása után kiválaszthatod a megfelelő közösséget, amelyet hozzá szeretnél adni, vagy amelyet szerkeszteni szeretnél.
Add meg a közösségi oldalad címét, majd mentsd el a hálózat beállítást, a modult és magát az oldalt is!
Blogbejegyzések
Ezek létrehozása, módosítása egy kicsit eltér az eddigiektől, mivel ilyenkor a „Klasszikus szerkesztő”-t érdemes használnod, nem a Divi szerkesztőt. Ezzel a megoldással ugyanis garantáltan hasonló lesz a bejegyzések oldalainak felépítése.
Ha szeretnéd eltüntetni az oldalsávot, amelyben az ún. widgetek vannak (pl. Keresés, Legutóbbi bejegyzések), vagy valami “extrát” adnál hozzá ezekhez az oldalakhoz, akkor viszont a Divi szerkesztőjére kell átváltanod. Ilyenkor a cikket egyetlen szövegmodulban is szerkesztheted, de adhatsz az oldalhoz új modulokat, sorokat, szekciókat is.
Ha csak módosítani szeretnél egy cikket, akkor Bejegyzések –> Összes bejegyzés –> Kiválasztott bejegyzés szerkesztése a sorrend. Ha újat írnál, akkor Bejegyzések –> Új hozzáadása.
A bejegyzések címének nem érdemes túl hosszúnak lennie.
Amikor cikket írsz, akkor is a “Vizuális” fülön érdemes maradnod.
Képeket a “Média hozzáadása” gombbal illeszthetsz be.
Fontos a bejegyzést kategóriához rendelni és címkét is adni hozzá. Ezek segítik később a cikk megtalálhatóságát.
A bejegyzésekhez érdemes kiemelt képet is beállítani. Ezek mérete változó lehet, de egy weboldalon lehetőleg azonos méretűek legyenek. Az alternatív szöveg megadása itt is fontos.
A cikket a Frissítés gombbal tudod módosítani. Ha újat írtál, akkor a Közzététel gombra kell kattintanod, hogy látogatóid is elolvashassák.
Termékek hozzáadása
Az üzlet oldal és a termékek oldalának kialakítása többféleképpen is megoldható. Új termék hozzáadása legegyszerűbben egy már létező termék másolásával történhet.
Termékek –> Minden termék –> Termék duplikálása
Nevezd át a terméket, sorold be kategóriába, adj hozzá címkét, tölts fel egy termékképet, majd legalább ekkor már mentsd el (Közzététel)!
Add meg a termék árát, valamint az egyéb fontos tulajdonságait.
A termék rövid leírása a termékkép mellett fog megjelenni, míg a hosszú leírás a termékkép, a termék adatai és a kosárhoz adás gomb alatt.
Természetesen egy webáruházban be lehet állítani különböző variációkat, akciókat, akciós termékcsomagokat is, de ezek módját már nem lehet pár szóban elmagyarázni.
Ha kimaradt volna valami fontos, kérdezz nyugodtan, a lovakkal pedig vigyázz!
Vágjunk bele!
Érdeklődsz ajánlatunk iránt? Megoldást keresel a weblapodat érintő problémára? Hívj a (30) 991-5737 telefonszámon, vagy küldj üzenetet! – Néhány munkaórán belül felvesszük veled a kapcsolatot.