Vill du anpassa länken Läs mer i bloggmodulen för Divi ? Följ sedan vår handledning.
En bloggs "Läs mer"-länkar kan vara en avgörande del av förbättringen användarupplevelsen. Det är därför viktigt att vi vet hur man anpassar dem rätt.
I den här handledningen kommer vi att visa dig hur du anpassar länken "Läs mer" i bloggmodulen. I den här artikeln visar vi dig hur du:
- Anpassa länken "Läs mer" med hjälp av de inbyggda alternativen för Divi
- Rikta in länken "Läs mer" (vänster, mitten, höger)
- Förvandla länken "Läs mer" till en helskärmsknapp
- Skapa en anpassad Läs mer-knapp med svävningseffekter
- Byt ut texten "Läs mer" med något annat (som "Läs artikeln").
undersökningen
Här är en snabb titt på designen vi kommer att skapa i den här handledningen.
Ladda en bloggmodul på en sida med Divis Theme Builder
För att börja anpassa Läs mer-länkar behöver du tillgång till en bloggmodul.
du kan ladda en fördefinierad layout med valfri bloggmodul eller helt enkelt lägg till en ny bloggmodul på en sida.
För att starta processen kommer vi att använda bloggsidan från den fördefinierade layouten Artificiell intelligens.
Lägg till en ny sida från WordPress Dashboard
Ge sedan en titel till din sida och klicka sedan på " utiliser Divi Builder".
Klicka sedan på " Välj layout«
Hitta och välj " Artificiell intelligens Blogg Page«
Välj slutligen blogglayouten och klicka på " Välj layout«
Anpassa och justera Läs mer länktext
Varje bloggmodul erbjuder möjligheten att visa eller dölja länken "Läs mer" för varje artikel i layouten. För att visa länken "Läs mer", öppna blogginställningarna och växla mellan " Visa knappen Läs mer till "JA" i listan över bloggobjekt du vill visa.
Under fliken Stil kan du anpassa Läs mer-texten med ett av de inbyggda alternativen. För det här exemplet, låt oss uppdatera följande:
- Font Läs mer: Barlow
- Läs mer Dim Light: Semi Bold
- Läs mer Kopieringsstil: versaler (TT), understrykning (U)
- Textfärg Läs mer: #db0eb7
- Läs mer Understruken text Färg: #3c5bff
- Bokstavsavstånd Läs mer: 1px
Här är resultatet.
För närvarande är länken "Läs mer" placerad till vänster som standard, om du inte ändrar justeringen. Lägg till ett CSS-kodavsnitt enligt följande för att anpassa länken till mitten eller höger av inlägget:
På fliken Avancerade blogginställningar lägger du till följande CSS i CSS-knappen Läs mer:
display: block;
text-align: right;
"display:block" kommer att ändra länken till ett blockelement som sträcker sig över hela bredden av dess behållare (i det här fallet, kroppen av innehåll av publiceringen). När vi väl har definierats som ett blockelement kan vi högerjustera texten med "text-align:right".
Läs också: Hur man skapar en Sticky Global Header i Divi
Här är resultatet.
För att centrera länken, ersätt helt enkelt "höger" med "center" för värdet på egenskapen "text-align" enligt följande:
Här är resultatet.
Anpassa länken "Läs mer" så att den ser ut som en knapp
För det här exemplet skapar vi en enkel knappstil med full bredd för länken "Läs mer". Innan du lägger till den anpassade CSS, öppna blogginställningarna och uppdatera länktexten "Läs mer" enligt följande:
- Läs mer Kopiera stil: versaler (TT)
- Textfärg Läs mer: #ffffff
I det föregående exemplet använde vi "display:block" och "text-align:center" för att få länken att sträcka sig över hela behållarens bredd och centrera texten.
Se även: Hur man skapar en skjut- och tryckmeny i Divi
För att få det att se ut som en knapp behöver vi bara lägga till lite bakgrundsfärg och mellanrum tillsammans med några extra CSS-snuttar. För att göra detta, gå till fliken Avancerat och uppdatera CSS för knappen "Läs mer" enligt följande:
display: block;
text-align: center;
background-color:#01012C;
padding: 0.3em 1em;
margin-top: 10px;
Resultat
Här är resultatet!
Skapa en avancerad knappstil med CSS
Om du vill ta knappstilen till en annan nivå kan vi lägga till en bakgrund och en svävningseffekt.
För att göra detta, ersätt CSS för "Läs mer-knappen" med följande:
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;
För att ändra bakgrunden när du håller muspekaren, kan du klistra in följande CSS på "Läs mer-knappen" när du håller muspekaren över huvudet:
display: inline-block;
margin-top: 10px;
padding: 0.3em 1em;
background-color: #01012C;
Resultat
Här är resultatet!
Ändra texten "Läs mer" till något annat
För att ändra texten "Läs mer" till något annat, som "Läs artikel", kommer vi att behöva lite jQuery. Men oroa dig inte, det här är bara några rader.
Innan du lägger till vår jQuery-kod, lägg till en anpassad CSS-klass till bloggmodulen enligt följande:
- CSS-klass: et-custom-read-more-text
OBS: Se till att klassnamnet är korrekt för att jQuery ska fungera.
För att lägga till jQuery som ändrar texten "Läs mer", lägg till en kodmodul under bloggmodulen.
Klistra sedan in följande jQuery-kod och se till att linda in koden med de nödvändiga skripttaggarna:
(function ($) {
$(document).on("ready ajaxComplete", function () {
$(".et-custom-read-more-text .et_pb_post a.more-link").html("Lire l'article");
});
})(jQuery);Denna kod säger i princip åt webbläsaren att ändra texten i länken "Läs mer" till "Läs artikeln" när sidan laddas.
Resultat
Här är resultatet!
Slutresultat
Här är ytterligare en titt på länken Läs mer (eller knapp) anpassningar som vi har gjort.
Ladda ner DIVI nu!!!
Slutsats
Så ! Det var allt för den här artikeln. Divis bloggmodul låter dig anpassa länken "Läs mer" kreativt. Och om du vill experimentera med några CSS-snuttar kan du skapa ännu mer avancerade ändringar själv.
Vi hoppas att den här handledningen hjälper dig att ta dessa "Läs mer"-länkar till nästa nivå. Om du har några funderingar eller förslag, kontakta oss kommentaravsnittet att diskutera det.
Du kan dock också konsultera våra resurser, om du behöver fler element för att genomföra dina projekt för att skapa webbplatser, genom att konsultera vår guide om WordPress blogg skapande eller den på Divi: det bästa WordPress-temet genom tiderna.
Men under tiden dela den här artikeln på dina olika sociala nätverk.
.
