Før du kan tilføje et artikelnavigations Divi-modul til din side, skal du først hoppe ind i Divi Builder. En gang Divi-tema installeret på din hjemmeside, vil du bemærke en knap Brug Divi Builder over indlægseditoren, når du opretter en ny side. Klik på denne knap for at aktivere Divi Builder og få adgang til alle Divi Builder-modulerne. Klik derefter på knappen Brug Visual Builder for at starte generatoren i visuel tilstand. Du kan også klikke på knappen Brug Visual Builder når du gennemser dit websted i forgrunden, hvis du er tilsluttet dit WordPress-dashboard.
Når du har indtastet Visual Builder, kan du klikke på den grå plus-knap for at tilføje et nyt modul til din side. Nye moduler kan kun tilføjes inden for rækker. Hvis du starter en ny side, skal du huske at føje en række til din side først.
Find navigationsmodulet på listen over moduler, og klik på det for at føje det til din side. Listen over moduler kan søges, hvilket betyder, at du også kan skrive ordet "post navigation" og derefter klikke på enter for automatisk at finde og tilføje navigationsmodulet. Når modulet er tilføjet, vil du blive mødt af listen over modulindstillinger. Disse muligheder er opdelt i tre hovedgrupper: Indhold , Conception et avanceret .
Eksempel på brugssag: Tilføjelse af brugerdefinerede navigationslinks til bunden af et blogindlæg
At have navigationslinks til næste og tidligere artikler i bunden af din artikel er en fantastisk måde at beholde din besøgende engageret i dit indhold. I dette eksempel vil jeg vise dig, hvordan du bruger de faktiske posttitelnavne til dine navigationslinks i stedet for de generelle "forrige" og "næste" linknavne. Jeg vil også vise dig, hvordan du tilføjer en kant omkring linkene for at give dem mere effekt.
Lad os starte.
Brug den visuelle builder til at tilføje en standardafdeling med et layout i fuld bredde (1 kolonne) nederst på indlægget. Tilføj derefter et navigationsmodul efter linjen.
Opdater indstillingerne for udgivelsesnavigation som følger:
Fanen Indhold
Forrige link tekst:% title (denne variabel indsætter titlen på artiklen)
Tekst til følgende link:% title (denne variabel indsætter artiklens titel)
Design fanen
Font Links: PT Sans
Links Skriftstørrelse: 20px
Links Tekstfarve: # 5e95c1
Brug grænsen: JA
Border farve: # 5e95c1
Bredde på grænsen: 1px
Brugerdefineret polstring: 20px top, 20px højre, 20px bund, 20px venstre
Det er alt ! Du har nu postetitler på navigationslinkene
Indholdsindstillinger for navigationsmodulet
I fanen indhold finder du alle modulets indholdselementer, såsom tekst, billeder og ikoner. Alt det der styrer hvad vises i dit modul vil altid findes på denne fane.
Tekst til det forrige link
Definer brugerdefineret tekst til det forrige link. Du kan bruge% title-variablen til at inkludere artikeltitlen. Efterlad tomt for standard.
Tekst af følgende link
Definer brugerdefineret tekst til følgende link. Du kan bruge% title-variablen til at inkludere postens titel. Efterlad tomt for standard.
I samme kategori
Du kan her definere, om de forrige og efterfølgende artikler skal have samme taksonomiudtryk som den aktuelle artikel.
Navn på den brugerdefinerede taksonomi
Lad denne mulighed være tom, hvis du bruger dette modul til et projekt eller en artikel. Ellers skal du skrive navnet på taksonomien for at "I samme kategori" skal fungere korrekt.
Skjul forrige link
Her kan du vælge at skjule eller vise det forrige link.
Skjul følgende link
Her kan du vælge at skjule eller vise følgende link.
Admin Label
Dette vil ændre moduletiketten i konstruktøren for nem identifikation. Når du bruger WireFrame-visningen i Visual Builder, vises disse etiketter i modulblokken i Divi Builder-grænsefladen.
Designindstillinger efter navigation
Under fanen Design finder du alle indstillingerne for modulstyling, såsom skrifttyper, farver, størrelse og afstand. Dette er den fane, du vil bruge til at ændre udseendet på dit modul. Hvert Divi-modul har en lang liste over designindstillinger, som du kan bruge til at ændre alt.
Links skrifttype
Du kan ændre skrifttypen på din linktekst ved at vælge den ønskede skrifttype i rullemenuen. Divi leveres med snesevis af fantastiske skrifttyper, der drives af Google Fonts. Som standard bruger Divi Open Sans-skrifttypen til al teksten på din side. Du kan også tilpasse stilen på din tekst ved hjælp af fed, kursiv, hovedstad og understregningsmuligheder.
Link skrifttype størrelse
Her kan du justere størrelsen på din linktekst. Du kan trække områdeskyderen for at øge eller formindske størrelsen på din tekst eller direkte indtaste værdien for den ønskede tekststørrelse i indtastningsfeltet til højre for skyderen. Indtastningsfelterne understøtter forskellige måleenheder, hvilket betyder at du kan indtaste "px" eller "em" afhængigt af din størrelsesværdi for at ændre enhedstypen.
Tekstfarve på linkene
Som standard vises alle tekstfarver i Divi i hvid eller mørkegrå. Hvis du vil ændre farven på din linkstekst, skal du vælge den ønskede farve fra farvevælgeren ved hjælp af denne mulighed.
Spacing af links bogstaver
Mellemrum mellem bogstaver påvirker afstanden mellem hvert bogstav. Hvis du vil øge mellemrummet mellem hvert bogstav i din linktekst, skal du bruge områdeskyderen til at justere mellemrummet eller indtaste den ønskede mellemstørrelse i indtastningsfeltet til højre for skyderen. Indtastningsfelterne understøtter forskellige måleenheder, hvilket betyder at du kan indtaste "px" eller "em" afhængigt af din størrelsesværdi for at ændre enhedstypen.
Højden af linjen af links
Linjehøjde påvirker afstanden mellem hver linje i din linktekst. Hvis du vil øge afstanden mellem hver linje, skal du bruge områdeskyderen til at justere mellemrummet eller indtaste den ønskede afstandsstørrelse i feltet. indtastning til højre for markøren. Indtastningsfelterne understøtter forskellige måleenheder, hvilket betyder at du kan indtaste "px" eller "em" afhængigt af din størrelsesværdi for at ændre enhedstypen.
Brug grænsen
Aktivering af denne mulighed placerer en kant omkring dit modul. Denne kant kan tilpasses ved hjælp af følgende betingede parametre.
Farve på grænsen
Denne indstilling påvirker farven på din kant. Vælg en brugerdefineret farve fra farvevælgeren for at anvende den på din kant.
Bredden af grænsen
Som standard er kanterne 1 pixel brede. Du kan øge denne værdi ved at trække områdeskyderen eller indtaste en brugerdefineret værdi i indtastningsfeltet til højre for skyderen. Understøttede brugerdefinerede måleenheder, hvilket betyder at du kan ændre standardenheden fra "px" til noget andet som em, vh, vw osv.
Grænsestil
Grænser understøtter otte forskellige stilarter: solidt, prikket, prikket, dobbelt, rille, ryg, overlay og start. Vælg din ønskede stil i rullemenuen for at anvende den på din kant.
Tilpasset margen
Margenen er det rum, der er tilføjet på ydersiden af dit modul, mellem modulet og det næste element over, under eller til venstre og højre for det. Du kan tilføje tilpassede margenværdier til en af de fire sider af modulet. For at fjerne den tilpassede margen skal du fjerne merværdien fra indtastningsfeltet. Som standard måles disse værdier i pixels, men du kan indtaste brugerdefinerede måleenheder i inputfelterne.
Tilpasset polstring
Infill er det rum, der tilføjes inde i dit modul, mellem kanten af modulet og dets interne elementer. Du kan tilføje tilpassede polstringsværdier til en af modulets fire sider. For at fjerne den tilpassede margen skal du fjerne merværdien fra indtastningsfeltet. Som standard måles disse værdier i pixels, men du kan indtaste brugerdefinerede måleenheder i inputfelterne.
Avancerede indstillinger for navigationsmodulet
På den avancerede fane finder du muligheder, som mere erfarne webdesignere måske finder nyttige, såsom tilpassede CSS- og HTML-attributter. Her kan du anvende brugerdefineret CSS på ethvert af modulets mange elementer. Du kan også anvende tilpassede CSS-klasser og ID'er til modulet, som kan bruges til at tilpasse modulet i dit barns temas style.css-fil.
CSS ID
Indtast et valgfrit CSS-ID, der skal bruges til dette modul. Et ID kan bruges til at oprette en brugerdefineret CSS-stil eller til at linke til bestemte sektioner på din side.
CSS klasse
Indtast de valgfri CSS-klasser, der skal bruges til dette modul. En CSS-klasse kan bruges til at oprette brugerdefineret CSS-styling. Du kan tilføje flere klasser adskilt af et mellemrum. Disse klasser kan bruges i dit Divi-underordnede tema eller i det brugerdefinerede CSS-stilark, som du føjer til din side eller til dit websted ved hjælp af Divi-temaindstillingerne eller Divi Builder-sideindstillingerne.
Tilpasset CSS
Brugerdefineret CSS kan også anvendes på modulet og ethvert af modulets interner. I sektionen Custom CSS finder du et tekstfelt, hvor du kan tilføje tilpassede CSS-stilark direkte til hvert element. CSS-poster i disse indstillinger er allerede pakket i typografikoder. Så indtast bare CSS-reglerne adskilt af semikolon.
synlighed
Denne mulighed giver dig mulighed for at kontrollere de enheder, som dit modul vises på. Du kan vælge at deaktivere dit modul på tablets, smartphones eller desktops individuelt. Dette er nyttigt, hvis du vil bruge forskellige mods på forskellige enheder, eller hvis du vil forenkle mobildesignet ved at fjerne visse elementer fra siden.
[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=”flad” custom_background=”#18b69d” custom_hover_background=”#118d7a” custom_color=”#ffffff” custom_hover_color=”#ffffff” icon_right=”fa fa-download”]DOWNLOAD 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”]DOWNLOAD THE TEMPLATES DIVI[/vcex_button][/vc_column][/vc_row]
Andre Divi tutorials
- 5 websteder, der bruger Divi restaurant tema
- Sådan tilføjer du tekst på et Divi WooCommerce-produkt
- Sådan ændres menuen farve mellem Divi sider
- Sådan tilpasses tavlerne på en blog med Divi
- Sådan bruges rolle Divi redaktør på WordPress
- Sådan opretter du en Divi-skyder på fuld skærm
- Sådan ændres menuenes farve mellem Divi-sider
- Funktioner, som du sandsynligvis ikke kender til Divi
- Sådan bruger du Divi Builder på WordPress
- Sådan bruges Divi-video-rullemodulet
- Sådan bruges Divi Builder Flip-modulet
- Sådan tilføjes et vidnesbyrdsmodul om Divi Builder
- Sådan bruges Divi-tekstmodulet
- Sådan opretter du en skyder på Divi
- Sådan redigeres en Divi-brugerrolle
- Sådan bruges Divi Social Media-modulet
- Sådan bruges butikmodulet med temaet WordPress Divi
- Sådan bruges Divi sidebar modul
- Sådan bruges Divi Price Table Module
- Sådan bruges titelmodulet i Divi-publikationer
- Sådan tilføjes et videomodul til Divi
- Sådan bruges artikelnavigationsmodulet
- Sådan bruges Divi-søgemodulet
- Sådan bruges Divi wallet-modulet
- Sådan bruges personmodulet på Divi Builder
- Sådan bruges tegnebogen modulet med Divi filter
- Sådan bruges glidemodulet i fuld bredde
- Sådan bruges Divi Builder Image Module
- Sådan bruger du navigationsmodulet med fuld bredde i Divi Builder
- Sådan bruges billedgallerimodulet
- Sådan bruges Divi Builder Fuldbredde-kortmodul
- Sådan bruges Divi Full Width Portfolio Module
- Sådan bruges Divi-modulet i fuld bredde
- Sådan bruges Divi Counter Module
- Sådan bruges artikelskyderen på Divi Builder
- Sådan bruges Divi Email Optin-modulet
