Divi 5 modulok: ikonos elválasztó és ikonlista

Ebben a fejezetben két ikonos modult találsz. Mindkettő a Divi Supreme kategóriában van a modulválasztóban, és a Divi Supreme Pro → Modulok beállításai fülön kell bekapcsolnod őket. A beállítások feliratai a builderben angolul maradnak. A szokásos Divi-csoportok (háttér, méret, térköz, szegély, árnyék, animáció) ott érhetők el, ahol a modul támogatja őket.

Ikonos elválasztó (Supreme Icon Divider)

Elválasztó vonal, amelynek közepére ikont vagy képet tehetsz. Sok vonalstílus közül választhatsz, és az ikont igazíthatod is.

1. Add hozzá a Supreme Icon Divider modult a Divi Supreme kategóriából.
2. A Content fülön döntsd el, ikont vagy képet használsz.
3. A Design fülön állítsd be az ikon és a vonal megjelenését.
4. Mentsd az oldalt, és nézd meg a weboldalon.

Content

Beállítás	Mit csinál
Use Icon	Bekapcsolva az alatta kiválasztott ikont használja, kikapcsolva a képet.
Image	A vonal mellett megjelenő kép.
Icon	A megjelenő ikon.

Design

Beállítás	Mit csinál
Icon Color	Az ikon színe.
Circle Icon	Az ikon körben jelenik meg.
Circle Color	A kör színe.
Show Circle Border	A kör szegélyének megjelenítése.
Circle Border Color	A kör szegélyének színe.
Use Icon Font Size	Bekapcsolva külön ikonméretet adhatsz meg.
Icon Font Size	Az ikon mérete.
Alignment	Az ikon igazítása.
Color	Az elválasztó vonal színe.
Divider Style	A vonal stílusa.
Divider Position	A vonal helye az ikonhoz képest.
Image Width	A kép szélessége.
Divider Weight	A vonal vastagsága.
Icon Gap	A rés az ikon és a vonal között.

Ikonlista (Supreme Icon List)

A Divi Blurb modulhoz hasonló, de rendezettebb lista, amelynek minden elemén ikon vagy kép látszik. A modul szülő és gyermek elemekből áll: a szülő a Supreme Icon List, a lista sorai a gyermek elemek. A sorokat mindig a szülő Content füléről add hozzá, gyermek elemet külön nem tehetsz az oldalra. Kezdj 3 és 6 elem között, és a közös stílust a szülőn finomítsd.

1. Add hozzá a Supreme Icon List modult a Divi Supreme kategóriából.
2. A Content fülön vedd fel az első elemet, és töltsd ki a mezőit.
3. A Design fülön állítsd be a színeket, az ikonméretet és az elrendezést.
4. Mentsd az oldalt, és nézd meg a weboldalon.

Szülő: Design

Beállítás	Mit csinál	Alapérték
Text Indent	Térköz az ikonok és a szöveg között.	5px
Icon Color	Az ikonok színe.
Icon Background Color	Az ikonok háttérszíne.
Icon Gap Width	Az ikon körüli rés szélessége.
Icon Padding	Az ikon belső térköze.
Icon Font Size	Az ikonok mérete.	14px
Image Background Color	A képek háttérszíne.
Image Padding	A képek belső térköze.
Image Width	A képek szélessége.	24px
Layout	A lista függőleges vagy vízszintes.	vertical
Alignment	A lista igazítása a modulon belül.	flex-start
Vertical Alignment	A lista függőleges igazítása.	center
Direction	Az irány: balról jobbra vagy jobbról balra.	ltr
Space Between	Az elemek közti távolság.	0px
Background Color	A listaelemek háttérszíne.

Gyermek elem: Content

Beállítás	Mit csinál	Alapérték
Text	Az elem szövege.	Icon List Item
Use Icon	Ikon használata az alatta kiválasztott ikonnal.	be
Icon	A szöveg mellett megjelenő ikon.
Icon Color	Az ikon színe.
Icon Background Color	Az ikon háttérszíne.
Image	Kép az ikon helyett.
Use Tooltip	Buborék (tooltip) az elemhez.	ki
Content	A buborék szövege.

Gyermek elem: Design

Beállítás	Mit csinál	Alapérték
Icon Color, Icon Background Color	Csak erre az elemre érvényes ikonszín és háttér.
Icon Padding	Az ikon belső térköze.
Icon Font Size	Az ikon mérete.	14px
Image Background Color, Image Padding	A kép háttere és belső térköze.
Image Width	A kép szélessége.	24px
Placement	A buborék helye az elemhez képest.	right
Background Color	A buborék háttérszíne.
Tooltip Max Width	A buborék legnagyobb szélessége.

A gyermek elem Design beállításai felülírják a szülő közös beállításait, ha egy elemnek más megjelenés kell.