Innan du kan lägga till en Divi-modul för artikelnavigering på din sida måste du först hoppa in i Divi Builder. När Divi-tema installerat på din webbplats kommer du att märka en knapp Använd Divi Builder ovanför inläggsredigeraren när du skapar en ny sida. Klicka på den här knappen för att aktivera Divi Builder och få tillgång till alla Divi Builder-moduler. Klicka sedan på knappen Använd Visual Builder för att starta generatorn i visuellt läge. Du kan också klicka på knappen Använd Visual Builder när du surfar på din webbplats i förgrunden om du är ansluten till din WordPress-instrumentpanel.

divi byggare

När du har angett Visual Builder kan du klicka på den grå plusknappen för att lägga till en ny modul på din sida. Nya moduler kan bara läggas till inom rader. Om du börjar en ny sida, kom ihåg att först lägga till en rad på din sida.

navigering i articles.png

Leta reda på navigeringsmodulen i listan över moduler och klicka på den för att lägga till den på din sida. Listan över moduler är sökbar, vilket innebär att du också kan skriva ordet ”postnavigering” och sedan klicka på Enter för att automatiskt hitta och lägga till navigeringsmodulen. När modulen har lagts till hälsas du av modulalternativlistan. Dessa alternativ är uppdelade i tre huvudgrupper: Innehåll , Conception et advanced .

Exempel på användningsfall: Lägga till anpassade navigeringslänkar längst ner i ett blogginlägg

Att ha navigeringslänkar till nästa och tidigare artiklar längst ner i din artikel är ett bra sätt att behålla din besökare engagerad i ditt innehåll. I det här exemplet ska jag visa dig hur du använder de faktiska inläggsrubrikerna för dina navigeringslänkar istället för de allmänna "föregående" och "nästa" länknamnen. Jag ska också visa dig hur du lägger till en ram runt länkarna för att ge dem mer effekt.

Exempel navigationsmenyn titel publicering.jpg

Låt oss börja.

Använd den visuella byggaren för att lägga till ett standardavsnitt med en layout med full bredd (1 kolumn) längst ner på inlägget. Lägg sedan till en navigeringsmodul efter raden.

ändra titlarna på divi.png länkar

Uppdatera publiceringsnavigeringsinställningarna enligt följande:

Innehållsfliken

Föregående länktext:% title (denna variabel infogar artikelns titel)
Text till följande länk:% title (denna variabel infogar artikelns titel)

Design fliken

Teckensnittslänkar: PT Sans
Länkar Typsnittstyp: 20px
Länkar Textfärg: # 5e95c1
Använd gränsen: JA
Gränsfärg: # 5e95c1
Breddens bredd: 1px
Anpassad klädsel: 20px topp, 20px höger, 20px botten, 20px vänster

ändra navigeringslänkar.png

Det är allt ! Du har nu inläggstitlar på navigeringslänkarna

Exempel på artikellänk på divi.png

Innehållsalternativ för navigeringsmodulen

På fliken innehåll hittar du alla innehållselement i modulen, till exempel text, bilder och ikoner. Allt som styr vad visas i din modul hittas alltid på den här fliken.

innehållsområdesmodulens titel i artikel.png

Text till föregående länk

Definiera anpassad text för föregående länk. Du kan använda% title-variabeln för att inkludera artikelns titel. Lämna tomt för standard.

Text av följande länk

Definiera anpassad text för följande länk. Du kan använda variabeln% title för att inkludera inläggets titel. Lämna tomt för standard.

I samma kategori

Du kan här definiera om tidigare och efterföljande artiklar ska ha samma taxonomi som den aktuella artikeln.

Namnet på den anpassade taxonomin

Lämna det här alternativet tomt om du använder den här modulen i ett projekt eller en artikel. Annars skriver du namnet på taxonomin för att alternativet "I samma kategori" ska fungera korrekt.

Dölj föregående länk

Här kan du välja att dölja eller visa föregående länk.

Dölj den här länken

Här kan du välja att dölja eller visa följande länk.

Admin-etikett

Detta ändrar moduletiketten i konstruktorn för enkel identifiering. När du använder vyn WireFrame i Visual Builder visas dessa etiketter i modulblocket i Divi Builder-gränssnittet.

Designalternativ efter navigering

På fliken Design hittar du alla stilalternativ för modulen, som teckensnitt, färger, storlek och avstånd. Det här är fliken du använder för att ändra utseendet på din modul. Varje Divi-modul har en lång lista med designinställningar som du kan använda för att ändra vad som helst.

avsnitt designmodul artikel title.png

Länkar typsnitt

Du kan ändra teckensnittet för din länktext genom att välja önskat teckensnitt från rullgardinsmenyn. Divi levereras med dussintals fantastiska teckensnitt som drivs av Google-teckensnitt. Som standard använder Divi Open Sans-teckensnittet för all text på din sida. Du kan också anpassa stilen på din text med fetstil, kursiv, versaler och understrykningsalternativ.

Länksnittstorlek

Här kan du justera storleken på din länktext. Du kan dra avståndsreglaget för att öka eller minska storleken på din text eller direkt ange önskat textstorleksvärde i inmatningsfältet till höger om reglaget. Inmatningsfälten stöder olika måttenheter vilket innebär att du kan ange "px" eller "em" beroende på ditt storleksvärde för att ändra enhetstyp.

