Drei CSS-Tricks für deine WordPress-Website

Was dich in diesem Beitrag erwartet.

Drei Beispiele, wie du Zufriedenheit und Erlebnis deiner Besucher mithilfe von kurzen CSS-Befehlen steigern kannst.

CSS-Trick 1: Button im Divi-Kontaktformular zentrieren

Wenn du für dein Kontaktformular das Divi-Modul verwendest, wirst du feststellen, dass es keine Möglichkeit in den Einstellungen gibt, den Absenden-Button zu zentrieren.

Willst du den Button zentrieren, kannst du dafür folgenden CSS-Code verwenden:

/* Kontaktformular – Zentrierung Senden-Button */
.et_contact_bottom_container{
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100% !important;
    padding-bottom: 5px;
}

Füge diesen einfach unter Theme-Optionen unten in die Box „Eigene CSS“ ein oder noch besser, wenn du ein Child-Theme verwendest, dort in die Style.css.

CSS-Trick 2: Elemente vertikal zentrieren

Dieser CSS-Trick ist für mich ein Gamechanger. Aus meiner Sicht ist die vertikale Zentrierung im Webdesign elementar wichtig, da es die Arbeit extrem vereinfacht, weil man sich nicht immer mit padding oder margin auf allen Gerätegrößen beschäftigen muss. Leider bringt Divi das nicht in den Standardeinstellungen mit.

Dieser Code schafft Abhilfe:

/* Vertikale Zentrierung */
    .vertikalzentriert {
    display: flex;
    align-items: center;
    flex-direction: row;
    flex-wrap: wrap;
}

Füge diesen wie im 1. Trick beschrieben entsprechend hinzu. Danach muss die Klasse noch der gewünschten Zeile zugewiesen werden. Navigiere dazu im Builder bei der entsprechenden Zeile (grüne Rahmen) in den Einstellungen unter „Erweitert“ zu CSS-Klasse und füge dort „vertikalzentriert“ ein.

Vertikale Zentrierung in Divi mit CSS

CSS-Trick 3: Markierungsfarbe ändern

Die Markierungsfarbe zu ändern, scheint vielen Webdesignern nicht wichtig zu sein. Ich persönlich finde es immer als sehr positiv, wenn auch die Markierungsfarbe, nicht im voreingestellten hellblau erscheint, sondern in den eigenen Brandingfarben.

Das erreichst du mit diesem kurzen Code (am Beispiel meiner Seite):

/* Markierungsfarbe anpassen */
::-moz-selection {
    background: #3e6787;
    color:#fccf60;
}

::selection {
    background: #3e6787;
    color:#fccf60;
}

Die Farben musst du natürlich an deine gewünschten (Branding-)Farben anpassen.

Fazit

Nicht alles lässt sich in den Einstellungen von visuellen Buildern (z. B. Divi, Elementor) finden. Dies kann jedoch meist mit kurzem CSS-Code gelöst werden.

War dieser Beitrag nützlich für dich? Hast du noch Fragen? Lass es mich gerne in den Kommmentaren wissen.

0 Kommentare

Einen Kommentar abschicken

Deine E-Mail-Adresse wird nicht veröffentlicht.