Divi tutorial: Slik bruker du Navigasjonsmodulen i artikler

Før du kan legge til en Divi-modul for artikkelnavigering på siden din, må du først hoppe inn i Divi Builder. Først når Divi-tema installert på nettstedet ditt, vil du legge merke til en knapp Bruk Divi Builder over innleggsredaktøren når du oppretter en ny side. Klikk på denne knappen for å aktivere Divi Builder og få tilgang til alle Divi Builder-modulene. Klikk deretter på knappen Bruk Visual Builder for å starte generatoren i visuell modus. Du kan også klikke på knappen Bruk Visual Builder når du surfer på nettstedet ditt i forgrunnen hvis du er koblet til WordPress-dashbordet.

Når du har angitt Visual Builder, kan du klikke på den grå pluss-knappen for å legge til en ny modul på siden din. Nye moduler kan bare legges til innenfor rader. Hvis du starter en ny side, husk å legge til en rad på siden din først.

Finn navigasjonsmodulen i listen over moduler, og klikk på den for å legge den til siden din. Listen over moduler er søkbar, noe som betyr at du også kan skrive ordet "post navigation" og deretter klikke enter for automatisk å finne og legge til navigasjonsmodulen. Når modulen er lagt til, vil du bli møtt av modulalternativlisten. Disse alternativene er delt inn i tre hovedgrupper: Innhold , Conception et avansert .

Eksempel på brukstilfelle: Legge til egendefinerte navigasjonskoblinger nederst i et blogginnlegg

Å ha navigasjonslenker til neste og tidligere artikler nederst i artikkelen din er en fin måte å beholde din Besøkende engasjert i innholdet ditt. I dette eksemplet skal jeg vise deg hvordan du bruker de faktiske posttittelnavnene for navigasjonslenkene dine i stedet for de generelle "forrige" og "neste" lenkenavnene. Jeg skal også vise deg hvordan du legger til en kant rundt koblingene for å gi dem mer effekt.

La oss begynne.

Bruk den visuelle byggmesteren til å legge til en standardavdeling med full bredde (1 kolonne) oppsett nederst på innlegget. Deretter legger du til en navigasjonsmodul etter linjen.

Oppdater publiseringsnavigasjonsinnstillingene som følger:

Innholds-fanen

Forrige lenketekst:% title (denne variabelen setter inn tittelen på artikkelen)
Tekst til følgende lenke:% title (denne variabelen setter inn tittelen på artikkelen)

Design-fanen

Font Linker: PT Sans
Lenker Skriftstørrelse: 20px
Lenker Tekstfarge: # 5e95c1
Bruk grensen: JA
Border farge: # 5e95c1
Bredde på grensen: 1px
Tilpasset møbeltrekk: 20px topp, 20px høyre, 20px bunn, 20px venstre

Det er alt ! Du har nå innleggstitler på navigasjonskoblingene

Innholdsalternativer for navigasjonsmodulen

I Innhold-fanen finner du alle innholdselementene i modulen, for eksempel tekst, bilder og ikoner. Alt som styrer hva vises i modulen din, vil du alltid finne i denne fanen.

Tekst til forrige lenke

Definer tilpasset tekst for forrige lenke. Du kan bruke% title-variabelen til å inkludere tittelen på artikkelen. La stå tomt for standard.

Tekst av følgende lenke

Definer tilpasset tekst for følgende lenke. Du kan bruke% title-variabelen til å inkludere tittelen på innlegget. La stå tomt for standard.

I samme kategori

Du kan her definere om forrige og påfølgende artikler skal ha samme taksonomi som den nåværende artikkelen.

Navnet på den tilpassede taksonomien

La dette alternativet være tomt hvis du bruker denne modulen på et prosjekt eller en artikkel. Ellers skriver du inn navnet på taksonomien for at alternativet "I samme kategori" skal fungere riktig.

Skjul forrige lenke

Her kan du velge å skjule eller vise forrige lenke.

Skjul følgende lenke

Her kan du velge å skjule eller vise følgende lenke.

Admin-etikett

Dette vil endre moduletiketten i konstruktøren for enkel identifisering. Når du bruker WireFrame-visningen i Visual Builder, vises disse etikettene i modulblokken i Divi Builder-grensesnittet.

Designalternativer etter navigering

I kategorien Design finner du alle stilalternativene for modulen, for eksempel skrifter, farger, størrelse og avstand. Dette er fanen du vil bruke til å endre utseendet til modulen din. Hver Divi-modul har en lang liste over designinnstillinger som du kan bruke til å endre hva som helst.

Lenker font

Du kan endre skrifttypen til koblingsteksten ved å velge ønsket skrift fra rullegardinmenyen. Divi kommer med dusinvis av flotte skrifttyper drevet av Google Fonts. Som standard bruker Divi Open Sans-skrift for all teksten på siden din. Du kan også tilpasse stilen på teksten din med fet, kursiv, stor bokstav og understrekingsalternativer.

Link skriftstørrelse

Her kan du justere størrelsen på koblingsteksten. Du kan dra glidebryteren for å øke eller redusere størrelsen på teksten eller direkte angi ønsket tekststørrelsesverdi i inndatafeltet til høyre for glidebryteren. Inndatafeltene støtter forskjellige måleenheter, noe som betyr at du kan skrive inn "px" eller "em" avhengig av størrelsesverdien for å endre enhetstypen.

