Ønsker du å presentere dine funksjoner eller produkter i form av en fane Divi med sveveeffekt?
Leter du etter nye kreative måter å vise frem funksjoner og/eller produkter på nettsidene dine?
I så fall, fortsett å lese, for i denne artikkelen vil vi vise deg hvordan du viser funksjoner i faner ved sveving ved kun å bruke de innebygde alternativene til Divi. Mulighetene du har med denne tilnærmingen er uendelige, og de vil helt sikkert tillate deg å forstå Divi på et dypere nivå.
Tab-hover-effekten vil bare forekomme på skrivebordet. På mindre skjermstørrelser vil de vises på sine vanlige former.
La oss gå!
undersøkelsen
Før vi dykker inn i denne opplæringen, la oss ta en titt på resultatet vi ønsker å oppnå.
La oss starte skapelsesprosessen med Divi
Legg til en ny seksjon
Gradient bakgrunn
Legg til en ny side eller åpne en eksisterende side og legg til en ny seksjon. Åpne seksjonsinnstillingene og legg til en gradientbakgrunn til seksjonen.
- Venstre farge: #f2f2f2
- Høyre farge: #ffffff
- Gradientretning: 87 grader
- Venstre posisjon: 20 %
- Høyre posisjon: 80 %
avstanden
Deretter endrer du følgende avstandsinnstillinger:
- Polstring (øverst og bunn): 0px
Legg til en ny linje
Struktur av kolonnen
Fortsett med å legge til en ny rad i seksjonen ved hjelp av følgende kolonnestruktur:
Bakgrunnsfarge
Uten å legge til noen moduler ennå, åpne radinnstillingene og endre bakgrunnsfargen.
- Bakgrunnsfarge: #ffffff
Dimensjonering og justering
I fanen utforming, trekk ned alternativet Størrelse og endre følgende innstillinger:
- Bruk egendefinert takrennebredde: YESS
- Rennebredde: 1
- Bredde: 400px
- Radjustering: Venstre
Hover Sizing
Endre alternativ Bredde i innstillingene for hoverstørrelse. Dette vil tillate linjen å utvide seg når du svever.
- Bredde (Hover): 2 piksler
avstanden
Gå deretter til avstandsinnstillingene i alternativet Mellomrom
- Polstring (øverst og bunn): 0px
Border (skrivebord)
Legg til '20px' øverst til høyre på linjen, og legg også til en venstrekant på linjen.
- Avrundede hjørner (skrivebord): 20px (øvre høyre hjørne)
- Venstre kantbredde: 20px
- Venstre kantfarge: #6d44ff
Border på sveve
Fjern det øvre høyre avrundede hjørnet av "20px" ved å legge til "0px" i stedet.
Box Shadow (skrivebord)
Til slutt, legg til en subtil skygge.
- Box Shadow Blur Styrke: 80px
- Box Shadow Spread Styrke: -10px
- Skyggefarge: rgba(0,0,0,0.11)
Hover Shadow
Og endre skyggefargen til en helt gjennomsiktig farge ved sveving.
- Box Shadow: rgba(255,255,255,0)
Legg til Blurb-modul til rad
Legg til innhold
Nå som vi er ferdige med å endre alle radinnstillingene, kan vi gå videre og legge til en Blurb-modul i kolonnen. Bruk gjerne en hvilken som helst annen modul du ønsker.
Når du har lagt til modulen, legg til noen innhold de votre choix.
Velg ikonet
Velg deretter et ikon du ønsker.
Ikoninnstillinger
Og endre utseendet til ikonet i ikoninnstillingene. Gå til fanen utforming
- Ikonfarge: #5323ff
- Bilde/ikonplassering: Øverst
- Bilde/ikonbredde: 50px
Innstillinger for teksttittel (skrivebord)
Endre deretter tittelinnstillingene.
- Tittelfont: Poppins
- Tekstjustering: sentrert
- Tittel Tekstfarge: #5323ff
- Tittel Tekststørrelse: 25px
- Bokstavavstand: -1px
- Linjehøyde: 1 em
Hold markøren over teksttittelinnstillinger
Og endre høyden på tittelraden ved å holde musepekeren.
- Tittellinjehøyde: 1,5 em
Innstillinger for brødtekst (skrivebord)
Deretter går du til brødtekstinnstillingene og gjør noen endringer. Dette inkluderer å endre tekststørrelsen til '0px'. Dette vil hjelpe oss å få brødteksten til å vises bare når du peker.
- Body Font: Poppins
- Kroppsskriftvekt: lett
- Tekstjustering: sentrert
- Brødtekstfarge: #000000
- Brødtekststørrelse: 0px (skrivebord), 15px (nettbrett og telefon)
- Linjehøyde: 2,2 em
Innstillinger for brødtekst når du holder musepekeren
For å sikre at brødtekst vises når du peker, endre størrelsen på pekeren.
- Brødtekst Størrelse: 15px
Avstand (skrivebord)
For å gi modulen litt plass, endrer vi følgende avstandsparametere:
- Polstring (øverst og bunn): 80px
Hold markøravstand
Vi skal endre innstillingene for sveveavstand.
- Polstring (øverst og bunn): 80px
- Polstring (venstre og høyre): 20vw
Klone rad 3 ganger
Når du er ferdig med å redigere den første raden og Blurb-modulen, kan du gå videre og klone raden så mange ganger du vil.
Rediger linje og Blurb-modul #2
Endre linjekantfarge
La oss starte med å endre fargen på venstre kant av linjen.
- Venstre kantfarge: #00ffcc
Rediger Blurb-innhold og -ikon
Deretter åpner du Blurb-modulinnstillingene og endrer ikonet.
Endre Blurb Module-ikonfarge
Med ikonfarge.
- Ikonfarge: #00eda6
Endre tittelfarge
Og fargen på tittelteksten.
- Tittel Tekstfarge: #00eda6
Rediger linje og Burb #3-modul
Linjekantfarge
La oss endre kantfargen på venstre linje.
- Venstre kantfarge: #afebff
Rediger Blurb-innhold og -ikon
La oss også endre ikonet og innhold av presentasjonsteksten.
Endre Blurb Module-ikonfarge
Endre også fargen på ikonet.
- Ikonfarge: #68d9ff
Endre titteltekstfarge
Og fargen på tittelteksten også.
- Tittel Tekstfarge: #68d9ff
Rediger linje og Blurb-modul #4
Endre linjekantfarge
I neste og siste modul endrer du også fargen på venstre kant av linjen.
- Venstre kantfarge: #dd87cf
Rediger Blurb-innhold og -ikon
Åpne Blurb-modulen i raden og endre ikonet og innhold du modul.
Endre Blurb Module-ikonfarge
Med ikonfarge.
- Ikonfarge: #dd6aca
Endre titteltekstfarge
Og fargen på tittelteksten også.
- Tittel Tekstfarge: #dd6aca
undersøkelsen
Nå som vi har gått gjennom opplæringen, la oss ta en siste titt på resultatet.
Last ned DIVI nå!!!
konklusjonen
I denne artikkelen viste vi deg hvordan du bruker Divis innebygde alternativer kun for å lage faner tilgjengelige ved sveving.
Denne tilnærmingen vil hjelpe deg med å dele innhold om funksjoner eller produkter interaktivt.
Vi håper denne veiledningen vil inspirere deg til dine neste Divi-prosjekter. Hvis du har noen bekymringer eller forslag, finn oss inn kommentarfeltet å diskutere det.
Du kan også konsultere ressursene våre, hvis du trenger flere elementer for å gjennomføre prosjektene dine med oppretting av nettsteder, ved å konsultere vår guide om WordPress blog oppretting eller den på Divi: tidenes beste WordPress-tema.
Men i mellomtiden, del denne artikkelen på de forskjellige sosiale nettverkene dine.
...