Divi in CSS
Divi is popular WordPress themes due to its versatility and user-friendly interface. It includes a built-in page builder for sophisticated design options and an assortment of customization features to help both novices and advanced users create great websites. Many users prefer more advanced design modifications that necessitate knowledge of CSS (Cascading Style Sheets), While Divi's Visual Builder provides many design controls.
In this article, we are going to look at how CSS may improve your Divi designs and provide you with greater flexibility over the appearance of your website. Whether you're a complete newbie or an experienced web developer, this post will show you how to apply custom CSS to Divi parts to make your website look exactly how you want.
Overview of Divi and CSS
Elegant Themes created the robust and flexible WordPress theme Divi. users can create stunning layouts without knowing how to code with the help of its visual page builder. The Divi gives the option to use CSS (Cascading Style Sheets) to further alter the appearance. Fonts, colors, spacing, and many other aspects of a website's elements are all controlled by CSS. When creating web pages, it provides flexibility, consistency, and ease of maintenance by keeping the structure (HTML) and styling (CSS) separate.
Why Does Divi Use CSS?
With Divi's user-friendly interface, anyone can design stunning websites without knowing a single bit of code. Sometimes, though, you'll want to go beyond the pre-established design possibilities. This might be done to:
- Create distinctive visual styles: Occasionally, you might not be able to get the precise look you desire with Divi's basic options.
- Improved Performance: Performance can be improved by using custom CSS to target particular elements and speed up your site's loading time.
- Greater control over layouts: CSS enables more accuracy and personalized tweaks, even though Divi provides robust layout options.
- Add your own animations and effects: CSS makes it possible to create eye-catching animations, interactive elements, and hover effects.
- You can insert a personal touch that complements your brand and turn your Divi website from simply another theme-based website into something genuinely distinctive Using CSS.
Features of Divi Theme
Understanding what the Divi theme has to offer right out of the box is crucial before delving into CSS.
- Divi's Visual Builder: The core of Divi's design capabilities is the Visual Builder. With its "what you see is what you get" (WYSIWYG) interface, you can edit pages. Without knowing how to code, you may use this builder to add and modify a variety of elements, including sections, rows, columns, modules, and more.
- Custom CSS Fields: Divi offers choices for incorporating unique CSS onto your website:
- Global Custom CSS: You can add CSS to your website using the theme customizer, and it will be applied globally.
- Module-Level CSS: You can add unique CSS to each Divi module that is exclusive to that module.
- Custom CSS for Individual Pages: You can apply CSS to a particular page or post for even more control.
CSS allows you more precise control over the appearance and feel of your website, even if Divi includes a lot of customization options. When Divi's built-in options aren't sufficient for your needs, this flexibility comes in handy.
How to Use Divi to Add Custom CSS
You may add CSS to your Divi site in a number of ways. Let's examine the various approaches you have at your disposal.
1. Customizer for Divi Theme
The WordPress Customizer is the most straightforward method for adding custom CSS to your Divi website. Here's how to accomplish it:
- Go to Appearance > Customize on your WordPress dashboard.
- Choose Additional CSS from the options on the left.
- You can enter your own CSS code in the text field that displays.
- Click Publish to save your changes after adding your CSS.
This technique works well for introducing tiny CSS snippets that have an impact on your entire website.
2. The Divi Theme Options Panel
You can use the Divi Theme Options tab to create custom CSS that will be used throughout your entire website:
- Go to Divi > Theme Options in your WordPress dashboard.
- Scroll down to access the Custom CSS area.
- This is where you paste your CSS code.
- Click Save Changes To add the CSS to your website.
If you want the custom CSS to be a major component of your theme's settings, this approach is perfect.
3. Divi Page Preferences
You can apply unique CSS to each page for more precise control. If you simply need to make specific styling adjustments to one page, this is quite helpful.
- start the Divi structure and select the page you wish to modify.
- click the horizontal dots at the bottom of the screen to access Page Settings in the Divi structure interface.
- Navigate In the Advanced tab.
- You can insert your CSS right here in the Custom CSS section.
- Save the modifications, then close the window.
By using this method, you can make sure that your CSS only changes the page you're working on and doesn't impact the other sites.
4. Making Use of Child Themes
A child theme is the best option if you require more control over your own CSS or intend to get changes in the Divi website. You can make changes to a child theme without changing the parent theme's code, so your modifications won't be lost when the theme is updated.
- Install and enable a Divi Child Theme (you can make your own or find templates online).
- Add your own CSS in the style.css file of the child theme.
- The child theme should be uploaded and activated in your WordPress dashboard.
- If you know how to use CSS and want to make site-wide changes without worrying about losing your customizations then theme upgrades worked using a child.
Format of the DIVI in CSS
The following format is used for the divi in CSS.
/* Enter Your Custom CSS Here */
.td-pulldown-size {
background-color: #e2d2d7;
}
#bottomnext a:link {
padding: 7px 25px;
border: 1px solid black;
border-radius: 3px;
color: black;
background-color: white;
}
#bottomnext a:hover {
padding: 7px 25px;
border: 1px solid black;
border-radius: 3px;
color: white;
background-color: black;
}
.shownewsletterbox {
display: none;
}
.testit a:link,
.testit a:visited {
font: 13px/1.5 Verdana !important;
padding: 14px 30px !important;
color: #fff !important;
font-weight: 700 !important;
text-decoration: none !important;
border-radius: 3px !important;
background: #7a827a url(http://web.archive.org/web/20190416083441im_/https://www.tutorialandexample.com/wp-content/uploads/2018/07/trynow.png) no-repeat 8px 14px !important;
}
.testit a:hover,
.testit a:active {
font: 13px/1.5 Verdana !important;
padding: 14px 30px !important;
color: #fff !important;
font-weight: 700 !important;
text-decoration: none !important;
border-radius: 3px !important;
background: #525852 url(http://web.archive.org/web/20190416083441im_/https://www.tutorialandexample.com/wp-content/uploads/2018/07/trynow.png) no-repeat 8px 14px !important;
}
.inside-header {
padding: 20px;
}
.main-title {
margin: 0;
font-size: 30px;
line-height: 1.2em;
word-wrap: break-word;
font-weight: 700;
text-transform: none;
}
.site-description {
margin: 0;
line-height: 1.5;
font-weight: 400;
text-transform: none;
font-size: 13px;
}
h1,
h2,
h3,
h4,
h5,
h6 {
font-weight: 600;
}
button,
html input[type="button"],
input[type="reset"],
input[type="submit"],
a.button,
a.button:visited,
a.wp-block-button__link:not(.has-background) {
color: #ffffff;
background-color: #4eaec7;
padding: 5px 10px;
}
button:hover,
html input[type="button"]:hover,
input[type="reset"]:hover,
input[type="submit"]:hover,
a.button:hover,
button:focus,
html input[type="button"]:focus,
input[type="reset"]:focus,
input[type="submit"]:focus,
a.button:focus,
a.wp-block-button__link:not(.has-background):active,
a.wp-block-button__link:not(.has-background):focus,
a.wp-block-button__link:not(.has-background):hover {
color: #ffffff;
background-color: #357bb9;
}
.main-navigation,
.main-navigation ul ul {
background-color: #175e6b;
}
.main-navigation .main-nav ul li:hover>a,
.main-navigation .main-nav ul li:focus>a,
.main-navigation .main-nav ul li.sfHover>a {
color: #ffffff;
background-color: #1092a2;
}
.main-navigation .main-nav ul ul li:hover>a,
.main-navigation .main-nav ul ul li:focus>a,
.main-navigation .main-nav ul ul li.sfHover>a {
color: #ffffff;
background-color: #1092a2;
}
.main-navigation .main-nav ul li[class*="current-menu-"]>a {
color: #ffffff;
background-color: #1092a2;
}
.inside-article li {
margin-bottom: 10px;
}
.nexttopic,
.nexttopic a {
padding: 30px;
font-size: 19px;
margin: 10px 0px 10px 0px;
background: url(https://www.tutorialandexample.com/wp-content/uploads/2019/08/hand-right.png) left no-repeat;
background-color: turquoise;
color: black;
}
.prevnext:after,
.prevnext:before {
content: "";
display: table;
clear: both;
}
.prevnext {
padding: 5px;
margin-bottom: 10px;
margin-top: 10px;
}
a.prev {
background-color: #e2e2e2;
float: left;
text-decoration: none;
padding: 5px 15px;
color: #444;
font-size: 16px;
border-radius: 2px;
box-shadow: 0 0 2px 0 rgba(0, 0, 0, 0.12), 0 2px 2px 0 rgba(0, 0, 0, 0.24);
}
a.next {
background-color: #e2e2e2;
float: right;
text-decoration: none;
padding: 5px 15px;
color: #444;
font-size: 16px;
border-radius: 2px;
box-shadow: 0 0 2px 0 rgba(0, 0, 0, 0.12), 0 2px 2px 0 rgba(0, 0, 0, 0.24);
}
a.prev:hover {
background-color: #d9d9d9;
color: #444;
}
a.next:hover {
background-color: #d9d9d9;
color: #444;
}
.sidebar .widget {
background-color: transparent;
}
.widget-area .widget {
padding: 30px 20px;
}
.widget-area .widget {
padding: 25px 15px;
}
.responsivediv:after,
.responsivediv:before {
content: "";
display: table;
clear: both;
}
.responsivediv {
width: 100%;
}
.col-4,
.col-2,
.col-3 {
float: left;
width: 24%;
margin-left: 7px;
margin-right: 5px;
margin-bottom: 20px;
background: #fafafa61;
}
.col-4 {
float: left;
width: 23%;
background: #fff;
}
.col-2 {
float: left;
width: 47%;
background: #fafafa61;
}
.col-2 p,
.col-3 p,
.col-4 p {
padding: 10px;
padding-left: 20px;
padding-right: 20px;
margin-bottom: 5px;
}
.col-3 {
float: left;
width: 30%;
margin-left: 17px;
background: #fafafa61;
}
.col-4 h2,
.col-2 h2,
.col-3 h2 {
color: #000;
margin: 0;
margin-bottom: 15px;
font-weight: 600;
font-size: 20px;
letter-spacing: 1px;
padding: 10px 15px;
position: relative;
background: #00000005;
text-align: center;
border-bottom: 2px solid lightseagreen;
}
.col-2 h2 {
color: #000;
font-weight: 400;
font-size: 22px;
border-bottom: 1px solid #eeeeeedb;
text-align: left;
}
.col-3 h2 {
color: #000;
font-weight: 400;
font-size: 22px;
border-bottom: 1px solid #eeeeeedb;
text-align: left;
background: #00000005;
}
.col-4 ul,
.col-2 ul,
.col-3 ul {
margin: 0;
padding-inline-start: 25px;
}
.col-4 li,
.col-2 li,
.col-3 li {
padding: 4px;
list-style: none;
text-decoration: none;
margin-bottom: 0px;
}
.col-4 a,
.col-3 a {
padding-left: 15px;
padding-right: 15px;
padding-bottom: 5px;
display: block;
text-decoration: none;
color: #1e73be;
}
.col-2 a {
text-decoration: none;
color: #1e73be;
}
.col-4 a:hover,
.col-2 a:hover,
.col-3 a:hover {
color: #000;
}
@media (max-width: 768px) {
.col-4,
.col-2,
.col-3 {
width: 96%;
}
}
.leftmenu h2 {
font-size: 20px;
text-align: center;
background-color: rgb(23, 94, 107);
padding: 12px 10px;
color: #fff;
margin-bottom: 0px;
font-weight: 400;
display: block;
}
.leftmenu a {
background-color: #fff;
border-left: 4px solid teal;
color: #000;
padding: 10px 12px;
text-align: left;
line-height: initial;
line-height: 1;
display: block;
border-radius: 3px;
font-size: 16px;
margin-top: 7px;
}
.leftmenu a:hover {
background-color: teal;
color: #fff;
box-shadow: 0 0 2px 0 rgba(0, 0, 0, 0.12), 0 2px 2px 0 rgba(0, 0, 0, 0.24);
}
.pagination123 {
margin-bottom: 10px;
}
.pagination123 a,
.pagination123 a:hover {
padding: 4px 8px;
margin-left: 3px;
text-decoration: none
}
.pagination123 a {
font: 13px/1.5 Verdana;
color: #3a3a3a;
font-weight: 700
}
.pagination123 a:hover {
font: 13px/1.5 Verdana;
background-color: #3a3a3a;
color: #fff;
font-weight: 700
}
.home article {
padding: 20px;
background-color: #f7f7f7;
border-left: 3px solid gray;
border-radius: 3px
}
tbody tr:nth-child(odd) {
background-color: #eeebeb;
}
th {
background-color: #ccc;
}
td {
border: 1px solid #ccc;
padding: 8px;
}
/*styles the wp-pagenavi pagination links*/
.wp-pagenavi a,
.wp-pagenavi span {
padding: 0.3em 0.8em !important;
font-size: 1.1em !important;
color: #333333;
line-height: 2em;
background: #eeeeee;
transition: all .5s;
}
/*styles the wp-pagenavi current page number*/
.wp-pagenavi span.current {
color: #ffffff !important;
background: #333333 !important;
}
/*styles the wp-pagenavi pagination links on hover*/
.wp-pagenavi a:hover {
color: #ffffff !important;
background: #333333 !important;
}
/*styles the wp-pagenavi pages text*/
.wp-pagenavi .pages {
background: none;
}
CSS Divi for Performance and Speed
Performance is an important factor to take into account while dealing with custom CSS in Divi. The loading speed of your website may be slowed down by large amounts of unused CSS. The following advice can help you optimize your CSS:
Reduce the amount of extraneous spaces and comments in your CSS files by using a CSS minifier tool. Additionally, Divi comes with built-in CSS optimization features.
- Steer clear of overusing custom styles: Don't rely solely on custom CSS instead of making use of the basic Divi builder options.
- Custom CSS: Code bloat and slower page loading times might result from excessive use of custom CSS.
- Use External CSS: Rather than embedding an external CSS file straight into the page, think about connecting it for larger projects. Because browsers may cache the CSS file, this can improve the efficiency of your website.
- Combine CSS Files: To cut down on HTTP requests, combine several CSS files into a single file.
Role of CSS Divi
The following are some of the main areas in Divi where CSS is used:
Customizing Layouts
To make your layout stand out, you may use CSS to alter margins, paddings, grid settings, and other elements.
Typography Control
Advanced typographic modifications, like font size, line height, and letter spacing, can be made using custom CSS, even though Divi has text formatting options.
Styling Buttons
You may use CSS to alter how buttons appear throughout your website to match the aesthetic of your business.
Advanced Animations
Although CSS can be used to create intricate animations, transitions, and hover effects, Divi comes with animations and hover effects.
Responsiveness
Although Divi is mobile-friendly by default, you can use media queries in CSS to adjust how elements appear on different screen sizes.
Custom Effects
You may use CSS to add borders, shadows, gradient overlays, and even more intricate visual effects like parallax scrolling
Conclusion
Your Divi website's appearance and functionality can be greatly improved with CSS. To create a genuinely distinctive website, you must know how to correctly integrate and manage CSS in Divi, regardless of how big the modifications are or how small they are. You can style your Divi website precisely and adaptably by adhering to best practices.
You can use CSS in Divi to make your design vision a reality, from altering buttons and fonts to incorporating sophisticated hover effects and media queries.