Divi-zelfstudie: de navigatiemodule gebruiken in artikelen

Voordat u een Divi-module voor artikelnavigatie aan uw pagina kunt toevoegen, moet u eerst in de Divi Builder springen. Zodra de Divi-thema geïnstalleerd op uw website, ziet u een knop Gebruik Divi Builder boven de berichteditor wanneer u een nieuwe pagina maakt. Klik op deze knop om Divi Builder te activeren en toegang te krijgen tot alle Divi Builder-modules. Klik vervolgens op de knop Gebruik Visual Builder om de generator in visuele modus te starten. U kunt ook op de knop klikken Gebruik Visual Builder wanneer u door uw website op de voorgrond bladert en u bent verbonden met uw WordPress-dashboard.

Nadat u Visual Builder heeft geopend, 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 begint, vergeet dan niet om eerst een rij aan uw pagina toe te voegen.

Zoek de navigatiemodule in de lijst met modules en klik erop om deze aan je pagina toe te voegen. De lijst met modules is doorzoekbaar, wat betekent dat u ook het woord "postnavigatie" kunt typen en vervolgens op enter kunt klikken om de navigatiemodule automatisch te zoeken en toe te voegen. Zodra de module is toegevoegd, wordt u begroet door de lijst met moduleopties. Deze opties zijn onderverdeeld in drie hoofdgroepen: Inhoud , Ontwerpfase et vergevorderd .

Gebruiksvoorbeeld: aangepaste navigatielinks onder aan een blogbericht toevoegen

Het hebben van navigatielinks naar volgende en vorige artikelen onderaan uw artikel is een geweldige manier om uw bezoekers bezig met uw inhoud. In dit voorbeeld laat ik u zien hoe u de eigenlijke posttitelnamen voor uw navigatielinks kunt gebruiken in plaats van de algemene "vorige" en "volgende" linknamen. Ik zal je ook laten zien hoe je een rand rond de links kunt toevoegen om ze meer effect te geven.

Laten we beginnen.

Gebruik de visuele builder om een standaardsectie met een volledige breedte (1 kolom) lay-out onder aan de post toe te voegen. Voeg vervolgens een navigatiemodule toe na de regel.

Werk de publicatie-navigatie-instellingen als volgt bij:

Inhoud tabblad

Vorige linktekst:% titel (deze variabele voegt de titel van het artikel in)
Tekst van de volgende link:% title (deze variabele voegt de titel van het artikel in)

Ontwerp tabblad

Lettertypelinks: PT Sans
Links Lettergrootte: 20px
Tekstkleur koppelingen: # 5e95c1
Gebruik de rand: JA
Randkleur: # 5e95c1
Breedte van de rand: 1px
Aangepaste bekleding: 20px Top, 20px Right, 20px Bottom, 20px Left

Dat is alles ! Je hebt nu posttitels op de navigatielinks

Inhoudsopties voor de navigatiemodule

Op het inhoudstabblad vind je alle inhoudselementen van de module, zoals tekst, afbeeldingen en iconen. Dat alles controleert wat verschijnt in uw module, vindt u altijd op dit tabblad.

Tekst van de vorige link

Definieer aangepaste tekst voor de vorige link. U kunt de variabele% title gebruiken om de titel van het artikel op te nemen. Laat leeg voor de standaardwaarde.

Tekst van de volgende link

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

In dezelfde categorie

U kunt hier bepalen of de vorige en volgende artikelen in dezelfde taxonomieterm moeten vallen als het huidige artikel.

Naam van de aangepaste taxonomie

Laat deze optie leeg als u deze module voor een project of artikel gebruikt. Typ anders de naam van de taxonomie om ervoor te zorgen dat de optie 'In dezelfde categorie' correct werkt.

Verberg vorige link

Hier kunt u ervoor kiezen om de vorige link te verbergen of weer te geven.

Verberg de volgende link

Hier kunt u ervoor kiezen om de volgende link te verbergen of weer te geven.

Admin-label

Hierdoor wordt het modulelabel in de constructor gewijzigd voor gemakkelijke identificatie. Wanneer u de WireFrame-weergave in Visual Builder gebruikt, verschijnen deze labels in het moduleblok van de Divi Builder-interface.

Ontwerpopties na navigatie

Op het tabblad Ontwerpen vindt u alle stijlopties voor de module, zoals lettertypen, kleuren, grootte en spatiëring. Dit is het tabblad dat u gaat gebruiken om het uiterlijk van uw module te wijzigen. Elke Divi-module heeft een lange lijst met ontwerpinstellingen die u kunt gebruiken om alles te wijzigen.

Lettertype van de koppeling

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

Link 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 tekstgrootte rechtstreeks invoeren in het invoerveld rechts van de schuifregelaar. De invoervelden ondersteunen verschillende maateenheden, wat betekent dat u "px" of "em" kunt invoeren, afhankelijk van uw maatwaarde, om het type eenheid te wijzigen.

Tekstkleur van de links

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

Afstand van links letters

