Möchten Sie den Weiterlesen-Link des Blog-Moduls von anpassen Divi ? Dann folgen Sie unserem Tutorial.
Die "Weiterlesen"-Links eines Blogs können ein entscheidender Teil der Verbesserung sein die Benutzererfahrung. Daher ist es wichtig, dass wir wissen, wie man sie richtig anpasst.
In diesem Tutorial zeigen wir Ihnen, wie Sie den Link „Weiterlesen“ im Blog-Modul anpassen. In diesem Artikel zeigen wir Ihnen, wie Sie:
- Passen Sie den „Weiterlesen“-Link mit den integrierten Optionen von an Divi
- Richten Sie den Link „Weiterlesen“ aus (links, mittig, rechts)
- Verwandeln Sie den „Weiterlesen“-Link in eine Vollbild-Schaltfläche
- Erstellen Sie eine benutzerdefinierte „Weiterlesen“-Schaltfläche mit Hover-Effekten
- Ersetzen Sie den Text „Weiterlesen“ durch etwas anderes (z. B. „Artikel lesen“).
Übersicht
Hier ist ein kurzer Blick auf das Design, das wir in diesem Tutorial erstellen werden.
Laden Sie ein Blog-Modul mit dem Theme Builder von Divi auf eine Seite
Um mit dem Anpassen von Weiterlesen-Links zu beginnen, benötigen Sie Zugriff auf ein Blog-Modul.
Sie können Laden Sie ein vordefiniertes Layout mit jedem Blog-Modul Ihrer Wahl oder fügen Sie einfach ein neues Blog-Modul zu einer Seite hinzu.
Um den Prozess zu starten, verwenden wir die Blog-Seite aus dem vordefinierten Layout Artificial Intelligence.
Fügen Sie eine neue Seite aus dem WordPress-Dashboard hinzu
Geben Sie Ihrer Seite dann einen Titel und klicken Sie dann auf " Verwendung Divi Baumeister".
Klicken Sie dann auf " Layout wählen«
Suchen und wählen Sie " Künstlich Nachrichtendienste Blog Seite«
Wählen Sie abschließend das Blog-Layout und klicken Sie auf „ Layout wählen«
Passen Sie den Read More-Linktext an und richten Sie ihn aus
Jedes Blog-Modul bietet die Möglichkeit, den „Weiterlesen“-Link für jeden Artikel im Layout ein- oder auszublenden. Um den Link „Weiterlesen“ anzuzeigen, öffnen Sie die Blog-Einstellungen und schalten Sie das „ Schaltfläche „Weiterlesen“ anzeigen auf "JA" in der Liste der Blogeinträge, die Sie anzeigen möchten.
Auf der Registerkarte „Stil“ können Sie den „Mehr lesen“-Text mit einer der integrierten Optionen anpassen. Für dieses Beispiel aktualisieren wir Folgendes:
- Schriftart Weiterlesen: Barlow
- Lesen Sie mehr Dim Light: Semi Bold
- Weiterlesen Kopierstil: Großbuchstaben (TT), Unterstrichen (U)
- Textfarbe Lesen Sie mehr: #db0eb7
- Lesen Sie mehr Farbe für unterstrichenen Text: #3c5bff
- Buchstabenabstand Weiterlesen: 1px
Hier ist das Ergebnis.
Derzeit wird der Link „Weiterlesen“ standardmäßig auf der linken Seite platziert, es sei denn, Sie ändern die Ausrichtung. Um den Link in der Mitte oder rechts vom Beitrag auszurichten, fügen Sie ein CSS-Snippet wie dieses hinzu:
Fügen Sie auf der Registerkarte „Erweitert“ für die Blogeinstellungen das folgende CSS zum CSS für die Schaltfläche „Weiterlesen“ hinzu:
display: block;
text-align: right;
Der „display:block“ ändert den Link in ein Blockelement, das sich über die gesamte Breite seines Containers erstreckt (in diesem Fall den Körper des Inhalt der Veröffentlichung). Sobald wir es als Blockelement definiert haben, können wir den Text mit „text-align:right“ rechtsbündig ausrichten.
Lesen Sie auch: So erstellen Sie einen Sticky Global Header in Divi
Hier ist das Ergebnis.
Um den Link zu zentrieren, ersetzen Sie einfach „right“ durch „center“ für den Wert der Eigenschaft „text-align“ wie folgt:
Hier ist das Ergebnis.
Passen Sie den Link „Weiterlesen“ so an, dass er wie eine Schaltfläche aussieht
In diesem Beispiel erstellen wir einen einfachen Schaltflächenstil in voller Breite für den Link „Weiterlesen“. Bevor Sie das benutzerdefinierte CSS hinzufügen, öffnen Sie die Blog-Einstellungen und aktualisieren Sie den Linktext „Weiterlesen“ wie folgt:
- Weiterlesen Kopierstil: Großbuchstaben (TT)
- Textfarbe Weiterlesen: #ffffff
Im vorherigen Beispiel haben wir „display:block“ und „text-align:center“ verwendet, damit sich der Link über die gesamte Breite des Containers erstreckt und den Text zentriert.
Siehe auch: So erstellen Sie ein Schiebe- und Push-Menü in Divi
Damit es wie eine Schaltfläche aussieht, müssen wir nur etwas Hintergrundfarbe und Abstände sowie einige zusätzliche CSS-Schnipsel hinzufügen. Gehen Sie dazu auf die Registerkarte Erweitert und aktualisieren Sie das CSS der Schaltfläche "Weiterlesen" wie folgt:
display: block;
text-align: center;
background-color:#01012C;
padding: 0.3em 1em;
margin-top: 10px;
Ergebnis
Hier ist das Ergebnis!
Erstellen eines erweiterten Schaltflächenstils mit CSS
Wenn Sie das Button-Design auf eine andere Ebene bringen möchten, können wir einen Hintergrund und einen Hover-Effekt hinzufügen.
Ersetzen Sie dazu das CSS für den "Weiterlesen-Button" durch Folgendes:
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;
Um den Hintergrund beim Hover zu ändern, können Sie das folgende CSS auf der Schaltfläche "Mehr erfahren" einfügen, wenn Sie mit dem Mauszeiger darüber schweben:
display: inline-block;
margin-top: 10px;
padding: 0.3em 1em;
background-color: #01012C;
Ergebnis
Hier ist das Ergebnis!
Ändern Sie den Text "Weiterlesen" in etwas anderes
Um den Text „Weiterlesen“ in etwas anderes zu ändern, wie z. B. „Artikel lesen“, benötigen wir etwas jQuery. Aber keine Sorge, das sind nur ein paar Zeilen.
Bevor Sie unseren jQuery-Code hinzufügen, fügen Sie dem Blog-Modul wie folgt eine benutzerdefinierte CSS-Klasse hinzu:
- CSS-Klasse: et-custom-read-more-text
HINWEIS: Stellen Sie sicher, dass der Klassenname korrekt ist, damit jQuery funktioniert.
Um die jQuery hinzuzufügen, die den „Weiterlesen“-Text ändert, fügen Sie ein Code-Modul unter dem Blog-Modul hinzu.
Fügen Sie dann den folgenden jQuery-Code ein und stellen Sie sicher, dass Sie den Code mit den erforderlichen Skript-Tags umschließen:
(function ($) {
$(document).on("ready ajaxComplete", function () {
$(".et-custom-read-more-text .et_pb_post a.more-link").html("Lire l'article");
});
})(jQuery);Dieser Code weist den Browser grundsätzlich an, den Text des Links „Weiterlesen“ in „Artikel lesen“ zu ändern, sobald die Seite geladen ist.
Ergebnis
Hier ist das Ergebnis!
Endergebnisse
Hier ist ein weiterer Blick auf die von uns vorgenommenen Anpassungen des Weiterlesen-Links (oder der Schaltfläche).
Laden Sie DIVI jetzt herunter!!!
Zusammenfassung
So ! Das war es für diesen Artikel. Mit dem Blog-Modul von Divi können Sie den Link „Weiterlesen“ kreativ anpassen. Und wenn Sie mit ein paar CSS-Schnipseln experimentieren möchten, können Sie selbst noch fortgeschrittenere Modifikationen erstellen.
Wir hoffen, dass dieses Tutorial Ihnen hilft, diese „Weiterlesen“-Links auf die nächste Ebene zu bringen. Wenn Sie Bedenken oder Vorschläge haben, finden Sie uns unter der Kommentarbereich um darüber zu diskutieren.
Sie können sich aber auch beraten unsere RessourcenWenn Sie mehr Elemente benötigen, um Ihre Projekte zur Erstellung von Internetseiten durchzuführen, konsultieren Sie unseren Leitfaden auf der WordPress-Blog-Erstellung oder der eine auf Divi: das beste WordPress-Theme aller Zeiten.
Aber in der Zwischenzeit Teile diesen Artikel in deinen verschiedenen sozialen Netzwerken.
...
