10 “Hidden” Divi Features You Need to Know About

Posted on May 10, 2017 by in Divi Resources | 54 comments

10 “Hidden” Divi Features You Need to Know About

In recent years, many convenient and powerful features have been added to the Divi Theme. And, some of these features may have snuck in to your theme without you realizing it. In fact, they are lurking right now, hiding in plain site (an impressive survival tactic maybe, but an unfortunate one). That is why I’m taking some time to shed some light on ten Divi features that should not remain hidden or ignored.

Let’s take a look…

1. Right Click Options

Feature Location: Simply right click on any section from within the Divi Builder.

Although I’m not going over all of the right click options here, I would like to point out a couple of options that are only accessible when right clicking which are simply too convenient to overlook.

Lock

As an admin, you alone have the capability of locking certain items. This is a convenient way to keep your editors from changing content that you want unchanged. It also protects you from accidentally changing an important section.

Collapse and Rename

I love to use these two options in combination as I build longer web pages. I don’t know about you, but I get really tired of scrolling up and down to find the sections I need to edit. That is why I use the right click collapse option to condense large sections of my webpage that have been completed. Once collapsed, I use the right click option to rename the section for a recognizable admin label.

2. Disable Top Tier Dropdown Menu Links

Feature Location: Divi → Theme Options → Navigation → General Settings

To be clear, top tier dropdown menu links are the main parent links that stay visible on the navigation menu. The sub tier links are those that show up after you hover over the top tier parent link.

By disabling the top tier dropdown menu links, the top tier parent links are no longer clickable links. Instead, they can serve as non-clickable placeholders that label and organize your sub links.

For example, let’s say you are building a site for a company that offers three main services and each of these services need their own page. A normal setup would be to have a top tier link called “services” with the three types of services as sub menu items. Instead of having to deal with linking to a general service page, you could disable the top tier “services” link and simply use it as an organizational label.

3. Alternative Scroll-to-Anchor Method

Feature Location: Divi → Theme Options → Navigation → General Settings

If you have ever tried to link directly to a CSS ID using an anchor link from an external page, you may have noticed that the final resting location of the page isn’t quite correct. Sometimes it is too low so that some of the content gets cut off at the top.

Here is what my screen looks like after linking to my CSS ID from an external page. You can’t see it but the title of the section has been cut off.

Enabling the Alternative scroll-to-anchor method corrects this problem. Not only does it put the user in the correct spot, the top of the page loads first before scrolling to the CSS ID. I find this helpful for users who may get confused and not realize initially that they are viewing a section of the page.

4. Hide Logo on mobile

Feature Location: Divi → Theme Customizer → Mobile Styles → Mobile Menu

If you ever need to hide your logo on mobile, Divi makes this very easy. But it is one of those options that is easy to overlook. Save yourself some time and don’t worry about messing with additional CSS.

5. Primary Menu and Secondary Menu Dropdown Animation

Primary Menu Feature Location: Divi → Theme Customizer → Header & Navigation → Primary Menu BAr Dropdown Menu Animation

Secondary Menu Feature Location: Divi → Theme Customizer → Header & Navigation → Secondary Menu Bar –> Dropdown Menu Animation

You don’t have to settle for the default fade animation for your dropdown menus. The Dropdown Menu Animation section includes four options:

1. Fade (the default)

2. Expand

3. Slide

4. Flip

Sometimes microinteractions like this can really make your menu standout.

6. Edit (or disable) Footer Credits

Feature Location: Divi → Theme Customizer → Footer → Bottom Bar → Disable Footer Credits / Edit Footer Credits

If you have been using Divi for a while, you may have gotten used to editing the bottom bar of your footer by editing the footer.php file in your child theme. This is no longer necessary.

You can easily disable the bottom bar altogether or you can insert your own footer credits by entering text or html inside the text box.

7. Changing Divi’s Default Color Palette

Feature Location: Divi → Theme Options → General Tab → Color Pickers Default Palette

Give yourself a break from copying and pasting hex color codes.

The Color Pickers Default Palette is the color palette that will be used throughout the Divi Builder.

If you know the color theme of your website, simply update the default colors to include those colors needed for your design. This option can save you a lot of time in the long run since these colors will be accessible to you throughout all of the modules when building and editing your site.

8. Divi Builder Settings

Location: Hamburger Navigation Icon at the top right of the Divi Builder.

Ever since Divi 2.7, the Divi Builder Settings allows you to set default settings (and override the theme settings) for the specific Divi Builder page you are working on. This ability to set page specific settings is an extremely convenient time saver for building landing pages or other pages that need a new design.

You can set a color palette for your page which will override the default palette in your Theme Options.

You can also add page specific custom CSS. Since the CSS will only get loaded on the specific page, you won’t need to go through the trouble of targeting specific post IDs or accessing your child theme style.css file.

One unique feature of the Divi Builder Settings is the ability to enable the Divi Leads split testing system for your page. This powerful tool is simply too valuable to ignore. If you haven’t used it yet, take my advice and start your first test today!

