Wil je tabbladen maken met zweefeffect van rijen met Divi ?
Tabbladen zijn zeker handig om belangrijke informatie beschikbaar te maken in een beknopt gedeelte van uw Site web. Dit vermindert de noodzaak voor de gebruiker om door het bestand te scrollen inhoud van een lange pagina. De tabbladmodule van Divi is gemakkelijk te gebruiken en ideaal voor het bladeren door een inhoud eenvoudig in één klik.
Maar in deze tutorial laten we u zien hoe u rijen converteert Divi tabbladen en verschijnen bij zweven.
We laten u ook zien hoe u horizontale en verticale tabbladen maakt. Dit ontgrendelt de kracht van Divi om complete lay-outs te creëren met meerdere modules voor elk gebied inhoud tabblad.
Geen plug-ins nodig!
Laten we beginnen.
overzicht
Hier is een overzicht van de tabbladen die we samen in deze tutorial zullen maken.
Download DIVI nu!!!
Maak een nieuwe pagina met Divi Builder
Ga vanuit het WordPress-dashboard naar Pagina's> Nieuwe toevoegen om een nieuwe pagina te maken.
Geef het een titel die voor jou logisch is en klik op Gebruik Divi Builder
klik vervolgens op Begin met bouwen (Bouw vanaf het begin)
Daarna heb je een leeg canvas om te beginnen met ontwerpen in Divi.
Horizontale zweeftabs maken met behulp van "Divi Rows"
Voeg in de standaardsectie die aanwezig is een rij met twee kolommen toe.
Lijnachtergrond, vakvulling en schaduw
Voordat we onze modules toevoegen, laten we eerst de rij-instellingen een beetje aanpassen. Open Lijninstellingen en werk het volgende bij:
- Kleurverloop links: #284f91
- Rechts verloopkleur: #4646c4
- Vulling: 50px (boven en onder), 50px (links en rechts)
- Box Shadow: zie screenshot
- Doosschaduwkleur: rgba (70,70,196,0.66)
Inhoud aan rij toevoegen
We zullen nu tijdelijke aanduiding-inhoud aan onze rij toevoegen. Voeg in kolom 1 een afbeelding naar keuze toe met een afbeeldingsmodule. Hier hebben we een afbeelding uit het lay-outpakket gebruikt « Ontwerp Conferentie Lay-outpakket« .
Voeg in de rechterkolom een module toe Oproep tot actie en update het volgende:
- Knoplink-URL: # (alleen om de knop voorlopig weer te geven)
- Gebruik achtergrondkleur: NEE
- Tekstuitlijning: links
- Titel Lettertype: Lato
- Titel Tekstgrootte: 60px (desktop), 50px (telefoon)
Aanmaken van het tabblad
Om het eigenlijke tabblad te maken waar gebruikers de muisaanwijzer op plaatsen om de inhoud van die rij te onthullen, moeten we een tekstmodule maken en deze rechtsboven plaatsen met wat aangepaste CSS.
Ga je gang en voeg een nieuwe tekstmodule toe onder de afbeelding in kolom 1 en werk het volgende bij:
- Tekst: "Tabblad 1"
- Achtergrond: #284f91 (dit moet overeenkomen met de linker verloopkleur van de lijn)
- Tekstuitlijning: gecentreerd
- Tekstkleur: #ffffff
- Breedte: 100px
- Hoogte: 50px
- Marge: -100px (boven), -50px (links)
- Vulling: 14px (bovenkant)
Voeg ten slotte de volgende aangepaste CSS toe aan het hoofdelement om het een absolute positie bovenaan de regel te geven.
position: absolute !important;
top: 0;
Sectiehoogte en afstand
Open voorlopig de sectie-instellingen en werk het volgende bij:
- Minimale hoogte: 500px (desktop), 900px (tablet), 750px (telefoon)
- Marge: 100px (boven en onder)
- Vulling: 0px (boven en onder)
Creatie van de tweede regel
Om de tweede rij te maken, dupliceert u de rij die u eerder hebt gemaakt. Verplaats de tekstmodule naar kolom 1 en de afbeelding naar kolom 2. Werk de afbeelding vervolgens bij met een nieuwe. Dit zal u helpen een idee te krijgen van hoe verschillende inhoud eruit ziet op elk tabblad.
Open vervolgens de module-instellingen Tekst die is gebruikt om het tabblad te maken in kolom 1 en verplaats het tabblad naar rechts zodat waar deze rij de rij erboven overlapt, u het tabblad direct rechts van het tabblad van de eerste regel kunt zien.
- Marge: 50px (links)
Zweefeffect toegevoegd
Open rij-instellingen en voeg het volgende filter toe:
- Dekking: 70% (standaard), 100% (hover)
Voeg vervolgens een overgangsduur en een snelheidscurve toe voor het zweefeffect van de dekkingsfilter.
- Overgangstijd: 500 ms
- Overgangssnelheidscurve: lineair
Aanmaken van het derde tabblad
We kunnen nu ons laatste tabblad toevoegen. Om dit te doen, dupliceert u de tweede regel die u zojuist hebt gemaakt. Verplaats vervolgens de tekstmodule naar kolom 1 en de afbeelding naar kolom 2. En update de afbeeldingsmodule met een nieuwe afbeelding.
Werk de lijninstellingen bij met een nieuw achtergrondverloop.
- Linker achtergrondverloopkleur: #333333
- Rechter achtergrondverloopkleur: #4646c4
Open vervolgens de instelling Tekstmodule die is gebruikt om het tabblad in kolom 1 te maken en werk de kleur en marge bij.
- Achtergrond: #333333
- Marge: 150px (links)
Dit is hoe uw pagina eruit zou moeten zien voordat we onze lijnen zodanig positioneren dat ze elkaar overlappen.
Overlappende lijnen met absolute positionering
Om onze lijnen te overlappen, moeten we absolute positionering gebruiken. Werk eerst de hoogte van alle drie de rijen bij naar 100%.
- Hoogte: 100%
Voeg vervolgens de volgende aangepaste CSS toe aan het hoofdelement van alle drie de regels:
position: absolute !important;
left: 0;
right: 0;
margin: auto;
Zo zien onze tabbladen er momenteel uit.
Rijvolgorde wijzigen bij zweven met Z-index
Op dit moment is het je misschien opgevallen dat de derde rij/tab op de voorgrond staat. We moeten de rijen dus opnieuw rangschikken met Z Index, zodat het eerste tabblad eerst wordt weergegeven totdat u de muisaanwijzer op een ander tabblad plaatst.
Lees ook: Aangepaste afbeeldingsoverlays maken in Divi
Open hiervoor de instellingen van de eerste rij en werk de z-index als volgt bij:
Z-index: 10
Zet dan de Z-index van de andere twee regels op hover.
Z-index: 11 (zweven)
Het is gebeurd ! Laten we het eindresultaat zien.
Eindresultaat
Download DIVI nu!!!
Verticale tabbladen maken
Als u verticale tabbladen aan rijen wilt toevoegen, gaat u als volgt te werk.
Ga je gang en dupliceer het gedeelte met de hover-tabs die we zojuist hebben gemaakt, zodat je een nieuw ontwerp hebt om mee te werken.
Open vervolgens de sectie-instellingen en werk het volgende bij:
- Vulling: 10% (links en rechts)
Werk de volgende parameters voor alle drie de regels van de dubbele sectie bij met het volgende:
- Breedte: 70% (desktop), 70% (tablet), 80% (telefoon)
- Maximale breedte: 980px
Werk vervolgens de verlooprichting bij naar 90 graden voor alle drie de lijnen.
- Gradiëntrichting: 90 graden
Nu is het tijd om onze tekstmodule-tabbladen links van onze rijen te plaatsen om de gewenste verticale tabbladen te krijgen.
Zie ook: Hoe maak je een Spinning Wheel Menu op Hover in Divi
Open de instelling voor het tabblad Tekstmodule in de eerste rij en werk het volgende bij:
- Marge (bureaublad): -50px (boven), -150px (links)
Open vervolgens de instellingen van het moduletabblad Sectie 2e regel tekst en werk het volgende bij:
- Marge (bureaublad): 0px (boven), -150px (links)
En voor het laatste tabblad in de derde rij werkt u het volgende bij:
- Marge (desktop): 50px boven, -150px links
Eindresultaat
Laten we nu het eindresultaat bekijken.
Download DIVI nu!!!
Conclusie
Met een beetje creativiteit en de kracht van Divi kun je behoorlijk coole aangepaste tabbladen maken met Divi-lijnen. Er zijn enkele beperkingen aan wat u kunt weergeven.
Met deze configuratie moeten bijvoorbeeld alle rijen dezelfde hoogte hebben als de sectie. Maar om geen plug-in te hoeven gebruiken, is dit een geweldige oplossing.
We hopen dat deze tutorial je zal inspireren voor je volgende Divi-projecten. Als u zich zorgen maakt of suggesties heeft, kunt u ons vinden in het commentaar gedeelte om het te bespreken.
U kunt ook overleggen onze middelen, als u meer elementen nodig hebt om uw projecten voor het maken van internetsites uit te voeren, raadpleeg onze gids op de WordPress blog creatie of die op Divi: het beste WordPress-thema aller tijden.
Maar in de tussentijd deel dit artikel op uw verschillende sociale netwerken.
...
