Trick # 416 | Dieser Beitrag beinhaltet 844 Wörter. – Geschätzte Lesezeit: ca. 5 Minuten.
Das Informationstext- oder Blurb-Modul des Divi-Themes bietet von Haus aus keinen Button. Macht nichts: Ein Button lässt sich einfach nachrüsten – sogar animiert, wer’s so besser mag.
So wie nebenan schaut es aus, das Informationstext-Modul des Divi-Themes. Es eignet sich für die Darstellung kurzer Textblöcke: Es fehlt jedoch fehlt ein Button, unter welchem weiterführende Inhalte erreicht werden können. Zum Glück lässt sich das einfach nachbessern. Fügen Sie dazu dem Blurb-Text folgenden Code hinzu – verwenden Sie dafür die Text- oder HTML-Ansicht des Editors:
<a class="et_pb_button" href="#">GEWÜNSCHTER BUTTON-TEXT</a>Anpassen sollten Sie dabei die Buttonbeschriftung. Ebenso muss anstelle des Hashtags # die URL des Button-Links eingetragen werden.
Lorem ipsum dolor
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.
Weiter müssten Sie Ihrem Blurb-Modul eine CSS-Klasse hinzufügen. Das geschieht im Tab «Erweitert» unter «CSS-ID und Klassen». Fügen Sie im Textfeld «CSS-Klassen» den Passus «blurb-button» ein.Nun noch ein wenig CSS-Code. Den folgenden Block kopieren Sie in das CSS-Stylesheet Ihrer Website – im Backend unter Design/Customizer/Zusätzliches CSS:
.blurb-button a.et_pb_button {
position:absolute;
bottom: 10%;
opacity: 0;
width: 100%;
transition: 0.5s ease;
}
.blurb-button:hover a.et_pb_button {
opacity: 1 !important;
bottom: 40%;
transition: 0.5s ease;
}Das Blurb-Modul von oben ist nun ergänzt mit einem Button. Dieser wird erst sichtbar, sobald man den Mauszeiger über den Informationstext bewegt.
Lorem ipsum dolor
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.BUTTON TEXT
Werbung
Vor allem bei einfarbigen Websites mit fixiertem Header kann das Scrollen der Anzeige dazu führen, dass der Inhalt plötzlich hinter der Navigation verschwindet. Mir gefällt das nicht sonderlich. Bei einigen meiner realisierten Webprojekte setze ...
Das Divi-Suchmodul zeigt üblicherweise ein Eingabefeld links und den Suchbutton rechts. Die beiden Elemente können Sie aber vertauschen – wie das geht, zeigen wir Ihnen heute.
Im Menü-Modul des Divi-Themes wird die Breite der einzelnen Menülinks von der Länge der Linktexte bestimmt. Das passt aber nicht immer. Hier erfahren Sie, wie Sie die Menüpunkte gleichmässig verteilen und deren Breite ausgleichen können..
Im Divi-Theme können Sie mehrere Elemente nebeneinander darstellen. Für die Responsive-Ansichten auf Tablets und Mobiltelefonen reiht Divi diese Elemente dann untereinander auf. Das ist meist gut so - hin und wieder passt das aber eben nicht. ...
Keine Inhalte gefunden.
Werbung
