Chceli by ste vedieť, ako odhaliť obsah pri umiestnení kurzora myši nad oddeľovač sekcií v divi ?
Oddeľovače sekcií sú naďalej dizajnovým prvkom divi populárny. Na výber je veľa štýlov oddeľovačov s užitočnými možnosťami, 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 umožňuje nastaviť výšku a rozloženie každého rozdeľovača. To nám umožňuje umiestniť oddeľovače nad určité oblasti alebo obsah oddielu.
Použitím možnosti vznášania pre výšku oddeľovača môžeme pridať jedinečné efekty vznášania, ktoré odhalia a obsah čiastočne skryté. Funguje to skvele, ak chcete upozorniť na konkrétnu výzvu na akciu alebo tlačidlo, na ktoré majú ľudia kliknúť. Návštevníci kliknite.
prehľad
Stiahnite si DIVI teraz!!!
Vytvorte novú stránku pomocou Divi Builder
Na hlavnom paneli WordPress prejdite na Stránky> Pridať nové vytvoriť novú stránku.
Dajte tomu názov, ktorý vám dáva zmysel, a kliknite Použite Divi Builder
potom kliknite na tlačidlo Začnite stavať (Stavať od nuly)
Potom budete mať prázdne plátno, aby ste mohli začať navrhovať v Divi.
Návrh efektu vznášania rozdeľovača sekcií v Divi
Vytvorenie sekcie a čiary
Vytvorte pravidelnú sekciu s dvojstĺpcovým riadkom.
Pred pridaním modulu otvorte nastavenia sekcie a aktualizujte nasledovné:
Prechod pozadia (vľavo): #73ba57
Prechod pozadia (vpravo): #2a4c23
Šírka: 80 %
Maximálna šírka: 1 pixelov
Zarovnanie sekcie: Stred
Pridajte názov sekcie
Ak chcete pridať názov sekcie, vytvorte modul Text a vložte nasledujúci text:
<h2>The Juice</h2>
Potom aktualizujte dizajn takto:
Písmo: Lato
Veľkosť textu: 80px
Medzera medzi písmenami: -5px
Okraj: -50px (hore), -40px (dole)
Index Z: -1
Vlastný okraj a z-index umožnia, aby text zostal za obrázkom, ktorý pridáme v ďalšom kroku.
Pridať obrázok
Do modulu Text s nadpisom v stĺpci 1 pridajte modul Obrázok. Potom nahrajte obrázok s priehľadným pozadím. Používame obrázok z balíka rozloženia Juice Shop 240 pixelov na 300 pixelov.
Úprava zarovnania obrazu na stred.
Pridajte modul „Výzva na akciu“ do stĺpca 2
V stĺpci 2 pridajte modul Výzva na akciu.
Pridajte adresu URL odkazu na tlačidlo, aby ste sa uistili, že sa tlačidlo zobrazí.
Štýl pozadia a nadpisu výzvy na akciu
Ďalej aktualizujte nasledujúce nastavenia dizajnu:
Pozadie: #ffffff
Farba textu: tmavá
Písmo názvu : Lato
Hmotnosť písma názvu: Ťažká
Štýl písma: TT
Veľkosť textu nadpisu: 18px
Prispôsobte tlačidlo CTA
Aktualizujte dizajn tlačidla takto:
- Použiť vlastné štýly pre tlačidlo: ÁNO
- Farba textu tlačidla: #ffffff
- Farba pozadia tlačidla: #73ba57
- Šírka orámovania: 0px
Prispôsobte orámovanie modulu CTA
Potom pridajte orámovanie na rámovanie modulu takto:
Šírka orámovania: 10px
Farba okraja: rgba (115,186,87,0.15)
Pridaný efekt vznášania sa do rozdeľovača, aby sa odhalil modul „Call To Action“.
Teraz je čas pridať do oddeľovača sekcií efekt vznášania, aby ste odhalili modul „Call To Action“. Aby sme to dosiahli, musíme najprv vytvoriť rozdeľovače sekcií.
Čítajte tiež: Divi: Ako odhaliť obsah pri umiestnení kurzora myši na karty
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 oddeľovača: 70 % (predvolené), 0 % (umiestnenie)
Preklopenie horného rozdeľovača: horizontálne
Všimnite si, že výška oddeľovača začína predvolenou výškou 70 %, potom sa po umiestnení kurzora myši zmení na výšku 0 %.
Pridaný spodný rozdeľovač
Potom pridajte dolný oddeľovač podobný oddielu s nasledujúcimi parametrami.
- Štýl spodného oddeľovača: pozri snímku obrazovky
- Farba spodného oddeľovača: #73ba57
- Výška oddeľovača: 70 % (predvolené), 0 % (umiestnenie)
- Preklopenie rozdeľovača: Horizontálne
- Usporiadanie: Nad obsahom sekcie
Tento spodný oddeľovač tiež začína s výškou 70 %, ktorá pri vznášaní klesne na 0 %. Keďže je však možnosť usporiadania rozdeľovača nastavená nad obsahom, rozdeľovač sekcií skryje spodnú časť modulu „Výzva na akciu“ v stĺpci 1. Potom sa po prejdení myšou odkryje zvyšok modulu.
Skontrolujte doterajší výsledok.
Stiahnite si DIVI teraz!!!
Pridaný efekt tieňa boxu pre jedinečný prechod a dizajn
Pre jedinečný prechod a dizajn pri vznášaní môžeme pridať efekt box shadow hover, ktorý bude prebiehať súčasne s efektom rozdeľovacieho vznášania. Ak to chcete urobiť, pridajte do sekcie nasledujúci tieň poľa.
- Box Shadow: pozri snímku obrazovky
- Horizontálna pozícia: 0px
- Vertikálna pozícia: 0px
- Sila rozloženia rámčeka: 0px (predvolená), 150px (umiestnenie kurzorom myši)
- Farba tieňa: #73ba57
Spomalte trvanie prechodu
Posledným krokom je spomalenie trvania prechodu.
Trvanie prechodu: 700 ms
Konečný výsledok
Teraz, keď sme prešli všetkými krokmi, pozrime sa na konečný výsledok.
Stiahnite si DIVI teraz!!!
záver
Dúfame, že vám tento článok dal nejakú inšpiráciu na vytvorenie jedinečných efektov vznášania sa na rozdeľovač sekcií na odhalenie obsahu.
V skutočnosti môže byť nastavenie hover splitteru samo osebe skvelým dizajnovým prvkom. Okrem toho by vám vzorové návrhy mali pomôcť začať s vlastným prieskumom a návrhmi.
Dúfame, že vás tento návod inšpiruje pre vaše ďalšie Divi projekty. Ak máte nejaké obavy alebo návrhy, nájdite nás v časť s komentármi diskutovať o tom.
Môžete sa tiež poradiť naše zdroje, ak potrebujete viac prvkov na realizáciu svojich projektov tvorby internetových stránok, konzultujte nášho sprievodcu na internete Tvorba blogu WordPress alebo jeden na Divi: najlepšia téma WordPress všetkých čias.
Ale medzičasom zdieľajte tento článok na rôznych sociálnych sieťach.
...
