Wilt u een navigatiebalk tussen berichten maken die sticky is in Divi?
Een sticky post-navigatiebalk is een effectieve manier om de gebruikerservaring van elke Site web van bloggen. Naast de hoofdnavigatie van uw site kunnen gebruikers met berichtnavigatielinks eenvoudig naar het vorige of volgende bericht springen jouw blog. En als u deze berichtnavigatielinks aan een plakbalk toevoegt, blijven deze links zichtbaar en beter toegankelijk.
In deze tutorial zullen we een navigatiebalk maken tussen post sticky in Divi. Om dit te doen, zullen we de ingebouwde opties van Divi gebruiken om een rij in een plakbalk te veranderen. Vervolgens zullen we de artikelnavigatiemodule gebruiken om de links “vorig artikel” en “volgend artikel” te ontwerpen.
Daarnaast voegen we een berichttitel toe als dynamische inhoud in het midden van de balk die gebruikers herinnert aan het bericht dat ze momenteel bekijken, waardoor de navigatiebalk een mooi "verleden, heden en toekomst"-element krijgt. .
Laten we beginnen!
overzicht
Hier is een korte blik op het ontwerp dat we in deze zelfstudie gaan maken.
Wat je nodig hebt om te beginnen
Hoewel je deze sticky post-navigatiebalk kunt toevoegen aan elke blogpostlay-out of sjabloon in Divi, gaan we een kant-en-klare blogpostsjabloon gebruiken om het proces te versnellen en het ontwerp snel op gang te brengen.
Importeer de "Meal Kit" blogpost-sjabloon in Divi Theme Builder
Download om te beginnen de gratis blogpostsjabloon voor Divi's Meal Kit Layout Pack . Ga hiervoor naar de blogpost .
Voer vervolgens uw e-mailadres in om het zipbestand te downloaden.
Pak daarna het bestand uit zodat het klaar is om te importeren.
Volg deze stappen om het bestand in de thema-editor te importeren:
- Ga naar Divi > Themabouwer.
- Klik op het draagbaarheidspictogram.
- Selecteer in het pop-upvenster Overdraagbaarheid het tabblad Importeren.
- Kies het eerder gedownloade uitgepakte bestand om te importeren.
- Klik op « Divi Theme Builder importeren Sjablonen ».
- Klik op het bewerkingspictogram om de geïmporteerde sjabloon te bewerken.
Maak een kleverige navigatiebalk in Divi
Deel 1: De plaklijn maken
Om de sticky navbar te maken, gebruiken we een rij met drie kolommen als de sticky container voor onze navigatielinks tussen post en posttitel.
Lees ook: Divi: de optie "Gradient Repeat" gebruiken om aangepaste achtergrondpatronen te maken
Voeg in het tweede gedeelte van de sjabloonlay-out een nieuwe rij toe onder de rij met de berichtinhoud.
Lijn instellingen
Lijninstellingen openen.
Eerst moeten we de plakkerige positie aan de lijn toevoegen, zodat we andere ontwerpopties in de plakkerige staat kunnen bijwerken.
Onder het tabblad Geavanceerd, werk het volgende bij:
- Kleverige positie: blijf bij boven en onder
- Top Sticky Limiet: Sectie
- Bodem kleverige limiet: lichaamsgebied
Om ervoor te zorgen dat kolommen niet worden gestapeld op mobiel, voegt u de volgende aangepaste CSS toe aan: Hoofdelement :
display:flex;
flex-wrap:nowrap;
align-items:center;
Onder het tabblad Content, voeg als volgt een witte achtergrondkleur toe aan de regel in de plakkerige staat:
- achtergrond: geen
- Bakgrond: #ffffff (plakkerig)
onder instellingen Design, werk het volgende bij:
- Gebruik aangepaste gootbreedte: JA
- Gootbreedte: 1
- Breedte: 100%
- Maximale breedte: 100%
- Vulling: 0px (boven en onder)
Verberg middelste kolom op tablet en telefoon
Om de kolom op mobiel te verbergen, opent u de instellingen voor kolom 2 (middelste kolom) en werkt u de zichtbaarheidsopties als volgt bij:
- Uitschakelen op: telefoon, tablet
Deel 2: Artikelnavigatielinks maken
Om meer ontwerpflexibiliteit voor postnavigatie te creëren, gebruiken we twee afzonderlijke postnavigatiemodules. In de linkerkolom voegen we een Post Navigation-module toe die alleen de link van het vorige artikel weergeeft. In de rechterkolom voegen we een postnavigatiemodule toe die alleen de volgende berichtlink weergeeft.
Link naar vorig bericht
Voeg in kolom 1 een nieuwe Post Navigation-module toe.
Open de module-instellingen, update het tabblad Opties van Content als volgt :
- Vorige link (tekst): Vorige bericht
- Toon vorige berichtlink: JA
- Toon volgende berichtlink: NEE
- Achtergrond: #000000
Onder het tabblad Design, werk het volgende bij:
- Links lettertype: Kumbh Sans
- Links Lettergewicht: Vet
- Lettertype: TT
- Tekstkleur links: #ffffff
- Tekstgrootte links: 26px (desktop), 16px (tablet en telefoon)
- Lijnhoogte: 1,3 em
- Vulling: 0,9 em (boven), 0,7 em (onder), 2 em (links en rechts)
Omdat we de middelste kolom op mobiel verbergen, kunnen de twee resterende kolommen die de navigatielinks bevatten nu elk 50% van de browserbreedte op tablet en telefoon innemen.
Zie ook: Divi: de stijl van verschillende elementen wijzigen tijdens het zweven of na een klik
Om ervoor te zorgen dat de navigatielink 50% van de viewport beslaat, voegt u de volgende aangepaste CSS toe aan het vak Links CSS voor weergave op tablets:
display:block;
width:50vw;
text-align:center;
float:none;
Aanmaken van de Next Post-link
Om de link voor het volgende bericht te maken, kopieert u de Post Navigation-module (met de vorige post-link) die we zojuist hebben ontworpen en plakt u deze in kolom 3 (rechterkolom).
Open vervolgens de postnavigatie-instellingen voor de dubbele module in de rechterkolom en werk de volgende opties voor het inhoudtabblad bij:
- Volgende link: volgende post
- Toon vorige berichtlink: NEE
- Toon volgende berichtlink: JA
- Achtergrond: #ffb100
Onder het tabblad Design, werk de kleur van de linktekst bij:
- Tekstkleur links: #000000
Deel 3: De dynamische berichttitel maken
Nu beide navigatielinks aanwezig zijn, zijn we klaar om de titel van het bericht toe te voegen als dynamische inhoud in de middelste kolom.
Het idee is om de gebruiker een leuke herinnering te geven aan het bericht dat ze aan het lezen zijn met de mogelijkheid om naar het vorige bericht en het volgende bericht te navigeren.
Voeg in de middelste kolom een nieuwe tekstmodule toe.
Onder het tabblad Content, klik op het icoon "Gebruik dynamische inhoud" in het lichaamsgebied en selecteer vervolgens Titel bericht/archief.
Zodra de dynamische posttitel is toegevoegd, opent u de instellingen van Titel bericht/archief en update de inhoud voordat:
- Voor het lezen
Sla vervolgens de wijzigingen op.
Onder het tabblad Design, werk het volgende bij:
- Tekstlettertype: Kumbh Sans
- Gewicht lettertype: vet
- Lettertype: TT
- Tekst Tekstkleur: transparant (bureaublad), #000000 (kleverig)
- Tekstgrootte: 16px
- Letterafstand: 1px
- Lijnhoogte: 1,3 em
- Tekstuitlijning: gecentreerd
- Maximale breedte: 96%
- Uitlijningsmodule: midden
- Vulling: 0,5 em (boven en onder)
Eindresultaat
Download DIVI nu!!!
Conclusie
In deze tutorial hebben we laten zien hoe eenvoudig het is om een sticky post-navigatiebalk te maken voor een blogpost-sjabloon in Divi.
De bar/line sticky-functionaliteit kan ook eenvoudig worden aangepast met de ingebouwde opties van Divi. U kunt bijvoorbeeld de plakkerige status beperken tot een sectie of ervoor kiezen om deze alleen aan de boven- of onderkant van de browserviewport te plakken.
Ik hoop dat dit nuttig zal zijn voor uw volgende blogsite. 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.
...
