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
[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.
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;lt;script type="text/javascript"&amp;amp;gt; jQuery( document ).ready(function() { jQuery("#et_pb_contact_form_0 .et_pb_contact_submit").text("YOUR NEW TEXT"); }); &amp;amp;lt;/script&amp;amp;gt; [/js]
Credit: Cristian Dragos
Decrease Left Margin on Sub-Comments
[css] /* decrease left margin on sub comments */ .comment .children {margin-left: 50px;} [/css]
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 |
Back To Top |
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 |
Back To Top |
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 |
Back To Top |
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 |
Back To Top |
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 |
Back To Top |
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;lt;script type="text/javascript"&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;lt;/script&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;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;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;lt;style type="text/css"&amp;gt; #main-header .et_mobile_menu .menu-item-has-children &amp;gt; a { background-color: transparent; position: relative; } #main-header .et_mobile_menu .menu-item-has-children &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;gt; a:after { font-size: 16px; content: '\4c'; top: 13px; right: 10px; } #main-header .et_mobile_menu .menu-item-has-children.visible &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;gt; ul.sub-menu { display: block !important; visibility: visible !important; } &amp;lt;/style&amp;gt; &amp;lt;script type="text/javascript"&amp;gt; (function($) { function setup_collapsible_submenus() { var $menu = $('#mobile_menu'), top_level_link = '#mobile_menu .menu-item-has-children &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;lt;/script&amp;gt; [/html]
Thanks to Nathan Wellar from Elegant Themes
Portfolio Grid Snippets |
Back To Top |
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 |
Back To Top |
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]
Remove dividing line
[css] /* Remove Sidebar Border */ .container::before { display:none; } [/css]
Slider Snippets |
Back To Top |
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]
Comments Snippets