De Divi Post Navigatie Module

Een postnavigatiemodule toevoegen aan uw pagina

Voordat je een post-navigatiemodule aan je pagina kunt toevoegen, moet je eerst in Divi Builder springen. Nadat het Divi-thema op uw website is geïnstalleerd, ziet u elke keer dat u een nieuwe pagina bouwt een knop Divi Builder gebruiken boven de berichteditor. Als u op deze knop klikt, wordt Divi Builder ingeschakeld en hebt u toegang tot alle modules van Divi Builder. Klik vervolgens op de knop Visual Builder gebruiken om de builder in Visual Mode te starten. U kunt ook klikken op de knop Visual Builder gebruiken tijdens het browsen op uw website aan de voorkant als u bent aangemeld bij uw WordPress-dashboard.

post navigatie module

Nadat u Visual Builder hebt ingevoerd, kunt u op de grijze plusknop klikken om een ​​nieuwe module aan uw pagina toe te voegen. Nieuwe modules kunnen alleen binnen Rijen worden toegevoegd. Als u een nieuwe pagina start, vergeet dan niet eerst een rij aan uw pagina toe te voegen. We hebben een aantal geweldige tutorials over het gebruik van Divi’s rij- en sectie- elementen.

post navigatie module

Zoek de postnavigatiemodule in de lijst met modules en klik erop om deze aan uw pagina toe te voegen. De modulelijst kan worden doorzocht, wat betekent dat u ook het woord ‘na navigatie’ kunt typen en vervolgens op enter kunt klikken om de na-navigatiemodule automatisch te zoeken en toe te voegen! Nadat de module is toegevoegd, wordt u begroet met de lijst met opties van de module. Deze opties zijn onderverdeeld in drie hoofdgroepen: Inhoud , Ontwerp en Geavanceerd .

Gebruiksvoorbeeld: Aangepaste navigatielinks toevoegen aan de onderkant van een blogbericht

Het hebben van navigatielinks naar volgende en vorige artikelen onderaan uw bericht is een geweldige manier om uw bezoekers bezig te houden met uw inhoud. In dit voorbeeld ga ik je laten zien hoe je de werkelijke namen van de posttitels voor je navigatielinks kunt gebruiken in plaats van de algemene “vorige” en “volgende” linknamen. Ik ga je ook laten zien hoe je een rand rond de links kunt toevoegen om ze meer een knopgevoel te geven.

post navigatie module

Laten we beginnen.

Gebruik de visuele builder om een ​​standaardsectie met een lay-out met volledige breedte (1 kolom) aan de onderkant van het bericht toe te voegen. Voeg vervolgens een postnavigatiemodule toe aan de rij.

post navigatie module

Update de instellingen voor navigatie na het volgende:

Tabblad Inhoud

Vorige linktekst:% title (deze variabele voegt de titel van het bericht in)
Volgende linktekst:% title (deze variabele voegt de titel van het bericht in)

Ontwerp tabblad

Links Font: PT Sans
Links Lettertype: 20px
Links Tekst Kleur: # 5e95c1
Gebruik Border: JA
Randkleur: # 5e95c1
Border Breedte: 1px
Custom Padding: 20px Top, 20px Right, 20px Bottom, 20px Left

post navigatie module

Dat is het! Nu heb je berichttitels voor de berichtnavigatielinks.

post navigatie module

Opties voor navigatie na inhoud posten

Op het tabblad inhoud vindt u alle inhoudselementen van de module, zoals tekst, afbeeldingen en pictogrammen. Alles wat bepaalt wat er in uw module verschijnt, vindt u altijd op dit tabblad.

post navigatie module

Vorige linktekst

Definieer aangepaste tekst voor de vorige link. U kunt de variabele% title gebruiken om de titel van het bericht op te nemen. Standaard leeg laten.

Volgende linktekst

Definieer aangepaste tekst voor de volgende link. U kunt de variabele% title gebruiken om de titel van het bericht op te nemen. Standaard leeg laten.

In dezelfde categorie

Hier kunt u bepalen of vorige en volgende berichten binnen dezelfde taxonomieterm moeten vallen als de huidige post.

Aangepaste taxonomienaam

Laat deze optie leeg als u deze module in een project of bericht gebruikt. Typ anders de taxonomienaam om de optie ‘In dezelfde categorie’ correct te laten werken.

Link vorige bericht verbergen

Hier kun je kiezen of je de vorige berichtlink wilt verbergen of weergeven.

Verberg volgende bericht Link

Hier kunt u kiezen of u de volgende berichtlink wilt verbergen of weergeven.

Beheerderslabel

Dit zal het label van de module in de bouwer veranderen voor gemakkelijke identificatie. Wanneer u de WireFrame-weergave in Visual Builder gebruikt, verschijnen deze labels in het moduleblok in de Divi Builder-interface.

Ontwerpopties na navigatie

Op het ontwerptabblad vindt u alle stijlopties van de module, zoals lettertypen, kleuren, grootte en afstand. Dit is het tabblad dat u zult gebruiken om het uiterlijk van uw module te wijzigen. Elke Divi-module heeft een lange lijst met ontwerpinstellingen die u kunt gebruiken om vrijwel alles te wijzigen.

post navigatie module

Links Font

U kunt het lettertype van uw linktekst wijzigen door het gewenste lettertype in het vervolgkeuzemenu te selecteren. Divi wordt geleverd met tientallen geweldige lettertypen, mogelijk gemaakt door Google Fonts. Divi gebruikt standaard het lettertype Open Sans voor alle tekst op uw pagina. U kunt ook de stijl van uw tekst aanpassen met de opties vet, cursief, hoofdletters en onderstrepen.

Links Lettergrootte

