DIVI LEXIKON #MODULOK: A HARMONIKA

Szerző: | 2018. 09. 3. | DIVI LEXIKON

A HARMONIKA modul

A harmonika modul nagyszerű módja az információ egységesítésének, illetve egy egységes rendszerben történő összegyűjtésnek. A modul maga, nagyon hasonlít a FÜLEK modulhoz, azonban a különböző elemek itt függőleges irányban következnek egymás után, míg a FÜLEKNÉL pedig vizszintesen. Amikor megnyílik egy új elem a listán belül, a korábban megnyitott elem becsukódik, helyet adva az új elem tartalmának megjelenítésére.

Beilleszthetsz képet is egy harmonikába...

… ha szükséges, vagy ha színesebbé tennéd egy kicsit ezt a részt is…

Vagy akár egy kis videót is, ha arra lenne szükséged...

A legáltalánosabb azért, a sima szöveges verzió, de ki tudja...

Lehet, hogy Neked így lesz egyszerűbb bizonyos dolgokat szemlélteni, ha már a harmonika füleibe is grafikai elemeket illesztesz…

Csak úgy, mint az összes többi esetében, számos lehetőség van arra, hogy az oldalad designjának megfelelő kinézetet kaphasson ez a modul is. Kiválaszthatod az összes szöveg méretét, színét, külön a címsort és külön a szövegtörzs részt, testreszabhatod a modulon belüli elhelyezkedésüket (balra, jobbra, középre, sorkizárt), színezheted a hátterét az egész modulnak, vagy akár csak az egyes elemeknek külön zárt és külön nyitott állapotban is, sőt még háttérképet is betehetsz, csak úgy, mint pl. ebben a Zió boszis harmónikában lentebb, ahol a DIVI logo a háttérkép és mivel ennek az értékét “FIT”-re (azaz illeszkedik-re) állítottuk, ezért az az egész teret szeretné kitölteni, emiatt olyan, mintha megnőne, amikor az a harmónika nyílik ki.

Zió a Kis Banya!

A háttérképed “FIT” reállításával érheted ezt a hatást, mintha megnőne a beillesztett kép a harmónika megnyitásakor.

De természetesen...

… használhatsz színeket is a lenyíló fülek külön háttereinek…

Vagy akár még...

… színátmenetet is, ha épp úgy néz ki jobban.

De, ha valamiért igazán futurisztikus élményt akarsz... (ez az opció mobilon és tableten nem elérhető!)

akkor videót is beágyazhatsz a hátteredbe, csak arra ügyelj, hogy a törzsszöveg megfelelően kontrasztos legyen, mert ha a “design” a hasznosság rovására megy, az visszaüthet! 

Ha pl. egy egészen egyszerű harmónikát készítenél, mint ebben a lenti példában, akkor beállítod, hogy a háttérszin, a törzsszöveg színe, mérete, nyitott es csukott állapotban is ugyanaz legyen, egyetlen dolognak adj csak egymástól eltérő színt, az pedig a nyitott és a zárt kapcsolók szövegszíne.

Első elem a listában

Your content goes here. Edit or remove this text inline or in the module Content settings. You can also style every aspect of this content in the module Design settings and even apply custom CSS to this text in the module Advanced settings.

Második elem a listában

Your content goes here. Edit or remove this text inline or in the module Content settings. You can also style every aspect of this content in the module Design settings and even apply custom CSS to this text in the module Advanced settings.

Ha a HARMÓNIKA beállítások – TERVEZÉS fülön választod ki pl. a Kapcsoló szöveg beállításokat, akkor az összes “kapcsoló” (tehát lenyíló elem) háttérszinét, egyszerre állíthatod be. Ha azonban szükségét érzed akár egyes elemeket külön kiemelni, vagy egyszerűen csak úgy jobban tetszik, akkor a már felvitt elemek, (ebben a példában a “Hol vehetem hasznát ennek…”, “Mennyire testreszabható ez…” stb.) sorában a kis fogaskerék ikonra kattintva, az azon belül található TERVEZÉS fülön állíthatod az adott elemre vonatkozó elem saját tulajdonságait, színeit, betűtipusat, háttérszínét (nyitott vagy csukott állapotban) stb.

 

A KEZELŐFELÜLET

Harmónika modul – Tartalmi opciók

A tartalom lapon megtalálható az összes tartalmi eleme az adott modulnak, például a szöveg, a képek és az ikonok, tehát minden, ami azt befolyásolja, hogy hogy nézzen ki majd a végleges modulod.

TARTALOM HOZZÁADÁSA:  itt adhatod hozzá a szükséges tartalmakat, füleket.

HÁTTÉR: a harmonikáid “alatt” lévő háttér beállításai (szín, színátmenet, kép, videó) (FIGYELEM!!! A videós háttér opció mobilon nem használható. Adj meg egy háttérképet is, vagy háttérszínt és a mobilos böngészők ezt fogják használni helyette.)

