Divi Snippets

For the times when you just need a quick fix

Headers

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; }

Buttons

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;
}}

Lists

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

TOC

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;
}

a.ez-toc-link.ez-toc-heading-25{
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

Toggle

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.

Layout

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

Posts

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 {
color:#CC414E;
float: left;
font-family: “Noto Serif”;
font-size: 75px;
line-height: 60px;
padding-top: 4px;
padding-right: 8px;
padding-left: 3px;
}

Snippets DropCap

Global

Change Color of Highlight Text

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

Snippets Highlight Text

 

Portfolios

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} 

Backgrounds

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

Slider Arrows

/*Change slider arrow colors*/

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

Pin It on Pinterest

Share This