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.
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.
0 Comments