ADMIN CIMKE: itt nevezheted el a modult, hogy ha pl. a wireframe nézetet használod, könnyebben eligazodj a modulok között.

Harmónika modul – Design opciók

A Design lapon találod a betűtípusokat, a színeket, a méretezést és a távolságot. Itt állíthatod be tulajdonképpen a modul kinézetét.

IKON: ha ikont használsz, itt adhatod meg a színét.

SZÖVEG: a szöveg elhelyezkedése (jobbra zárt, balra zárt, középre igazított, vagy sorkizárt), illetve itt adhatsz árnyékot is a szövegnek.

TÖRZSSZÖVEG: a szöveg betűtípusa, a betűk vastagsága, színe, elrendezése, mérete, a betűk távolsága, a sorköz távolsága, illetve szöveg árnyék.

KAPCSOLÓ SZÖVEG: itt állítható be a nyitott kapcsoló (fül, harmónika, tartalmi rész, ki hogy hívja 🙂 ) szöveg és háttérszíne, a zárt kapcsoló tartalmi részének szöveg és háttérszíne, ezek betűtípusa, a főcím betűtípusa, vastagsága, elhelyezkedése, betűmérete, távolsága, a sorköz távolsága, illetve a szöveg árnyéka.

MÉRETEZÉS: milyen széles legyen a harmónikád azon belül, amekkora helyre betetted (gondolok itt arra, hogy eleve milyen arányú elrendezésben használod a modult.)

KITERJEDÉS: itt állíthatod be a margót ( a modul maga mennyire legyen az aktuálisan kiválasztott terulet széleitől),  és az eltartást ( a modul szélen belül mennyi hely legyen tartalom és a szélek között).

SZEGÉLY – BOX SHADOW:  itt adhatsz keretet és árnyékot a modulnak.

FILTERS: kipróbálhatod magára a modulra is használni ezeket a filtereket, működik, de inkább képi elemeknél látom igazán értelmét.

ANIMÁCIÓ: beálíthatod, hogy hogy bújjon elő a harmónika modulod, egyszerűen csak ott legyen állandóan, vagy ugorjon elő, ússzon be, stb.

Harmónika modul – Haladó opciók

Itt találhatod például az egyéni CSS – és HTML-attribútumokat. Itt alkalmazhatod az egyéni CSS-t a modul számos elemének bármelyikére. Megadhatsz egyéni osztályt (CLASS), vagy azonosítót (ID) is, hogy aztán a style.css-ben létrehozhass egyéni stílusokat a modulodhoz.

CSS AZONOSÍTO ÉS OSZTÁLYOK: itt adhatsz meg egyéni azonosítot, vagy osztályt, hogy erre hivatkozva tudj saját stílust kialakítani a gyerektéma style.css fájljában, ha jártas vagy már pl. a CSS-ben valamelyest.

EGYÉNI CSS: Az aktuális szövegmezőben közvetlenül hozzáadhatod az egyéni CSS-t az egyes elemekhez.

LÁTHATÓSÁG: itt tudod beállítani, hogy mely eszközökön szeretnéd megjeleníteni az adott modult, az adott beállításokkal. Hasznos lehet ez akkor, ha pl valami nem túl mutatós kisebb képernyőn, ezesetben készíthetsz egy modult kimondottan mobilra és tabletre és attól függően, hogy ki, milyen eszközön nézi épp, az adott modult fogja csak látni a beállításoknak megfelelően.

EGYEDI HARMÓNIKA – Tartalmi beállítások

Ezt a felületet akkor éred el, mikor már egy konkrét elem saját beállításaiba mész bele. Tehát, míg eddig az egész Harmónika modulra alkalmaztuk a beállításokat, most minden egyes fület egyesével tudunk designolni.

CÍM: A cím akkor jelenik meg, amikor az elem a harmonikán belül zárva van, valamint a harmonika tartalomszöveg felett, amikor az elemet megnyitják.

TARTALOM: ide jön a tartalmi rész, ami csak a harmónika lenyitott állapotában látszik. Minden más ugyanaz, mint a Harmónika modul design és haladó opcióknál annyi különbséggel, hogy itt nem tudsz külön megadni láthatóságot és animációt (tehát ezeket csak az egész modulra tudod alkalmazni), valamint egyedi azonosítót és osztályt sem tudsz hozáadni, egyedül az EGYÉNI CSS részt használhatod.

Ennyi nagyvonalakban, amit a DIVI Harmónika modul alapjairól tudni lehet.

Ha kreáltál valami érdekes designt ezzel a modullal, oszd meg velünk Facebookon, ha Klubtag vagy, lesd a heti prémium tartalmakat, mert természetesen minden modulhoz készítünk izgalmas tutorialokat, ha pedig még nem vagy, nézd meg, miből maradsz ki! 🙂

 

Mára ennyi, köszi a figyelmet, üdv,

Zió