Bepillantás

Íme egy gyors pillantás az oktatóanyag terveire.

A koncepció

Ennek az oktatóanyagnak az alapkoncepciója a háttérmaszk és a szakaszelválasztók kombinálása, hogy még egyedibb maszkformákat hozzon létre.

Először egy háttérmaszkot adunk hozzá.

Ezután szakaszelválasztókat adunk hozzá, hogy kreatív módon egészítsük ki a maszk alakját.

Töltse le az elrendezést INGYEN

Az oktatóanyag terveinek megismeréséhez először le kell töltenie azt az alábbi gomb segítségével. A
letöltéshez való hozzáféréshez fel kell iratkoznia Divi Daily e-mail listánkra az alábbi űrlap segítségével. Új
előfizetőként minden hétfőn még több Divi jóságot és ingyenes Divi Layout csomagot kapsz! Ha már szerepel a
listán, egyszerűen írja be alább az e-mail címét, és kattintson a letöltés gombra. Nem lesz „újra feliratkozva”, és nem kap további e-maileket.

A szakaszelrendezés Divi Librarybe történő importálásához tegye a következőket:

1. Keresse meg a Divi Library-t.
2. Kattintson az Importálás gombra az oldal tetején.
3. A hordozhatóság előugró ablakában válassza az importálás lapot
4. Válassza ki a letöltött fájlt a számítógépéről (először bontsa ki a fájlt, és használja a JSON-fájlt).
5. Ezután kattintson az importálás gombra.

Ha elkészült, a szakasz elrendezése elérhető lesz a Divi Builderben.

Térjünk rá a bemutatóra, jó?

Amire szüksége van a kezdéshez

A kezdéshez a következőket kell tennie:

1. Ha még nem tette meg, telepítse és aktiválja a Divi témát .
2. Hozzon létre egy új oldalt a WordPressben, és használja a Divi Buildert az oldal szerkesztéséhez a kezelőfelületen (vizuális építő).
3. Válassza a „Semmiből építkező” lehetőséget.
4. Most már van egy üres vászna, és elkezdheti a tervezést a Divi-ban!

Háttérmaszkok és elválasztók kombinálása a Divi-ben

1. Adja hozzá a szakasz méretét és térközét

A dolgok elindításához méretet és térközt adunk a meglévő szakaszhoz az építőben. El fogjuk tartani egy sor vagy bármilyen tartalom hozzáadását, hogy a szakasz háttértervére koncentrálhassunk

Nyissa meg a szakasz beállításait. A Tervezés lapon frissítse a méretet és a térközt az alábbiak szerint:

• Minimális magasság: 50V
• Kitöltés: 0px felül, 0px alul

Furcsának tűnhet a VW hosszmértékegység használata a magasság meghatározására. Mivel azonban a VW hosszmértékegységét fogjuk használni a háttérelemeink méretezéséhez, ez biztosítja, hogy a tervezés gördülékenyen skálázódik a különböző böngészőszélességeken.

2. Hozza létre a Háttér színátmenetet

Ha a szakasznak van némi magassága, készen állunk a háttér gradiens hozzáadására a szakaszhoz. Ez ad némi háttérszínt, hogy a későbbiekben bemutathassuk a háttérmaszk és elválasztó kombinációt.

A Tartalom lapon kattintson a háttér színátmenet fülre a háttérbeállítások alatt. Ezután adjon hozzá egy színátmenetet az alábbiak szerint:

• 1. színmegállás: #1a2a6c (20%-nál)
• 2. színmegállás: #b21f1f (60%-nál)
• 2. színmegállás: #fdbb2d (100%)

3. Hozza létre a Háttérmaszkot

Most, hogy megvan a színátmenet, készen állunk egy háttérmaszk létrehozására.

A Háttérmaszk lapon frissítse a következőket:

• Maszk: Chevrons
• Maszk színe: #000
• Maszk transzformáció: fordított
• Maszk képaránya: Lásd a képernyőképet

4. Adja hozzá a szakasz háttérelválasztóit

Amint a maszkunk a helyére került, metszetelválasztók segítségével tovább módosíthatjuk a maszkolás alakját. Ebben a példában egy félkör alakú szakaszelválasztót fogunk hozzáadni a felső és az alsó részhez. Ez összenyomja a háttérmaszkot, hogy jobban hasonlítson egy díszes nyílra.

Ehhez kattintson a Tervezés fülre, és adja hozzá a következő elválasztókat:

Először adjon hozzá egy felső elválasztót a Felső fül alatt.

• Elválasztó stílusa: Lásd a képernyőképet
• Elválasztó színe: #000
• Elosztó magasság: 10V

Ezután adjon hozzá egy alsó elválasztót az Alsó fül alatt.

• Elválasztó stílusa: Lásd a képernyőképet
• Elválasztó színe: #000
• Elosztó magasság: 10V
• Elválasztó flip: Függőleges flip

Az eredmény

Íme az eddigi eredmény.

A háttérbeállítások és elválasztók módosítása további tervekhez

Most, hogy az alapötlet a helyén van, könnyedén játszhatunk a háttérbeállítások szakaszelválasztóival, hogy további terveket készíthessünk.

Alternatív kialakítás #1

Első alternatív kialakításunknál a meglévő háttérmaszkot elforgatjuk, és a félkör alakú szakaszelválasztókat háromszögekre cseréljük.

Ehhez nyissa meg a meglévő szakaszbeállításokat, kattintson a háttér Maszk fülre, és frissítse a következőket:

• Maszk átalakítása: függőleges megfordítás, forgatás
• Maszk képaránya: Lásd a képernyőképet

Ezután frissítse a szakaszelválasztókat az alábbiak szerint:

Felső osztó

• Elválasztó stílusa: Lásd a képernyőképet
• Elosztó magasság: 13VW

Alsó elválasztó

• Elválasztó stílusa: Lásd a képernyőképet
• Elosztó magasság: 13VW
• Elválasztó Flip: letiltása

Az eredmény

Íme az eredmény.

Alternatív kialakítás #2

Második és egyben utolsó alternatív kialakításunknál a Chevrons Maskot lecseréljük a Diagonal Bars 2 maszkra, és egy új felső rész elválasztót adunk neki, hogy finom súgó hatást adjunk a dizájnhoz.

Ehhez nyissa meg a meglévő szakaszbeállításokat, kattintson a háttér Maszk fülre, és frissítse a következőket:

• Maszk: Átlós rudak 2
• Maszk átalakítása: Vízszintes Flip
• Maszk képaránya: Lásd a képernyőképet

Ezután frissítse a szakaszelválasztókat az alábbiak szerint:

Felső osztó

• Elválasztó stílusa: Lásd a képernyőképet
• Elválasztó flip: Vízszintes flip

Alsó elválasztó

• Elválasztó stílus: Nincs

Az eredmény

Íme az eredmény.

Végső eredmények

Annak érdekében, hogy jobb képet kaphasson arról, hogyan fognak kinézni ezek a hátterek bizonyos tartalommal, hozzáadtam egy egyoszlopos sort egy nagy címsorral a szakasz közepén. Mindegyikhez hozzáadtam egy további dizájnt, amely tartalmaz egy képet keverési móddal.

Nézd meg őket!

A tartalomhoz és a képekhez használt beállítások felfedezéséhez bátran töltse le ennek az oktatóanyagnak az ingyenes elrendezését (lásd fent), amely tartalmazza az egyes terveket.