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
Das Footer-Menu im Divi-Theme ist von Haus aus immer links ausgerichtet. Eine Option, um es zu zentrieren oder rechtsbündig anzulegen, sucht man vergebens. Dennoch ist das möglich: mithilfe von ein paar Zeilen CSS-Code.
Mit dem Informationstext-Modul des Divi-Themes – auch «Blurb-Modul» genannt – lassen sich Teaser ganz einfach anlegen. Und mit ein wenig CSS-Code auch ganz nett aufhübschen. Wir zeigen Ihnen, wie das geht.
Die meisten Kontaktformulare zeigen Beschriftungen über den Eingabefeldern. Im Divi-Formularmodul sind diese Feldbeschriftungen standardmässig nicht sichtbar. Mit einem CSS-Snippet werden die Beschriftungen eingeschaltet. Wir zeigen Ihnen, wie ...
Ehrlich gesagt, Leute: An diesem Trick hab' ich meine helle Freude. Der Slider des Divi-Themes lässt sich nämlich ganz hervorragend mit Testimonials bestücken, welche dann eins ums andere eingeblendet werden. Klingt kompliziert - isses aber nicht.
Keine Inhalte gefunden.
Werbung
