Chcete prezentovať svoje funkcie alebo produkty vo forme karty divi s efektom vznášania?
Hľadáte nové kreatívne spôsoby, ako prezentovať funkcie a/alebo produkty na svojich webových stránkach?
Ak áno, pokračujte v čítaní, pretože v tomto článku vám ukážeme, ako zobraziť funkcie na kartách pri umiestnení kurzora myši iba pomocou vstavaných možností divi. Možnosti, ktoré s týmto prístupom máte, sú nekonečné a určite vám umožnia pochopiť divi na hlbšej úrovni.
Efekt kurzora myši sa prejaví iba na pracovnej ploche. Na menších obrazovkách sa zobrazia vo svojich normálnych tvaroch.
Poďme!
prehľad
Pred ponorením sa do tohto návodu sa pozrime na výsledok, ktorý chceme dosiahnuť.
Začnime proces tvorby s Divi
Pridajte novú sekciu
Gradient pozadia
Pridajte novú stránku alebo otvorte existujúcu stránku a pridajte novú sekciu. Otvorte nastavenia sekcie a pridajte do sekcie pozadie s prechodom.
- Farba vľavo: #f2f2f2
- Pravá farba: #ffffff
- Smer gradientu: 87 stupňov
- Ľavá pozícia: 20%
- Pravá pozícia: 80%
vzdialenosť
Ďalej zmeňte nasledujúce nastavenia medzier:
- Výplň (horná a dolná časť): 0 pixelov
Pridať nový riadok
Štruktúra stĺpca
Pokračujte pridaním nového riadka do sekcie pomocou nasledujúcej štruktúry stĺpcov:
Farba pozadia
Zatiaľ bez pridania modulov otvorte nastavenia riadkov a zmeňte farbu pozadia.
- Farba pozadia: #ffffff
Veľkosť a zarovnanie
Na karte dizajn, potiahnite možnosť nadol Dimenzovanie a zmeňte nasledujúce nastavenia:
- Použiť vlastnú šírku odkvapu: ÁNO
- Šírka odkvapu: 1
- Šírka: 400 pixelov
- Zarovnanie riadkov: doľava
Veľkosť po umiestnení kurzora myši
Zmeniť možnosť Šírka v nastaveniach veľkosti kurzora. To umožní, aby sa čiara pri vznášaní rozťahovala.
- Šírka (umiestnenie myši): 2 pixelov
vzdialenosť
Potom prejdite na nastavenia medzier v možnosti riadkovanie
- Výplň (horná a dolná časť): 0 pixelov
Ohraničenie (počítač)
Pridajte '20px' do pravého horného rohu čiary a tiež pridajte ľavé orámovanie čiary.
- Zaoblené rohy (počítač): 20 pixelov (pravý horný roh)
- Šírka ľavého okraja: 20 px
- Farba ľavého okraja: #6d44ff
Hranica pri vznášaní sa
Odstráňte pravý horný zaoblený roh „20px“ pri umiestnení kurzora myši tak, že namiesto neho pridáte „0px“.
Box Shadow (počítač)
Nakoniec pridajte jemný tieň.
- Sila rozmazania rámčeka: 80 pixelov
- Sila rozpätia tieňa rámčeka: -10px
- Farba tieňa: rgba (0,0,0,0.11)
Vznášať sa tieň
A zmeňte farbu tieňa na úplne priehľadnú farbu pri prechode myšou.
- Box Shadow: rgba (255,255,255,0)
Pridajte modul Blurb do riadka
Pridajte obsah
Teraz, keď sme dokončili zmenu všetkých nastavení riadkov, môžeme pokračovať a pridať do stĺpca modul Blurb. Neváhajte použiť akýkoľvek iný modul podľa vlastného výberu.
Po pridaní modulu pridajte nejaké obsah de votre choix.
Vyberte ikonu
Potom vyberte ikonu podľa vlastného výberu.
Nastavenia ikon
A zmeniť vzhľad ikony v nastaveniach ikony. Prejdite na kartu dizajn
- Farba ikony: #5323ff
- Umiestnenie obrázka/ikony: Hore
- Šírka obrázka/ikony: 50 pixelov
Nastavenia nadpisu textu (počítač)
Potom zmeňte nastavenia titulu.
- Písmo názvu: Poppins
- Zarovnanie textu: na stred
- Farba textu nadpisu: #5323ff
- Veľkosť textu nadpisu: 25px
- Medzera medzi písmenami: -1px
- Výška riadku: 1 em
Nastavenia nadpisu textu umiestnite kurzorom myši
A zmeniť výšku riadku nadpisu pri umiestnení kurzora myši.
- Výška riadku nadpisu: 1,5 em
Nastavenia textu tela (počítač)
Ďalej prejdite do nastavení hlavného textu a vykonajte nejaké zmeny. To zahŕňa aj zmenu veľkosti textu na „0 pixelov“. Pomôže nám to, aby sa hlavný text zobrazoval iba pri umiestnení kurzora myši.
- Písmo tela: Poppins
- Hmotnosť písma tela: svetlá
- Zarovnanie textu: na stred
- Farba textu tela: #000000
- Veľkosť hlavného textu: 0 pixelov (počítač), 15 pixelov (tablet a telefón)
- Výška riadku: 2,2 em
Nastavenia textu tela pri umiestnení kurzora myši
Ak chcete zabezpečiť, aby sa hlavný text zobrazil pri umiestnení kurzora myši, zmeňte veľkosť textu pri umiestnení kurzora myši.
- Veľkosť hlavného textu: 15 pixelov
Medzery (počítač)
Aby sme modulu poskytli priestor, upravíme nasledujúce parametre rozstupov:
- Výplň (horná a dolná časť): 80 pixelov
Medzera po umiestnení kurzora myši
Zmeníme nastavenia rozstupov kurzora.
- Výplň (horná a dolná časť): 80 pixelov
- Polstrovanie (ľavé a pravé): 20vw
Klonujte riadok 3 krát
Po dokončení úprav prvého riadka a jeho modulu Blurb môžete pokračovať a klonovať riadok toľkokrát, koľkokrát chcete.
Edit Line and Blurb Module #2
Zmeňte farbu okraja čiary
Začnime zmenou farby ľavého okraja čiary.
- Farba ľavého okraja: #00ffcc
Upravte obsah a ikonu Blurb
Potom otvorte nastavenia modulu Blurb a zmeňte ikonu.
Zmeniť farbu ikony modulu Blurb
S farbou ikony.
- Farba ikony: #00eda6
Zmeniť farbu nadpisu
A farba textu nadpisu.
- Farba textu nadpisu: #00eda6
Upraviť riadok a modul Burb #3
Farba okraja čiary
Zmeňme farbu okraja ľavého riadku.
- Farba ľavého okraja: #afebff
Upravte obsah a ikonu Blurb
Zmeňme tiež ikonu a obsah textu prezentácie.
Zmeniť farbu ikony modulu Blurb
Zmeňte aj farbu ikony.
- Farba ikony: #68d9ff
Zmeňte farbu textu nadpisu
A farba nadpisu tiež.
- Farba textu nadpisu: #68d9ff
Edit Line and Blurb Module #4
Zmeňte farbu okraja čiary
V ďalšom a poslednom module zmeňte aj farbu ľavého okraja čiary.
- Farba ľavého okraja: #dd87cf
Upravte obsah a ikonu Blurb
Otvorte modul Blurb v riadku a zmeňte ikonu a obsah du modul.
Zmeniť farbu ikony modulu Blurb
S farbou ikony.
- Farba ikony: #dd6aca
Zmeňte farbu textu nadpisu
A farba nadpisu tiež.
- Farba textu nadpisu: #dd6aca
prehľad
Teraz, keď sme si prešli návod, poďme sa naposledy pozrieť na výsledok.
Stiahnite si DIVI teraz!!!
záver
V tomto článku sme vám ukázali, ako používať vstavané možnosti Divi iba na vytváranie kariet dostupných pri umiestnení kurzora myši.
Tento prístup vám pomôže interaktívne zdieľať obsah o funkciách alebo produktoch.
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.
...
