Drei CSS-Tricks für deine Divi-Website

CS Webdesigns

Was dich in diesem Beitrag erwartet.

In diesem Beitrag zeige ich dir an drei einfachen Beispielen, wie du deine Webseite mit einfachen CSS-Codes verbessern kannst und somit deine Besuchern ein besseres Nutzererlebnis bescheren kannst.

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.

Lasse mich gerne in den Kommentaren wissen, ob dir diese Tipps geholfen haben.

0 Kommentare

Einen Kommentar abschicken

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