How to improve your Divi website Cumulative Layout Shift scores and other GTMetrix and Google Page Speed scores.While I was working hard on other projects, two of my clients (unrelated) were staring down the new GTMetrix and Google page speed scores and determined to...
If you have a Divi/WooCommerce site and you don't have any posts, this is perfect for you. The default Divi search will now search only your products. You can add this to the Divi theme options Integration tab in the head. Or add to a Code module in your global...
Add the following CSS code to the Divi theme options area or your child theme style.css file. [css] /* reduce the blog category featured image size */ .archive.category .et_pb_post a img {max-height:300px; width:auto;} [/css]
Add the following CSS code to the Divi theme options area or your child theme style.css file. [css] /* reduce the search result image size so it doesnt fill screen */ .search-results .entry-featured-image-url img {max-height:300px; width:auto;} [/css]
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. [css] /* swap columns on mobile */ @media only screen and ( max-width: 980px) { .flip { display:...
Add the following CSS code to the Divi theme options area or your child theme style.css file. [css] /* 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...
Add the following CSS code to the Divi theme options area or your child theme style.css file. [css] /* 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...
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 the following PHP code to your child theme functions.php file. [php] // add shortcode for sidebars - use this format [get_sidebar name="Your Sidebar Name"] function sidebar_shortcode($atts, $content="null"){...
Add the following CSS code to the Divi theme options area or your child theme style.css file. [css] 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;...
Add the following CSS code to the Divi theme options area or your child theme style.css file. [css] .mobile_menu_bar:before {color: #fff;} /* change mobile menu hamburger icon color */ [/css]
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. [css] @media only screen and (max-width: 1320px){ #et_mobile_nav_menu { display:...
>
blog
menu