Divi 5 modulok: fülek és szöveges effektek

Ebben a fejezetben a Divi 5-ös Visual Builderben használható fülmodul és három szöveges effekt beállításait találod. A modulok a Divi Supreme kategóriában vannak a modulválasztóban. A beállítások feliratai a builderben angolul maradnak, ezért itt is úgy szerepelnek, ahogy a felületen látod őket.

Minden modul Content és Design fülén a szokásos Divi-csoportok is elérhetők (háttér, méret, térköz, szegély, árnyék, animáció), ahol a modul támogatja őket. A Divi 4 alatt írt elrendezések Divi 5-ben való megnyitáskor átalakulnak. A tabletre és telefonra szóló külön értékeket a reszponzív beállításokkal adhatod meg.

A modulokat a Divi Supreme Pro → Modulok beállításai fülön kell bekapcsolnod, hogy megjelenjenek a modulválasztóban.

Haladó fülek (Advanced Tabs)

Fülekből álló tartalomblokk. Egyszerre egy szakasz látszik, így a hosszú tartalom nem kell, hogy egymás alá kerüljön. Jó választás GYIK-oldalakhoz, terméktulajdonságok csoportosításához vagy lépésről lépésre haladó magyarázatokhoz. Egyetlen rövid bekezdéshez felesleges, ott elég a sima szöveg.

A modul szülő és gyermek elemekből áll: a szülő a Supreme Advanced Tabs, az egyes fülek a Supreme Advanced Tabs Child elemek. A fület mindig a szülő Content füléről add hozzá (új elem gombbal), gyermek elemet külön nem tehetsz az oldalra. A fülek sorrendjét a szülő listájában húzással változtathatod, az elemeket duplikálhatod is.

A Divi Library elrendezésekből felépített tartalom a builderben néha nem pontosan jelenik meg. A weboldalon viszont helyesen látszik.

Első lépések:

1. Nyisd meg az oldalt a Divi 5 Visual Builderrel.
2. Add hozzá a Supreme Advanced Tabs modult a Divi Supreme kategóriából.
3. A Content fülön vedd fel az első fület, és töltsd ki a címét, a tartalmát.
4. A Design fülön állítsd be a színeket, a betűket és a távolságokat.
5. Mentsd az oldalt, és nézd meg a weboldalon.

Szülő: Content

Beállítás	Mit csinál
Aria Label	A fülsor akadálymentes neve, amit a képernyőolvasó felolvas. Akkor töltsd ki, ha az alapértelmezett név nem elég egyértelmű.
Layout	A fülek elrendezése.
Position	A fülsor helye. Az elrendezéstől függően vízszintes, függőleges és oszlopos helyzetnél külön lehetőséget kapsz.
Mobile/Tablet Position	A fülsor helye tableten és telefonon (függőleges és oszlopos elrendezéshez külön).
Equal Height	A fülek tartalma egyenlő magas lesz.
Trigger	A váltás módja: kattintás vagy egér ráhúzása.
Show Arrow For Active Tab	Nyilat mutat az aktív fülnél.
Content Animation	Animáció a tartalom külső burkolóján.
Inner Content Animation	Animáció a tartalom belsején.
Tabs Alignment	A fülek igazítása (vízszintes és függőleges elrendezéshez külön beállítás).
Tabs Image/Icon Placement	A fül képének vagy ikonjának helye.
Enable Deep Link	A böngésző címe a fülváltással együtt változik, így egy adott fülre mutató címet bárhová bemásolhatsz.
Enable Anchor Scroll	Bekapcsolva horgonylinkkel is megnyithatsz egy fület.
Enable Image Lightbox	A tartalom képe lightboxban nyílik meg.
Make Stick Tabs On Top	Görgetéskor a fülsor felül marad.
Stick Tabs Offset	A felül maradó fülsor eltolása (a Make Stick Tabs On Top bekapcsolása után jelenik meg).
Auto Scroll On Mobile	Mobilon váltáskor a tartalomhoz görget.

Szülő: Design

Csoport	Beállítások
Fülsor burkoló	Width, Background, Tabs Wrapper Alignment
Fülek	Gap (a fülek közti rés); normál állapotban Background, Title Color, Subtitle Color; aktív állapotban ugyanezek külön
Kép és ikon a fülön	Image Width, Icon Font Size, Icon Color, Active Icon Color
Kép és ikon a tartalomban	Alignment, Image width, Icon size, Icon color
Tartalom	Background, a Style választóval a tartalom címének vagy szövegtörzsének betűbeállításai
Gomb	Button Alignment

