Három plusz egy ráadás apró, de annál hasznosabb Divi tipp
Tartalom:
1. Harmonika – legyen mindegyik csukott állapotban betöltés után.
Weboldalunk készítése során felmerülhet az igény, hogy készítsünk egy esztétikus és informatív listát az olvasóknak.
A Divi eszköztárában a harmonika modul pontosan erre szolgál, a segítségével könnyedén tudunk ilyen listákat készíteni. A harmonika modul nagyon hasonlít a fülekhez, annyi különbséggel, hogy itt függőlegesen helyezkednek el a listaelemek. Ez nagyon jól használható például a gyakori kérdések résznél vagy a szolgáltatás leírásánál, hisz alapesetben nem foglal sok helyet, viszont ki lehet nyitni és így több tartalmat tudunk megjeleníteni.
Amint rákattintunk az egyik elemre, tartalma lenyílik. Egyetlen problémám ezzel a modullal az volt, hogy az első harmonika elem rögtön nyitott állapotban jelent meg.
Azt a megoldást találtam rá, hogy az első listaelemet elrejtjük.
Ehhez mindössze annyi teendőnk van, hogy a harmonika beállításoknál belemegyünk az első elem beállításaiba, majd a haladó fülön az egyéni CSS résznél a fő elemhez beírjuk a display:none kódot.
2. Linkek elhelyezése az alsó sávban.
Általában az oldal alján a legalsó footer sávban is el szoktuk helyezni az ÁSZF és az Adatvédelmi tájékoztatók elérhetőségét.
A Divi sablon lehetőséget biztosít, hogy könnyedén szerkeszthessük ezt az alsó sávot, ehhez a vezérlőpultból a következő útvonalon jutunk el: Megjelenés – > Testreszabás -> Lábléc -> Alsó sáv
Az alsó sáv beállításainál elsőként figyelni kell, hogy a lenti kreditek kikapcsolása opció ne legyen bepipálva, a hivatkozásokat pedig a lenti kreditek szerkesztése részhez illeszthetjük be.
Amit ide sima szövegként gépelünk be, az sima szövegként fog megjelenni.
Hivatkozások elhelyezésére az alábbi kóddal nyílik lehetőségünk.
Az „url” részhez azt a webcímet kell beírjunk amit el szeretnénk érni, a „szöveg” részhez pedig a megjelenítendő szöveget (pl. ÁSZF)
További finomítási lehetőség a target=”_blank” opció, amit ha a képen látható módon használunk azt eredményezni, hogy kattintás után új ablakban fog megnyílni az oldal.
<a href=”url” target=”_blank”>Szöveg</a>
3. Horgonyok – oldalon belüli navigáció #horgonyok
Napjainkban egyre népszerűbbek az egy oldalas honlapok ahol csak görgetned kell lefelé. Ezek praktikusak és nagyon megnyerőek, ugyanakkor itt is célszerű a navigációt megkönnyíteni, hogy rögtön a számára érdekes részhez ugorhasson az olvasó.
Erre hivatottak a horgonyok (anchor). Ez nem Divi specialitás, hanem bármilyen HTML környezetben használható megoldás.
Horgonyokat elhelyezhetünk a szövegben is illetve bármelyik Divi modult is elláthatjuk ilyen egyedi azonosítóval.
Szövegbe illesztés:
Horgonyokat a szövegben a Divi szerkesztővel a szöveg modul beállításainál majd a Szöveg fülre kattintva tudunk elhelyezni.
Ahova ugrani szeretnénk, be kell illeszteni az alábbi kódot és elnevezni horgonyunkat:
<a name=”horgony”></a>
Divi modulhoz illesztés
Amennyiben valamely Divi modulra szeretnénk oldalunkon navigálni, mindegyik modulnak lehetőségünk van egyedi CSS azonosítót (ez a horgonyunk) megadni a modul beállításainak. Megnyitjuk a modul beállításait majd a haladó fülön a CSS azonosítóhoz beírjuk a választott egyedi azonosítót.
Hivatkozás készítése a horgonyokhoz
A Divi moduloknál annyi a dolgunk, hogy a hivatkozás webcíme mezőbe beírjuk a horgony nevét és elő egy # karaktert. Ezután a hivatkozásra kattintva már oda is ugrunk automatikusan a kívánt részhez.
Amennyiben egy szövegbe szeretnénk elhelyezni a horgonyunkra mutató linket, a bal oldali kép szerint kell cselekedjünk, a szöveg modul beállításainál kiválasztjuk a szöveg fület, majd a következő kódot használjuk:
<a href=”#horgony”>Megjelenítendő szöveg</a>
A href=”#horgony” rész a horgonyunk neve, az utána következő rész pedig a hivatkozás szövege.
A gyakorlati működést az oldal tetején is láthatjátok.
* Itt is egy ráadás tipp, ha ilyen horgonyokat a felső menüsorban helyeztek el, érdemes figyelni rá, hogy ez esetben ne csak a #horgony hivatkozást használjátok, hanem teljes URL-t, tehát oldalam.hu\#horgony,
4. Blog betekintő eltüntetése
Amennyiben valamely oldalunkra szeretnénk egy blog modult is beilleszteni, alapesetben az a bal oldali ábra szerint fog megjelenni, tehát a bejegyzés címe alatt megjelenik egy betekintő is, ami a bejegyzésünk első néhány mondatait tartalmazza, viszont nem túl esztétikus.
Az alábbi két képen látható a különbség, a jobb oldalon ott a betekintő, a bal oldalon nincs.
Szerencsére egy kis utánajárással könnyen orvosolhatjuk ezt a problémát is, nincs más teendőnk, mint elnavigálni a következő oldalra: Divi -> Sablon beállítások -> General fül és legalul az egyéni CSS részhez beilleszteni az alábbi kis kódod, a kép szerint:
.et_pb_post .post-content {
display: none;
}
Köszönöm, hogy elolvastad, remélem hasznos volt.