Chcete vytvoriť karty s efektom vznášania sa z riadkov s divi ?
Karty sú určite užitočné na sprístupnenie dôležitých informácií v stručnej oblasti webové stránky. To znižuje potrebu používateľa posúvať obsah z dlhej strany. Modul karty divi sa ľahko používa a je ideálny na prehliadanie a obsah jednoduché na jedno kliknutie.
Ale v tomto návode vám ukážeme, ako previesť riadky divi a zobrazí sa pri umiestnení kurzora myši.
Ukážeme vám tiež, ako vytvoriť vodorovné a zvislé karty. To odomkne silu Divi vytvárať kompletné rozloženia s viacerými modulmi pre každú oblasť obsah tab.
Nie sú potrebné žiadne pluginy!
Začnime.
prehľad
Tu je prehľad kariet, ktoré spolu vytvoríme v tomto návode.
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.
Vytváranie vodorovných kariet s prechodom pomocou „riadkov Divi“
V predvolenej sekcii pridajte riadok s dvoma stĺpcami.
Čiarové pozadie, výplň poľa a tieň
Pred pridaním našich modulov si najprv trochu prispôsobíme nastavenia riadkov. Otvorte Nastavenia linky a aktualizujte nasledovné:
- Farba ľavého gradientu: #284f91
- Farba pravého gradientu: #4646c4
- Výplň: 50 pixelov (hore a dole), 50 pixelov (vľavo a vpravo)
- Box Shadow: pozri snímku obrazovky
- Box Shadow Color: rgba (70,70,196,0.66)
Pridajte obsah do riadku
Teraz do nášho riadka pridáme zástupný obsah. V stĺpci 1 pridajte obrázok podľa vlastného výberu pomocou modulu Obrázok. Tu sme použili obrázok z balíka rozloženia « Dizajnový balík na usporiadanie konferencie« .
V pravom stĺpci pridajte modul Výzva k akcii a aktualizujte nasledovné:
- Adresa URL odkazu na tlačidlo: # (iba na zobrazenie tlačidla)
- Použiť farbu pozadia: NIE
- Zarovnanie textu: vľavo
- Písmo názvu : Lato
- Veľkosť textu nadpisu: 60px (počítač), 50px (telefón)
Vytvorenie karty
Ak chcete vytvoriť skutočnú kartu, na ktorú používatelia umiestnia kurzor myši, aby sa zobrazil obsah tohto riadka, musíme vytvoriť modul Text a umiestniť ho vpravo hore pomocou vlastného CSS.
Pokračujte a pridajte nový textový modul pod obrázok v stĺpci 1 a aktualizujte nasledujúce:
- Telo: "Tab 1"
- Pozadie: #284f91 (toto by malo zodpovedať farbe ľavého prechodu čiary)
- Zarovnanie textu: na stred
- Farba textu: #ffffff
- Šírka: 100 pixelov
- Výška: 50px
- Okraj: -100px (hore), -50px (vľavo)
- Výplň: 14 pixelov (horná časť)
Nakoniec pridajte nasledujúci vlastný css do hlavného prvku, aby ste získali absolútnu pozíciu v hornej časti riadku.
position: absolute !important;
top: 0;
Výška a rozstup sekcie
Zatiaľ otvorte nastavenia sekcie a aktualizujte nasledovné:
- Minimálna výška: 500 pixelov (stolný počítač), 900 pixelov (tablet), 750 pixelov (telefón)
- Okraj: 100 pixelov (hore a dole)
- Výplň: 0px (hore a dole)
Vytvorenie druhej línie
Ak chcete vytvoriť druhý riadok, duplikujte riadok, ktorý ste vytvorili predtým. Presuňte textový modul do stĺpca 1 a obrázok do stĺpca 2. Potom aktualizujte obrázok novým. Pomôže vám to získať predstavu o tom, ako vyzerá rôzny obsah na každej karte.
Potom otvorte nastavenia modulu Text použitý na vytvorenie karty v stĺpci 1 a posuňte kartu doprava, takže tam, kde sa tento riadok prekrýva s riadkom nad, uvidíte kartu priamo napravo od karty prvého riadku.
- Okraj: 50 pixelov (vľavo)
Pridaný efekt vznášania
Otvorte nastavenia riadkov a pridajte nasledujúci filter:
- Nepriehľadnosť: 70 % (predvolené), 100 % (umiestnenie)
Potom pridajte trvanie prechodu a krivku rýchlosti pre efekt vznášania sa filtra opacity.
- Čas prechodu: 500 ms
- Krivka rýchlosti prechodu: lineárna
Vytvorenie tretej záložky
Teraz môžeme pridať našu poslednú kartu. Ak to chcete urobiť, duplikujte druhý riadok, ktorý ste práve vytvorili. Potom presuňte textový modul do stĺpca 1 a obrázok do stĺpca 2. A aktualizujte modul obrázka novým obrázkom.
Aktualizujte nastavenia čiary s novým gradientom pozadia.
- Farba prechodu vľavo na pozadí: #333333
- Farba prechodu pravého pozadia: #4646c4
Potom otvorte nastavenie modulu Text použité na vytvorenie karty v stĺpci 1 a aktualizujte farbu a okraj.
- Pozadie: #333333
- Okraj: 150 pixelov (vľavo)
Tu je návod, ako by mala vyzerať vaša stránka predtým, ako umiestnime naše riadky tak, aby sa prekrývali.
Prekrývajúce sa čiary s absolútnym umiestnením
Na prekrytie našich línií musíme použiť absolútne umiestnenie. Najprv aktualizujte výšku všetkých troch riadkov na 100 %.
- výška: 100%
Potom pridajte nasledujúci vlastný CSS do hlavného prvku všetkých troch riadkov:
position: absolute !important;
left: 0;
right: 0;
margin: auto;
Takto momentálne vyzerajú naše karty.
Zmena poradia riadkov pri umiestnení kurzora myši pomocou Z indexu
V tejto chvíli ste si mohli všimnúť, že tretí riadok/karta je v popredí. Takže musíme preusporiadať riadky pomocou Z Index tak, aby sa prvá karta zobrazovala ako prvá, kým neumiestníte kurzor myši na inú kartu.
Čítajte tiež: Ako vytvoriť vlastné prekryvné obrázky v Divi
Ak to chcete urobiť, otvorte nastavenia prvého riadka a aktualizujte z-index takto:
Z-index: 10
Potom umiestnite kurzor Z indexu ďalších dvoch riadkov.
Z-index: 11 (umiestnenie kurzora myši)
Je to hotové ! Pozrime sa na konečný výsledok.
Konečný výsledok
Stiahnite si DIVI teraz!!!
Vytváranie zvislých záložiek
Ak chcete do riadkov pridať zvislé tabulátory, postupujte takto.
Pokračujte a duplikujte sekciu obsahujúcu karty s kurzorom, ktoré sme práve vytvorili, aby ste mali nový dizajn, s ktorým môžete pracovať.
Potom otvorte nastavenia sekcie a aktualizujte nasledujúce:
- Polstrovanie: 10 % (ľavé a pravé)
Aktualizujte nasledujúce nastavenia pre všetky tri riadky duplicitnej sekcie nasledujúcim spôsobom:
- Šírka: 70 % (stolný počítač), 70 % (tablet), 80 % (telefón)
- Maximálna šírka: 980 pixelov
Ďalej aktualizujte smer prechodu na 90 stupňov pre všetky tri čiary.
- Smer gradientu: 90 stupňov
Teraz je čas umiestniť naše karty modulu Text naľavo od našich riadkov, aby ste získali požadované vertikálne karty.
Pozri tiež: Ako vytvoriť rotujúce menu na Hover v Divi
Otvorte nastavenie karty textového modulu v prvom riadku a aktualizujte nasledovné:
- Okraj (počítač): -50 pixelov (hore), -150 pixelov (vľavo)
Ďalej otvorte nastavenia karty Text v sekcii 2. riadku a aktualizujte nasledovné:
- Okraj (počítač): 0px (hore), -150px (vľavo)
A pre poslednú kartu v treťom riadku aktualizujte nasledovné:
- Okraj (počítač): 50 pixelov hore, -150 pixelov vľavo
Konečný výsledok
Teraz sa pozrime na konečný výsledok.
Stiahnite si DIVI teraz!!!
záver
S trochou kreativity a silou Divi si môžete vytvoriť pekné vlastné karty pomocou Divi liniek. Existujú určité obmedzenia toho, čo môžete zobraziť.
Napríklad pri tejto konfigurácii musia mať všetky riadky rovnakú výšku ako sekcia. Ale aby ste nemuseli používať plugin, je to skvelé riešenie.
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.
...
