Add the following CSS code to the Divi theme options area or your child theme style.css file.
Reduce the blog category featured image size in Divi
read more
Divi Tips
Reduce the search result page featured image size
Add the following CSS code to the Divi theme options area or your child theme style.css file.
Swap Divi columns on mobile and tablet devices
Add the CSS class "flip" to any Divi row settings in the Advanced tab. Add the following CSS code to the Divi theme options area or your child theme style.css file. /* swap columns on mobile */ @media only screen and ( max-width: 980px) { .flip { display:...
Make default Divi header transparent on home page only
Add the following CSS code to the Divi theme options area or your child theme style.css file. /* make top nav bgd transparent on home page only */ .home #main-header, .home #top-header { background-color: rgba(255, 255, 255, 0) !important; box-shadow: none...
Enlarge product image on rollover for Divi Shop module
Add the following CSS code to the Divi theme options area or your child theme style.css file. /* enlarge shop module product images on rollover BEGIN */ .et_shop_image img {transition: transform .2s;} .et_shop_image img:hover {transform: scale(1.25);} /* enlarge...
Hide or show WordPress menu items on mobile devices
In Appearance/Menus click on the Screen Options tab at the very top right. In the "Show advanced menu properties" area, check the box next to CSS Classes. Use the either "hide-mobile" or "show-mobile" in the menu class field. NOTE: The max-width is the default Divi...
Add shortcode to display WordPress Sidebars
Add the following PHP code to your child theme functions.php file. // add shortcode for sidebars - use this format [get_sidebar name="Your Sidebar Name"] function sidebar_shortcode($atts, $content="null"){...
Format superscript text in Divi
Add the following CSS code to the Divi theme options area or your child theme style.css file. sub, sup { font-size: 25%; /* Zero out the line-height so that it doesn't interfere with the positioning that follows */ line-height: 0; position: relative;...
Change default Divi mobile menu hamburger icon color
Add the following CSS code to the Divi theme options area or your child theme style.css file.
How to make Divi mobile menu appear sooner
You may find it useful to make the mobile menu appear sooner than the default screen width. Add the CSS in the Divi theme options area. Change the max-width to whatever you like. @media only screen and (max-width: 1320px){ #et_mobile_nav_menu { display:...
How to add a search box to Divi header in the secondary menu
Add the following to a menu item in the Secondary Menu. Replace the action to use your site URL. <form role="search" method="get" id="searchform" class="searchform" action="https://www.yourwebsite.com">...
How to add a global footer to Divi theme
IMPORTANT! This method is out dated! You should be using the Divi theme builder to make a custom global footer. Ever wonder how to make a global footer layout that will appear on all pages in your Divi theme? You could make a global Divi library layout and add it to...
Blog Categories
>
blog
menu
blog
menu