Vil du oprette faner med svæveeffekt fra rækker med Divi ?
Faner er helt sikkert nyttige til at gøre vigtig information tilgængelig i et kortfattet område af dig Websted. Dette reducerer behovet for, at brugeren skal rulle gennem indhold af en lang side. Fanemodulet af Divi er nem at bruge og ideel til at gennemse en indhold enkelt med et enkelt klik.
Men i denne tutorial vil vi vise dig, hvordan du konverterer rækker Divi faner og vises, når du svæver.
Vi viser dig også, hvordan du opretter vandrette og lodrette faner. Dette vil låse op for Divi's kraft til at skabe komplette layouts med flere moduler for hvert område af indhold fanen.
Ingen behov for plugins!
Lad os starte.
undersøgelse
Her er en oversigt over de faner, som vi vil oprette sammen i denne vejledning.
Download DIVI nu!!!
Opret en ny side med Divi Builder
Fra WordPress-dashboardet, gå til Sider> Tilføj nyt for at oprette en ny side.
Giv den en titel, der giver mening for dig, og klik Brug Divi Builder
klik derefter på Begynd at bygge (Byg fra skrammer)
Derefter har du et tomt lærred til at begynde at designe i Divi.
Oprettelse af vandrette hover-faner ved hjælp af "Divi Rows"
Tilføj en række med to kolonner i standardafsnittet.
Linjebaggrund, boksfyld og skygge
Før vi tilføjer vores moduler, lad os tilpasse rækkeindstillingerne lidt først. Åbn linjeindstillinger og opdater følgende:
- Venstre gradientfarve: #284f91
- Højre gradientfarve: #4646c4
- Polstring: 50px (top og bund), 50px (venstre og højre)
- Box Shadow: se skærmbillede
- Box Shadow Color: rgba(70,70,196,0.66)
Tilføj indhold til rækken
Vi vil nu tilføje pladsholderindhold til vores række. I kolonne 1 skal du tilføje et billede efter eget valg med et billedmodul. Her brugte vi et billede fra layoutpakken « Design Conference Layout Pack« .
Tilføj et modul i højre kolonne Opfordring til handling og opdatere følgende:
- Button Link URL: # (bare for at vise knappen indtil videre)
- Brug baggrundsfarve: NEJ
- Tekstjustering: venstre
- Titelskrifttype: Lato
- Titeltekststørrelse: 60px (desktop), 50px (telefon)
Oprettelse af fanen
For at oprette den faktiske fane, som brugerne vil svæve over for at afsløre indholdet af den række, skal vi oprette et tekstmodul og placere det øverst til højre med noget tilpasset CSS.
Gå videre og tilføj et nyt tekstmodul under billedet i kolonne 1 og opdater følgende:
- Brødtekst: "Fane 1"
- Baggrund: #284f91 (dette skal matche linjens venstre gradientfarve)
- Tekstjustering: centreret
- Tekstfarve: #ffffff
- Bredde: 100px
- Højde: 50px
- Margen: -100px (øverst), -50px (venstre)
- Polstring: 14px (øverst)
Til sidst skal du tilføje følgende brugerdefinerede css til hovedelementet for at give det en absolut position øverst på linjen.
position: absolute !important;
top: 0;
Sektionshøjde og afstand
For nu skal du åbne sektionsindstillingerne og opdatere følgende:
- Min. højde: 500px (desktop), 900px (tablet), 750px (telefon)
- Margen: 100px (øverst og nederst)
- Polstring: 0px (top og bund)
Oprettelse af den anden linje
For at oprette den anden række skal du duplikere den række, du oprettede tidligere. Flyt tekstmodulet til kolonne 1 og billedet til kolonne 2. Opdater derefter billedet med et nyt. Dette vil hjælpe dig med at få en idé om, hvordan forskelligt indhold ser ud på hver fane.
Åbn derefter modulindstillingerne Tekst, der bruges til at oprette fanen i kolonne 1, og flyt fanen til højre, så hvor denne række overlapper rækken ovenfor, kan du se fanen direkte til højre for fanen på den første linje.
- Margin: 50px (venstre)
Tilføjet svæveeffekt
Åbn rækkeindstillinger, og tilføj følgende filter:
- Opacitet: 70 % (standard), 100 % (hover)
Tilføj derefter en overgangsvarighed og hastighedskurve for opacitetsfilterets hover-effekt.
- Overgangstid: 500 ms
- Overgangshastighedskurve: Lineær
Oprettelse af den tredje fane
Vi kan nu tilføje vores sidste fane. For at gøre dette skal du duplikere den anden linje, du lige har oprettet. Flyt derefter tekstmodulet til kolonne 1 og billedet til kolonne 2. Og opdater billedmodulet med et nyt billede.
Opdater linjeindstillingerne med en ny baggrundsgradient.
- Venstre baggrundsgradientfarve: #333333
- Højre baggrundsgradientfarve: #4646c4
Åbn derefter tekstmodulindstillingen, der bruges til at oprette fanen i kolonne 1, og opdater farven og margenen.
- Baggrund: #333333
- Margin: 150px (venstre)
Sådan skal din side se ud, før vi placerer vores linjer, så de overlapper hinanden.
Overlappende linjer med absolut positionering
For at overlappe vores linjer skal vi bruge absolut positionering. Først skal du opdatere højden af alle tre rækker til 100 %.
- Højde: 100%
Tilføj derefter følgende brugerdefinerede CSS til hovedelementet i alle tre linjer:
position: absolute !important;
left: 0;
right: 0;
margin: auto;
Sådan ser vores faner ud i øjeblikket.
Ændring af rækkefølge ved hover med Z-indeks
I dette øjeblik har du måske bemærket, at den tredje række/faneblad er i forgrunden. Så vi er nødt til at omarrangere rækkerne ved hjælp af Z Index, så den første fane vises først, indtil du holder markøren over en anden fane.
Læs også: Sådan opretter du brugerdefinerede billedoverlejringer i Divi
For at gøre dette skal du åbne indstillingerne for første række og opdatere z-indekset som følger:
Z-indeks: 10
Sæt derefter Z-indekset for de to andre linjer på hover.
Z-indeks: 11 (Hover)
Det er gjort ! Lad os se slutresultatet.
Endelig resultat
Download DIVI nu!!!
Oprettelse af lodrette faner
Hvis du vil tilføje lodrette faner til rækker, er her hvad du skal gøre.
Gå videre og dupliker sektionen, der indeholder de svævefaner, vi lige har oprettet, så du har et nyt design at arbejde med.
Åbn derefter sektionsindstillingerne og opdater følgende:
- Polstring: 10% (venstre og højre)
Opdater følgende indstillinger for alle tre linjer i dubletafsnittet med følgende:
- Bredde: 70 % (desktop), 70 % (tablet), 80 % (telefon)
- Maks. bredde: 980px
Opdater derefter gradientretningen til 90 grader for alle tre linjer.
- Gradientretning: 90 grader
Nu er det tid til at placere vores tekstmodulfaner til venstre for vores rækker for at få de ønskede lodrette faner.
Se også: Sådan opretter du en Spinning Wheel Menu på Hover i Divi
Åbn indstillingen for tekstmodulfane i første linje, og opdater følgende:
- Margen (skrivebord): -50px (øverst), -150px (venstre)
Åbn derefter indstillingerne for Sektion 2 Linjetekst-modulet, og opdater følgende:
- Margen (skrivebord): 0px (øverst), -150px (venstre)
Og for den sidste fane i tredje række skal du opdatere følgende:
- Margin (skrivebord): 50px top, -150px venstre
Endelig resultat
Lad os nu se det endelige resultat.
Download DIVI nu!!!
Konklusion
Med lidt kreativitet og kraften fra Divi kan du oprette nogle ret seje brugerdefinerede faner ved hjælp af Divi-linjer. Der er nogle begrænsninger for, hvad du kan vise.
For eksempel skal alle rækker med denne konfiguration have samme højde som sektionen. Men for ikke at skulle bruge et plugin, er dette en fantastisk løsning.
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.
...
