Chcete prezentovat své funkce nebo produkty formou záložky divi s hover efektem?
Hledáte nové kreativní způsoby, jak předvést funkce a/nebo produkty na svých webových stránkách?
Pokud ano, pokračujte ve čtení, protože v tomto článku vám ukážeme, jak zobrazit funkce na kartách při umístění kurzoru pouze pomocí vestavěných možností divi. Možnosti, které s tímto přístupem máte, jsou nekonečné a jistě vám umožní pochopit divi na hlubší úrovni.
Efekt najetí na kartu se projeví pouze na ploše. Na menších obrazovkách se zobrazí ve svých normálních tvarech.
Pojďme!
přehled
Než se ponoříme do tohoto tutoriálu, podívejme se na výsledek, kterého chceme dosáhnout.
Začněme proces tvorby s Divi
Přidejte novou sekci
Přechodové pozadí
Přidejte novou stránku nebo otevřete existující stránku a přidejte novou sekci. Otevřete nastavení sekce a přidejte do sekce pozadí s přechodem.
- Barva vlevo: #f2f2f2
- Pravá barva: #ffffff
- Směr gradientu: 87 stupňů
- Levá pozice: 20 %
- Pravá pozice: 80 %
vzdálenost
Dále změňte následující nastavení mezer:
- Výplň (nahoře a dole): 0px
Přidat nový řádek
Struktura kolony
Pokračujte přidáním nového řádku do sekce pomocí následující struktury sloupců:
Barva pozadí
Bez přidání jakýchkoli modulů otevřete nastavení řádku a změňte barvu pozadí.
- Barva pozadí: #ffffff
Dimenzování a zarovnání
Na kartě Design, stáhněte možnost dolů Rozměry a změňte následující nastavení:
- Použít vlastní šířku okapu: ANO
- Šířka žlabu: 1
- Šířka: 400px
- Zarovnání řádků: doleva
Umístění ukazatele velikosti
Změnit možnost Šířka v nastavení velikosti kurzoru. To umožní, aby se čára při vznášení roztáhla.
- Šířka (umístění myši): 2 pixelů
vzdálenost
Poté přejděte na nastavení mezer ve volbě Vzdálenost
- Výplň (nahoře a dole): 0px
Ohraničení (počítač)
Přidejte '20px' do pravého horního rohu čáry a také přidejte levé ohraničení čáry.
- Zaoblené rohy (počítač): 20 pixelů (pravý horní roh)
- Šířka levého okraje: 20px
- Barva levého okraje: #6d44ff
Hranice při vznášení
Odstraňte pravý horní zaoblený roh „20px“ při umístění kurzoru přidáním „0px“.
Box Shadow (počítač)
Nakonec přidejte jemný stín.
- Síla rozostření rámečku: 80 pixelů
- Síla rozprostření stínu rámečku: -10px
- Barva stínu: rgba (0,0,0,0.11)
Vznášet stín
A při najetí myší změňte barvu stínu na zcela průhlednou barvu.
- Box Shadow: rgba (255,255,255,0)
Přidejte modul Blurb do řádku
Přidat obsah
Nyní, když jsme dokončili změnu všech nastavení řádků, můžeme pokračovat a přidat do sloupce modul Blurb. Neváhejte použít jakýkoli jiný modul dle vašeho výběru.
Jakmile modul přidáte, přidejte nějaké obsah De votre choix.
Vyberte ikonu
Poté vyberte ikonu podle svého výběru.
Nastavení ikon
A změňte vzhled ikony v nastavení ikon. Přejděte na kartu Design
- Barva ikony: #5323ff
- Umístění obrázku/ikony: Nahoře
- Šířka obrázku/ikony: 50px
Nastavení názvu textu (počítač)
Poté změňte nastavení titulků.
- Písmo názvu: Poppins
- Zarovnání textu: na střed
- Barva textu nadpisu: #5323ff
- Velikost textu nadpisu: 25px
- Mezera mezi písmeny: -1px
- Výška řádku: 1 em
Umístění kurzoru na nastavení nadpisu textu
A změňte výšku řádku nadpisu při najetí myší.
- Výška řádku nadpisu: 1,5 em
Nastavení hlavního textu (počítač)
Dále přejděte do nastavení hlavního textu a proveďte nějaké změny. To zahrnuje změnu velikosti textu na '0px'. To nám pomůže, aby se hlavní text zobrazoval pouze při umístění kurzoru myši.
- Písmo těla: Poppins
- Hmotnost písma těla: světlá
- Zarovnání textu: na střed
- Barva textu těla: #000000
- Velikost hlavního textu: 0 pixelů (počítač), 15 pixelů (tablet a telefon)
- Výška řádku: 2,2 em
Nastavení hlavního textu při umístění kurzoru
Chcete-li zajistit, že se hlavní text zobrazí při umístění kurzoru, změňte velikost textu při umístění kurzoru.
- Velikost hlavního textu: 15 pixelů
Mezery (počítač)
Aby byl modul nějaký prostor, upravíme následující parametry rozteče:
- Výplň (nahoře a dole): 80 pixelů
Hover mezery
Změníme nastavení rozteče kurzoru.
- Výplň (nahoře a dole): 80 pixelů
- Polstrování (levé a pravé): 20vw
Klonujte řádek 3krát
Jakmile dokončíte úpravy prvního řádku a jeho modulu Blurb, můžete pokračovat a klonovat řádek, kolikrát chcete.
Modul Edit Line and Blurb #2
Změnit barvu okraje čáry
Začněme změnou barvy levého okraje čáry.
- Barva levého okraje: #00ffcc
Upravit obsah a ikonu Blurb
Dále otevřete nastavení modulu Blurb a změňte ikonu.
Změnit barvu ikony modulu Blurb
S barvou ikony.
- Barva ikony: #00eda6
Změnit barvu titulku
A barva textu nadpisu.
- Barva textu nadpisu: #00eda6
Upravit řádek a modul Burb #3
Barva ohraničení čáry
Změníme barvu ohraničení levé čáry.
- Barva levého okraje: #afebff
Upravit obsah a ikonu Blurb
Změňme také ikonu a obsah textu prezentace.
Změnit barvu ikony modulu Blurb
Změňte také barvu ikony.
- Barva ikony: #68d9ff
Změnit barvu textu nadpisu
A také barva textu nadpisu.
- Barva textu nadpisu: #68d9ff
Modul Edit Line and Blurb #4
Změnit barvu okraje čáry
V dalším a posledním modulu změňte také barvu levého okraje čáry.
- Barva levého okraje: #dd87cf
Upravit obsah a ikonu Blurb
Otevřete modul Blurb v řádku a změňte ikonu a obsah du modul.
Změnit barvu ikony modulu Blurb
S barvou ikony.
- Barva ikony: #dd6aca
Změnit barvu textu nadpisu
A také barva textu nadpisu.
- Barva textu nadpisu: #dd6aca
přehled
Nyní, když jsme prošli tutoriál, pojďme se naposledy podívat na výsledek.
Stáhnout DIVI hned!!!
Proč investovat do čističky vzduchu?
V tomto článku jsme vám ukázali, jak používat vestavěné možnosti Divi pouze k vytváření karet dostupných při najetí myší.
Tento přístup vám pomůže interaktivně sdílet obsah o funkcích nebo produktech.
Doufáme, že vás tento tutoriál inspiruje pro vaše další Divi projekty. Pokud máte nějaké obavy nebo návrhy, najděte nás v sekci komentářů diskutovat o tom.
Můžete se také poradit naše zdroje, pokud potřebujete více prvků k realizaci vašich projektů vytváření internetových stránek, nahlédněte do našeho průvodce na internetu Vytvoření blogu WordPress nebo ten, který je zapnutý Divi: nejlepší téma WordPress všech dob.
Mezitím sdílejte tento článek na různých sociálních sítích.
...
