Ønsker å lage faner med sveveeffekt fra rader med Divi ?
Faner er definitivt nyttige for å gjøre viktig informasjon tilgjengelig i et kortfattet område av deg nettstedet Web. Dette reduserer behovet for brukeren å bla gjennom innhold av en lang side. Fanemodulen til Divi er enkel å bruke og ideell for surfing innhold enkelt med ett klikk.
Men i denne opplæringen vil vi vise deg hvordan du konverterer rader Divi faner og vises når du peker.
Vi viser deg også hvordan du lager horisontale og vertikale faner. Dette vil låse opp kraften til Divi for å lage komplette oppsett med flere moduler for hvert område av innhold fanen.
Ingen plugins nødvendig!
La oss begynne.
undersøkelsen
Her er en oversikt over fanene som vi skal lage sammen i denne opplæringen.
Last ned DIVI nå!!!
Opprett en ny side med Divi Builder
Fra WordPress-dashbordet, gå til Sider> Legg til nye for å opprette en ny side.
Gi den en tittel som gir mening for deg og klikk Bruk Divi Builder
deretter klikker du Begynn å bygge (Bygg fra bunnen av)
Etter det vil du ha et blankt lerret for å begynne å designe i Divi.
Opprette horisontale svevefaner ved hjelp av "Divi-rader"
Legg til en rad med to kolonner i standarddelen.
Linjebakgrunn, boksfyll og skygge
Før vi legger til modulene våre, la oss tilpasse radinnstillingene litt først. Åpne linjeinnstillinger og oppdater følgende:
- Venstre gradientfarge: #284f91
- Høyre gradientfarge: #4646c4
- Polstring: 50px (øverst og bunn), 50px (venstre og høyre)
- Box Shadow: se skjermbilde
- Box Shadow Color: rgba(70,70,196,0.66)
Legg til innhold i raden
Vi vil nå legge til plassholderinnhold i raden vår. I kolonne 1 legger du til et bilde du ønsker med en bildemodul. Her brukte vi et bilde fra layoutpakken « Design Conference Layout Pack« .
Legg til en modul i høyre kolonne Call to Action og oppdater følgende:
- Button Link URL: # (bare for å vise knappen inntil videre)
- Bruk bakgrunnsfarge: NEI
- Tekstjustering: venstre
- Tittel Font : Lato
- Titteltekststørrelse: 60px (stasjonær datamaskin), 50px (telefon)
Oppretting av fanen
For å lage selve fanen som brukere vil holde musepekeren over for å avsløre innholdet i den raden, må vi lage en tekstmodul og plassere den øverst til høyre med en tilpasset CSS.
Gå videre og legg til en ny tekstmodul under bildet i kolonne 1 og oppdater følgende:
- Body: «Tab 1»
- Bakgrunn: #284f91 (dette skal samsvare med venstre gradientfarge på linjen)
- Tekstjustering: sentrert
- Tekstfarge: #ffffff
- Bredde: 100px
- Høyde: 50px
- Marg: -100px (øverst), -50px (venstre)
- Polstring: 14px (øverst)
Til slutt, legg til følgende egendefinerte css til hovedelementet for å gi det en absolutt posisjon øverst på linjen.
position: absolute !important;
top: 0;
Snitthøyde og avstand
For nå, åpne seksjonsinnstillingene og oppdater følgende:
- Min høyde: 500 piksler (stasjonær datamaskin), 900 piksler (nettbrett), 750 piksler (telefon)
- Marg: 100 piksler (øverst og bunn)
- Polstring: 0px (øverst og bunn)
Opprettelse av den andre linjen
For å opprette den andre raden, dupliser raden du opprettet tidligere. Flytt tekstmodulen til kolonne 1 og bildet til kolonne 2. Oppdater deretter bildet med et nytt. Dette vil hjelpe deg med å få en ide om hvordan forskjellig innhold ser ut på hver fane.
Åpne så modulinnstillingene Tekst brukt til å lage fanen i kolonne 1 og flytt fanen til høyre slik at der denne raden overlapper raden over kan du se fanen rett til høyre for fanen på den første linjen.
- Marg: 50px (venstre)
Lagt til sveveeffekt
Åpne radinnstillinger og legg til følgende filter:
- Opasitet: 70 % (standard), 100 % (sveving)
Legg deretter til en overgangsvarighet og en hastighetskurve for opasitetsfilterets sveveeffekt.
- Overgangstid: 500 ms
- Overgangshastighetskurve: Lineær
Oppretting av den tredje fanen
Vi kan nå legge til vår siste fane. For å gjøre dette, duplisere den andre linjen du nettopp opprettet. Flytt så tekstmodulen til kolonne 1 og bildet til kolonne 2. Og oppdater bildemodulen med et nytt bilde.
Oppdater linjeinnstillingene med en ny bakgrunnsgradient.
- Venstre bakgrunnsgradientfarge: #333333
- Høyre bakgrunnsgradientfarge: #4646c4
Åpne deretter Tekstmodulinnstillingen som brukes til å lage fanen i kolonne 1 og oppdater fargen og margen.
- Bakgrunn: #333333
- Marg: 150 piksler (venstre)
Slik skal siden din se ut før vi plasserer linjene våre slik at de overlapper hverandre.
Overlappende linjer med absolutt posisjonering
For å overlappe linjene våre må vi bruke absolutt posisjonering. Først oppdaterer du høyden på alle tre radene til 100 %.
- Høyde: 100 %
Legg deretter til følgende tilpassede CSS til hovedelementet i alle tre linjene:
position: absolute !important;
left: 0;
right: 0;
margin: auto;
Slik ser fanene våre ut for øyeblikket.
Endring av rekkefølge ved hover med Z-indeks
I dette øyeblikket har du kanskje lagt merke til at den tredje raden/fanen er i forgrunnen. Så vi må omorganisere radene ved å bruke Z Index slik at den første fanen vises først til du holder musepekeren over en annen fane.
Les også: Hvordan lage tilpassede bildeoverlegg i Divi
For å gjøre dette, åpne innstillingene for første rad og oppdater z-indeksen som følger:
Z-indeks: 10
Sett deretter Z-indeksen til de to andre linjene på hover.
Z-indeks: 11 (Hover)
Det er gjort ! La oss se sluttresultatet.
Endelig resultat
Last ned DIVI nå!!!
Opprette vertikale faner
Hvis du vil legge til vertikale faner i rader, er dette hva du skal gjøre.
Fortsett og dupliser delen som inneholder svevefanene vi nettopp opprettet, slik at du har et nytt design å jobbe med.
Åpne deretter seksjonsinnstillingene og oppdater følgende:
- Polstring: 10 % (venstre og høyre)
Oppdater følgende parametere for alle tre linjene i duplikatdelen med følgende:
- Bredde: 70 % (stasjonær datamaskin), 70 % (nettbrett), 80 % (telefon)
- Maks bredde: 980px
Deretter oppdaterer du gradientretningen til 90 grader for alle tre linjene.
- Gradientretning: 90 grader
Nå er det på tide å plassere tekstmodulfanene til venstre for radene våre for å få de ønskede vertikale fanene.
Se også: Hvordan lage en spinnehjulmeny på hover i Divi
Åpne faneinnstillingen for tekstmodul i den første raden og oppdater følgende:
- Marg (skrivebord): -50px (øverst), -150px (venstre)
Deretter åpner du innstillingene for Seksjon 2nd Line Text-modulen og oppdaterer følgende:
- Margin (skrivebord): 0px (øverst), -150px (venstre)
Og for den siste fanen i den tredje raden, oppdater følgende:
- Margin (skrivebord): 50px topp, -150px venstre
Endelig resultat
La oss se det endelige resultatet.
Last ned DIVI nå!!!
konklusjonen
Med litt kreativitet og kraften til Divi kan du lage noen ganske kule egendefinerte faner ved å bruke Divi-linjer. Det er noen begrensninger for hva du kan vise.
For eksempel, med denne konfigurasjonen må alle rader ha samme høyde som seksjonen. Men for å ikke trenge å bruke en plugin, er dette en flott løsning.
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.
...