Letterafstand is van invloed op de ruimte tussen elke letter. Als u de ruimte tussen elke letter in uw linktekst wilt vergroten, gebruikt u de bereikschuifregelaar om de spatie aan te passen of voert u de gewenste afstand in het invoerveld rechts van de schuifregelaar in. De invoervelden ondersteunen verschillende maateenheden, wat betekent dat u "px" of "em" kunt invoeren, afhankelijk van uw maatwaarde, om het type eenheid te wijzigen.

Hoogte van de rij links

De regelhoogte is van invloed op 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 veld in. invoer rechts van de cursor. De invoervelden ondersteunen verschillende maateenheden, wat betekent dat u "px" of "em" kunt invoeren, afhankelijk van uw maatwaarde, om het type eenheid te wijzigen.

Gebruik de rand

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

Kleur van de rand

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

Breedte van de rand

Standaard zijn de randen 1 pixel breed. U kunt deze waarde verhogen door de bereikschuifregelaar te slepen of een aangepaste waarde in het invoerveld rechts van de schuifregelaar in te voeren. Aangepaste maateenheden worden ondersteund, wat betekent dat u de standaardeenheid kunt wijzigen van "px" in iets anders zoals em, vh, vw enz.

Randstijl

Randen ondersteunen acht verschillende stijlen: effen, gestippeld, gestippeld, dubbel, groef, rand, overlay en start. Selecteer de gewenste stijl in het vervolgkeuzemenu om deze op uw rand toe te passen.

Aangepaste marge

De marge is de ruimte die aan de buitenkant van uw module wordt toegevoegd, tussen de module en het volgende element erboven, eronder of links en rechts ervan. U kunt aangepaste margewaarden toevoegen aan elk van de vier zijden van de module. Om de aangepaste marge te verwijderen, verwijdert u de toegevoegde waarde uit het invoerveld. Standaard worden deze waarden gemeten in pixels, maar u kunt aangepaste maateenheden invoeren in de invoervelden.

Aangepaste vulling

Infill is de ruimte die in uw module wordt toegevoegd, tussen de rand van de module en de interne elementen. U kunt aangepaste opvulwaarden toevoegen aan elk van de vier zijden van de module. Om de aangepaste marge te verwijderen, verwijdert u de toegevoegde waarde uit het invoerveld. Standaard worden deze waarden gemeten in pixels, maar u kunt aangepaste maateenheden invoeren in de invoervelden.

Geavanceerde opties voor de navigatiemodule

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 elk van de vele elementen van de module. U kunt ook aangepaste CSS-klassen en ID's op de module toepassen, die kunnen worden gebruikt om de module aan te passen in het style.css-bestand van uw child-thema.

CSS ID

Voer een optionele CSS-ID in om voor deze module te gebruiken. Een ID kan worden gebruikt om een aangepaste CSS-stijl te maken of om naar bepaalde secties van uw pagina te linken.

CSS-klasse

Voer de optionele CSS-klassen in die voor deze module moeten worden gebruikt. Een CSS-klasse kan worden gebruikt om een aangepaste CSS-stijl 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-stylesheet die u aan uw pagina of aan uw website toevoegt met behulp van de Divi-thema-opties of de instellingen op de Divi Builder-pagina.

Aangepaste CSS

Aangepaste CSS kan ook worden toegepast op de module en elk van de interne onderdelen van de module. In de sectie Aangepaste CSS vindt u een tekstveld waar u aangepaste CSS-stijlpagina's rechtstreeks aan elk element kunt toevoegen. CSS-vermeldingen in deze instellingen zijn al verpakt in stijltags. Voer dus gewoon de CSS-regels in, gescheiden door puntkomma's.

zichtbaarheid

Met deze optie kunt u de apparaten bedienen waarop uw module verschijnt. U kunt ervoor kiezen om uw module afzonderlijk op tablets, smartphones of desktops te deactiveren. Dit is handig als u verschillende mods op verschillende apparaten wilt gebruiken, of als u het mobiele ontwerp wilt vereenvoudigen door bepaalde elementen van de pagina te verwijderen.

[vc_row center_row=”yes”][vc_column width=”1/2″][vcex_button target=”blank” layout=”expanded” align=”center” font_family=”Raleway” font_weight=”700″ style=”flat” custom_background=”#18b69d” custom_hover_background=”#118d7a” custom_color=”#ffffff” custom_hover_color=”#ffffff” icon_right=”fa fa-download”]DOWNLOAD DIVI THEMA [/vcex_button][/vc_column][vc_column width=” 1 /2″][vcex_button url=”https://www.elegantthemes.com/affiliates/idevaffiliate.php?id=23065&url=40632&tid1=tutorials” target=”blank” layout=”expanded” align=”center” font_family = ”Raleway” font_weight=”700″ style=”flat” custom_background=”#c4226e” custom_hover_background=”#8d184f” custom_color=”#ffffff” custom_hover_color=”#ffffff” icon_right=”fa fa-download”]DOWNLOAD DE TEMPLATES DIVI[/vcex_button][/vc_column][/vc_row]

Divi-zelfstudie: de navigatiemodule gebruiken in artikelen

Gebruiksvoorbeeld: aangepaste navigatielinks onder aan een blogbericht toevoegen