Tekstfarge på koblingene

Som standard vises alle tekstfargene i Divi i hvitt eller mørkegrått. Hvis du vil endre fargen på koblingsteksten, velger du ønsket farge fra fargevelgeren ved hjelp av dette alternativet.

Spacing av lenker bokstaver

Bokstavavstand påvirker avstanden mellom hver bokstav. Hvis du vil øke mellomrommet mellom hver bokstav i koblingsteksten, bruker du skyvekontrollen for å justere mellomrommet eller skriver inn ønsket avstandsstørrelse i inntastingsfeltet til høyre for glidebryteren. Inndatafeltene støtter forskjellige måleenheter, noe som betyr at du kan skrive inn "px" eller "em" avhengig av størrelsesverdien for å endre enhetstypen.

Høyde på linjene i linkene

Linjehøyde påvirker mellomrommet mellom hver linje i koblingsteksten. Hvis du vil øke mellomrommet mellom hver linje, bruker du glidebryteren for å justere mellomrom eller angir ønsket avstandsstørrelse i feltet. oppføringen til høyre for markøren. Inndatafeltene støtter forskjellige måleenheter, noe som betyr at du kan skrive inn "px" eller "em" avhengig av størrelsesverdien for å endre enhetstypen.

Bruk grensen

Aktivering av dette alternativet vil plassere en kant rundt modulen din. Denne rammen kan tilpasses ved hjelp av følgende betingede parametere.

Farge på grensen

Dette alternativet påvirker fargen på grensen din. Velg en egendefinert farge fra fargevelgeren for å bruke den på grensen din.

Bredde av grensen

Som standard er kantene 1 piksel brede. Du kan øke denne verdien ved å dra områdeglidebryteren eller angi en egendefinert verdi i inndatafeltet til høyre for glidebryteren. Tilpassede målenheter støttes, noe som betyr at du kan endre standardenheten fra "px" til noe annet som em, vh, vw etc.

Border style

Kanter støtter åtte forskjellige stiler: solid, prikket, prikket, dobbelt, spor, møne, overlegg og start. Velg ønsket stil fra rullegardinmenyen for å bruke den på grensen din.

Tilpasset margin

Margen er plassen som legges til på utsiden av modulen din, mellom modulen og neste element over, under eller til venstre og høyre for den. Du kan legge til egendefinerte marginverdier til hvilken som helst av de fire sidene av modulen. For å fjerne den egendefinerte margen, fjern merverdien fra inndatafeltet. Som standard måles disse verdiene i piksler, men du kan angi egendefinerte måleenheter i inndatafeltene.

Tilpasset polstring

Påfyll er plassen som legges til inne i modulen din, mellom kanten av modulen og dens indre elementer. Du kan legge til tilpassede polstringsverdier til hvilken som helst av de fire sidene av modulen. For å fjerne den egendefinerte margen, fjern merverdien fra inndatafeltet. Som standard måles disse verdiene i piksler, men du kan angi egendefinerte måleenheter i inndatafeltene.

Avanserte alternativer for navigasjonsmodulen

I den avanserte fanen finner du alternativer som mer erfarne webdesignere kan finne nyttige, for eksempel tilpassede CSS- og HTML-attributter. Her kan du bruke tilpasset CSS på alle modulens mange elementer. Du kan også bruke tilpassede CSS-klasser og IDer til modulen, som kan brukes til å tilpasse modulen i barnets temas style.css-fil.

CSS ID

Skriv inn en valgfri CSS-ID som skal brukes til denne modulen. En ID kan brukes til å lage en tilpasset CSS-stil eller for å koble til bestemte deler av siden din.

CSS klasse

Angi de valgfrie CSS-klassene som skal brukes til denne modulen. En CSS-klasse kan brukes til å lage tilpasset CSS-styling. Du kan legge til flere klasser, atskilt med et mellomrom. Disse klassene kan brukes i Divi-barnetemaet eller i det tilpassede CSS-stilarket du legger til på siden eller nettstedet ditt ved hjelp av Divi-temaalternativene eller innstillingene på Divi Builder-siden.

Tilpasset CSS

Tilpasset CSS kan også brukes på modulen og hvilken som helst av modulens interner. I Custom CSS-delen finner du et tekstfelt der du kan legge til tilpassede CSS-stilark direkte til hvert element. CSS-oppføringer i disse innstillingene er allerede pakket inn i stilkoder. Så bare skriv inn CSS-reglene atskilt med semikolon.

synlighet

Dette alternativet lar deg kontrollere enhetene som modulen din vises på. Du kan velge å deaktivere modulen din på nettbrett, smarttelefoner eller stasjonære datamaskiner hver for seg. Dette er nyttig hvis du vil bruke forskjellige mods på forskjellige enheter, eller hvis du vil forenkle mobildesignet ved å eliminere 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=”flat” custom_background=”#18b69d” custom_hover_background=”#118d7a” custom_color=”#ffffff” custom_hover_color=”#ffffff” icon_right=”fa fa-download”]LAST 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”]LAST NED DEN MALER DIVI[/vcex_button][/vc_column][/vc_row]

Divi tutorial: Slik bruker du Navigasjonsmodulen i artikler

Eksempel på brukstilfelle: Legge til egendefinerte navigasjonskoblinger nederst i et blogginnlegg