Maak vandaag nog eenvoudig uw website!

ELEMENTOR is 's werelds gemakkelijkste Blog Builder!

Stop met het verspillen van tijd en veel geld om een ​​ontwikkelaar te betalen wanneer je kunt Maak eenvoudig uw WordPress-website of blog met een professioneel ontwerp slechts enkele minuten ! Er is geen technische kennis vereist.

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 de inhoud van een lange pagina te scrollen. De tabbladenmodule van Divi is gemakkelijk te gebruiken en geweldig om met één klik door eenvoudige inhoud te bladeren.

Maar in deze zelfstudie laten we u zien hoe u volledige Divi-rijen kunt converteren naar tabbladen die bij de muisaanwijzer verschijnen. 

We laten u ook zien hoe u horizontale en verticale tabbladen maakt. Dit ontgrendelt de kracht van Divi om volledige lay-outs te maken met meerdere modules voor elk tabbladinhoudsgebied. 

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.

Divi-lijnen geconverteerd naar tabbladen

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)

Divi-lijnen geconverteerd naar tabbladen

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
Divi

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.

...

%d bloggers zoals deze pagina: