Tabbladen zijn zeker handig om belangrijke informatie beschikbaar te maken in een beknopt gedeelte van uw website. Dit vermindert de noodzaak voor de gebruiker om door de inhoud van lange pagina’s te bladeren. De tabbladmodule van Divi is eenvoudig te gebruiken en ideaal om door eenvoudige inhoud bij klikken te bladeren.

Maar in deze zelfstudie laat ik je zien hoe je volledige Divi-rijen converteert naar zweeftabs. Ik zal je ook laten zien hoe je zowel horizontale als verticale tabbladen kunt maken. Hiermee ontgrendelt u de kracht van Divi om complete rijlay-outs te ontwerpen met meerdere modules voor elk tabbladinhoudsgebied. Geen plug-in nodig!

Laten we beginnen.

Voorproefje

Hier is een snelle blik op de horizontale en verticale zweeftabs die we samen zullen bouwen in deze tutorial.

 

Download de Divi Rows Hover Tabbladen Layout GRATIS

Als u de ontwerpen van deze zelfstudie te pakken wilt krijgen, moet u deze eerst downloaden via de onderstaande knop. Om toegang te krijgen tot de download, moet je je abonneren op onze Divi Daily e-maillijst door het onderstaande formulier te gebruiken. Als nieuwe abonnee ontvang je elke maandag nog meer Divi-goedheid en een gratis Divi Layout-pakket! Als u al op de lijst staat, voert u eenvoudig uw e-mailadres hieronder in en klikt u op Downloaden. Je wordt niet “opnieuw ingeschreven” of ontvangt extra e-mails.

Om de lay-out naar uw pagina te importeren, pakt u eenvoudig het zip-bestand uit en sleept u het json-bestand naar de Divi Builder.

Laten we naar de tutorial gaan we?

Wat je nodig hebt om te beginnen

Om te beginnen, moet je de volgende opstelling hebben:

  1. Het Divi-thema geïnstalleerd en actief
  2. Een nieuwe pagina gemaakt om vanaf de basis aan de voorkant te bouwen (visual builder)
  3. Drie afbeeldingen voor nepinhoud

Daarna heb je een leeg canvas om een ​​paar zweeftabs te bouwen in Divi.

Horizontale zwaai-tabbladen maken met Divi Rows

Maak een nieuw regulier gedeelte met een rij met twee kolommen om aan de slag te gaan.

Achtergrondrijen, opvulling en doosschaduw

Voordat we onze modules toevoegen, moeten we eerst de rijinstellingen een beetje aanpassen. We zullen later terug moeten komen naar de rij om deze in te stellen voor onze tabbladfunctionaliteit.

Open de rij-instellingen en werk het volgende bij:

Achtergrondverloop Linkerkleur: # 284f91 
Achtergrondverloop Rechtskleur: # 4646c4

Vulling: 50px top, 50px bottom, 50px links, 50px rechts 
Box Shadow: zie screenshot 
Box Shadow Color: rgba (70,70,196,0.66)

Inhoud aan de rij toevoegen

Nu gaan we wat nep-content toevoegen aan onze rij. Houd er rekening mee dat u elke combinatie van kolommen en modules voor uw inhoudsgebied kunt toevoegen.

Voeg in kolom 1 een afbeelding toe met een afbeeldingsmodule. Ik gebruik er een uit het Design Conference Layout Pack .

Voeg in de rechterkolom een ​​call-to-action-module toe en werk het volgende bij:

Knop Link-URL: # (alleen om de knop voor nu weer te geven) 
Gebruik achtergrondkleur: NO

Tekstuitlijning: links Titellettertype 
: Lato 
Titel Tekstgrootte: 60px (bureaublad), 50px (telefoon)

Het tabblad maken

Om het daadwerkelijke tabblad te maken, zullen gebruikers zweven om deze rij-inhoud te onthullen, we moeten een tekstmodule maken en deze rechtsboven plaatsen met enkele aangepaste CSS.

Ga je gang en voeg een nieuwe tekstmodule toe onder de afbeelding in kolom 1 en werk het volgende bij:

Inhoud: “Tab One”

Achtergrondkleur: # 284f91 (dit moet overeenkomen met de linker verloopkleur van de rij) 
Tekst Tekst Uitlijning: midden 
Tekst Tekstkleur: #ffffff 
Breedte: 100px 
Hoogte: 50px 
Marge: -100px top, -50px links 
Opvulling: 14px boven

Voeg ten slotte de volgende aangepaste CSS aan het hoofdelement toe om het een absolute positie boven aan de rij te geven.

01
02
position: absolute !important;
top: 0;

Deze CSS plus de aangepaste marges die we hebben toegevoegd, zorgen ervoor dat het tabblad precies bovenaan links in de rij staat. Het is belangrijk dat de tabbladen daadwerkelijk boven de rij zitten, zodat de gebruiker er later overheen kan zweven.