Hier kunt u de grootte van uw linktekst aanpassen. U kunt de bereikschuifregelaar slepen om de grootte van uw tekst te vergroten of te verkleinen, of u kunt de gewenste waarde voor de tekstgrootte rechtstreeks in het invoerveld rechts van de schuifregelaar invoeren. De invoervelden ondersteunen verschillende meeteenheden, wat betekent dat u “px” of “em” kunt invoeren volgens uw maatwaarde om het eenheidstype te wijzigen.

Tekstkleur van koppelingen

Standaard worden alle tekstkleuren in Divi wit of donkergrijs weergegeven. Als u de kleur van de linktekst wilt wijzigen, kiest u met deze optie de gewenste kleur in de kleurenkiezer.

Links Letterafstand

Letterspatiëring beïnvloedt de ruimte tussen elke letter. Als u de ruimte tussen elke letter in uw linktekst wilt vergroten, gebruikt u de bereikschuifregelaar om de ruimte aan te passen of voert u de gewenste afstand in het invoerveld rechts van de schuifregelaar in. De invoervelden ondersteunen verschillende meeteenheden, wat betekent dat u “px” of “em” kunt invoeren volgens uw maatwaarde om het eenheidstype te wijzigen.

Links Lijnhoogte

Lijnhoogte beïnvloedt de ruimte tussen elke regel van uw linktekst. Als u de ruimte tussen elke regel wilt vergroten, gebruikt u de bereikschuifregelaar om de ruimte aan te passen of voert u de gewenste afstand in het invoerveld rechts van de schuifregelaar in. De invoervelden ondersteunen verschillende meeteenheden, wat betekent dat u “px” of “em” kunt invoeren volgens uw maatwaarde om het eenheidstype te wijzigen.

Gebruik de rand

Als u deze optie inschakelt, wordt er een rand rond uw module geplaatst. Deze rand kan worden aangepast met de volgende voorwaardelijke instellingen.

Rand kleur

Deze optie heeft invloed op de kleur van uw rand. Selecteer een aangepaste kleur in de kleurenkiezer om deze op uw rand toe te passen.

Grensbreedte

Standaard hebben randen een breedte van 1 pixel. U kunt deze waarde verhogen door de bereikschuifregelaar te slepen of door een aangepaste waarde in te voeren in het invoerveld rechts van de schuifregelaar. Aangepaste meeteenheden van ondersteund, wat betekent dat u de standaardeenheid kunt wijzigen van “px” in iets anders, zoals em, vh, vw etc.

Randstijl

Grenzen ondersteunen acht verschillende stijlen, waaronder: effen, gestippeld, onderbroken, dubbel, groef, nok, inzet en begin. Selecteer de gewenste stijl in het vervolgkeuzemenu om deze op uw rand toe te passen.

Aangepaste marge

Marge is de ruimte die buiten uw module wordt toegevoegd, tussen de module en het volgende element boven, onder of links en rechts ervan. U kunt aangepaste margewaarden toevoegen aan een van de vier zijden van de module. Verwijder de toegevoegde waarde uit het invoerveld om de aangepaste marge te verwijderen. Standaard worden deze waarden gemeten in pixels, maar u kunt aangepaste maateenheden invoeren in de invoervelden.

Aangepaste opvulling

Opvulling is de toegevoegde ruimte in uw module, tussen de rand van de module en de interne elementen. U kunt aangepaste opvulwaarden toevoegen aan een van de vier zijden van de module. Verwijder de toegevoegde waarde uit het invoerveld om de aangepaste marge te verwijderen. Standaard worden deze waarden gemeten in pixels, maar u kunt aangepaste maateenheden invoeren in de invoervelden.

Post-navigatie Geavanceerde opties

Op het tabblad Geavanceerd vindt u opties die meer ervaren webontwerpers nuttig kunnen vinden, zoals aangepaste CSS- en HTML-kenmerken. Hier kunt u aangepaste CSS toepassen op de vele elementen van de module. U kunt ook aangepaste CSS-klassen en ID’s toepassen op de module, die kunnen worden gebruikt om de module aan te passen in het style.css-bestand van uw kindthema.

post navigatie module

CSS ID

Voer een optionele CSS-ID in die voor deze module moet worden gebruikt. Een ID kan worden gebruikt om aangepaste CSS-stijlen te maken of om koppelingen naar bepaalde delen van uw pagina te maken.

CSS-klasse

Voer optionele CSS-klassen in die voor deze module moeten worden gebruikt. Een CSS-klasse kan worden gebruikt om aangepaste CSS-stijlen te maken. U kunt meerdere klassen toevoegen, gescheiden door een spatie. Deze klassen kunnen worden gebruikt in uw Divi Child-thema of in de aangepaste CSS die u toevoegt aan uw pagina of uw website met behulp van de Divi Theme Options of Divi Builder-pagina-instellingen.

Aangepaste CSS

Aangepaste CSS kan ook worden toegepast op de module en alle interne elementen van de module. In het gedeelte Aangepaste CSS vindt u een tekstveld waar u aangepaste CSS rechtstreeks aan elk element kunt toevoegen. CSS-invoer in deze instellingen is al ingepakt in stijltags, dus u hoeft alleen CSS-regels in te voeren gescheiden door puntkomma’s.

Zichtbaarheid

Met deze optie kunt u bepalen op welke apparaten uw module wordt weergegeven. U kunt ervoor kiezen om uw module afzonderlijk uit te schakelen op tablets, smartphones of desktopcomputers. Dit is handig als u verschillende modules op verschillende apparaten wilt gebruiken of als u het mobiele ontwerp wilt vereenvoudigen door bepaalde elementen van de pagina te verwijderen.