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
Divi bringt standardmässig eigene Social-Media-Icons mit. Aktiviert man diese, öffnen sich die Links aber nicht automatisch in einem neuen Tab oder Fenster. Das lässt sich ändern.
Besonders in journalistischen Webtexten sind sie hin und wieder anzutreffen: Die Initialen - auch Drop Caps genannt - welche der angezeigten Seite einen Schimmer von Print einhauchen. Solche Initialen können Sie ganz einfach selber erstellen ...
Das Divi-Theme lässt den Zweifinger-Zoom auf Tablets und Handys in den Grundeinstellungen nicht zu. Der Hersteller argumentiert mit der besseren Kontrolle der Darstellung auf kleinen Anzeigen. Das führt jedoch mitunter zu Strafen seitens der ...
Out oft the box schaut das Suchfeld des Divi-Themes etwas ärmlich aus. Mit unserem CSS-Bausatz können Sie das Suche-Modul aber ganz einfach dem Styling Ihrer Website anpassen.
Keine Inhalte gefunden.
Werbung