Sectie hoogte en afstand

Laten we, voordat we de resterende rijen en tabbladen blijven maken, onze rijen een beetje ademruimte geven door wat boven- en ondermarge aan de sectie toe te voegen. Voor dit ontwerp is het belangrijk dat we marges gebruiken om onze sectie uit te sparen, omdat we onze sectie ook een bepaalde hoogte geven. We moeten onze sectie een vaste hoogte geven omdat we willen dat onze rijen de volledige hoogte van onze sectie beslaan. Dit betekent dat elk van onze rijen (de inhoud van het tabblad) dezelfde hoogte heeft als onze sectie. Het is dus het beste dat elk van de rijen een vergelijkbare hoeveelheid inhoud heeft of dat er ongewenste negatieve ruimte is op sommige van de rijtabbladen. Dit zou later zinvoller moeten zijn.

Open voor nu de sectie-instellingen en werk het volgende bij:

Hoogte: 500px (bureaublad), 900px (tablet), 750px (telefoon) 
Marge: 100px top, 100px bottom 
Vulling: 0px top, 0px bottom

Merk op dat de hoogte van de sectie moet worden aangepast om rekening te houden met de langere inhoudsruimte wanneer de rijkolommen op mobiel worden gestapeld. Dus er zal wat aanpassingen aan deze hoogte nodig zijn voor uw eigen behoeften.

Bewaar nu uw instellingen en laten we teruggaan naar het toevoegen van die meer rijen.

De tweede rij met tabbladen maken

Als u de tweede rij wilt maken, dupliceert u de rij die u eerder hebt gemaakt. Verplaats de tekstmodule naar kolom 1 en de afbeelding naar kolom 2. Werk vervolgens de afbeelding bij met een nieuwe. Dit zal u helpen een idee te krijgen van hoe verschillende inhoud eruit ziet op elk tabblad.

Open de instellingen van de tweede rij en verander de achtergrondverloopkleuren door de muisaanwijzer over het voorbeeldgebied van de achtergrond te bewegen en op het kleine “schakel” -pictogram te klikken.

Open vervolgens de instellingen van de tekstmodule die is gebruikt om het tabblad in kolom 1 te maken en geef deze een kleur die overeenkomt met de nieuwe topverloop.

Achtergrondkleur: # 4646c4

Vervolgens moeten we het tabblad naar rechts verplaatsen, zodat wanneer deze rij de rij hierboven overlapt, u ​​het tabblad direct rechts van het tabblad in de eerste rij kunt zien.

Marge: 50px Links

Laagdekkingseffect voor de tweede rij toevoegen

Voor de rij kunnen we een hovereffect voor dekkingfilter toevoegen, zodat er een mooie zweefovergang is wanneer u over het tabblad zweeft en de inhoud van de rij onthult.

Open de rij-instellingen en voeg het volgende filter toe:

Dekking: 70% (standaard), 100% (hover)

Voeg vervolgens een overgangsduur en snelheidscurve toe voor het zwevende effect van het dekkingsfilter.

Overgangsduur: 500ms 
Transition Speed ​​Curve: Linear

De derde rij met tabbladen maken

Nu kunnen we onze laatste rij tabbladen toevoegen. Om dit te doen, kopieert u de tweede rij die u zojuist hebt gemaakt. Verplaats vervolgens de tekstmodule naar kolom 1 en de afbeelding naar kolom 2. En werk de afbeeldingsmodule bij met een nieuwe afbeelding.

Werk de rij-instellingen bij met een nieuwe achtergrondverloop.

Achtergrondverloop linker kleur: # 333333 
achtergrond kleurverloop juiste kleur: # 4646c4

Open vervolgens de instelling van de tekstmodule die is gebruikt om het tabblad in kolom 1 te maken en werk de kleur en marge bij.

Achtergrond kleur: # 333333 
Marge: 150px links

Dit is hoe uw pagina eruit zou moeten zien voordat we onze rijen positioneren om elkaar te overlappen.

Overlappende rijen met absolute positionering

Om onze rijen te overlappen, moeten we absolute positionering gebruiken. Vervolgens gebruiken we de Z-indexoptie om elke rij naar de voorgrond te brengen wanneer hij over de tabbladen beweegt. Maar omdat we onze rijen een absolute positie geven (en de ouder / sectie een ingestelde hoogte heeft), kunnen we 100% hoogte toevoegen aan elk van de rijen, zodat deze de volledige hoogte van de sectie beslaan.

Hier is hoe het te doen.

Implementeer eerst de wireframe-modus. Gebruik vervolgens multiselect om alle drie de rijen te selecteren en de instellingen van een ervan te openen om de elementinstellingen modaal te implementeren. Werk vervolgens de hoogte bij naar 100%.

Hoogte: 100%

