Oddeľovače sekcií sú naďalej obľúbeným dizajnovým prvkom divi. Existuje veľa štýlov oddeľovačov vrátane niektorých užitočných možností, ktoré uľahčujú pridávanie jedinečných prechodov a pozadí na vašu stránku.
V tomto návode použijeme oddeľovače sekcií trochu inak. Divi vám umožňuje nastaviť výšku a rozloženie každej prepážky. To nám umožňuje umiestniť oddeľovače nad určité oblasti alebo obsah v sekcii. Použitím možnosti vznášania pre výšku oddeľovača môžeme pridať jedinečné efekty vznášania odhaľujúce a obsah čiastočne skryté. Funguje to skvele, ak chcete upozorniť na výzvu na akciu alebo konkrétne tlačidlo, na ktoré majú ľudia kliknúť. Návštevníci kliknite.
Začnime.
Vzorový výsledok
Čo potrebujete, aby ste začali
Na začiatok potrebujete nasledujúce kroky:
- Le Divi téma nainštalované a aktívne
- Nová stránka vytvorená na vytvorenie úplne od začiatku (vizuálny konštruktor)
- Niektoré fiktívne obrázky použité v dizajne. Budem používať niektoré obrázky s priehľadným pozadím z Rozloženie balenia Juice Shop .
Potom ste pripravení začať!
Implementácia návrhu efektu rozdeľovača výšky oddielu v Divi
Vytvorenie sekcie a čiary
Začnime vytvorením pravidelnej sekcie s radom dvoch stĺpcov.
Pred pridaním modulu otvorte nastavenia sekcie a aktualizujte nasledujúce položky:
Ľavý gradient pozadia: #73ba57
Pravý gradient na pozadí: #2a4c23
Šírka: 80%
Maximálna šírka: 1080px
Zarovnanie sekcie: Stred
Môžete si však tiež zvoliť farebnú schému, ktorá sa vám páči podľa vášho obrázka. moja farebná schéma je: # fff200 - # e09900 v gradiente.
Pridajte názov sekcie
Ak chcete pridať názov sekcie, vytvorte textový modul a aktualizujte ho obsah tela s nasledujúcou hlavičkou h2:
Džús
Potom aktualizujte výkres nasledovne:
Nadpis 2 Písmo: Lato
Nadpis Veľkosť textu 2: 80px
Nadpis 2 Riadkovanie písmen: -5px
Marža: -50px hore, -40px dole
Z-index: -1
Vlastný okraj a index z umožnia, aby text sedel za obrázkom, ktorý pridáme v ďalšom kroku.
Pridať obrázok
Pod textový modul s nadpisom v stĺpci 1 pridajte obrázkový modul. Potom nahrajte obrázok s priehľadným pozadím. Používam obrázok z Juice Shop Layout Pack, ktorý je 240 pixelov x 300 pixelov.
Upravte zarovnanie obrázka do stredu.
Pridanie výzvy k akcii v stĺpci 2
V stĺpci 2 pridajte hovor do modulu akcie.
Pridajte URL odkazu na tlačidlo, aby ste sa uistili, že je tlačidlo zobrazené.
Štýl pozadia a názvu CTA
Potom aktualizujte nasledujúce konštrukčné parametre:
Farba pozadia: #ffffff
Farba textu:
Názov písma: Lato
Názov Politika váhy: Ťažká
Názov Štýl písma: TT
title Veľkosť textu: 18px
Štylizujte tlačidlo CTA
Dizajn tlačidla aktualizujte nasledovne:
Farba textu tlačidla: #ffffff
Farba pozadia tlačidla: # e09900
Šírka okraja tlačidla: 0 px
Styling hranice CTA
Potom pridajte orámovanie a orámujte modul nasledovne:
Šírka ohraničenia: 10px
Farba orámovania: rgba (224,145,0,0.25)
Pridaný efekt rozdeľovača výšky oddeľovača na odhalenie výzvy na akciu
Teraz je čas pridať efekt vznášania výšky oddielu, aby ste odhalili výzvu k akcii. Aby sme to dosiahli, musíme si najskôr vytvoriť rozdeľovače sekcií.
Pridanie horného oddeľovača
Otvorte parametre sekcie a horný oddeľovač s nasledujúcimi parametrami.
Štýl horného rozdeľovača: pozri snímku obrazovky Farba horného rozdeľovača: # 73ba57 Výška horného rozdeľovača: 70% (predvolené), 0% (vznášanie sa)
Vyklápací horný rozdeľovač: vodorovný
Všimnite si, že výška oddeľovača začína predvolenou výškou 70% a potom sa pri prevrátení presunie na výšku 0%.
Pridanie dolného deliča
Potom pridajte dolný oddeľovač podobný oddielu s nasledujúcimi parametrami.
Štýl horného rozdeľovača: pozri snímku obrazovky Farba horného rozdeľovača: # 73ba57 Výška horného rozdeľovača: 70% (predvolené), 0% (vznášanie sa)
Vyklápací horný rozdeľovač: vodorovný
Rozloženie rozdeľovača: V hornej časti sekcie Obsah
Tento oddeľovač pozadia tiež začína s výškou 70%, ktorá sa pri vznášaní zmení na 0%. Pretože je však voľba rozloženia oddeľovača nastavená v hornej časti obsahu, oddeľovač oddielov skryje spodnú časť výzvy na akciu v stĺpci 1. Potom pri umiestnení kurzora myši zvyšok zvyšku l výzva na akciu je zverejnená.
Skontrolujte doterajší výsledok.
Pre jedinečný prechod a dizajn bol pridaný efekt zatienenia kurzorom myši
Pre jedinečný prechod a dizajn vznášania môžeme pridať efekt tieňového vznášania poľa, ktorý sa uskutoční súčasne s efektom vznášadla výšky rozdeľovača. Ak to chcete urobiť, do časti pridajte tieň nasledujúceho poľa.
Tieň poľa: pozri snímku obrazovky
Box Shadow Horizontálna pozícia: 0px
Vertikálna poloha tieňa poľa: 0px
Sila šírenia tieňov v rámčeku: 0px (predvolené), 150px (vznášanie sa)
Farba tieňa poľa: #73ba57
Spomalte trvanie prechodu
Posledným krokom je spomalenie trvania prechodu.
Trvanie prechodu: 700ms
Konečný výsledok
Toto je konečný výsledok na pracovnej ploche.
Na základe toho, čo sme urobili vyššie, budete môcť prispôsobiť zobrazenie v mobilných zariadeniach a tabletoch.
záverečné myšlienky
Dúfam, že vám tento návod dal inšpiráciu na vytvorenie jedinečných efektov rozdeľovača výšky oddielu na odhalenie obsahu. V skutočnosti môže byť nastavenie výšky vznášacieho oddeľovača pozoruhodným dizajnovým prvkom. A vzorky vzorov by vám mali pomôcť začať vlastné skúmanie a vlastné návrhy.
Dúfam, že sa mi ozvete v komentároch.
Na vaše zdravie!
