Hoe maak je een sticky bottom-up navigatiebalk in Divi

In de Divi-tutorial van vandaag laten we u stap voor stap zien hoe u een van onder naar boven kleverige navigatiebalk in Divi kunt maken. Hierdoor kan de navigatiebalk aanvankelijk onder aan de pagina blijven voor een unieke lay-out boven de vouw. Zodra u voorbij het gedeelte boven de paginavouw bent gekomen, blijft de navigatiebalk bovenaan de pagina staan ​​en blijft daar gedurende de rest van de pagina. Je zou kunnen zeggen dat de pagina het menu onderaan het scherm "overneemt" en een mooi interactie-effect zal geven aan je hoofdmenu en je Site web.

Laten we beginnen!

overzicht

Om u te helpen het resultaat te visualiseren dat we proberen te bereiken, laten we eens kijken naar het eindresultaat:

Download de lay-out GRATIS

Om de ontwerpen in deze zelfstudie in handen te krijgen, moet u deze eerst downloaden met behulp van de onderstaande knop. Om toegang te krijgen tot de download, moet u zich abonneren op onze Divi Daily-mailinglijst met behulp van de formulier onderstaand. Als nieuwe abonnee ontvang je elke maandag nog meer Divi-voordelen en een gratis Divi Layout-pakket! Als je al op de lijst staat, vul dan hieronder je e-mailadres in en klik op downloaden. U wordt niet "opnieuw ingeschreven" of ontvangt geen extra e-mails.

Om de lay-out van de sectie in uw Divi-bibliotheek te importeren, gaat u naar de Divi-bibliotheek.

Klik op de knop Importeren.

Selecteer in het pop-upvenster overdraagbaarheid het tabblad Importeren en kies het bestand dat u van uw computer wilt downloaden.

Klik dan op de importeerknop.

Als u klaar bent, is de lay-out van de secties beschikbaar in de Divi Builder.

Op naar de tutorial, wil je?

Wat je nodig hebt om te beginnen

Om te beginnen, moet u het volgende doen:

1. Installeer en activeer de . als u dat nog niet hebt gedaan Divi-thema.
2. Maak een nieuwe pagina aan in WordPress en gebruik de Divi Builder om de pagina aan de front-end te bewerken (visual builder).
3. Kies de optie "Vanaf niets bouwen".

Daarna heb je een leeg canvas om te beginnen met ontwerpen in Divi.

Maak een kleverige navigatiebalk van onder naar boven in Divi

Deel 1: De sectie en kop boven de waterlijn maken

Voor het eerste deel van deze zelfstudie gaan we de sectie en koptekst boven de waterlijn maken die zullen dienen als de hoofdkoptekstsectie van onze pagina. De sectie wordt volledig scherm weergegeven op het bureaublad om ervoor te zorgen dat de sectie het hele venster in beslag neemt.

Voeg een rij toe

Voeg om te beginnen een rij aan een kolom toe aan de standaardsectie.

Sectie-instellingen

Voordat u een module toevoegt, opent u de sectie-instellingen en voegt u als volgt een achtergrond toe:

• Achtergrondkleur: # e9f9ff
• Achtergrondafbeelding: [afbeelding toevoegen]

Werk op het tabblad Ontwerpen de minimale hoogte en opvulling bij.

• Minimale hoogte: 100 vh (desktop computer), automatisch (tablet en telefoon)
• Vulling: boven 20vh, onder 20vh

Koptekst

Om de koptekst te maken, voegt u een nieuwe tekstmodule toe aan de regel.

Werk vervolgens de inhoud bij met de volgende H1-header:

<h1>Above the Fold</h1>

Tekst instellingen

Werk op het tabblad Ontwerp van Tekstinstellingen de lettertypestijlen voor kopteksten als volgt bij:

• Titel lettertype: Rubik
• Gewicht koptekst: Semi vet
• Lettertypestijl TT-koptekst
• Uitlijning koptekst: Midden
• Titel tekstkleur: # 302ea7
• Titel tekstgrootte: 130px (desktop), 70px (tablet), 40px (telefoon)
• Koptekstafstand: 2px
• Koerslijnhoogte: 1,3 em

Deel 2: De sectie onder de vouw maken

Om de functionaliteit van de kleverige navigatiebalk te demonstreren, moeten we een sectie onder de vouw toevoegen, zodat we ruimte hebben om te scrollen.

Om de sectie te maken, dupliceert u de sectie boven de waterlijn die we zojuist hebben gemaakt.

Werk de achtergrond van de dubbele sectie bij.

• Achtergrondkleur: # f4def1

Geef de sectie vervolgens een grote minimale hoogte zodat we ruimte hebben om door de pagina te scrollen. Dit is slechts een sectie om in te vullen in plaats van de daadwerkelijke inhoud op een pagina.

Werk vervolgens de inhoud van de tekstmodule bij door het woord "Below" te vervangen door "Boven".

Deel 3: Maak de kleverige navigatiebalk

Om de kleverige navigatiebalk van onder naar boven te maken, is onze eerste stap het maken van een nieuwe sectie met één rij naar één kolom.

Voeg een nieuwe sectie en een nieuwe regel toe

Voeg een nieuwe reguliere sectie toe direct onder de sectie boven de waterlijn.

Voeg vervolgens een rij toe aan een kolom van de sectie.

Sectie-achtergrond en opvulling

Open de sectie-instellingen en werk de achtergrondkleur bij.

