Oldal kiválasztása

Csak szépen rendben, katonásan! 🙂

Szerző: | 2018. 09. 24. | Trükkös-Tippek

MODULOK SZÉPEN EGY SORBAN

Bár a legutóbbi DIVI frissítés hozott magával egy olyan hasznos funkciót, amivel kattinthatóvá tudsz tenni akár modulokat is, mégis néha szükség lehet arra, hogy adott elemeket vizszintesen egysorba tudj rendezni úgy is, ha egy sorban vannak. Ez így elég bután hangzik, miért bonyolult ez?!
Mert, amit a demoban is látsz, ha a tartalom (vagy amit egy sorba szeretnél rendezni) nem egyforma magasságú, akkor értelemszerűen az is elcsúszik, ami alattuk van, ezek jelen esetben a gombok, illetőleg a CTA modulok a második sorban, de a metodus ugyanaz lesz mindkét esetben, csak az aktuális részben kell majd az adott OSZTÁLY-t vagyis CLASS-t megadnod, de mindjárt érthető lesz ez is. 🙂

Hozzávalók

CSS.

Mennyiség:

8-10 sor/feladat 🙂

VÁGJUNK BELE…

Az első példánkban BLURB és BUTTON, azaz FÜLSZÖVEG és GOMB, a másodikban pedig BLURB és CTA, azaz FÜLSZÖVEG és CSELEKVÉSRE FELHÍVÁS GOMB modulokat használtunk.

Nyiss egy új oldalt. Egy új sorba tegyél FÜLSZÖVEG modulokat, mindegyik alá pedig egy-egy GOMBot. (Második esetben ugyanez csak BLURB és CTA kerülnek egymás alá.)
Ahhoz, hogy meg tudjuk célozni, hogy mely sorban szeretnénk egymáshoz képest szépen elrendezni a tartalmat, adnunk kell neki egy egyedi azonosítót (illetve osztályt) a SOR beállítás – HALADÓ fülön belül a CSS OSZTÁLY mezőben, ez az első példában a “dsk_1line_button”, a másodikban pedig a “dsk_1line_cta”.

Ha ezzel megvagyunk, már csak azt a kódot kell beillesztenünk az oldalon belül a BEÁLLÍTÁSOK – DIVI BUILDER BEÁLLÍTÁSOK – EGYÉNI CSS mezőbe, amiben meghatároztuk, hogy a “dsk-1line-button” vagy a “dsk-1line-cta” osztályunk tulajdonképpen milyen tulajdonságokkal is rendelkezzenek.
CSS kód
/*------------------------------DSK-VIP#3-------------------------*/

/*GOMBOK horizontális elrendezése*/

.dsk_1line_button .et_pb_column {
padding-bottom:30px;
}
.dsk_1line_button .et_pb_button_module_wrapper{
position: absolute;
bottom: 0;
left: 0;
right: 0;
margin: auto;
  }


/*CTA MODULOK horizontális elrendezése*/

.dsk_1line_cta .et_pb_column {
padding-bottom:220px;
}

.dsk_1line_cta .et_pb_promo{
position: absolute;
bottom: 0;
left: 0;
right: 0;
margin: auto;
  }

@media (max-width:479px){
.dsk_1line_cta .et_pb_promo {
    position: absolute;
    bottom: 40px;
}
}

@media (min-width:981px){
.dsk_1line_cta .et_pb_promo {
    position: absolute;
    bottom: -35px;
}
}
/*------------------------------DSK-VIP#3-------------------------*/

Másold be azt a kódot (vagy azokat a kódokat, amely verziót használod, vagy akár mindkettőt) és ha frissíted az oldalad, azt kell látnod, hogy a gombok, illetve a CTA modulok szépen katonás rendben álldogálnak egymás mellett, mint a lenti képen. Ha nem így lenne, akkor azonnal nyújts be fellebbezést az ügyben akár Facebookon, akár itt a kommenteknél!!! 🙂

Ha még nem vagy CSS guru (mint ahogy én sem), tanuláshoz legjobb, ha a böngésződ inspector funkcióját használod, mert rengeteget lehet tanulni belőle nézegetés közben. Ha megnézed a kódokat, látni fogod, hogy vannak “megcélozva” az egyes elemek és ahol módosítva vannak az értékek, mint pl. a CTA modul alsó padding azaz eltartás értéke, az miért van. Nyugodtan próbálgasd az inspectorban állítani ezeket az értékeket, vagy akár kapcsolgasd ki-be őket, akkor fogod látni, hogy mi és hogyan változik.

Találsz a kódban két “mediaquery”-t is, ezek azért szükségesek, hogy más-más szélességű kijelzők is helyesen jelenítsék meg az adott modulokat.
Ha készítettél valamit, vagy kérdésed van, dobd be a FB csoportba, hogy tanulhassunk egymástól!

Mára ennyi, kikapcs!
Üdv,
Zió

ELAKADTÁL? ÉSZREVÉTELED VAN? ÍRJ NEKÜNK!

6 + 9 =

NÉZD MEG!

TÖLTSD LE!

BESZÉLD MEG!