9. Choose What Meta Info to Display on Blog Posts

Although this Divi feature has been around since the beginning of Divi, it can easily be overlooked.  Each of your blog posts has certain meta info that shows under the post title (author, category, date, comments).  But, depending on how you are using your blog, you may not want this extra info distracting from the content you are providing.  Divi makes it easy to customize this info for you.

Change Meta Info for Single Post Layout

Location: Divi → Theme Options → Layout (Tab) → Single Post Layout

You can easily click to disable or enable each of the four pieces of meta info for all of your single blog posts by clicking on each of them.  Disabled meta info will show as being faded out.

Change Meta Info for Blog Page Post Excerpts

Location: Divi → Theme Options → Layout (Tab) → General Settings

To change the meta info displayed on your blog page post excerpts,  simply click on each of the four meta items you want displayed or hidden.

 

If you are using the Divi Blog Module for your blog page, the above settings will not work.  You will need to change what meta info you want displayed within the Blog Module General Settings.

10. The Code Module

The Code Module is one of the best hidden features of Divi. It gives you the ability to add html to your page with no restrictions. The module also allows you to add html elements to certain pages without it affecting other pages. The capabilities of the Code Module are endless, but here are a few ways you can use it:

Final Thoughts

I hope the features mentioned in this post have helped you discover (or rediscover) some of those convenient Divi features that often get overlooked.  Take the time to go over these for your next project.  It may save you some time in the long run.

Do you have a newly discovered feature your have been overlooking?  Share it in the comments below.  I’m sure we will all benefit.

Cheers!

