Wil je de Lees Meer link van de Blog module van . aanpassen Divi ? Volg dan onze tutorial.
De "Lees meer"-links van een blog kunnen een cruciaal onderdeel zijn van verbetering de gebruikerservaring. Het is daarom belangrijk dat we weten hoe we ze op de juiste manier kunnen aanpassen.
In deze zelfstudie laten we u zien hoe u de link "Meer lezen" in de blogmodule kunt aanpassen. In dit artikel laten we u zien hoe u:
- Pas de link "Lees meer" aan met behulp van de ingebouwde opties van Divi
- Lijn de link "Lees meer" uit (links, midden, rechts)
- Verander de link "Lees meer" in een knop op volledig scherm
- Maak een aangepaste Lees meer-knop met zweefeffecten
- Vervang de tekst "Meer lezen" door iets anders (zoals "Lees het artikel").
overzicht
Hier is een korte blik op het ontwerp dat we in deze zelfstudie gaan maken.
Laad een blogmodule op een pagina met Divi's Theme Builder
Om te beginnen met het aanpassen van Lees meer-links, heb je toegang nodig tot een blogmodule.
je kunt laad een vooraf gedefinieerde lay-out met een blogmodule van uw keuze of voeg eenvoudig een nieuwe blogmodule toe aan een pagina.
Om het proces te starten, gebruiken we de blogpagina van de vooraf gedefinieerde lay-out Artificial Intelligence.
Een nieuwe pagina toevoegen vanuit het WordPress-dashboard
Geef vervolgens een titel aan uw pagina en klik vervolgens op " Gebruiken Divi Bouwer".
Klik dan op " Kies lay-out«
Zoek en kies " Kunstmatig intelligentie- Blog Pagina«
Kies ten slotte de bloglay-out en klik op “ Kies lay-out«
Aanpassen en uitlijnen Lees meer linktekst
Elke blogmodule biedt de mogelijkheid om de link "Lees meer" voor elk artikel in de lay-out te tonen of te verbergen. Om de link "Lees meer" weer te geven, opent u de bloginstellingen en schakelt u de " Toon Lees Meer-knop op "JA" in de lijst met blogitems die u wilt weergeven.
Op het tabblad Stijl kunt u de tekst Meer lezen aanpassen met een van de ingebouwde opties. Laten we voor dit voorbeeld het volgende bijwerken:
- Lettertype Lees meer: Barlow
- Lees meer Dim Light: Semi Bold
- Lees meer Kopieerstijl: hoofdletters (TT), onderstrepen (U)
- Tekstkleur Lees meer: #db0eb7
- Lees meer Onderstreepte tekst Kleur: #3c5bff
- Letterafstand Lees meer: 1px
Hier is het resultaat.
Momenteel wordt de link "Meer lezen" standaard aan de linkerkant geplaatst, tenzij u de uitlijning wijzigt. Voeg een CSS-fragment als volgt toe om de link uit te lijnen met het midden of rechts van het bericht:
Voeg op het tabblad Geavanceerde bloginstellingen de volgende CSS toe aan de CSS van de knop Meer lezen:
display: block;
text-align: right;
De "display:block" verandert de link naar een blokelement dat de volledige breedte van de container beslaat (in dit geval de hoofdtekst van het blok). inhoud van publicatie). Eenmaal gedefinieerd als een blokelement, kunnen we de tekst rechts uitlijnen met behulp van “text-align:right”.
Lees ook: Hoe maak je een Sticky Global Header in Divi
Hier is het resultaat.
Om de link te centreren, vervangt u eenvoudig "right" door "center" voor de waarde van de eigenschap "text-align" als volgt:
Hier is het resultaat.
Pas de link 'Meer lezen' aan zodat deze eruitziet als een knop
Voor dit voorbeeld maken we een eenvoudige knopstijl over de volledige breedte voor de link 'Meer lezen'. Voordat u de aangepaste CSS toevoegt, opent u de bloginstellingen en werkt u de linktekst "Meer lezen" als volgt bij:
- Lees meer Kopieerstijl: hoofdletters (TT)
- Tekstkleur Lees meer: #ffffff
In het vorige voorbeeld gebruikten we "display:block" en "text-align:center" om de link de volledige breedte van de container te laten beslaan en de tekst te centreren.
Zie ook: Een schuif- en drukmenu maken in Divi
Om het op een knop te laten lijken, hoeven we alleen wat achtergrondkleur en spatiëring toe te voegen, samen met wat extra CSS-fragmenten. Ga hiervoor naar het tabblad Geavanceerd en werk de CSS van de knop "Meer lezen" als volgt bij:
display: block;
text-align: center;
background-color:#01012C;
padding: 0.3em 1em;
margin-top: 10px;
Resultaat
Hier is het resultaat!
Een geavanceerde knopstijl maken met CSS
Als u de knopstijl naar een ander niveau wilt tillen, kunnen we een achtergrond en een zweefeffect toevoegen.
Om dit te doen, vervangt u de CSS voor de "Lees meer-knop" door het volgende:
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;
Om de achtergrond bij zweven te wijzigen, kunt u de volgende CSS op "Meer informatie" plakken wanneer u de muiscursor beweegt:
display: inline-block;
margin-top: 10px;
padding: 0.3em 1em;
background-color: #01012C;
Resultaat
Hier is het resultaat!
Verander de "Lees meer" tekst in iets anders
Om de tekst "Meer lezen" te wijzigen in iets anders, zoals "Artikel lezen", hebben we een beetje jQuery nodig. Maar maak je geen zorgen, dit zijn slechts een paar regels.
Voordat u onze jQuery-code toevoegt, voegt u als volgt een aangepaste CSS-klasse toe aan de Blog-module:
- CSS-klasse: et-custom-read-more-text
OPMERKING: zorg ervoor dat de klassenaam correct is om jQuery te laten werken.
Om de jQuery toe te voegen die de tekst "Lees meer" wijzigt, voegt u een codemodule toe onder de blogmodule.
Plak vervolgens de volgende jQuery-code en zorg ervoor dat u de code omwikkelt met de benodigde scripttags:
(function ($) {
$(document).on("ready ajaxComplete", function () {
$(".et-custom-read-more-text .et_pb_post a.more-link").html("Lire l'article");
});
})(jQuery);Deze code vertelt de browser in feite om de tekst van de link "Meer lezen" te wijzigen in "Lees het artikel" zodra de pagina is geladen.
Resultaat
Hier is het resultaat!
Definitieve resultaten
Hier is nog een blik op de Lees meer link (of knop) aanpassingen die we hebben gedaan.
Download DIVI nu!!!
Conclusie
Alstublieft ! Dat was het voor dit artikel. Met de Blog-module van Divi kunt u de link "Lees meer" creatief aanpassen. En als je wilt experimenteren met een paar CSS-fragmenten, kun je zelf nog geavanceerdere aanpassingen maken.
We hopen dat deze tutorial je helpt om die "Lees meer"-links naar een hoger niveau te tillen. Als u zich zorgen maakt of suggesties heeft, kunt u ons vinden in het commentaar gedeelte om het te bespreken.
U kunt echter ook overleggen onze middelen, als u meer elementen nodig hebt om uw projecten voor het maken van internetsites uit te voeren, raadpleeg onze gids op de WordPress blog creatie of die op Divi: het beste WordPress-thema aller tijden.
Maar in de tussentijd deel dit artikel op uw verschillende sociale netwerken.
...
