Es gibt gute Gründe, das Informationstext-Modul (Blurb-Modul) mit einem Button zu ergänzen. Insbesondere in Situationen, in denen das Hinzufügen eines separaten Button-Moduls aufgrund der Gestaltung des Blurbs nicht sinnvoll wäre. Da Sie aber kein Modul innerhalb eines Moduls platzieren können, arbeiten Sie ersatzweise mit einem einfachen HTML-Link und etwas CSS direkt im Textbereich des Informationstext-Moduls.
Out of the box zeigt sich das Informationstext-Modul wie nebenan:
Im Gegensatz zum Handlungsaufruf fehlt hier ein Button. Sie können ihn aber nachrüsten.
Lorem ipsum
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
Setzen Sie dazu an gewünschter Stelle ein Informationstext-Modul ein. Geben Sie Text und einen Titel ein.
Wechseln Sie nun im Body-Text von der Visual-Ansicht auf den HTML-Editor. Fügen Sie am Ende einen Link ein. Hier ein Beispiel-Code:
<a href= "#" class="blurb-button">Hier klicken</a>Den Text «Hier klicken» können Sie anpassen. Ebenso sollte das «#» mit einer richtigen URL ersetzt werden.
Nun folgt noch etwas CSS-Code, den Sie in das CSS-Stylesheet Ihrer Website (unter Design/Customizer/Zusätzliches CSS) einfügen können:
a.blurb-button {
color: #ffffff;
background: #293280;
border: 2px solid #293280;
padding: .7em 1.3em;
margin-top: 20px;
border-radius: 10px;
text-transform: capitalize;
display: inline-block;
transition: all 0.3s ease-in-out;
}
a.blurb-button:hover {
background: #ffffff;
color: #293280;
border: 2px solid #293280;
cursor: pointer;
transition: all 0.3s ease-in-out;
}Das Informationstext-Modul von oben präsentiert sich nun so:
Der CSS-Code kann natürlich nach Ihren Wünschen angepasst werden.
Lorem ipsum
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
Werbung
Werbung
