Vil du lage en navigasjonslinje mellom innlegg som er klissete i Divi?
En klebrig postnavigasjonslinje er en effektiv måte å forbedre brukeropplevelsen til enhver nettstedet Web av bloggen. I tillegg til nettstedets hovednavigasjon, lar postnavigasjonslenker brukere enkelt hoppe til forrige innlegg eller neste innlegg på bloggen din. Og hvis du legger til disse postnavigasjonskoblingene i en klebrig stolpe, forblir disse koblingene synlige og mer tilgjengelige.
I denne opplæringen vil vi lage en navigasjonslinje mellom post sticky in Divi. For å gjøre dette vil vi bruke Divis innebygde alternativer for å forvandle en rad til en klebrig stolpe. Deretter vil vi bruke artikkelnavigasjonsmodulen til å designe koblingene "forrige artikkel" og "neste artikkel".
I tillegg legger vi til en posttittel som dynamisk innhold i midten av linjen som minner brukerne om innlegget de ser på for øyeblikket, og gir navigasjonslinjen et fint "fortid, nåtid og fremtid"-element.
La oss starte!
undersøkelsen
Her er en rask titt på designet vi skal lage i denne opplæringen.
Hva du trenger for å komme i gang
Selv om du kan legge til denne klebrige postnavigasjonslinjen til et hvilket som helst blogginnleggsoppsett eller mal i Divi, kommer vi til å bruke en ferdiglagd blogginnleggsmal for å fremskynde prosessen og få designet raskt i gang.
Importer blogginnleggsmalen "Meal Kit" til Divi Theme Builder
For å komme i gang, last ned gratis blogginnleggsmal for Divi's Meal Kit Layout Pack . For å gjøre dette, gå til blogginnlegget .
Skriv deretter inn e-postadressen din for å laste ned zip-filen.
Deretter pakker du ut filen slik at den er klar til å importeres.
Følg disse trinnene for å importere filen til temaredigering:
- Gå til Divi > Temabygger.
- Klikk på portabilitetsikonet.
- I popup-vinduet Portabilitet velger du importfanen.
- Velg den tidligere nedlastede utpakkede filen du vil importere.
- Klikk på « Importer Divi Theme Builder maler ».
- Klikk på redigeringsikonet for å redigere den importerte modellen.
Lag en klebrig navigasjonslinje i Divi
Del 1: Lage den klebrige linjen
For å lage den klebrige navigasjonslinjen bruker vi en rad med tre kolonner som den klebrige beholderen for navigasjonslenkene våre mellom innlegg og posttittel.
Les også: Divi: Slik bruker du alternativet "Gradient Repeat" for å lage tilpassede bakgrunnsmønstre
I den andre delen av maloppsettet legger du til en ny rad under raden som inneholder innleggsinnholdet.
Linjeinnstillinger
Åpne linjeinnstillinger.
Først må vi legge til den klebrige posisjonen til linjen slik at vi kan oppdatere andre designalternativer i klebrig tilstand.
Under fanen Avansert, oppdater følgende:
- Sticky Posisjon: Hold deg til toppen og bunnen
- Top Sticky Limit: Seksjon
- Nedre klebrig grense: Kroppsareal
For å sikre at kolonner ikke stables på mobil, legg til følgende egendefinerte CSS i Hovedelement :
display:flex;
flex-wrap:nowrap;
align-items:center;
Under fanen Innhold, legg til en hvit bakgrunnsfarge på linjen i klebrig tilstand som følger:
- bakgrunn: ingen
- Bakgrunn: #ffffff (klebrig)
Under innstillinger utforming, oppdater følgende:
- Bruk egendefinert takrennebredde: JA
- Rennebredde: 1
- Bredde: 100 %
- Maks bredde: 100 %
- Polstring: 0px (øverst og bunn)
Skjul midterste kolonne på nettbrett og telefon
For å skjule kolonnen på mobil åpner du innstillingene for kolonne 2 (midtkolonne) og oppdaterer synlighetsalternativene som følger:
- Deaktiver på: telefon, nettbrett
Del 2: Lage artikkelnavigasjonslenker
For å åpne for mer designfleksibilitet for postnavigasjon, bruker vi to separate Post Navigation-moduler. I venstre kolonne vil vi legge til en Post Navigation-modul som kun viser lenken til forrige artikkel. I den høyre kolonnen vil vi legge til en postnavigasjonsmodul som kun viser neste postlink.
Link til forrige innlegg
I kolonne 1 legger du til en ny Post Navigation-modul.
Åpne modulinnstillingene, oppdater alternativfanen for Innhold som følger :
- Forrige lenke (tekst): Forrige innlegg
- Vis lenke til forrige innlegg: JA
- Vis lenke til neste innlegg: NO
- Bakgrunn: #000000
Under fanen utforming, oppdater følgende:
- Linker Font: Kumbh Sans
- Linker Skriftvekt: Fet
- Skriftstil: TT
- Lenker Tekstfarge: #ffffff
- Linktekststørrelse: 26px (stasjonær datamaskin), 16px (nettbrett og telefon)
- Linjehøyde: 1,3 em
- Polstring: 0,9 em (øverst), 0,7 em (bunn), 2 em (venstre og høyre)
Siden vi skjuler den midterste kolonnen på mobil, kan de to gjenværende kolonnene som vil inneholde navigasjonslenkene nå hver ta opp 50 % av nettleserbredden på nettbrett og telefon.
Se også: Divi: Slik endrer du stilen til flere elementer ved å holde musepekeren eller etter et klikk
For å sikre at navigasjonskoblingen dekker 50 % av visningsporten, legg til følgende tilpassede CSS i Links CSS-boksen for nettbrettvisning:
display:block;
width:50vw;
text-align:center;
float:none;
Oppretting av lenken til neste innlegg
For å lage lenken til neste innlegg, kopier postnavigasjonsmodulen (med den forrige postlenken) vi nettopp designet og lim den inn i kolonne 3 (høyre kolonne).
Deretter åpner du postnavigasjonsinnstillingene for duplikatmodulen i høyre kolonne og oppdaterer følgende alternativer for innholdsfane:
- Neste lenke: Neste innlegg
- Vis lenke til forrige innlegg: NO
- Vis lenke til neste innlegg: JA
- Bakgrunn: #ffb100
Under fanen utforming, oppdater lenketekstfargen:
- Lenker Tekstfarge: #000000
Del 3: Opprette den dynamiske posttittelen
Med begge navigasjonslenkene på plass, er vi klare til å legge til innleggstittelen som dynamisk innhold i den midterste kolonnen.
Tanken er å gi brukeren en fin påminnelse om meldingen de leser med muligheten til å navigere til forrige melding og neste melding.
I den midterste kolonnen legger du til en ny tekstmodul.
Under fanen Innhold, klikk på ikonet "Bruk dynamisk innhold" i kroppsområdet, og velg deretter Post/arkivtittel.
Når den dynamiske posttittelen er lagt til, åpner du innstillingene for Post/arkivtittel og oppdater innholdet før:
- Før du leser
Lagre deretter endringene.
Under fanen utforming, oppdater følgende:
- Tekstfont: Kumbh Sans
- Tekstfontvekt: fet skrift
- Skriftstil: TT
- Tekst Tekstfarge: gjennomsiktig (skrivebord), #000000 (klebrig)
- Tekststørrelse: 16px
- Bokstavavstand: 1px
- Linjehøyde: 1,3 em
- Tekstjustering: sentrert
- Maks bredde: 96 %
- Justeringsmodul: senter
- Polstring: 0,5em (øverst og bunn)
Endelig resultat
Last ned DIVI nå!!!
konklusjonen
I denne opplæringen viste vi hvor enkelt det er å lage en klebrig postnavigasjonslinje for en blogginnleggsmal i Divi.
Bar/line sticky-funksjonaliteten kan også enkelt justeres med Divis innebygde alternativer. Du kan for eksempel begrense den klebrige tilstanden til en seksjon eller velge å gjøre den klebrig bare øverst eller nederst i nettleserens visningsport.
Håper dette vil være nyttig for din neste bloggside. Hvis du har noen bekymringer eller forslag, finn oss inn kommentarfeltet å diskutere det.
Du kan også konsultere ressursene våre, hvis du trenger flere elementer for å gjennomføre prosjektene dine med oppretting av nettsteder.
Ikke nøl med å også konsultere vår guide på WordPress blog oppretting eller den på Divi: tidenes beste WordPress-tema.
Men i mellomtiden, del denne artikkelen på de forskjellige sosiale nettverkene dine.
...
