fbpx
Szeretem a különleges, egyedi megvalósításokat. Azon dolgozom, hogy elhozzuk számodra a legmenőbb, legújabb WordPress trükköket, amitől az ügyfeleid majd elájulnak!

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
Válaszd ki a fő szekciót
DIVI elrendezés megváltoztatása
Válaszd ki ennek a szekciónak az elrendezését

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

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.

  • Elválasztó stílus: válaszd ki a listából
  • Elválasztó magasság: 7000px
    (ne ijedj meg, hogy túl nagy értéket írsz be, mivel csak így fedi le teljesen a kívánt részt)
  • Elválasztó FLIP: vertikális
  • Elválasztó elrendezés: “a szekció tartalmának a tetején”
DIVI wordpress honlap divider elrendezés és stílus

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).

  • Elválasztó/Dividers beállításoknál a színbeállítás alatti “divider magasság” mellé kattintva több ikon is előjön
  • kattints a nyíl ikonra
  • menj a “Hover” vagy “Lebeg” szövegre
  • Divider magasság: 0px
DIVI Hover beállítás

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!

  • Dividers – bottom/lent fülre kattints
  • Elválasztó stílus: válaszd ki a listából
  • Elválasztó magasság: 600px
  • Elválasztó elrendezés: “a szekció tartalmának a tetején”
Divi WordPress tanfolyam ingyen

A HOVER beállítása itt is

  • Elválasztó/Dividers beállításoknál a színbeállítás alatti “divider magasság” mellé kattintva több ikon is előjön
  • kattints a nyíl ikonra
  • menj a “Hover” vagy “Lebeg” szövegre
  • Divider magasság: 0px

Ö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.

  • bal margó: 10 vw (aszatlin), 11vw (tableten), 0vw (mobilon)
  • jobb margó: 47vw (asztalin), 11vw (tableten), 0vw (telefonon)
  • Kitöltés fent: 8vw (asztalin), 15vw (tableten), 16vw (telefonon)
  • Kitöltés lent: 8vw (asztalin), 15vw (tableten), 16vw (telefonon)
online WP kurzus és tanfolyam 2020

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

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.

Most elérhető

50% kedvezménnyel

yoast seo

tovább a fizetéshez

December 12-ig