Trick # 393 | Dieser Beitrag beinhaltet 557 Wörter. – Geschätzte Lesezeit: ca. 3 Minuten.
Der Divi-Button hilft, Download-Verknüpfungen oder andere Links hübsch zu gestalten. Doch er lässt sich auch leicht zum Stempel umfunktionieren. Ein gestalterisches Element, das vielleicht ab und an hilfreich ist.
Das Button-Modul des Divi-Themes werden Sie vielleicht schon kennen. In Website-Design von dr-code.ch sieht der Button so aus wie nebenan:
Um den Button als Stempel zu verwenden, sollten Sie ihm eine Klasse zuweisen. Wir verwenden in unserem Beispiel «stamp-button». Diesen Text können Sie im Bearbeitungsmodus des Button-Moduls im Tab «Erweitert», unter «CSS-ID und Klassen» und «CSS-Klasse» einfügen.
Als nächstes können Sie dieser benannten Klasse noch etwas CSS-Code zuweisen. Einen Beispielblock sehen Sie in der Folge. Kopieren Sie ihn in das CSS-Stylesheet Ihrer Website – im Backend unter Design/Customizer/Zusätzliches CSS:
.stamp-button {
border: 1px #293280 dotted !important;
color: #293280 !important;
background-color: #ffffff !important;
transform: rotate(10deg);
float: right;
font-family: Verdana !important;
font-size: 30px;
font-weight: 700;
cursor: default;
z-index: 999;
margin: 0px 120px 10px 10px !important;
}Der Button sieht nun so aus wie hier. Quasi ein Stempel auf der Website, welcher auch leicht über den Text gelegt werden kann. In unserem Fall begnügen wir mit der Darstellung rechterhand und umfliessenden Lauftext. Selbstverständlich sind auch alle Farben, Abstände, Font-Definitionen und der Rotationswinkel im CSS-Code frei nach Gusto anzupassen – auf dass die Darstellung passend zum Styling Ihrer Website herauskommt.
Werbung
Werbung
