Divi Snippets | Quiroz.co

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 | Buttons | Comments | Footer | Gallery

Pricing Table | Sidebar | Slider

Blog Snippets

Change The Color of the Blog Sidebar Divider

Change Hex Code To Your Liking

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

Courtesy of Stefan Borg

Add a custom divider between posts

[css]
/* 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;}
[/css]

Add a red border around post images

[css]
/* add a grey border around post image */
	.et_pb_post a img {border: 6px solid #F90707;}

[/css]

Feature thumbnails alongside post titles on blog page

[css]
/*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{
  float:none;
  width:200px;
  height:200px;}}

[/css]

Remove border and padding from the Masonary Blog Layout

[css]
/* 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;}

[/css]

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

Square-Off Button Corners

[css]
/*DIVI CTA BUTTONS - SQUARED 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;
}
[/css]

Give Your Buttons a 50% Opacity Hover State

[css]
/*DIVI CTA BUTTONS - HOVER*/

.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 {
    opacity:.75;
}

[/css]

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.

[js]

&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;);
});
&amp;amp;amp;lt;/script&amp;amp;amp;gt;

[/js]

Credit: Cristian Dragos

Comments Snippets

Decrease Left Margin on Sub-Comments

[css]

/* decrease left margin on sub comments */
	.comment .children {margin-left: 50px;}
[/css]

Footer Snippets

Remove Bullets and Padding

[css]
/*remove bullets and padding*/
	#footer-widgets .footer-widget li:before {display: none!important;} 
	#footer-widgets .footer-widget li {padding: 0 0 10px 0px;}
[/css]

Gallery Snippets

Disable the option to open the gallery image

Just add this css

[css]
.et_pb_gallery_image a {
pointer-events: none;
cursor: default;}
[/css]

Header Snippets

Change header background color from solid to semi-transparent when scrolling

[css]
/*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);}
[/css]

Changing the Top Header Phone Number and Email Font Size

[css]
/* 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 */
[/css]

Give Header A Thick Bottom Border

[css]
/* header bottom border */
	#main-header {border-bottom: 10px solid #f7ead9;}
[/css]

Hide header when you scroll down

[css]
/* hide header on scroll */
  .et-fixed-header { display:none; }
[/css]

Hide header completely

[css]
/* hide header */
  #main-header { display:none; }
  #page-container { padding-top:0px !important } /* moves rest of the page up */
[/css]

Remove grey shadow under the header

[css]
/* hide header shadow */
  #main-header{ 
   -webkit-box-shadow:none!important; 
   -moz-box-shadow:none !important; 
   box-shadow:none !important;}
[/css]

Keep the Top Header visible on mobile devices

[css]
/* 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;}}
[/css]

Image Snippets

Change border radius, add shadow and add a hover pop-up effect

[css]
/* image animations and border radius */
  img {
   border-radius: 9px; 
   -moz-transition: all 0.09s; 
   -webkit-transition: all 0.09s; 
   transition: all 0.09s; 
   -webkit-filter: 
   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);}
[/css]

Project, Post, and Product Image Overlay Zoom In

[css]
.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);
}
[/css]

Project, Post and Product Image Overlay Custom Colors

[css]
.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 */
[/css]

Project and Post Image Overlay Spin

[css]
.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);
}
[/css]

Project and Post Thumbnail Rise on Hover

[css]
.et_overlay {
    display:none;
}

.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);
}
[/css]

Project Thumbnail Border

[css]
.et_portfolio_image{
    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);
}
[/css]

Logo Snippets

Increase Logo Size (Fixed Header)

For the original logo….

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

For the fixed logo after scrolling down…

[css]
.et-fixed-header #logo {
  max-height: 75px;
  margin-bottom: 8px;}
[/css]

Hide logo until you start scrolling down

[css]
/*original state*/
.et_fixed_nav #logo {display: none;}

/*scrolling state*/
#main-header.et-fixed-header #logo {display:block;}
[/css]

Expand Logo all the way to the left and the menu all the way to the right

[css]
/* expand header across screen */
  #main-header .container {width: auto;}
[/css]

Remove logo upon scrolling down when using the centered navigation layout

[css]
/* hide logo on scroll */
#main-header.et-fixed-header ?#?logo? {display: initial !important;}
#main-header.et-fixed-header #logo {display: none !important;}
[/css]

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

Map Snippets

Add Borders to Top and Bottom of Map

[css]
.et_pb_map_container {border-top: 5px solid #ff3600; border-bottom: 5px solid #ff3600; }
[/css]

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.

[js]

&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();

$(this).find('.et_pb_map').height(col_height);
});
});

})(jQuery);
&amp;amp;amp;lt;/script&amp;amp;amp;gt;
[/js]

Credit: Cristian Dragos

Align menu to the left (near logo)

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

Thanks to SJ from Gritty Social

Change menu font size

[css]
/* change menu font */ 
#top-menu li {font-size: 18px;}
[/css]

Change search icon color

[css]
/* search icon */ 
  #et_search_icon {color: #DF889F;}
[/css]

Move sub menu position up or down

[css]
/* mobile menu position */
.nav li ul {top: 50px !important;}
[/css]

Replace mobile menu hamburger icon with a cross when open

[css]
/* 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;;}
[/css]

Replace regular menu with mobile menu button on large screens

[css]
/* 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; }}
[/css]

Mobile menu fixed when scrolling down on mobile devices

[css]
/* mobile menu fixed on scroll */
	@media only screen and (max-width : 980px) {
		.et_fixed_nav #main-header {
		position: fixed !important;
		top: 0 !important;}}
[/css]

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 >”

[html]

&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;/style&amp;amp;gt;

&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() {
            $(this).off('click');
              
            if ( $(this).is(top_level_link) ) {
                $(this).attr('href', '#');
            }
              
            if ( ! $(this).siblings('.sub-menu').length ) {
                $(this).on('click', function(event) {
                    $(this).parents('.mobile_nav').trigger('click');
                });
            } else {
                $(this).on('click', function(event) {
                    event.preventDefault();
                    $(this).parent().toggleClass('visible');
                });
            }
        });
    }
      
    $(window).load(function() {
        setTimeout(function() {
            setup_collapsible_submenus();
        }, 700);
    });
 
})(jQuery);
&amp;amp;lt;/script&amp;amp;gt;
[/html]

Thanks to Nathan Wellar from Elegant Themes

Portfolio Grid Snippets

Disable left to right animation in grid mode

[css]
#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; }
[/css]

Pricing Table Snippets

Change background color in first and last columns

[css]
/*First column*/
.et_pb_pricing_table:first-child {background:#083F44;}

/*Last column*/
.et_pb_pricing_table:last-child {background: #000;}
[/css]

Sidebar Snippets

Remove dividing line

[css]
/* Remove Sidebar Border */
	.container::before { display:none; }
[/css]

Slider Snippets

Stop Slider Description Animation (scrolling up on each slide))

[css]

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

[/css]

How to display the slider description & button in mobile devices

[css]

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

[/css]