Egy nagyon jópofa grafikai megoldást hoztam el neked, amivel a DIVI alapértelmezett grafikákat és megvalósításokat egy picit feldobhatod. Ebben a cikkben megmutatom, hogy tudsz magadnak készíteni úgynevezett „kinder tojásokat”, azaz olyan blokkokat, amikor a tartalomért oda kell vinni az egeret, hogy felfedje magát.
Nézd meg ezt a DIVI fülszöveget
Első lépés – a tartalom megszerkesztése
Ezt a részt nem szeretném túlbonyolítani. A szerkeszteni kívánt oldalon létrehozol egy fő blokkot (a kék színű), majd elrendezésben (zöld színű) az első elemet választod.
Ha ez megvan, akkor simán egy fülszöveget importálsz ebbe a blokkba és tetszés szerint elkezded szerkeszteni. Ha megkaptad a kívánt eredményt, akkor folytathatjuk a „kindertojás” műveletet.
![DIVI honlapkészítés és ingyenes bővítmény](https://e-lander.hu/wp-content/uploads/2019/06/divi-blokk.jpg)
![DIVI elrendezés megváltoztatása](https://e-lander.hu/wp-content/uploads/2019/06/divi-elrendezes.jpg)
Második lépés – háttérszín beállítása
A DIVI-ben lehetőségünk van minden blokkhoz egyedi háttérszínt választani. Ezt már csak azért is érdemes megtennünk, hogy még inkább kitűnjön a háttérből a fókusztartalmunk, azaz amit szeretnénk, hogy éppen olvasna a látogató.
![DIVI blokkban a háttérszín beállítása](https://e-lander.hu/wp-content/uploads/2019/06/hatter-divi-szin-beallitas-1024x876.png)
Harmadik lépés – Felső elválasztó (divider) meghatározása
Ez a fajta grafikai megvalósítás az elválasztókkal való „játszadozásnak” az eredménye. Rendkívül fontos a pontos beállítása és mobilra való külön optimalizálás. Máskülönben szétcsúszik az oldalad.
![DIVI wordpress honlap divider elrendezés és stílus](https://e-lander.hu/wp-content/uploads/2019/06/DIVI-divider-beallitas-1012x1024.png)
A HOVER (lebegő) beállítása
A HOVER nem más, mint a blokkunk „fedő lapja”, amit a videón is láttál „mozgó elem”. Ezt kell most beállítanunk először a felső divider-hez (felső elválasztó), majd később az alsó divider-hez is (külön-külön).
![DIVI Hover beállítás](https://e-lander.hu/wp-content/uploads/2019/06/HOVER-beallitas-DIVI-1024x873.png)
Negyedik lépés – Alsó elválasztó (divider) meghatározása
Most az alsó elválasztót kell beállítanunk ahhoz, hogy megkapjuk a „kindertojásunk” másik színét is!
![Divi WordPress tanfolyam ingyen](https://e-lander.hu/wp-content/uploads/2019/06/Divider-bottom--1018x1024.png)
A HOVER beállítása itt is
![](https://e-lander.hu/wp-content/uploads/2019/06/HOVER-beallitas-DIVI-1-1024x873.png)
Ötödik lépés – A kiterjedés beállítása
Ha eljutottunk idáig, akkor eljött az idő beállítani a DIVI blokkmenüben a kiterjedést. Minden esetben három verzióban kell elvégeznünk a beállítást, hiszen optimalizálnunk kell asztali gépre, telefonra és tabletre egyaránt.
![online WP kurzus és tanfolyam 2020](https://e-lander.hu/wp-content/uploads/2019/06/DIVI-kitoltes-padding-1024x696.png)
Hatodik lépés – Border / keret beállítás
Végső lépésként pedig be kell állítanunk a blokknak a keretét.
Border méret: 50vw
Border szélesség: 1px
![](https://e-lander.hu/wp-content/uploads/2019/06/border-1.png)
Hover beállítás Borderhez
A szegély » lekerekített téglalap cím mellé vidd az egeredet és megjelenik előtted a „Hover nyíl ikon”.
Erre kattintva tudod a hovert szerkeszteni ebben szakaszban. Egyetlen feladatod a szín átállítani #000000-ra.