Im DIVI Blog Modul den „Read more / Mehr lesen“ Text in einen Button umwandeln
Ihr benutzt DIVI als Theme für eure WordPress-Site, habt (natürlich!) ein Child-Theme angelegt und möchtet nun aus dem unschönen bzw. langweiligen Textlink „Read more / Mehr lesen“ einen hübschen Button machen, um eure NutzerInnen auf den Beitrag zu bringen.
So geht es:
Schritt 1:
Im Blogmodul den „Read more Button“ aktivieren.
Schritt 2:
Im Design-Tab die Basiseinstellungen grob nach Wunsch vornehmen.
Schritt 3:
Das CSS: Entweder ihr benutzt im Child-Theme die style.css oder ihr geht bequem in den DIVI Themeoptionen (bzw. Customizer) auf „Eigenes CSS“. Logischerweise könnt ihr das so anpassen, wie es für euch schick ist. Dies ist nur ein Beispiel.
Hier tragt ihr folgendes ein:
/*Aus dem Text einen Button machen*/
.et_pb_post a.more-link {
color: #ffffff;
background: #777777;
border: 2px solid #777777;
padding: .7em 1.3em;
margin-top: 20px;
border-radius: 50px;
display: inline-block;
transition: all 0.3s ease-in-out;
}
/*Button bei mouse-over / hover*/
.et_pb_post a.more-link:hover {
background: transparent;
color: #777777;
border: 2px solid #777777;
transition: all 0.3s ease-in-out;
}
Wenn ihr ein Icon nach dem Text haben möchtet, z.B. einen Pfeil, tragt ihr bitte Folgendes in das CSS ein:
/*Icon Pfeil nach dem Button-Text*/
.et_pb_post .more-link:after {
content: "\24";
font-family: ETModules;
vertical-align: middle;
margin-left: 10px;
}
Nun kommt noch der etwas anspruchsvollere Teil – Das ändern des „Read more“ Textes. Dies geht mit einem kleinen jQuery-Snippet, welches ihr unter DIVI / Themeoptionen / Integrationen einfügt. Und zwar in den Head-Bereich!:
<script>
jQuery(document).on('ready ajaxComplete', function () {
//Replace read more link text
jQuery(".et_pb_post a.more-link").html(function () {
return jQuery(this).html().replace('read more', 'Mehr erfahren');
});
});
</script>
In der Ausgabezeile „return jQuery(this).html().replace(‚read more‘, ‚Mehr erfahren‚);“ könnt ihr aus „read more“ machen, was immer ihr wollt.
Speichern nicht vergessen, ggf. den Browsercache leeren und fertig!
Viel Spaß beim Austesten!
Das Original dieses Beitrages kommt von Pee-Aye Creative, einem wirklich genialen DIVI-Spezialisten.