Vil du oprette en navigationslinje mellem indlæg, der er klæbrig i Divi?
En sticky post navigationslinje er en effektiv måde at forbedre brugeroplevelsen for enhver Websted af bloggen. Ud over dit websteds hovednavigation giver postnavigationslinks brugere mulighed for nemt at hoppe til det forrige indlæg eller næste indlæg på din blog. Og hvis du tilføjer disse postnavigationslinks til en klæbrig bjælke, forbliver disse links synlige og mere tilgængelige.
I denne tutorial vil vi oprette en navbar mellem post sticky in Divi. For at gøre dette vil vi bruge Divis indbyggede muligheder til at omdanne en række til en klæbrig bjælke. Dernæst vil vi bruge artikelnavigationsmodulet til at designe links til "forrige artikel" og "næste artikel".
Derudover tilføjer vi en posttitel som dynamisk indhold i midten af bjælken, der minder brugere om det indlæg, de ser i øjeblikket, hvilket giver navbaren et flot "fortid, nutid og fremtid"-element.
Lad os starte!
undersøgelse
Her er et hurtigt kig på det design, vi vil skabe i denne tutorial.
Hvad du behøver for at komme i gang
Mens du kan tilføje denne klæbrige postnavigationslinje til ethvert blogindlægslayout eller skabelon i Divi, vil vi bruge en færdiglavet blogindlægsskabelon til at fremskynde processen og få designet hurtigt i gang.
Importer "Meal Kit" blogindlægsskabelonen til Divi Theme Builder
For at komme i gang skal du downloade gratis blogindlægsskabelon til Divi's Meal Kit Layout Pack . For at gøre dette, gå til blogindlægget .
Indtast derefter din e-mail for at downloade zip-filen.
Udpak derefter filen, så den er klar til import.
Følg disse trin for at importere filen til temaeditoren:
- Gå til Divi > Theme Builder.
- Klik på portabilitetsikonet.
- I pop op-vinduet Portabilitet skal du vælge fanen Import.
- Vælg den tidligere downloadede udpakkede fil, der skal importeres.
- Klik « Importer Divi Theme Builder skabeloner ».
- Klik på redigeringsikonet for at redigere den importerede model.
Opret en Sticky Navigation Bar i Divi
Del 1: Oprettelse af den klæbrige linje
For at oprette den klæbende navbar bruger vi en række med tre kolonner som den klæbrige beholder for vores navigationslinks mellem indlæg og indlægstitel.
Læs også: Divi: Sådan bruger du muligheden "Gradient Repeat" til at skabe brugerdefinerede baggrundsmønstre
I den anden sektion af skabelonlayoutet skal du tilføje en ny række under rækken, der indeholder indlæggets indhold.
Linieindstillinger
Åbn linjeindstillinger.
Først skal vi tilføje den klæbende position til linjen, så vi kan opdatere andre designmuligheder i den klæbende tilstand.
Under fanen Avanceret, opdater følgende:
- Sticky Position: Hold dig til toppen og bunden
- Top Sticky Limit: Sektion
- Nederste klæbrig grænse: Kropsareal
For at sikre, at kolonner ikke stables på mobilenheder, skal du tilføje følgende tilpassede CSS til Hovedelement :
display:flex;
flex-wrap:nowrap;
align-items:center;
Under fanen Indhold, tilføj en hvid baggrundsfarve til linjen i klæbrig tilstand som følger:
- baggrund: ingen
- Baggrund: #ffffff (klæbende)
Under indstillinger Design, opdater følgende:
- Brug tilpasset tagrendebredde: JA
- Rendebredde: 1
- Bredde: 100 %
- Maks. bredde: 100 %
- Polstring: 0px (top og bund)
Skjul midterste kolonne på tablet og telefon
For at skjule kolonnen på mobil skal du åbne indstillingerne for kolonne 2 (midterste kolonne) og opdatere synlighedsindstillingerne som følger:
- Deaktiver på: telefon, tablet
Del 2: Oprettelse af artikelnavigationslinks
For at åbne op for mere designfleksibilitet for postnavigation, bruger vi to separate Post Navigation-moduler. I venstre kolonne tilføjer vi et Post Navigation-modul, der kun viser linket til den forrige artikel. I højre kolonne tilføjer vi et Post Navigation-modul, der kun viser det næste indlægslink.
Link til tidligere indlæg
Tilføj et nyt Post Navigation-modul i kolonne 1.
Åbn modulindstillingerne, opdater indstillingsfanen for Indhold som følger :
- Forrige link (tekst): Forrige indlæg
- Vis link til forrige indlæg: JA
- Vis næste indlæg link: NEJ
- Baggrund: #000000
Under fanen Design, opdater følgende:
- Links skrifttype: Kumbh Sans
- Links Skrifttypevægt: Fed
- Skrifttype: TT
- Links Tekstfarve: #ffffff
- Links tekststørrelse: 26px (desktop), 16px (tablet og telefon)
- Linjehøjde: 1,3 em
- Polstring: 0,9 em (øverst), 0,7 em (bund), 2 em (venstre og højre)
Da vi skjuler den midterste kolonne på mobilen, kan de to resterende kolonner, der vil indeholde navigationslinks, nu hver optage 50 % af browserbredden på tablet og telefon.
Se også: Divi: Sådan ændrer du stilen på flere elementer, når du svæver eller efter et klik
For at sikre, at navigationslinket strækker sig over 50 % af visningen, skal du tilføje følgende tilpassede CSS til feltet Links CSS til tabletvisning:
display:block;
width:50vw;
text-align:center;
float:none;
Oprettelse af næste indlæg link
For at oprette linket til det næste indlæg, kopier postnavigationsmodulet (med det forrige indlægslink), vi netop har designet og indsæt det i kolonne 3 (højre kolonne).
Åbn derefter postnavigationsindstillingerne for dubletmodulet i højre kolonne og opdater følgende muligheder for indholdsfane:
- Næste link: Næste indlæg
- Vis link til forrige indlæg: NEJ
- Vis link til næste indlæg: JA
- Baggrund: #ffb100
Under fanen Design, opdater linktekstfarven:
- Links Tekstfarve: #000000
Del 3: Oprettelse af den dynamiske posttitel
Med begge navigationslinks på plads er vi klar til at tilføje indlægstitlen som dynamisk indhold i den midterste kolonne.
Ideen er at give brugeren en god påmindelse om den besked, de læser med muligheden for at navigere til den forrige besked og den næste besked.
Tilføj et nyt tekstmodul i den midterste kolonne.
Under fanen Indhold, klik på ikonet "Brug dynamisk indhold" i kropsområdet, og vælg derefter Post/arkivtitel.
Når den dynamiske posttitel er blevet tilføjet, skal du åbne indstillingerne for Post/arkivtitel og opdatere indholdet før:
- Før læsning
Gem derefter ændringerne.
Under fanen Design, opdater følgende:
- Tekstskrifttype: Kumbh Sans
- Tekstskrifttypevægt: Fed
- Skrifttype: TT
- Tekst Tekstfarve: gennemsigtig (skrivebord), #000000 (klæbende)
- Tekststørrelse: 16px
- Bogstavafstand: 1px
- Linjehøjde: 1,3 em
- Tekstjustering: centreret
- Maks. bredde: 96 %
- Justeringsmodul: center
- Polstring: 0,5em (top og bund)
Endelig resultat
Download DIVI nu!!!
Konklusion
I denne vejledning viste vi, hvor nemt det er at oprette en klæbrig postnavigationslinje til en blogindlægsskabelon i Divi.
Bar/line sticky funktionaliteten kan også nemt justeres med Divis indbyggede muligheder. For eksempel kan du begrænse den klæbende tilstand til en sektion eller vælge kun at gøre den klæbrig i toppen eller bunden af browserens visningsport.
Håber dette vil være nyttigt til din næste blogside. Hvis du har spørgsmål eller forslag, så find os her kommentarafsnittet at diskutere det.
Du kan også konsultere vores ressourcer, hvis du har brug for flere elementer til at gennemføre dine projekter med oprettelse af internetsider.
Tøv ikke med også at konsultere vores guide om WordPress blog oprettelse eller den ene på Divi: tidenes bedste WordPress-tema.
Men i mellemtiden del denne artikel på dine forskellige sociale netværk.
...
