Divi Snippets

For the times when you just need a quick fix


Back to Top Button Styling

/*Style the Back to Top Button*/

.et-pb-icon.et-visible {
background-color: #ff9300 !important;
z-index: 2 !important;
position: fixed !important;

Snippets Style ToTopButton

Social Media Icons

Style Monarch Icons

/*Styles the Monarch Icons */
.et_social_icons_container li {
background-color: #c0ccb3 !important;

i.et_social_icon {
color: #FFFF00 !important;

Removes the Share text from the social media icon posts

/*Removes the Share text from the social media icons posts */
.share-title { display: none !important; }


Same size buttons

/*Button Same Size */
.et_pb_button { min-width: 120px; text-align:center; }

@media (max-width: 900px) {
.et_pb_button {
min-width: 90px;


Add breathing room to a list

Add a class to your ordered (ol) or unordered (ul) list:

class=”list-spacing” then add the code on the page or post.

/*List breathing room spacing between points */

ol.list-spacing li {
padding-bottom: 2%;

/*space between the intro text before list and the first list item*/
ol.list-spacing {
padding-top: 4% !important;

The first list has no breathing room, while the second list does.

Snippets Lists before



Snippets Lists after


Style TOC Plugin

/*TOC such as Easy Table of Contents Plugin*/

#ez-toc-container .ez-toc-heading-level-1 {
color: #2c3241;
font-weight: 500;

#ez-toc-container .ez-toc-heading-2 {
color: #CC414E !important;
font-weight: 500;

color: #CC414E !important;
font-weight: 500;

#ez-toc-container .ez-toc-page-1 .ez-toc-heading-level-3 a {
font-weight: 500;

#ez-toc-container .ez-toc-heading-level-4 a {
color: #000080;
font-weight: 500;
font-style: italic;

Snippets TOC1 Snippets TOC2


Animate Toggle Icon

/*Animate the Divi Toggle Icon */
.et_pb_toggle_open .et_pb_toggle_title:before {
transform: rotate(180deg);
transition:all 0.5s ease-in-out 0s;
color: #2c3241;

Use FA icons

The Constitution assigned to Congress responsibility for organizing the executive and judicial branches, raising revenue, declaring war, and making all laws necessary for executing these powers. The president is permitted to veto specific legislative acts, but Congress has the authority to override presidential vetoes by two-thirds majorities of both houses. The Constitution also provides that the Senate advise and consent on key executive and judicial appointments and on the approval for ratification of treaties.


2-Column Layout

Add class .two-column to your Column in Divi. Then add the code to the page: 

@media only screen and (min-width: 600px) {
.two-column {
-moz-column-count: 2;
-moz-column-gap: 1em;
-webkit-column-count: 2;
-webkit-column-gap: 1em;
column-count: 2;
column-gap: 1em;

You can adjust the code above for more 
columns by increasing the column-count 
to 3, 4, etc. See a Demo.

Snippets 2ColumnLLayout


Hide Post Slide Excerpt

/*Hide post slide exceprt*/
.et_pb_slide_content div p {
display: none;

Remove the Previous/Next Blog Post at the bottom

/*Removes the previous/next blog post at the bottom*/
.single-post .nav-links {
display: none !important;

Add Drop Caps

.drop-cap {
float: left;
font-family: “Noto Serif”;
font-size: 75px;
line-height: 60px;
padding-top: 4px;
padding-right: 8px;
padding-left: 3px;

Snippets DropCap


Change Color of Highlight Text

/*Highlight Text Selection Color */
::selection {
background: #e4f2ff; /* WebKit/Blink Browsers */
::-moz-selection {
background: #e4f2ff; /* Gecko Browsers */

Snippets Highlight Text



Portfolio Sizing

/* ——PORTFOLIO  ———- */
@media (max-width: 980px) {
.et_pb_column .et_pb_grid_item.et_pb_portfolio_item
width: 100%; margin-right: 5px;}

@media (min-width: 981px) {
.et_pb_portfolio_items  {
display: flex !important;  flex-wrap: wrap;    align-items: flex-start; justify-content: flex-start;}
.et_pb_column .et_pb_grid_item.et_pb_portfolio_item {width: 30% !important;margin-right: 5px !important;  }}

Project Box-Shadow

/* Project Gallery Items Box-Shadow*/

.et_pb_portfolio_item {
box-shadow: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22);

/* Project Gallery Items Box-Shadow*/

.et_pb_portfolio_item {
box-shadow: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22);

Table Formats

Project Box-Shadow

/*—————————————————————–TABLES——————————————————————–*//*—————————————————————–TABLES——————————————————————–*//*Table Format */ table.tableizer-table { font-size: 18px; font-family: Montserrat;        color: #2c3241; }   .tableizer-table td { padding: 4px; margin: 3px; border: none;    color: #2c3241;    font-family: montserrat, sans-serif; }  
.tableizer-table td a {  color: #0c71c3 !important;}  .tableizer-table th h4{   font-weight: 600;    font-size: 2.5vh;  font-family: Raleway; } tr:hover{ background-color:#f5f5f5} 


Add Circle Background with Flex

Add color to an item. Add class .circle

Style as:

.circle {
justify-content: center;
align-items: center;
border-radius: 100%;
text-align: center;
display: flex;

To make it a rectangle with rounded corners, change the border-radius to 5%.

Snippets Cirlce Background



Slider Arrows

/*Change slider arrow colors*/

.et-pb-arrow-next, .et-pb-arrow-prev {
color: blue !important;

Pin It on Pinterest

Share This