Datenschutz-Einverständnis

* Pflichtfeld

Drei CSS-Tricks für deine Divi-Website – Kontaktformular Button, vertikale Zentrierung & Markierungsfarbe

Kategorie(n): CSS, UX & UI
Veröffentlicht am 16.07.2022
CS Webdesigns

Was dich in diesem Beitrag erwartet:

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

Nicht alles lässt sich in den Einstellungen von visuellen Buildern (z. B. Divi, Elementor) finden. Im folgenden zeige ich dir drei einfache Tricks, deine Divi-Website aufzuwerten. Es geht dabei konkret um den Button im Kontaktformular, die vertikale Zentrierung und die Hintergrundfarbe, wenn du einen Text markierst.

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

Wie du siehst, ist CSS-Code zu schreiben oft gar nicht so schwer, kann deine Seite jedoch nochmal um ein paar Prozentpunkte aufwerten. Die Markierungsfarbe empfinde ich persönlich zum Beispiel als Teil des Brandings, wird aber von den wenigsten Websitebetreibern eingesetzt. 

Kommentare

0 Kommentare

Einen Kommentar abschicken

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert