Wilt u in Divi een navigatiebalk maken die van onder tot boven aan de pagina sticky is?
In de handleiding Divi Vandaag laten we u stap voor stap zien hoe u in Divi een sticky navigatiebalk van onder naar boven kunt maken.
Hierdoor blijft de navigatiebalk in eerste instantie onderaan de pagina staan ​​voor een unieke lay-out boven de vouw. Als u vervolgens door het gedeelte boven de paginavouw scrolt, blijft de navigatiebalk bovenaan de pagina staan ​​en blijft daar de hele pagina staan.
Je zou kunnen zeggen dat de pagina het menu onderaan het scherm "overneemt" en een leuk interactie-effect geeft 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 DIVI nu!!!
Laten we beginnen met het maken van een nieuwe pagina met Divi Builder
Om te beginnen, moet u het volgende doen:
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.
Maak een kleverige navigatiebalk van onder naar boven in Divi
Deel 1: De sectie en koptekst boven de waterlijn maken
Voor het eerste deel van deze zelfstudie maken we de sectie en koptekst boven de vouw die zullen dienen als de hoofdkoptekst van onze pagina. De sectie wordt volledig scherm weergegeven op het bureaublad om ervoor te zorgen dat de sectie het volledige weergavevenster in beslag neemt.
Lees ook: Divi: kies tussen het raster en de volledige breedte-indeling van de module Filterbare portfolio
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]
Onder het tabblad Design, update de minimale hoogte en opvulling.
- Minimale hoogte: 100vh (desktop), automatisch (tablet en telefoon)
- Vulling: 20vh (boven en onder)
Koptekst
Om de koptekst te maken, voegt u een nieuwe tekstmodule toe aan de regel.
Werk vervolgens de inhoud met de volgende H1-header:
<h1>Above the Fold</h1>
Tekst instellingen
Onder het tabblad Design werk in de instellingen van de tekstmodule de lettertypestijlen van de koptekst als volgt bij:
- rubriek:
- Lettertype: Ruby
- Lettergewicht: Semi Vet
- Stijl: TT
- Tekstuitlijning: gecentreerd
- Tekstkleur: #302ea7
- Grootte: 130px (bureaublad), 70px (tablet), 40px (telefoon)
- Letterafstand: 2px
- Lijnhoogte: 1,3 em
Deel 2: Het gedeelte onder de waterlijn maken
Om de functionaliteit van de sticky navbar 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 vouw 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 naar beneden te scrollen. Dit is gewoon een sectie die moet worden ingevuld in plaats van de inhoud echte één pagina.
- Minimale hoogte: 200vh
Werk vervolgens de inhoud van de Tekstmodule door het woord te vervangen "Onderstaand" par "Bovenstaande".
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.
Nieuwe sectie en lijn toegevoegd
Laten we eerst een nieuwe reguliere sectie direct onder de sectie boven de vouw toevoegen.
Laten we vervolgens een rij met één kolom aan de sectie toevoegen.
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.
- Vulling: 0px (boven en 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.
Voor een betere gebruikerservaring willen we dat de navigatiebalk helemaal bovenaan de pagina op het tablet- en telefoonscherm begint.
Geef de sectie hiervoor een absolute positie op tablet en telefoon.
- Positie: relatief (desktop), absoluut (tablet en telefoon)
Plakpositie toevoegen voor desktop en mobiel
Werk het volgende bij om de vastgezette positie aan het navigatiebalkgedeelte toe te voegen:
- Kleverige positie: blijf bij boven en onder (desktop), blijf bij boven (tablet en telefoon)
Rij-opvulling bijwerken
Zodra de plakkerige sectie is voltooid, opent u de rij-instellingen in de sectie en werkt u de opvulling als volgt bij:
- Vulling: 10px (boven en onder)
Een navigatiemenu maken
Met de sectie en lijn op hun plaats, zijn we klaar om het navigatiemenu te maken.
Begin met het toevoegen van een menumodule aan de rij met één kolom.
Menu-inhoud
Werk de menu-inhoud als volgt bij:
- selecteer het menu in de vervolgkeuzelijst
- logo afbeelding toevoegen
- standaard achtergrondkleur verwijderen
Onder het tabblad Design, werk de volgende menutekst en pictograminstellingen bij:
- Actieve linkkleur: #fff
- Menu Lettertype: Ruby
- Lettertypestijl menu: TT
- Tekstkleur: #fff
- Grootte menutekst: 16px
- Tekstuitlijning: rechts
- Lijnkleur vervolgkeuzemenu: #e19dff
- Tekstkleur mobiel menu: #302ea7
- Kleur winkelwagenpictogram: #fff
- Kleur 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 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 browserbreedte verkleinen tot onder 980px om het mobiele menu te zien.
U kunt ook raadplegen: Divi: een plakkerige navigatiebalk maken
Klik met de rechtermuisknop op het gedeelte met het menu en kies de optie inspecteer het element in het contextmenu van de browser. Je zou een doos moeten zien outils onder de sectie met vermelding van de afmetingen (inclusief hoogte) van de sectie.
Voor dit voorbeeld is de hoogte van het navigatiebalkgedeelte 72 pixels.
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).
Onder het tabblad Design, voeg de volgende bovenrand toe op tablet en telefoon:
- Breedte bovenrand: 72 pixels (tablet en telefoon)
- Kleur bovenrand: #302ea7
Omdat de rand dezelfde hoogte heeft als de sectie met de absolute positie, kun je de rand niet zien omdat deze alleen dient om de sectie naar beneden te duwen, zodat deze niet wordt afgesneden.
Eindresultaat
Ontdek het eindresultaat!
Download DIVI nu!!!
Conclusie
Het maken van een kleverige navigatiebalk van onder naar boven kan eenvoudig worden gedaan met behulp van Divi's ingebouwde positie en plakkerige opties.
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 browser blijft plakken. Ik hoop dat dit helpt om een ​​meer unieke en boeiende boven de vouw toe te voegen aan je Site web.
Deze plakkerige navigatiebalk werkt het beste voor een ontwerp met één pagina in plaats van een algemeen sjabloon. Dat gezegd hebbende, kunt u er eenvoudig voor kiezen om dit te gebruiken als uw homepage-ontwerp en een globale koptekst te gebruiken voor de rest van de pagina's met behulp van de Divi-themagenerator .
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.
Aarzel niet om ook onze gids te raadplegen over 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.
...
