Divi Tips

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 tablet break point width. You can change this to your specific needs. Add the following CSS code to the Divi theme options area or...

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"){ extract(shortcode_atts(array('name' => ''), $atts)); ob_start(); get_sidebar($name); $sidebar=...

Add the following CSS code to the Divi theme options area or your child theme style.css file.

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: block; } nav#top-menu-nav { display: none; } } [/css]

Add the following to a menu item in the Secondary Menu. Replace the action to use your site URL. [html] <form role="search" method="get" id="searchform" class="searchform" action="https://www.yourwebsite.com"> <div><input type="text"...

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 each page. But, that doesn't work on blog categories or posts if you have a sidebar. The global section will appear on the left...

NOTE: This an old method and I'm sure there is an easier way using the new Divi theme builder. How to make a Divi slide in menu (or full screen menu) and a default style menu at the same time. This way the mobile style (hamburger) icon will appear in the upper right that opens the slide out menu. And, you can add a regular style menu in the center. It requires some HTML and CSS updates but are...

Are you using the Divi Projects for something other than projects? You may want to change the permalink (or URL) to say something other than "project". You'll need to use a child theme and paste the following into the functions.php file. You can find this in Appearance > Editor. Change the YOUR-NEW-NAME to whatever you like. [php] add_filter( 'et_project_posttype_rewrite_args',...

Say you added an image in the text editor and want it to open in a lightbox popup. In the editor make the image you placed there a link and link it to itself. Then, paste the following class into the HREF tag (not the image tag). class="et_pb_lightbox_image" So, your link will look something like this: [php] [/php] Click the image below to see it work. Say you added an image in the text editor...

If you want make the footer display at the very bottom for short content pages, you can use the code below. Paste this in the Divi Options/Ingergration area in the header section. [php] <script> jQuery(function($){ function stickyFooter(){ var footer = $("#main-footer"); var position = footer.position(); var height = $(window).height(); height = height - position.top; height =...

If you want to add a different logo to your header for different screen resolutions, you can use the code below. Change the URLs to point to your images. You can also adjust the width value to whatever you like. [php]<script> jQuery( document ).ready(function() { if(jQuery(window).width() < 481){ jQuery('#logo').attr('src','https://www.yoursite.com/wp-content/uploads/yourlogo.jpg');...