Format Divi Text Module. Use CSS To Get Consistent Styles

+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
Get the Divi Theme and Builder - 10% off* - https://divicoaching.com/getdivi
+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
Using CSS to get consistent styles when using the Divi builder Text Module

How to use CSS to format text modules in the Divi WordPress Theme. Get consistent global text spacing in Divi Text Modules without having to create a new module for every heading level and paragraph which becomes a real chore. Use the included CSS snippet in one place combined with the Divi preset feature to change heading, paragraph and list spacings throughout your website.
----------------------------------------------------------------------------------------------------------------------

CSS for this tutorial as follows:

/* MAKE SURE TO PASTE CLASS "my-spacing" IN TEXT MODULE CSS CLASS */
/* Divi Text Module Custom CSS */
/* Paul Knowler - DiviCoaching 2021 */
/* Paste into customiser, Divi settings or Child Theme */
/* Change any of the em values here to style the items to suit your design */

/* Removes default bottom padding */
.my-spacing h1,
.my-spacing h2,
.my-spacing h3,
.my-spacing h4,
.my-spacing h5,
.my-spacing h6 {
padding: 0;
}

/* Sets default top margin for all text module items */
.my-spacing * + * {
padding: 0;
margin-top: 0.8em;
}

/* Sets top paragraph margin where para follows a heading */
.my-spacing h1 + p,
.my-spacing h2 + p,
.my-spacing h3 + p,
.my-spacing h4 + p,
.my-spacing h5 + p,
.my-spacing h6 + p {
margin-top: 1em;
}

/* Sets top heading margin where heading follows a paragraph */
.my-spacing p + h1,
.my-spacing p + h2,
.my-spacing p + h3,
.my-spacing p + h4,
.my-spacing p + h5,
.my-spacing p + h6 {
margin-top: 0.75em;
}

/* Sets top margin for unordered lists */
.my-spacing * + ul {
margin-top: 1em;
margin-left: 1em;
}

/* Sets top and left margins for list items in UL */
.my-spacing ul li {
padding-top: 0;
padding-bottom: 0;
padding-left: 1em;
margin-top: 1em;
}

/* Sets top and left margins for ordered lists */
.my-spacing * + ol {
margin-top: 1em;
padding-left: 1em;
}

/* Sets top and left margins for list items in OL */
.my-spacing ol li {
padding-top: 0;
padding-bottom: 0;
margin-top: 1em;
}

/* Sets spacing between marker (number) and text in OL */
.my-spacing ol li::before {
content: "";
padding-left: 1em;
}

/* Sets margins and other styling for blockquote */
.my-spacing blockquote {
padding-bottom: 1.2em;
padding-top: 0.5em;
padding-left: 1em;
margin-top: 3em;
font-weight: 700;
color: white;
background-color: orange;
border-left-color: black;
}

-------------------------------------------------------------------------------------------------------------------------
Divi is the leading page-builder for WordPress, bringing a powerful drag-and-drop page building experience to the world's leading content management system which powers nearly 40% of ALL websites.

If you purchase a Divi licence using the following link, I will earn a commission from Elegant Themes which helps support my channel. See the Elegant Themes site for details. Thanks in advance!

https://divicoaching.com/divi10

***********************************************************
*** NEED HOSTING - TRY FLYWHEEL OR CLOUDWAYS ***
***********************************************************

By using these affiliate links I will earn a referral commission which helps support my channel.

Видео Format Divi Text Module. Use CSS To Get Consistent Styles канала DiviCoaching