Divi Tutorials + Layout Kits | WordPress Tips | Business Growth

Home of the Original Divi Tutorials & Divi Layout Kits.

Divi Tutorials + Layout Kits | WordPress Tips | Business Growth

Home of the Original Divi Tutorials & Divi Layout Kits.

divi snippets - png

Now you can easily take you Divi site to the next level and brush up on your CSS skills with these easy to find and use CSS & PHP Divi Snippets that you just cut and paste into your site. If you have something to add, please send it to me in an email and I will be happy to add it and give you the credit. I have hundreds more so check back often for updates.

Blog Snippets

Change The Color of the Blog Sidebar Divider

Change Hex Code To Your Liking

/* Blog vertical divider */
  #main-content .container::before {background-color: #52255E;}

Courtesy of Stefan Borg

Add a custom divider between posts
/* add a divider between posts */
	.page article,
	.archive article,
	.search article {background: url('https://quiroz.co/wp-content/uploads/2015/06/divider_custom.png') no-repeat center bottom;}

	.page .et_pb_post,
	.archive .et_pb_post,
	.search .et_pb_post {margin-bottom: 90px; padding-bottom: 120px;}
Add a red border around post images
/* add a grey border around post image */
	.et_pb_post a img {border: 6px solid #F90707;}

Feature thumbnails alongside post titles on blog page
/*feature thumbnails alongside post titles on blog page*/

.et_pb_post a img{
  height: 200px!important;
  float: left;
  width: 200px;
  left: 0;
  padding-right: 14px;}

@media only screen and (max-width: 980px) {
.et_pb_post a img{

Remove border and padding from the Masonary Blog Layout
/* Remove border and padding from the Masonary Blog Layout */
	.et_pb_blog_grid .et_pb_post {border: 0px; padding: 0 !important;}
	.et_pb_image_container {margin: 0 !important;}

Export/Import only specific blog posts using standard WP export/import
Assign the specific posts you want to migrate to a specific author then restrict the Export to that specific author. This helps when you started on a cloned site that you have been working on in a staging environment and the client has been adding new posts to the live site.

Button Snippets

Back To Top
Square-Off Button Corners

.et_pb_promo_button, .et_pb_newsletter_button, a.et_pb_more_button, .et_pb_pricing_table_button {
    -moz-border-radius: 0;
    -webkit-border-radius: 0;
    border-radius: 0;
Give Your Buttons a 50% Opacity Hover State

.et_pb_promo_button, .et_pb_newsletter_button, a.et_pb_more_button, .et_pb_pricing_table_button {
    -moz-transition: all 0.2s ease-in-out;
    -webkit-transition: all 0.2s ease-in-out;
    transition: all 0.2s ease-in-out;

.et_pb_promo_button:hover, .et_pb_newsletter_button:hover, a.et_pb_more_button:hover, .et_pb_pricing_table_button:hover {

Change the text from Submit to whatever you want

Add the code to the footer.php or in the “Theme Options > Integrations > Add code to the < body > (good for tracking codes such as google analytics)” section.

&amp;amp;amp;lt;script type=&quot;text/javascript&quot;&amp;amp;amp;gt;
jQuery( document ).ready(function() {
jQuery(&quot;‪#‎et_pb_contact_form_0‬ .et_pb_contact_submit&quot;).text(&quot;YOUR NEW TEXT&quot;);

Credit: Cristian Dragos

Comments Snippets

Back To Top
Decrease Left Margin on Sub-Comments

/* decrease left margin on sub comments */
	.comment .children {margin-left: 50px;}
Remove Bullets and Padding
/*remove bullets and padding*/
	#footer-widgets .footer-widget li:before {display: none!important;} 
	#footer-widgets .footer-widget li {padding: 0 0 10px 0px;}
Disable the option to open the gallery image

Just add this css

.et_pb_gallery_image a {
pointer-events: none;
cursor: default;}

Header Snippets

Back To Top
Change header background color from solid to semi-transparent when scrolling
/*original state*/
#main-header {background-color: rgba(31,31,31,1);}

/*scrolling state*/
#main-header.et-fixed-header {background-color: rgba(31,31,31,0.5);}
Changing the Top Header Phone Number and Email Font Size
/* top header */
   #et-info-phone { font-size:130% } /* phone number */
   #et-info-email { font-size:130% } /* email address */
   #et-info { font-size:130% } /* both at once */
Give Header A Thick Bottom Border
/* header bottom border */
	#main-header {border-bottom: 10px solid #f7ead9;}
Hide header when you scroll down
/* hide header on scroll */
  .et-fixed-header { display:none; }
Hide header completely
/* hide header */
  #main-header { display:none; }
  #page-container { padding-top:0px !important } /* moves rest of the page up */
Remove grey shadow under the header
/* hide header shadow */
   -moz-box-shadow:none !important; 
   box-shadow:none !important;}
Keep the Top Header visible on mobile devices
/* keep top header visible on mobile devices */
	@media (max-width: 980px){
		.et_secondary_nav_only_menu #top-header {display: block; height: 32px;}
		#et-secondary-nav, #et-secondary-menu {display: block !important;}
		.et_secondary_nav_only_menu #main-header, .et_secondary_nav_only_menu #main-header {top: 30px !important;}}

Image Snippets

Back To Top
Change border radius, add shadow and add a hover pop-up effect
/* image animations and border radius */
  img {
   border-radius: 9px; 
   -moz-transition: all 0.09s; 
   -webkit-transition: all 0.09s; 
   transition: all 0.09s; 
   drop-shadow(5px 5px 5px black);}
img:hover {
   -webkit-transform: scale(1.15); 
   -moz-transform: scale(1.1); 
   -o-transform: scale(1.1); 
   -ms-transform: scale(1.1); 
   transform: scale(1.1);}
Project, Post, and Product Image Overlay Zoom In
.et_overlay {
    -webkit-transform: scale(.9);
    -moz-transform: scale(.9);
    -o-transform: scale(.9);
    -ms-transform: scale(.9);
    transform: scale(.9);

.et_shop_image:hover .et_overlay, .et_portfolio_image:hover .et_overlay{
    -webkit-transform: scale(1);
    -moz-transform: scale(1);
    -o-transform: scale(1);
    -ms-transform: scale(1);
    transform: scale(1);
Project, Post and Product Image Overlay Custom Colors
.et_overlay {
    background: rgba(50, 200, 235, 0.6); /* overlay background color */
    border: none; /* border style */

.et_shop_image .et_overlay:before, .et_portfolio_image .et_overlay:before{
    color: #FFF !important; /* + icon color */

.et_shop_image:hover .et_overlay, .et_portfolio_image:hover .et_overlay { opacity: 1; } /* overlay opacity */
Project and Post Image Overlay Spin
.et_overlay {
    -webkit-transform:  scale(.6) rotate(-30deg);
    -moz-transform:     scale(.6) rotate(-30deg);
    -o-transform:       scale(.6) rotate(-30deg);
    -ms-transform:      scale(.6) rotate(-30deg);
    transform:          scale(.6) rotate(-30deg);

.et_shop_image:hover .et_overlay, .et_portfolio_image:hover .et_overlay{
    -webkit-transform:  scale(1) rotate(0deg);
    -moz-transform:     scale(1) rotate(0deg);
    -o-transform:       scale(1) rotate(0deg);
    -ms-transform:      scale(1) rotate(0deg);
    transform:          scale(1) rotate(0deg);
Project and Post Thumbnail Rise on Hover
.et_overlay {

.et_portfolio_image, .et_shop_image  {
    -moz-transition: all 0.3s;
    -webkit-transition: all 0.3s;
    transition: all 0.3s;

.et_portfolio_image:hover, .et_shop_image:hover {
    -webkit-transform: scale(1.04);
    -moz-transform: scale(1.04);
    -o-transform: scale(1.04);
    -ms-transform: scale(1.04);
    transform: scale(1.04);
Project Thumbnail Border
    border: 5px solid #fff;
    -moz-box-shadow: 0 1px 4px rgba(0,0,0,.3);
    -webkit-box-shadow: 0 1px 4px rgba(0,0,0,.3);
    box-shadow: 0 1px 4px rgba(0,0,0,.3);

Logo Snippets

Back To Top
Increase Logo Size (Fixed Header)

For the original logo….

.et_fixed_nav #logo {
  max-height: 100px;  /* change this # to increase or decrease size */
  margin-bottom: 18px;}

For the fixed logo after scrolling down…

.et-fixed-header #logo {
  max-height: 75px;
  margin-bottom: 8px;}
Hide logo until you start scrolling down
/*original state*/
.et_fixed_nav #logo {display: none;}

/*scrolling state*/
#main-header.et-fixed-header #logo {display:block;}
Expand Logo all the way to the left and the menu all the way to the right
/* expand header across screen */
  #main-header .container {width: auto;}
Remove logo upon scrolling down when using the centered navigation layout
/* hide logo on scroll */
#main-header.et-fixed-header ?#?logo? {display: initial !important;}
#main-header.et-fixed-header #logo {display: none !important;}

Provided by Melissa Love of http://thedesignspace.co/

Map Snippets

Back To Top
Add Borders to Top and Bottom of Map
.et_pb_map_container {border-top: 5px solid #ff3600; border-bottom: 5px solid #ff3600; }
Map module equal in height to the biggest column

Add the code to the footer.php or in the “Theme Options > Integrations > Add code to the < body > (good for tracking codes such as google analytics)” section.

&amp;amp;amp;lt;script type=&quot;text/javascript&quot;&amp;amp;amp;gt;
(function($) {

$(window).load(function() {
$('.et_pb_map_container').each(function() {
var col_height = $(this).parent().height();



Credit: Cristian Dragos

Align menu to the left (near logo)
/** Align menu to the left (near logo) **/
 @media only screen and (min-width: 980px) {
   ‪#‎top‬-menu-nav { width: calc(100vw - 240px);}}

Thanks to SJ from Gritty Social

Change menu font size
/* change menu font */ 
#top-menu li {font-size: 18px;}
Change search icon color
/* search icon */ 
  #et_search_icon {color: #DF889F;}
Move sub menu position up or down
/* mobile menu position */
.nav li ul {top: 50px !important;}
Replace mobile menu hamburger icon with a cross when open
/* Mobile-Menu Replace Hamburger Icon with a cross when open*/ 
    .mobile_nav.opened .mobile_menu_bar:before {content: &amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;quot;\4d&amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;quot;;}
Replace regular menu with mobile menu button on large screens
/* mobile menu on large screens */

@media only screen and ( min-width:980px ) {
    #et_mobile_nav_menu { display:block !important; margin-bottom:20px; margin-top:6px }
    #top-menu-nav { display:none; }
    .et-fixed-header #et_mobile_nav_menu { margin-bottom:0; }

    /* set the width, and right align */
    #mobile_menu { max-width: 400px; right: 0; left:auto; }}
Mobile menu fixed when scrolling down on mobile devices
/* mobile menu fixed on scroll */
	@media only screen and (max-width : 980px) {
		.et_fixed_nav #main-header {
		position: fixed !important;
		top: 0 !important;}}
Phone Number Mobile Users Can Click/Dial
1. Go to your Custom Menu page and select a "Custom Link"
2a. Add this as the url: tel:+18008889999
2b. Add this as the url for Skype: callto://18008889999
Collapse Nested Sub Menu Items

Copy and paste this into the Divi Theme Options > Integrations Tab “Add Code to the < body >”

&amp;amp;lt;style type=&quot;text/css&quot;&amp;amp;gt;
#main-header .et_mobile_menu .menu-item-has-children &amp;amp;gt; a { background-color: transparent; position: relative; }
#main-header .et_mobile_menu .menu-item-has-children &amp;amp;gt; a:after { font-family: 'ETmodules'; text-align: center; speak: none; font-weight: normal; font-variant: normal; text-transform: none; -webkit-font-smoothing: antialiased; position: absolute; }
#main-header .et_mobile_menu .menu-item-has-children &amp;amp;gt; a:after { font-size: 16px; content: '\4c'; top: 13px; right: 10px; }
#main-header .et_mobile_menu .menu-item-has-children.visible &amp;amp;gt; a:after { content: '\4d'; }
#main-header .et_mobile_menu ul.sub-menu { display: none !important; visibility: hidden !important;  transition: all 1.5s ease-in-out;}
#main-header .et_mobile_menu .visible &amp;amp;gt; ul.sub-menu { display: block !important; visibility: visible !important; }

&amp;amp;lt;script type=&quot;text/javascript&quot;&amp;amp;gt;
(function($) {
    function setup_collapsible_submenus() {
        var $menu = $('#mobile_menu'),
            top_level_link = '#mobile_menu .menu-item-has-children &amp;amp;gt; a';
        $menu.find('a').each(function() {
            if ( $(this).is(top_level_link) ) {
                $(this).attr('href', '#');
            if ( ! $(this).siblings('.sub-menu').length ) {
                $(this).on('click', function(event) {
            } else {
                $(this).on('click', function(event) {
    $(window).load(function() {
        setTimeout(function() {
        }, 700);

Thanks to Nathan Wellar from Elegant Themes

Portfolio Grid Snippets

Back To Top
Disable left to right animation in grid mode
#your-id .et_pb_gallery_grid .et_pb_gallery_item { -webkit-animation: none !important; -moz-animation: none !important; -o-animation: none !important; -ms-animation: none !important; animation: none !important; }

Pricing Table Snippets

Back To Top
Change background color in first and last columns
/*First column*/
.et_pb_pricing_table:first-child {background:#083F44;}

/*Last column*/
.et_pb_pricing_table:last-child {background: #000;}
Remove dividing line
/* Remove Sidebar Border */
	.container::before { display:none; }

Slider Snippets

Back To Top
Stop Slider Description Animation (scrolling up on each slide))

/* Stop Slider Description Animation */
  .et_pb_slide_description {animation:none!important;}

How to display the slider description & button in mobile devices

/* show description on smaller screens */
@media only screen and (max-width: 479px){
.et_pb_slide_content, .et_pb_more_button {display: inline!important;}}


Divi is the Ultimate WordPress Theme

Divi Expert Services

The Divi Experts

Divi Community

The Divi Community Facebook Group

©2012-2019 Geno Quiroz | Teach Learn Build Love | Divi Expert ServicesJohn 3:16

Divi is a registered trademark of Elegant Themes, Inc. This website is not affiliated with nor endorsed by Elegant Themes.



You have Successfully Subscribed!

Pin It on Pinterest

Share This

Share this post with your friends!