Ø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å.

Divi-fane med sveveeffekt

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
hover faner

Avstand (skrivebord)

For å gi modulen litt plass, endrer vi følgende avstandsparametere:

  • Polstring (øverst og bunn): 80px
hover faner

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
Divi-fane med sveveeffekt

undersøkelsen

Nå som vi har gått gjennom opplæringen, la oss ta en siste titt på resultatet.

Divi-fane med sveveeffekt

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.

...