Oddělovače sekcí jsou i nadále oblíbeným designovým prvkem Divi. Existuje mnoho stylů oddělovačů, včetně některých užitečných možností, které usnadňují přidávání jedinečných přechodů a pozadí na stránku.
V tomto tutoriálu použijeme oddělovače sekcí trochu jinak. Divi umožňuje upravit výšku a rozložení každé přepážky. To nám umožňuje umístit oddělovače nad určité oblasti nebo obsah v sekci. Použitím možnosti hover pro výšku rozdělovače můžeme přidat jedinečné efekty hover odhalující a obsah částečně skryté. Funguje to skvěle, když chcete upozornit na výzvu k akci nebo konkrétní tlačítko, na které mají lidé kliknout. Návštěvníci klikněte.
Začněme.
Ukázkový výsledek
Co potřebujete, abyste mohli začít
Chcete-li začít, potřebujete následující:
- Le Divi téma nainstalované a aktivní
- Nová stránka vytvořená k vytvoření od začátku na front-endu (vizuální konstruktér)
- Některé fiktivní obrázky použité v designu. Budu používat některé obrázky s průhledným pozadím z Rozložení balení Juice Shop .
Poté jste připraveni začít!
Implementace designu efektu rozdělovače výšky sekce v Divi
Vytvoření sekce a linie
Začněme vytvořením pravidelné sekce s řadou dvou sloupců.
Před přidáním modulu otevřete nastavení sekce a aktualizujte následující:
Levý přechod na pozadí: #73ba57
Pravý přechod na pozadí: #2a4c23
Šířka: 80%
Maximální šířka: 1080px
Zarovnání sekce: Střed
Můžete si však také vybrat barevné schéma, které se vám líbí podle vašeho obrázku. moje barevné schéma je: # fff200 - # e09900 v přechodu.
Přidat název sekce
Chcete-li přidat název sekce, vytvořte textový modul a aktualizujte jej obsah těla s následujícím záhlavím h2:
Džus
Poté aktualizujte výkres následujícím způsobem:
Záhlaví 2 Písmo: Lato
Nadpis 2 Velikost textu: 80px
Nadpis 2 Rozteč písmen: -5px
Okraj: -50px nahoře, -40px dole
Z-Index: -1
Vlastní okraj a index z umožní textu sedět za obrázek, který přidáme v dalším kroku.
Přidat obrázek
Pod textový modul s nadpisem ve sloupci 1 přidejte modul obrázku. Poté nahrajte obrázek s průhledným pozadím. Používám obrázek Juice Shop Layout Pack 240 x 300 pixelů.
Upravte zarovnání obrazu do středu.
Přidání výzvy k akci ve sloupci 2
Ve sloupci 2 přidejte volání do akčního modulu.
Přidejte URL odkazu na tlačítko, abyste se ujistili, že je tlačítko zobrazeno.
CTA pozadí a titulní styl
Poté aktualizujte následující konstrukční parametry:
Barva pozadí: #ffffff
Barva textu:
title Písmo: Lato
Název Hmotnost Zásady: Heavy
Název Styl písma: TT
title Velikost textu: 18px
Stylizujte tlačítko CTA
Aktualizujte návrh tlačítka následujícím způsobem:
Barva textu tlačítka: #ffffff
Barva pozadí tlačítka: # e09900
Tlačítko Šířka šířky: 0 px
Stylování hranice CTA
Poté přidejte orámování, které modul vytvoří takto:
Šířka hranice: 10px
Barva ohraničení: rgba (224,145,0,0.25)
Přidán efekt rozdělovače výšky oddělovače pro odhalení výzvy k akci
Nyní je čas přidat efekt vznášení výšky dělení sekce, aby se odhalila výzva k akci. Abychom to mohli udělat, musíme nejprve vytvořit naše děliče oddílů.
Přidání horního oddělovače
Otevřete parametry sekce a horní oddělovač s následujícími parametry.
Styl horního děliče: viz screenshot Barva horního děliče: # 73ba57 Výška horního děliče: 70% (výchozí), 0% (vznášení)
Překlopit horní dělič: vodorovně
Všimněte si, že výška oddělovače začíná výchozí výškou 70% a poté se při převrácení přesune do výšky 0%.
Přidání dolního děliče
Poté přidejte dolní oddělovač podobný oddílu s následujícími parametry.
Styl horního děliče: viz screenshot Barva horního děliče: # 73ba57 Výška horního děliče: 70% (výchozí), 0% (vznášení)
Překlopit horní dělič: vodorovně
Rozložení oddělovače: V horní části sekce Obsah
Tento oddělovač pozadí také začíná výškou 70%, která se při přechodu změní na 0%. Protože je však možnost rozložení oddělovače nastavena v horní části obsahu, oddělovač oddílů skryje spodní část výzvy k akci ve sloupci 1. Potom při přechodu myší zbytek l výzva k akci je odhalena.
Podívejte se na výsledek tak daleko.
Přidán efekt přechodu stínu rámečku pro jedinečný přechod a design
Pro jedinečný přechod a design vznášení můžeme přidat efekt stínu vznášení rámečku, který proběhne současně s efektem vznášení výšky rozdělovače. Chcete-li to provést, přidejte do sekce stín následujícího pole.
Shadow Box: viz screenshot
Box Stín Horizontální pozice: 0px
Box Shadow Vertical Position: 0px
Síla šíření stínu pole: 0px (výchozí), 150px (vznášení se)
Barva rámečku: #73ba57
Zpomalte dobu přechodu
Posledním krokem je zpomalení trvání přechodu.
Trvání přechodu: 700ms
Konečný výsledek
Zde je konečný výsledek na ploše.
Na základě toho, co jsme provedli výše, budete moci přizpůsobit zobrazení na mobilních zařízeních a tabletech.
Závěrečné myšlenky
Doufám, že vám tento výukový program poskytne inspiraci k vytvoření jedinečných efektů oddělovače výšky oddělovače oddílů, které odhalí obsah. Ve skutečnosti může být nastavení výšky vznášejícího se děliče pozoruhodným designovým prvkem. Ukázky návrhů by vám měly pomoci zahájit vlastní průzkum a vlastní návrhy.
Doufám, že se vám ozvete v komentářích.
K vašemu zdraví!
