Kunne du tænke dig at tilpasse Læs mere-linket i Blog-modulet til Divi ? Så følg vores tutorial.
En blogs "Læs mere"-links kan være en afgørende del af forbedringen brugeroplevelsen. Det er derfor vigtigt, at vi ved, hvordan vi tilpasser dem korrekt.
I denne vejledning viser vi dig, hvordan du tilpasser linket "Læs mere" i blogmodulet. I denne artikel viser vi dig, hvordan du:
- Tilpas linket "Læs mere" ved hjælp af de indbyggede muligheder i Divi
- Juster linket "Læs mere" (venstre, midten, højre)
- Gør linket "Læs mere" til en knap i fuld skærm
- Opret en brugerdefineret Læs mere-knap med svæveeffekter
- Erstat teksten "Læs mere" med noget andet (f.eks. "Læs artiklen").
undersøgelse
Her er et hurtigt kig på det design, vi vil skabe i denne tutorial.
Indlæs et blogmodul på en side ved hjælp af Divi's Theme Builder
For at begynde at tilpasse Læs mere-links skal du have adgang til et blogmodul.
Du kan indlæse et foruddefineret layout med ethvert blogmodul efter eget valg, eller blot tilføje et nyt blogmodul til en side.
For at starte processen bruger vi blogsiden fra det foruddefinerede layout Kunstig intelligens.
Tilføj en ny side fra WordPress Dashboard
Giv derefter en titel til din side og klik på " Utiliser Divi Builder".
Klik derefter på " Vælg layout«
Find og vælg " Kunstig intelligens Blog-side«
Til sidst skal du vælge bloglayoutet og klikke på " Vælg layout«
Tilpas og juster Læs mere linktekst
Hvert blogmodul giver mulighed for at vise eller skjule linket "Læs mere" for hver artikel i layoutet. For at vise linket "Læs mere" skal du åbne blogindstillingerne og skifte til " Vis Læs mere knap til "JA" på listen over blogelementer, du vil have vist.
Under fanen Stil kan du tilpasse Læs mere-teksten ved hjælp af en af de indbyggede muligheder. For dette eksempel, lad os opdatere følgende:
- Skrifttype Læs mere: Barlow
- Læs mere Dim Light: Semi Bold
- Læs mere Kopistil: Store bogstaver (TT), Understregning (U)
- Tekstfarve Læs mere: #db0eb7
- Læs mere Understreget tekst Farve: #3c5bff
- Bogstavafstand Læs mere: 1px
Her er resultatet.
I øjeblikket er linket "Læs mere" placeret til venstre som standard, medmindre du ændrer justeringen. For at justere linket til midten eller til højre for indlægget skal du tilføje et CSS-uddrag som dette:
Under fanen Avanceret blogindstillinger skal du tilføje følgende CSS til CSS-knappen Læs mere:
display: block;
text-align: right;
"display:block" vil ændre linket til et blokelement, der strækker sig over hele bredden af dets beholder (i dette tilfælde kroppen af indhold af udgivelsen). Når først defineret som et blokelement, kan vi højrejustere teksten ved hjælp af "text-align:right".
Læs også: Sådan opretter du en Sticky Global Header i Divi
Her er resultatet.
For at centrere linket skal du blot erstatte "højre" med "center" for værdien af egenskaben "tekst-align" som følger:
Her er resultatet.
Tilpas linket "Læs mere", så det ligner en knap
I dette eksempel opretter vi en simpel knapstil i fuld bredde til linket "Læs mere". Før du tilføjer den tilpassede CSS, skal du åbne blogindstillingerne og opdatere linkteksten "Læs mere" som følger:
- Læs mere Kopistil: store bogstaver (TT)
- Tekstfarve Læs mere: #ffffff
I det foregående eksempel brugte vi "display:block" og "text-align:center" for at få linket til at spænde over hele beholderens bredde og centrere teksten.
Se også: Sådan opretter du en glidende og push-menu i Divi
For at få det til at ligne en knap, er alt, hvad vi skal gøre, at tilføje nogle baggrundsfarve og mellemrum sammen med nogle ekstra CSS-uddrag. For at gøre dette skal du gå til fanen Avanceret og opdatere CSS'en for knappen "Læs mere" som følger:
display: block;
text-align: center;
background-color:#01012C;
padding: 0.3em 1em;
margin-top: 10px;
Resultat
Her er resultatet!
Oprettelse af en avanceret knapstil med CSS
Hvis du vil tage knapstylingen til et andet niveau, kan vi tilføje en baggrund og en svæveeffekt.
For at gøre dette skal du erstatte CSS'en for "Læs mere-knappen" med følgende:
display: inline-block;
margin-top: 10px;
padding: 0.3em 1em;
background-image: linear-gradient(90deg,#01012C 50%,rgba(0,0,0,0) 50%);
background-color: #3c5bff;
transition: all 300ms;
For at ændre baggrunden, når du svæver, kan du indsætte følgende CSS på "Lær mere-knappen", når du holder musemarkøren over:
display: inline-block;
margin-top: 10px;
padding: 0.3em 1em;
background-color: #01012C;
Resultat
Her er resultatet!
Skift "Læs mere"-teksten til noget andet
For at ændre teksten "Læs mere" til noget andet, såsom "Læs artikel", skal vi bruge lidt jQuery. Men bare rolig, dette er kun et par linjer.
Før du tilføjer vores jQuery-kode, skal du tilføje en tilpasset CSS-klasse til blogmodulet som følger:
- CSS-klasse: et-brugerdefineret-læs-mere-tekst
BEMÆRK: Sørg for, at klassenavnet er korrekt, for at jQuery kan fungere.
For at tilføje jQuery, der ændrer "Læs mere"-teksten, skal du tilføje et kodemodul under blogmodulet.
Indsæt derefter følgende jQuery-kode, og sørg for at pakke koden med de nødvendige script-tags:
(function ($) {
$(document).on("ready ajaxComplete", function () {
$(".et-custom-read-more-text .et_pb_post a.more-link").html("Lire l'article");
});
})(jQuery);Denne kode fortæller grundlæggende, at browseren skal ændre teksten i "Læs mere"-linket til "Læs artiklen", når siden indlæses.
Resultat
Her er resultatet!
Endelige resultater
Her er endnu et kig på de tilpasninger af linket Læs mere (eller knap), vi har lavet.
Download DIVI nu!!!
Konklusion
Så! Det var det for denne artikel. Divi's Blog-modul giver dig mulighed for kreativt at tilpasse linket "Læs mere". Og hvis du vil eksperimentere med et par CSS-uddrag, kan du selv oprette endnu mere avancerede ændringer.
Vi håber, at denne vejledning hjælper dig med at tage disse "Læs mere"-links til det næste niveau. Hvis du har spørgsmål eller forslag, så find os her kommentarafsnittet at diskutere det.
Du kan dog også konsultere vores ressourcer, hvis du har brug for flere elementer til at udføre dine projekter med oprettelse af internetsider ved 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.
...