Textfärg på länkarna

Som standard visas alla textfärger i Divi i vitt eller mörkgrått. Om du vill ändra färgen på din länktext väljer du önskad färg från färgväljaren med det här alternativet.

Spacing av länkar bokstäver

Bokstavsavstånd påverkar utrymmet mellan varje bokstav. Om du vill öka utrymmet mellan varje bokstav i din länktext använder du avståndsreglaget för att justera utrymmet eller anger önskad avståndsstorlek i inmatningsfältet till höger om reglaget. Inmatningsfälten stöder olika måttenheter vilket innebär att du kan ange "px" eller "em" beroende på ditt storleksvärde för att ändra enhetstyp.

Höjd av linjen av länkar

Radhöjd påverkar utrymmet mellan varje rad i din länktext. Om du vill öka utrymmet mellan varje rad, använd avståndsreglaget för att justera utrymmet eller ange önskad avståndsstorlek i fältet. till höger om markören. Inmatningsfälten stöder olika måttenheter vilket innebär att du kan ange "px" eller "em" beroende på ditt storleksvärde för att ändra enhetstyp.

Använd gränsen

Om du aktiverar det här alternativet placeras en kant runt din modul. Denna kant kan anpassas med följande villkorliga parametrar.

Färg på gränsen

Det här alternativet påverkar färgen på din kant. Välj en anpassad färg från färgväljaren för att tillämpa den på din kant.

Bredden av gränsen

Som standard är gränserna 1 pixel breda. Du kan öka detta värde genom att dra områdesreglaget eller ange ett anpassat värde i inmatningsfältet till höger om reglaget. Anpassade måttenheter stöds, vilket innebär att du kan ändra standardenheten från "px" till något annat som em, vh, vw etc.

Gränsstil

Gränser stöder åtta olika stilar: solid, prickad, prickad, dubbel, spår, ås, överlägg och start. Välj önskad stil i rullgardinsmenyn för att tillämpa den på din gräns.

Anpassad marginal

Marginalen är utrymmet som läggs till på utsidan av din modul, mellan modulen och nästa element ovanför, under eller till vänster och höger om den. Du kan lägga till anpassade marginalvärden till någon av modulens fyra sidor. Ta bort den anpassade marginalen genom att ta bort mervärdet från inmatningsfältet. Som standard mäts dessa värden i pixlar, men du kan ange anpassade måttenheter i inmatningsfälten.

Anpassad stoppning

Infill är utrymmet som läggs till i din modul, mellan modulens kant och dess interna element. Du kan lägga till anpassade utfyllnadsvärden till någon av modulens fyra sidor. Ta bort den anpassade marginalen genom att ta bort mervärdet från inmatningsfältet. Som standard mäts dessa värden i pixlar, men du kan ange anpassade måttenheter i inmatningsfälten.

Avancerade alternativ för navigationsmodulen

På den avancerade fliken hittar du alternativ som mer erfarna webbdesigners kan hitta användbara, till exempel anpassade CSS- och HTML-attribut. Här kan du använda anpassad CSS på något av modulens många element. Du kan också tillämpa anpassade CSS-klasser och ID på modulen, som kan användas för att anpassa modulen i ditt barns temas style.css-fil.

förskott alternativ titel modulen av articles.png

CSS ID

Ange ett valfritt CSS-ID som ska användas för den här modulen. Ett ID kan användas för att skapa en anpassad CSS-stil eller för att länka till vissa delar av din sida.

CSS klass

Ange de valfria CSS-klasserna som ska användas för den här modulen. En CSS-klass kan användas för att skapa anpassad CSS-styling. Du kan lägga till flera klasser, åtskilda av ett mellanslag. Dessa klasser kan användas i ditt Divi-underordnade tema eller i det anpassade CSS-stilarket som du lägger till på din sida eller på din webbplats med hjälp av Divi-temalternativ eller Divi Builder-sidinställningarna.

Anpassad CSS

Anpassad CSS kan också tillämpas på modulen och vilken modul som helst. I avsnittet Anpassad CSS hittar du ett textfält där du kan lägga till anpassade CSS-formatmallar direkt till varje element. CSS-poster i dessa inställningar är redan inslagna i stiltaggar. Så skriv bara in CSS-reglerna åtskilda av semikolon.

synlighet

Med det här alternativet kan du styra enheterna där din modul visas. Du kan välja att inaktivera din modul på surfplattor, smartphones eller stationära datorer individuellt. Detta är användbart om du vill använda olika mods på olika enheter, eller om du vill förenkla mobildesignen genom att eliminera vissa element från sidan.

[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=”platt” custom_background=”#18b69d” custom_hover_background=”#118d7a” custom_color=”#ffffff” custom_hover_color=”#ffffff” icon_right=”fa fa-download”]LADDA NED DIVI TEMA [/vcex_button][/vc_column 1 ][vc_column] /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”]LADDA NED DEN TEMPLATES DIVI[/vcex_button][/vc_column][/vc_row]

Andra Divi tutorials