54 Comments

  1. Always great information and tips to utilize in development. Thanks.

  2. A couple of these I was unaware of how helpful they would be because I usually skip over them since they’re not part of my usual workflow – like locking/collapsing sections. I discovered the footer credits area during a recent update… at least it will save me some extra fiddling with php templates. Thanks!

  3. Thank’s from Mallorca 😀

  4. I love using the color palettes – they are so helpful. It would be nice, though, if we could add PHP in the footer credits. 🙂

  5. Great tips. I have been using Divi for sometime now, but there were some new ones I am going to try out. Thanks!

  6. Great stuff. I knew most of these, but the footer editor had definitely slipped under my radar!
    Thanks!

  7. This is fantastic! I cannot wait to implement these. Especially Collapse and Rename my sections, disabling Top Tier Dropdown Menu Links so I don’t need extra pages, and eliminating my custom footer.php! And the Code module. OK, all of them really. Thanks! 😀

  8. I knew maybe half of them, but some of the ones I didn’t know about are going to be much-used in the future. Thanks for the heads-up!

  9. Hey, thanks. A few of these were totally new to me. Or…like the “lock” function, I have passed by them a million times without really seeing them. Great stuff!

  10. Hi.

    In my humble opinion, showing up credits on every page is abused and doesn’t contribute to a streamlined design. I don’t want to provoke a debate whether or not credits should be imposed to clients. Personally, I like to put them on the home page only. I found some code that helped me to do so:

    If it’s not done already, move a copy of the footer.php parent theme in the child theme folder and edit it like this :

    if ( false !== et_get_option( ‘show_footer_social_icons’, true ) ) { get_template_part( ‘includes/social_icons’, ‘footer’ );

    }

    if (is_home() || is_front_page()) { echo et_get_footer_credits();

    }

    Hope it will help.

    About meta infos… well… I would like a functionality to display WordPress tags in Divi’s theme. 🙂 🙁

    Thank you.

  11. I love setting the default colors! Renaming sections is nice too!

  12. Is it an error that the Color Pickers Default Palette isn’t part of Divi Extra?
    I miss it a lot in that theme…

    • I would also really like that feature for Extra. You can only change the palette per page/post 🙁

  13. Great post – I use the code field quite a lot for using the facebook page plugin – it works really well.

  14. Divi is so awesome… the more I learn the more I am impressed…. split testing… awesome!!

  15. Great tips, I’m patting myself on the back that I had found most of them. A question about 2. Disable Top Tier Dropdown Menu Links though. Is it possible to completely disable the ‘placeholder’ label, i.e. have the pointer icon appear but not the ‘finger’ that makes people want to click on it? I am creating a placeholder label using a Custom Link in the Menu and # in the URL box but it still looks clickable.

    • Hi Sarah -took me a while to find this, but this may help.
      Add this css:

      a[href=”#”] {
      cursor: default !important;
      }

      When you ceate a new top level menu item, use a custom link, then set the url to be #

      Any link where the url is set to be # the cursor will be a pointer rather than a finger. I use this little bit of css on all my sites.

      Hope that helps 🙂

    • Jason Champagne

      Thanks Sarah.

      Try adding this custom CSS:

      #top-menu-nav > ul > li > a:hover {
          cursor: default;
      }
      

      That should work.

  16. Amazing! So helpful! Some features are completely new for me. Collapse and rename – can’t wait to use this! Thanks a lot!

  17. Chapeau! You finally came to an insight and gave up on the stubborn attitude towards the “burnt in” ET footer credits. It took quite a while but at least it happened – after I bought several plugins that handle it. Never mind – for a site on a tight budget it’s a most welcome “quick and dirty” solution. And it’s good to see you still care about customers preferences.

    I would love the custom color palette – it it wasn’t still buggy. The custom colors don’t show in the theme customizer. where it would matter most.

  18. The scroll to anchor, what a find!!! I never knew. Thank you!

  19. For some reason, changing the color picker doesn’t work. Child theme issue perhaps?

    • Jason Champagne

      Maybe. Or it could be that you are using a CDN and need to clear the cache?

    • Half the time it doesn’t work for me either (if it did, this would be my favorite).

      There are many places in the theme customizer and modules where it keeps on picking up the Divi standard color pallet. Clearing cache doesn’t work and I don’t use a caching plugin or CDN.

      I have reported it to support, they said they are aware of it and have added it to the development queue, but somehow it doesn’t get fixed so I guess they didn’t give it a high prio.

      You should also report it to support, so the issue get’s bumped up to a higher prio…

      @Jason, thank you for the tips, learned a few new things!

      • I find that the custom colour palette will not work in any customizer that was created before you created the custom palette. I have sometimes forgotten to create a palette, design a page or two, then remember. The custom palette only seems to appear in any customizer from there on in, but not in pages I’ve already created.

  20. Thanks for this.

  21. nice! thank you elegant themes team! it’s really time-consuiming going through all the blog posts just to pick useful & rewardful nuggets of learning… i hope your team create a library of all elegant themes tutorials & other learnings especially for the divi theme & the divi builder (videos, pdfs, htmls) both for online & offline learning, looking forward to it 🙂

  22. Custom css in Builder settings is too small. please make it bigger or re-sizable.
    Also things I input in it often vanishes somehow.
    Please improve and fix it!

  23. Many of us don’t know about that ‘We can set transparent header easily from theme customization without css’. 🙂

  24. Hi, Great features. Small question. When a section or row is collapsed, is there a way to identify this row or section? E.g. is it possible to give a collapsed section or row a name or a description?

    Kind regards, Eric

  25. Hi Jason!

    The article it is very nice, I woluld like ask to you one thing, how can we put a link to our website on the EDIT FOOTER CREDITS? I triyed to write with link but was imposible.
    Thank you very much in advance. All the best!

  26. Hye!! Thanks..
    I am an economist by profession and Themify made me use building WordPress sites as a hobby. Now, I manage 7 websites different themes. This is very important optimisation technique to consider.

  27. Renaming, collapsing, and locking sections. How did I not know about this? Game changing!

    Thanks Jason!

  28. I’m wondering if there’s a way to change the universal section background colour? Recently built a large website with 70+ pages on which they wanted a y-tiled background and had to set each page up just so. Being able to change this, and default padding etc for sections and rows under the modules editor would be amazing.

  29. Where do we “simply update the default colors to include those colors needed for your design.”?

    • Never mind… just having a senior moment.

  30. Is that not possible in EXTRA – theme ?

    6. Edit (or disable) Footer Credits ( edit footer credits)

    BR
    /Thomas

  31. I am fairly new to Divi – and this article highlights out my ever-ending question. I might be the only doofus that doesn’t already know this, but maybe there are other doofi out there with the same question.

    When I see references to special features in Divi – in this article or any other published source – how can I tell if it means Divi the template, or the Divi Builder plugin? I am currently using the Divi Builder plugin inside another (gasp!) WordPress template and would like to better understand the difference.

    In the case of this article, do all of these tips apply to the Divi Builder plugin?

    • Jason Champagne

      Greg,

      This article is specific to the Divi Theme, not the Divi plugin, although some features may apply.

      Sorry for the confusion.

  32. Thank you Jason Champagne! Very useful tips indeed 🙂

  33. Thank you for the tips! The lock feature is essential! We are a team working on a site and it is so useful!

  34. I’m going to customize the color palette right away. Great “hidden” feature!

  35. This is really useful tips! Thanks for sharing and look forward to the next ones!

  36. Thanks a lot! Much appreciated!

  37. Very helpful! I especially like the custom color palette option. Thank you for these tips.

  38. Thanks for spending the time to discuss this, I feel strongly about it and love reading more on this topic.

  39. Awesome! (as always) ET team. Thanks a lot.

  40. For no.7 after I creating a color Palette it works fine in Divi builder but not working in theme customizer setting. It will be great if it works on them customizer setting also.

  41. Nice post.

    Great to see all the little time saving tips in one spot.

  42. I think at the moment WordPress development is in an unhappy place. These sorts of drag and drop page builders tend to make the creation process unbelievably slow and often a custom theme just gives the users the ability to add content really quickly. But of course the downside of the approach is the need for shortcodes. But then again is that not what DIVI does in a visual way?

437,821 Customers Are Already Building Amazing Websites With Divi. Join The Most Empowered WordPress Community On The Web

We offer a 30 Day Money Back Guarantee, so joining is Risk-Free!

Sign Up Today

Pin It on Pinterest