Divi – szakaszok (sections) beállításai

július 19, 2019

szerző: Flora

A Divi felépítését bemutató cikkben már szó volt szakaszokról, sorokról és modulokról, de a beállításokat, lehetőségeket nem tekintettük át részletesen. Ebben a cikkben a szakaszok (emlékeztetőül: a kék dobozok, angolul sections) beállításait fogjuk megnézni.

 

A szakasz beállításait itt érjük el:

Divi - szakaszok (sections) beállításai 1

A beállításokon belül három fül vár minket: Tartalom (Content), Design, Haladó (Advanced)

Divi - szakaszok (sections) beállításai 2

1) Content/Tartalom

a) Link

Ha itt megadunk egy url-t, akkor a szakaszon belül bárhova kattintva átkerülünk a megadott linkre. Az url alatt kiválaszthatjuk, hogy ugyanabban vagy új ablakban nyíljon meg a megadott link.

Divi - szakaszok (sections) beállításai 3

b) Background/Háttér

Divi - szakaszok (sections) beállításai 4

Négyféle hátteret adhatunk a szakasznak (sorrendben balról jobbra):

i) Szín

ii) Színátmenet – itt megadhatjuk azt is, hogy körkörös vagy egyenes legyen az átmenet, és hogy milyen irányban/szögben változzon a szín

iii) Kép

iv) Videó

c) Admin label/Admin címke

Ennek funkcionalitása nincsen, csak neked lesz könnyebb utána azonosítani, hogy melyik szakaszban mi van. Ha az alapértelmezésen hagyod, akkor minden szakaszodat “Szakasz”nak vagy “Section”nek fogják hívni, és így első ránézésre nehezebben látszik, hogy milyen tartalom van benne.

Divi - szakaszok (sections) beállításai 5

2) Design

a) Layout

Inner shadow vagyis belső árnyék adható a szakaszunknak: ez az egész szakaszt fogja körbevenni, közvetlenül a tartalom körül, de ha adunk a szakasznak paddinget, akkor a belső árnyék és a tartalom között marad hely. Ennek az árnyéknak a hátránya, hogy nem lehet beállítani a színét és az erősségét, ha ezeket is szeretnéd állítani, akkor a box shadow beállítást használd, lásd itt: katt ide!

Divi - szakaszok (sections) beállításai 6

b) Dividers/Elválasztó

Divi - szakaszok (sections) beállításai 7

Itt elválasztókat adhatunk a szakaszok közé (az egyes szakaszok aljára és/vagy tetejére), ezeknek megadhatjuk a színét, és sokféle előre legyártott forma közül választhatunk. Ha az adott oldal például több tartalmi részből áll, akkor egy-egy elválasztó a különböző tartalmak között nagyon feldobhatja az elrendezésünket.

c) Sizing/Méretezés

i) Width/Szélesség

Itt megadhatjuk, hogy a szakasz az egész képernyő hány százalékát fedje le. A 100% (nem nagy meglepetés) az egész képernyőre kiterjed, ha például csak 50%-ot állítunk be, akkor marad mellette üres hely.

Divi - szakaszok (sections) beállításai 8

ii) Max Width/Maximum szélesség

Divi - szakaszok (sections) beállításai 9

Itt képernyőmérettől függően adhatjuk meg a szakaszunk legnagyobb szélességét. Beállíthatjuk például, hogy laptopon csak a képernyő 75%-át fedje le, mobilon és tableten viszont legyen teljes képernyős. Ha a maximum szélességnek kisebb százalékot adunk meg, mint az előző szélességnek, akkor a két beállításból az utóbbi fog nyerni és felülírja az előzőt!

iii) Section alignment/szakasz igazítása

A szakaszunk lehet balra, középre vagy jobbra igazított. Értelemszerűen ha a szakaszunk 100% széles, akkor ez nem állítható, hiszen mindenképpen kitölti a teljes képernyőt.

Divi - szakaszok (sections) beállításai 10

iv) Min Height, Height, Max Height/Minimum és maximum magasság

Divi - szakaszok (sections) beállításai 11

A szélességhez hasonlóan a magasságot is beállíthatjuk. Itt is igaz, hogy ha a magasság értéke kisebb mint a minimum magasság vagy nagyobb mint a maximum magasság, akkor a minimum és maximum fognak nyerni.

d) Spacing/Kitöltés

i) Margin/margó

Ez a szakaszon kívül ad egy margót, tehát a szakasz körül egy sávban nem lesz más tartalom.

Divi - szakaszok (sections) beállításai 12

ii) Padding/kitöltés

Divi - szakaszok (sections) beállításai 13

Ez a szakaszon belül adja hozzá a távolságot, fontos különbség a margóhoz képest tehát, hogy a padding a szakasz területén belül van, a szakasz hátterét veszi át, és a tartalmat nyomja össze. Erről itt olvashatsz kicsit bővebben.

e) Border/Szegély

i) Rounded Corners/Lekerekített sarkok

