Trick # 335 | Dieser Beitrag beinhaltet 759 Wörter. – Geschätzte Lesezeit: ca. 4 Minuten.
Das Blurb- oder Informationstext-Modul des Divi-Themes ermöglicht es, kurze Textblöcke adrrett darzustellen. Es lässt sich aber auch zu einem eigentlichen Teaser umfunktionieren. Wie Sie dies stylen können, erfahren Sie in diesem Beitrag.
Nebenan sehen Sie ein Informationstext-Modul, wie es beim Divi-Theme out of the Box komnmt.
Kurze Infos lassen sich damit nett präsentieren und der Titel und das Icon lässt sich verlinken. Doch da geht noch mehr.
Titel
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
Vergeben Sie zunächst dem Informationstext-Modul eine CSS-Klasse. Dies können Sie tun, wenn Sie im Tab «Erweitert» auf «CSS-ID & Klassen» klicken und danach unter «CSS-Klasse» den Text «blurb-icon-button» einfügen. Im Tab «Inhalt empfehlen wir überdies, unter «Link» statt des «Link-URL für den Text» die «Link-URL für das Modul» anzugeben.
Weiter benötigen Sie etwas CSS-Code. Den folgenden Block können Sie in das CSS-Stylesheet Ihrer Webisite unter Design/Customizer/Zusätzliches CSS einfügen:
/* Modul anpassen und Transition definieren */
.blurb-icon-button {
transition: box-shadow .2s ease-in-out;
padding: 30px 25px 75px 25px;
}
/* Pfeilsymbol rechts unten platzieren */
.blurb-icon-button:after {
font-family: ETModules;
content: "\24";
font-size: 36px;
color: #59B14B;
position: absolute;
bottom: 26px;
right: 25px;
transition: all .2s ease;
}
/* Schatten beim hovern definieren */
.blurb-icon-button:hover {
box-shadow: 0 5px 10px rgba(0, 0, 0, .15);
transition: box-shadow .2s ease-in-out;
}
/* Pfeilsymbol beim hovern definieren */
.blurb-icon-button:hover:after {
color: #293280;
bottom: 30px;
transition: all .2s ease;
}Nun erhält das Informationstext-Modul von oben ein Pfeilsymbol und wird beim hovern mit einem Schatten dargestellt:
Quite simple …
Werbung
Werbung
