Three CSS tricks for your Divi website - contact form button, vertical centering & highlight color

Category(ies): Divi
Published on 16.07.2022
Web Designer

What you can expect in this article:

Three examples of how you can increase the satisfaction and experience of your visitors with the help of short CSS commands.

Not everything can be found in the settings of visual builders (e.g. Divi, Elementor). In the following, I will show you three simple tricks to enhance your Divi website. Specifically, it's about the button in the contact form, the vertical centering and the background color when you highlight a text.

CSS trick 1: Center button in Divi contact form

If you use the Divi module for your contact form, you will notice that there is no option in the settings to center the send button.

If you want to center the button, you can use the following CSS code:

/* Contact form - centering send button */
.et_contact_bottom_container{
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100% !important;
    padding-bottom: 5px;
}

Simply add it to the "Custom CSS" box at the bottom under Theme Options or, even better, if you are using a child theme, to the Style.css there.

CSS trick 2: Center elements vertically

This CSS trick is a game changer for me. From my point of view, vertical centering is fundamentally important in web design, as it makes work extremely easy because you don't always have to deal with padding or margin on all device sizes. Unfortunately, Divi does not include this in the standard settings.

This code provides a remedy:

/* Vertical centering */
    .vertically centered {
    display: flex;
    align-items: center;
    flex-direction: row;
    flex-wrap: wrap;
}

Add this accordingly as described in the 1st trick. The class must then be assigned to the desired line. To do this, navigate in the builder to the corresponding line (green frame) in the settings under "Advanced" to CSS class and add "vertically centered" there.

Vertical centering in Divi with CSS

CSS trick 3: Change highlight color

Changing the highlight color doesn't seem to be important to many web designers. Personally, I always find it very positive when the highlighting color does not appear in the default light blue, but in your own branding colors.

You can achieve this with this short code (using my site as an example):

/* Adjust marking color */
::-moz-selection {
    background: #3e6787;
    color:#fccf60;
}

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

Of course, you have to adapt the colors to your desired (branding) colors.

Conclusion

As you can see, writing CSS code is often not that difficult, but it can add a few percentage points to your site. For example, I personally consider the highlight color to be part of the branding, but very few website operators use it. 

Comments

0 Comments

Submit a Comment

Your email address will not be published. Required fields are marked *

en_USEN
Christian Strasser

Christian Strasser

On working days I reply within a few hours.

On working days I usually reply within a few hours.

Christian Strasser
Hi 👋 
please leave me a message.

I will get back to you as soon as possible.

Best regards,
Christian
Whatsapp

Data protection consent