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
Normalerweise zeigt das Divi-Theme mobile Menüs mit einem so genanten «Hamburger». Egal, ob es geöffnet oder geschlossen ist. Mit einem kleinen Trick kann in geöffneten Mobilmenüs ein «X» angezeigt werden, welches zum Schliessen des Menüs einlädt.
Vermutlich verwenden Sie auf Ihrer WordPress-Website ein Formular-Plugin. Das System selber liefert ja nichts Schlaues mit, weswegen hier ein Plugin die richtige Wahl ist. Bloss sehen die Felder oft einigermassen ärmlich aus. Immerhin: Den ...
Heute ein interessanter Animationseffekt: Texte werden quasi live am Monitor geschrieben. Dieser Typewritereffekt startet, sobald die Seite geladen wird. Sie benötigen bloss einige Zeilen CSS-Code - wir zeigen Ihnen alles weitere.
Gerade in mehrspaltigen Designs möchte man vielleicht ein Bildmodul in exakt derselben Höhe wie der nebenan liegende Text darstellen. Das schaffen wir mit ein wenig CSS-Code.
Keine Inhalte gefunden.
Werbung