Hiermee wordt de hoogte voor alle drie de rijen ingesteld op 100%.

Voeg vervolgens de volgende aangepaste CSS toe aan het hoofdelement:

01
02
03
04
position: absolute !important;
left: 0;
right: 0;
margin: auto;

Implementeer nu de bureaubladweergavemodus om te zien hoe de rijen mooi overlappen om onze tabbladen te maken.

De volgorde van de rijen bij zweven met de Z-index wijzigen

Op dit moment heb je misschien gemerkt dat de derde rij / tab op de voorgrond staat. We moeten de rijen dus opnieuw rangschikken met behulp van de Z-index, zodat het eerste tabblad eerst wordt weergegeven totdat je over een ander tabblad beweegt.

Om dit te doen, gaat u terug naar wireframe-weergavemodus en opent u de instellingen voor de eerste rij die u hebt gemaakt (met tabblad één). Update vervolgens de z-index als volgt:

Z-index: 10

Gebruik vervolgens multiselect om de tweede en derde rij te selecteren. Open vervolgens de modal-instellingen voor elementen en voeg de volgende z-index bij zweven aan beide rijen toe.

Z-index: 11 (zweeftekst)

Dat is het. Laten we het uiteindelijke resultaat bekijken.

Eindresultaat

De reden waarom dit werkt is omdat technisch elk tabblad (tekstmodule) deel uitmaakt van elke rij, ook al staan ​​ze boven en buiten de rij. Daarom zal het zweven boven een tabblad de rij weergeven waarin het zich bevindt.

En zo ziet het eruit op mobiel.

Verticale zwaai-tabbladen maken

Als u verticale tabs aan de rijen wilt toevoegen, hoeft u alleen maar de tekstmodules te verplaatsen die worden gebruikt om elk tabblad te maken. We zullen ook de grootte van onze rijen en sectie-afstanden moeten aanpassen om plaats te maken voor de tabbladen.

Dit is wat je moet doen.

Ga je gang en dupliceer de sectie met de hover-tabbladen die we zojuist hebben gebouwd, zodat je een nieuw ontwerp hebt om mee te werken.

Open vervolgens de sectie-instellingen en werk het volgende bij:

Opvulling: 10% over, 10% rechts

Gebruik vervolgens multiselect om alle drie rijen te selecteren en werk de elementinstellingen bij met het volgende:

Breedte: 70% (bureaublad), 70% (tablet), 80% (telefoon) 
Max. Breedte: 980 px

Werk vervolgens de verlooprichting bij naar 90 graden voor alle drie de vervaagtinten, zodat wanneer we de tabs aan de linkerkant plaatsen, de linkerverloopkleur zich mengt met de achtergrondkleur van de tab.

Verlooprichting: 90 graden

Nu is het tijd om de tabbladen van onze tekstmodule links van onze rijen te plaatsen om de verticale tabbladen te krijgen die we willen hebben.

Open de tekstinstelling van de tekstmodule in de eerste rij en werk het volgende bij:

Marge (bureaublad): -50px top, -150px links 
Marge (telefoon ): -100px top, -50px links

De marge-instelling voor telefoon is om het tabblad terug te brengen boven de rij voor een horizontale tabbladweergave.

Open vervolgens de instellingen voor het tabblad Tekstmodule in de rij en werk het volgende bij:

Marge (bureaublad): 0px top, -150px links 
Marge (telefoon): -100px top, 50px links

En voor het laatste tabblad in de derde rij, werkt u het volgende bij:

Marge (bureaublad): 50px boven, -150px Linker 
marge (telefoon): -100px boven, 150px links

Eindresultaat

Laten we nu eens kijken naar het eindresultaat.

En hier is het een tablet en telefoon.

Laatste gedachten

Met een beetje creatief denken en de kracht van Divi kun je een aantal coole aangepaste hover-tabbladen maken met Divi-rijen. Er zijn enkele beperkingen aan wat u kunt weergeven. Met deze opstelling moeten bijvoorbeeld alle rijen dezelfde hoogte hebben als de sectie. Maar omdat ik geen plug-in hoef te gebruiken, denk ik dat dit een geweldige oplossing is. En vergeet niet dat, omdat u Divi-rijen kunt gebruiken voor uw inhoud, er talloze manieren zijn waarop u deze zwevende tabbladen kunt gebruiken in uw volgende project.

Ik zie er naar uit om van je te horen in de reacties.

Proost!

Adres gegevens

Rondom Internet en Co-llective B.V.

Gravenlanden 32
9407JH Assen

Telefoon: 0592 601331

Email Co-llective:
mail@co-llective.nl

Email Rondom Internet: info@rondom-internet.nl

 

© Copyright Online Marketing Bureau Rondom Internet en Co-llective 2019 | powered by  | algemene voorwaarden

Pin It on Pinterest