• Achtergrondkleur: # 302ea7

Verwijder vervolgens de boven- en ondervulling zodat de navigatiebalk minder hoogte heeft.

• Infill: 0px boven, 0px onder

Zichtbare overloop toevoegen

Om ervoor te zorgen dat de vervolgkeuzemenu's zichtbaar blijven, werkt u de zichtbaarheidsopties als volgt bij:

• Horizontale overloop: zichtbaar
• Verticale overloop: zichtbaar

Geef de sectie een absolute positie op mobiel

Het mobiele vervolgkeuzemenu wordt standaard geopend onder het hamburgerpictogram. Als we de navigatiebalk onderaan houden, zou het vervolgkeuzemenu worden verborgen als de gebruiker erop klikt in de onderste positie. Voor een betere gebruikerservaring willen we dat de navigatiebalk helemaal bovenaan de pagina op het tablet- en telefoonscherm begint.

Om dit te doen, wijst u de sectie een absolute positie toe op tablet en telefoon.

• Positie: Relatief (desktopcomputer), Absoluut (tablet en telefoon)

Plakpositie toevoegen voor desktop en mobiel

Werk het volgende bij om de plakpositie aan het navigatiebalkgedeelte toe te voegen:

• Vaste positie: Vasthouden aan boven- en onderkant (desktop), Vasthouden aan bovenzijde (tablet en telefoon)

Rij-opvulling bijwerken

Zodra het plakgedeelte is voltooid, opent u de rij-instellingen in het gedeelte en werkt u de vulling als volgt bij:

• Opvulling: 10 pixels bovenaan, 10 pixels onderaan

Een navigatiemenu maken

Met de sectie en rij op hun plaats, zijn we klaar om het navigatiemenu te maken.

Begin met het toevoegen van een menumodule aan de rij van een kolom.

Menu-inhoud

Werk de menu-inhoud als volgt bij:

• selecteer het menu in de vervolgkeuzelijst
• voeg logo-afbeelding toe (ik gebruik 122px bij 52px afbeelding)
• standaard achtergrondkleur verwijderen

Werk op het tabblad Ontwerpen de volgende instellingen voor menutekst en pictogrammen bij:

• Actieve linkkleur: #fff
• Lettertype menu: Rubik
• Lettertypestijl menu: TT
• Kleur menutekst: #fff
• Grootte menutekst: 16px
• Tekstuitlijning: rechts
• Kleur vervolgkeuzemenu: # e19dff
• Tekstkleur mobiel menu: # 302ea7
• Kleur winkelwagenpictogram: #fff
• Kleur van zoekpictogram: #fff
• Kleur hamburgermenupictogram: #fff

Een rand gebruiken om de absolute positie van de navigatiebalk op mobiel te verschuiven

Aangezien het navigatiebalkgedeelte een absolute positie heeft op mobiel, zal de balk boven (en afgesneden) het bovenste gedeelte van de pagina zitten. Om dit probleem op te lossen, moeten we het bovenste gedeelte verschuiven met een bovenrand van dezelfde hoogte als de navigatiebalk / sectie.

Inspecteer de hoogte van het navigatiebalkgedeelte op mobiel

Om de hoogte van de navigatiebalk op mobiel te bepalen, opent u een live-versie van de pagina in een nieuw browservenster. Vervolgens kunt u de breedte van de browser verkleinen tot onder 980px om het mobiele menu te zien. Klik met de rechtermuisknop op het gedeelte dat het menu bevat en kies de optie Item inspecteren in het contextmenu van de browser. U zou een gereedschapskist onder de sectie moeten zien met de afmetingen (inclusief hoogte) van de sectie. Voor dit voorbeeld is de hoogte van het navigatiebalkgedeelte 72px.

Een verschuiving van de bovenrand toevoegen aan het gedeelte boven de vouw

Nu we de hoogte van de sectie hebben bepaald, open je de instellingen voor de bovenste sectie (boven de vouw).

Voeg op het tabblad Ontwerpen de volgende bovenrand toe op zowel tablet als telefoon:

• Breedte bovenrand: 72px (tablet en telefoon)
• Kleur bovenrand: # 302ea7

Omdat de rand dezelfde hoogte heeft als de sectie met de absolute positie, zult u de rand niet kunnen zien omdat deze alleen dient om de sectie naar beneden te duwen zodat deze niet wordt afgesneden.

Eindresultaat

Ontdek het eindresultaat!

Final gedachten

Het creëren van een kleverige navigatiebalk van onder naar boven kan eenvoudig worden bereikt met behulp van Divi's ingebouwde positie- en plakopties. De sleutel is om het gedeelte boven de vouw een hoogte van 100 vh te geven en vervolgens het navigatiebalkgedeelte eronder toe te voegen dat aan de onder- en bovenkant van de navigator blijft plakken. Hopelijk zal dit helpen om een ​​meer unieke en boeiende boven de waterlijn toe te voegen aan je Site web.

Deze kleverige navigatiebalk werkt het beste voor een ontwerp met één pagina in plaats van voor een algemene sjabloon. Dat gezegd hebbende, kunt u er eenvoudig voor kiezen om dit als uw startpagina-ontwerp te gebruiken en een globale koptekst te gebruiken voor de rest van de pagina's met behulp van de builder. Divi-thema.

Ik kan niet wachten om van je te horen in de comments.

Voor je gezondheid!