Itt állíthatjuk be, hogy le legyenek-e kerekítve a keret sarkai és ha igen, mennyire. Ha segítségre van szükséged a négy sarok összekapcsolásában/külön választásában, akkor olvasd el a leírást a Tudástárban!

Divi - szakaszok (sections) beállításai 14

ii) Border Styles/Szegély stílusok

Divi - szakaszok (sections) beállításai 15

Tehetünk csak felülre/alulra/oldalra keretet, vagy persze körbe is.

iii) Border Width/Szegély vastagság

A keret szélessége, pixelben

Divi - szakaszok (sections) beállításai 16

iv) Border Color/Szegély szín

Divi - szakaszok (sections) beállításai 17

Ezen nincs mit magyarázni:)

v) Border Style/Szegély stílus

A szegélyvonal stílusa: szimpla, dupla, megszakított, pöttyös, stb.

Divi - szakaszok (sections) beállításai 18

f) Box shadow/Árnyék

Divi - szakaszok (sections) beállításai 19

Különböző árnyékokból választhatunk, melyeket a képek illusztrálnak. Ha valamelyiket kiválasztottuk, akkor megjelenik alatta több opció az árnyék testreszabására: külső vagy belső, árnyék színe, hossza.

g) Filters/Filterek

Ezek a beállítások hasonlóak az instagramos/telefonos képszerkesztéshez: fényerő, kontraszt, telítettség, színskála, szépia, elmosódás, ilyesmiket állíthatunk be.

Divi - szakaszok (sections) beállításai 20

h) Animation/Animáció

Divi - szakaszok (sections) beállításai 21

Ez pedig a PowerPoint diáinak animálásához hasonlít: kiválaszthatunk különböző animációkat, amelyekkel megjelenhet a szakaszunk, majd beállíthatjuk az animáció irányát, időtartamát, késleltetését, ismétlődését.

3) Advanced/Haladó

a) CSS ID, Class/CSS azonosító, osztály

Itt adhatsz a szakaszodnak egy CSS ID-t vagy class-t, amivel aztán a CSS szerkesztőben hivatkozhatsz rá. Erről nézd meg a Tudástárban az erről szóló cikket.

Divi - szakaszok (sections) beállításai 22

b) Custom CSS/Egyéni CSS

Divi - szakaszok (sections) beállításai 23

Beírhatod a CSS kódodat, ez viszont csak erre a szakaszra fog vonatkozni, ha másik szakaszra is ugyanezt alkalmaznád, akkor vagy oda is be kell majd írnod ugyanazt a kódot, vagy adhatsz egy CSS classt mindkettőnek és egyszerre formázhatod őket a CSS szerkesztőben ld. Tudástár).

c) Visibility/Láthatóság

Ha azt szeretnéd, hogy egy bizonyos szakasz csak pl. Laptopképernyőn jelenjen meg és tableten és mobilon ne, akkor itt ezt ki tudod kapcsolni.

Divi - szakaszok (sections) beállításai 24

i) Z-index

Divi - szakaszok (sections) beállításai 25

Ha tanultál valamennyi alap CSS-t, akkor ismerős ez a fogalom, ha nem, akkor sem bonyolult megérteni;) Tovább a Tudástárra!

d) Transitions/Átmenet

Ez a hover animáció időtartamát, késleltetését és sebességét állítja be (hover: amikor az egeret pl egy gomb fölé húzod, és a gomb megnő/bármilyen módon megváltozik, jelezve, hogy fölötte állsz az egérmutatóval).

Divi - szakaszok (sections) beállításai 26

Remélem, hasznos volt a cikk, ha kérdésed merült fel, tedd fel a Facebook oldalamon és igyekszem válaszolni 😉

További cikkek

Október 17-én érkezik az új Divi 4.0

Október 17-én érkezik az új Divi 4.0

Megérkezett a Divi 4.0 és amíg várunk rá, egy nyereményjátékban is részt lehet venni, aminek a kereteiben kisorsolnak egy 15"-os Macbook Pro-t. Itt találod a részleteket>>Theme builder - az új sablon építő A Divi sablonnal és a Divi builder pluginnal már eddig...

Hogyan épül fel a Divi? – Útmutatás kezdőknek

Hogyan épül fel a Divi? – Útmutatás kezdőknek

A Divi sablon rengeteg variációra ad lehetőséget, szinte bármit meg lehet csinálni benne, és a használata sem bonyolult, de van néhány dolog, amit mindenképpen érdemes tudni róla, mert különben nagyon gyorsan nagyon meglepő dolgok történhetnek szerkesztés közben. Egy...

Hogyan válasszunk WordPress sablont és miért jó a Divi?

Hogyan válasszunk WordPress sablont és miért jó a Divi?

Ha weboldalt szeretnénk építeni/szerkeszteni, rengeteg sablon közül választhatunk, és ezeknek a száma egyre csak nő. Egy sablont elsősorban a kinézete vagy elrendezése miatt választunk ki, de azt is fontos szem előtt tartani, hogy milyen funkciókat kapunk vele. Ha egy...

Hírlevél

Palackposta tagság