Gyermek elem (Advanced Tabs Child): Content

Beállítás	Mit csinál
Title	A fül címe.
Subtitle	A fül alcíme, a cím alatt jelenik meg.
Tab appearance	Normál és aktív állapot között vált, hogy mindkettőhöz külön adhass meg képet vagy ikont.
Use Icon / Image	Kép vagy ikon a fülön.
Image	A fül képe.
Use Icon, Icon	Ikon a kép helyett, és az ikon kiválasztása.
Content Type	A tartalom típusa (szöveges tartalom vagy shortcode).
Shortcode	A beillesztendő shortcode (ha a tartalom típusa ezt kéri).
Title (tartalom)	A tartalom címe.
Content	A szövegtörzs.
Use Icon / Image, Image, Use Icon, Icon (tartalom)	Kép vagy ikon a tartalmi területen.
Image/Icon Placement	A tartalom képének vagy ikonjának helye.
Button Text, Button Link URL, Button Link Target	A tartalom gombja: felirat, cél, és hogy ugyanabban az ablakban vagy új lapon nyíljon meg.
Title URL, Title URL Target	A cím linkje és célja.
Subtitle URL, Subtitle URL Target	Az alcím linkje és célja.

Gyermek elem: Design

A gyermek elem Design füle az egyes fülre vonatkozik, és felülírja a szülő beállításait: Image Width, Icon Font Size, az Icon colors választó szerint Icon Color és Active Icon Color, a tartalom képének Alignment, Image width, Icon size, Icon color értéke, valamint Button Alignment.

Tipp: kezdj 3 és 6 fül között, és a közös megjelenést a szülőn állítsd be, a gyermek elemen csak a kivételeket.

Animált színátmenetes szöveg (Animated Gradient Text)

Mozgó színátmenettel színezett szöveg. Rövid kifejezéshez, címsorhoz való, hosszú folyószövegnél ne használd. A mozgás zavarhatja az olvasást, ezért fontos bekezdéshez statikus szöveget válassz.

Content

Beállítás	Mit csinál
Animated Gradient Text	A szöveg, amelyre a színátmenet kerül.
Gradient Direction	A színátmenet szöge fokban.
Animation Speed (s)	Egy teljes színátmenet-ciklus hossza másodpercben.

Design

Beállítás	Mit csinál
Heading HTML Tag	A címsor jelölése.
#1 Gradient Color … #4 Gradient Color	A színátmenet négy színe.

Animált címsor (Animated Headlines)

Animált címsor, amelyben a szöveg egy része mozog. A címsor három részből áll: Prefix (előtte álló szöveg), az animált rész és Suffix (utána álló szöveg). Hero-címsorokhoz, szekciócímekhez, akciós sorokhoz használható. Rövid kifejezésre való.

Content

Beállítás	Mit csinál
Animated Headline Text	Az animált szöveg.
Prefix, Suffix	A szöveg előtti és utáni, állandó rész.
Effects	Az animáció fajtája. A fajtától függően a lenti beállítások közül csak a hozzá tartozók látszanak.
HTML Tag	A címsor jelölése.
Animation Delay	Az animáció késleltetése.
Letters Delay	A betűk közti késleltetés (a gépelős effektnek külön Letters Delay mezője van).
Type Selection Duration	A gépelős effektnél a kijelölés időtartama.
Clip Reveal Duration, Clip Reveal Animation Delay	A vágásos felfedés időtartama és késleltetése.
Bar Width, Bar Height, Bar Color	A hozzá tartozó sáv mérete és színe.
Text Highlight Color	A kiemelés színe.
Text Color	A szöveg színe.

Design

Beállítás	Mit csinál
Display	A prefix, az animált rész és a suffix megjelenítési módja (mindhárom részhez külön).
Prefix Background Color	A prefix háttérszíne.
Animated Headline Background Color	Az animált rész háttérszíne.
Suffix Background Color	A suffix háttérszíne.

Blokkos felfedésű szöveg (Block Reveal Text)

Először egy dekoratív színes blokk rajzolódik ki, majd ahogy zsugorodni kezd, alóla felfedi a szöveget. Négy animációtípus közül választhatsz. Rövid szövegekhez való.

Beállítás	Mit csinál
Block Reveal Text	A felfedendő szöveg.
Block Reveal Animation	Az animáció típusa.
Block Reveal Color	A takaró blokk színe.
Delay	Az animáció indulásának késleltetése.
Animate in Viewport	Mikor induljon el az animáció, amikor a modul a látható területre ér.