Kunne du tænke dig at præsentere dine funktioner eller produkter i form af en fane Divi med svæveeffekt?
Leder du efter nye kreative måder at fremvise funktioner og/eller produkter på dine websider?
Hvis ja, fortsæt med at læse, for i denne artikel vil vi vise dig, hvordan du viser funktioner i faner, når du svæver ved kun at bruge de indbyggede muligheder i Divi. Mulighederne du har med denne tilgang er uendelige, og de vil helt sikkert give dig mulighed for at forstå Divi på et dybere plan.
Tab-hover-effekten vil kun forekomme på skrivebordet. På mindre skærmstørrelser vises de på deres normale former.
Lad os gå!
undersøgelse
Før vi dykker ned i denne tutorial, lad os tage et kig på det resultat, vi ønsker at opnå.
Lad os starte skabelsesprocessen med Divi
Tilføj en ny sektion
Gradient baggrund
Tilføj en ny side, eller åbn en eksisterende side, og tilføj en ny sektion. Åbn sektionsindstillingerne og tilføj en gradientbaggrund til sektionen.
- Venstre farve: #f2f2f2
- Højre farve: #ffffff
- Gradientretning: 87 grader
- Venstre position: 20%
- Højre position: 80%
afstand
Skift derefter følgende mellemrumsindstillinger:
- Polstring (top og bund): 0px
Tilføj en ny linje
Struktur af søjlen
Fortsæt med at tilføje en ny række til sektionen ved hjælp af følgende kolonnestruktur:
Baggrundsfarve
Uden at tilføje nogen moduler endnu, skal du åbne rækkeindstillingerne og ændre baggrundsfarven.
- Baggrundsfarve: #ffffff
Dimensionering og justering
I fanen Design, træk indstillingen ned dimensionering og ændre følgende indstillinger:
- Brug tilpasset tagrendebredde: JA
- Rendebredde: 1
- Bredde: 400px
- Rækkejustering: Venstre
Hover Sizing
Skift mulighed Bredde i indstillingerne for svævestørrelse. Dette vil tillade linjen at udvide sig, når den svæver.
- Bredde (Hover): 2 pixels
afstand
Gå derefter til afstandsindstillingerne i indstillingen Mellemrum
- Polstring (top og bund): 0px
Border (skrivebord)
Tilføj '20px' til øverste højre hjørne af linjen, og tilføj også en venstre kant til linjen.
- Afrundede hjørner (skrivebord): 20px (øvre højre hjørne)
- Venstre kantbredde: 20px
- Venstre kantfarve: #6d44ff
Grænse ved svæv
Fjern det øverste højre afrundede hjørne af '20px', når du svæver ved at tilføje '0px' i stedet.
Box Shadow (skrivebord)
Tilføj endelig en subtil skygge.
- Box Shadow Blur Styrke: 80px
- Box Shadow Spread Styrke: -10px
- Skyggefarve: rgba(0,0,0,0.11)
Hover Shadow
Og skift skyggefarven til en helt gennemsigtig farve ved svævning.
- Box Shadow: rgba(255,255,255,0)
Tilføj Blurb-modul til række
Tilføj indhold
Nu hvor vi er færdige med at ændre alle rækkeindstillinger, kan vi gå videre og tilføje et Blurb-modul til kolonnen. Du er velkommen til at bruge ethvert andet modul efter eget valg.
Når du har tilføjet modulet, skal du tilføje nogle indhold de votre choix.
Vælg ikonet
Vælg derefter et ikon efter eget valg.
Ikonindstillinger
Og ændre udseendet af ikonet i ikonindstillinger. Gå til fanen Design
- Ikonfarve: #5323ff
- Billede/ikonplacering: Øverst
- Billede/ikonbredde: 50px
Indstillinger for teksttitel (skrivebord)
Skift derefter titelindstillingerne.
- Titelskrifttype: Poppins
- Tekstjustering: centreret
- Titel Tekstfarve: #5323ff
- Titel Tekststørrelse: 25px
- Bogstavafstand: -1px
- Linjehøjde: 1 em
Hold musen over teksttitelindstillinger
Og ændre højden på titelrækken, når du svæver.
- Titellinjehøjde: 1,5 em
Indstillinger for brødtekst (skrivebord)
Gå derefter til brødtekstindstillingerne og foretag nogle ændringer. Dette inkluderer ændring af tekststørrelsen til '0px'. Dette vil hjælpe os med at få brødteksten til kun at blive vist, når du svæver.
- Brødskrift: Poppins
- Kropsskriftsvægt: let
- Tekstjustering: centreret
- Brødtekstfarve: #000000
- Brødtekststørrelse: 0px (desktop), 15px (tablet og telefon)
- Linjehøjde: 2,2 em
Indstillinger for brødtekst ved svæv
For at sikre, at brødtekst vises ved svævning, skal du ændre svævetekststørrelsen.
- Brødtekst Størrelse: 15px
Mellemrum (skrivebord)
For at give modulet lidt plads, ændrer vi følgende mellemrumsparametre:
- Polstring (top og bund): 80px
Hover afstand
Vi vil ændre indstillingerne for svæveafstand.
- Polstring (top og bund): 80px
- Polstring (venstre og højre): 20vw
Klon række 3 gange
Når du er færdig med at redigere den første række og dens Blurb-modul, kan du gå videre og klone rækken så mange gange, du vil.
Rediger linje og Blurb-modul #2
Skift linjekantfarve
Lad os starte med at ændre farven på linjens venstre kant.
- Venstre kantfarve: #00ffcc
Rediger Blurb-indhold og ikon
Åbn derefter Blurb-modulets indstillinger og skift ikonet.
Skift farve for Blurb-modulikon
Med ikonfarve.
- Ikonfarve: #00eda6
Skift titelfarve
Og farven på titelteksten.
- Titel Tekstfarve: #00eda6
Rediger linje og Burb #3 modul
Linjekantfarve
Lad os ændre kantfarven på den venstre linje.
- Venstre kantfarve: #afebff
Rediger Blurb-indhold og ikon
Lad os også ændre ikonet og indhold af præsentationsteksten.
Skift farve for Blurb-modulikon
Skift også ikonets farve.
- Ikonfarve: #68d9ff
Skift farve på titeltekst
Og også farven på titelteksten.
- Titel Tekstfarve: #68d9ff
Rediger linje og Blurb-modul #4
Skift linjekantfarve
I det næste og sidste modul skal du også ændre farven på linjens venstre kant.
- Venstre kantfarve: #dd87cf
Rediger Blurb-indhold og ikon
Åbn Blurb-modulet i rækken og skift ikonet og indhold af modulet.
Skift farve for Blurb-modulikon
Med ikonfarve.
- Ikonfarve: #dd6aca
Skift farve på titeltekst
Og også farven på titelteksten.
- Titel Tekstfarve: #dd6aca
undersøgelse
Nu hvor vi har gennemgået selvstudiet, lad os tage et sidste kig på resultatet.
Download DIVI nu!!!
Konklusion
I denne artikel viste vi dig, hvordan du kun bruger Divis indbyggede muligheder til at oprette faner, der er tilgængelige ved svævning.
Denne tilgang vil hjælpe dig med at dele indhold om funktioner eller produkter interaktivt.
Vi håber, at denne vejledning vil inspirere dig til dine næste Divi-projekter. Hvis du har spørgsmål eller forslag, så find os her kommentarafsnittet at diskutere det.
Du kan også konsultere vores ressourcer, hvis du har brug for flere elementer til at udføre dine projekter med oprettelse af internetsider ved at konsultere vores guide om WordPress blog oprettelse eller den ene på Divi: tidenes bedste WordPress-tema.
Men i mellemtiden del denne artikel på dine forskellige sociale netværk.
...
