The #1 rule for web designers used to be that you had to separate content and style.
Content was created using HTML and then styled using CSS.
That’s why most designers think in terms of content and style, when creating a page, and that’s why most designers are jumping for joy at the latest release of Divi.
The latest release introduces three new tabs to the Divi Settings panel: Content, Design (Style) and Advanced.
The content tab is where you add all your text, images, videos and module elements, the Design (Style) tab is where you style all your content and the Advanced tab covers options that will be useful for more advanced users.
The various options under each tab have also been grouped under sub headings / option groups and there is now a search facility to help you quickly find the option you’re looking for.
In this post I’ll take a look at the new Settings tabs, Option Groups and Search option and explain why I think that this is a big leap forward for the Divi theme.
My Affiliate Links Disclosure
Hi everyone. Just to let you know that many of the links on this site are my affiliate links. What that means is that if you click one of them and buy something… I get a commission. It doesn’t cost you anything extra and I only recommend things that I’ve tried and tested, so please, please, please… use my links.
An introduction to the new Divi Settings tabs and other cool features
The latest update is mainly about improving the user experience of the Divi Settings including a nice addition to the Divi Selective Sync system for global Modules.
This short video from Nick Roach runs you through all the major changes:
Those are the main changes and just to act as an aide-mémoire, here are a few bullet points:
- Renamed Divi Settings tabs – the Divi Settings tabs used to be called: General Settings, Advanced Design Settings and Custom CSS. They are now called: Content, Design and Advanced, which makes it much easier to find the content that you’re looking for.
- Reorganised Divi options – the Divi options have been reorganised to improve hierarchy and make option lists more readable. They have also been grouped into sub categories.
- Divi options are now searchable – just open up the Settings and start typing the option you’re looking for. Divi will find the option and display it in the search results.
- New Selective Sync system for Global Modules – the Selective Sync system now allows you to sync and un-sync individual settings for every global module you create.
Now that you know what the changes are, let’s take a closer look.
Note – I won’t be covering the “New Selective Sync system for Global Modules” in this post but I will be covering it in a future post.
Divi’s new Settings tabs and Option Groups: neat, tidy and efficient
The two big changes to the Settings Panel are the renaming of the Settings tabs and the grouping of options under those tabs.
Divi’s renamed Settings tabs
The Divi Settings tabs used to be called: General Settings, Advanced Design Settings and Custom CSS.
As you’ll see from the graphic above, they are now called: Content, Design and Advanced.
Renaming the tabs may seem like a small change, but to a web designer, trying to decide under which tab he should be looking to add content or to style that content, it’s a monumental change.
All of your content (text, images and videos) now goes under “Content” and all of the styling for that content (colours, fonts, sizing, and spacing) goes under “Design”.
I would prefer “Design” to be called “Style” but it is still much clearer under which tab you should be looking to add content and make style changes.
Divi’s new Settings Option Groups
The screenshot above shows the Settings panel for the Fullwidth-Header Module, which I use on my homepage.
Under the Design tab you’ll see the new Option Groups i.e. Text, Title Text, Content Text etc.
If you click “Title Text” all the items in that Option Group appear and you can carry out your edits.
These Option Groups can be thought of as sub-menu items and their use makes for a much cleaner interface.
The use of Option Groups also makes it quicker and easier to find the item you are looking for and to add additional Groups in the future.
Today we are introducing three new tabs: Content, Design and Advanced.
Within the content tab, you will find all of your text, image, video and module elements (such as: Header Text, Content Text, Slider Image, Blurb Icon, etc).
Within the Design tab, you will find all of your design settings (colors, fonts, sizing, and spacing).
In the Advanced tab, you will find options that will be useful for advanced users with web design experience (such as Custom CSS, CSS Classes and HTML Attributes).
Nick Roach – Elegant Themes
Divi’s new Search option: just type in what you’re looking for
Renaming the Setting panel tabs and adding Option Groups has made it much easier to find the item that you’re looking for, but if you’re still having problems, you can use the new Search function.
The Settings panel now has its own Search function, which is located just below the Content, Design and Advanced tabs as shown in the screenshot above.
Just start typing and searches related to your query will be displayed as you type. You can then pick the one that you want.
In the screenshot above the query “Button” was typed in the Settings panel for the “Call To Action” Module and the related results are shown.
Another great timesaver. Once you start using it, you’ll wonder how you ever managed without it.
In the Visual Builder, all Divi module options are now searchable. When you search through options, the results appear instantly!
This is such an amazing feature that once you start using it, you will find it hard to believe how you ever lived without it.
Nick Roach – Elegant Themes
Speed up your workflow with Divi’s new Settings tabs, Option Groups and Search option
The latest update to Divi might seem like just a piece of good housekeeping but that good housekeeping is really going to speed up your workflow.
The naming of the Settings tabs to Content, Design and Advanced, means that Settings are now in a much more logical order and you only have to decide if you are adding content or styling that content, in order to select the correct tab.
Divi’s new Settings Option Groups has also simplified the layout of options and made it easier to find the option you need.
And the new Search option, within the Settings panel, will speed up the process even more.
If you’d like to use Divi’s new Settings panel on your next project, then please feel free to use my Divi theme 10% discount link below.
401,632 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!
Elegant Themes
Join Elegant Themes and download the Divi theme today.
Complete with a 10% discount!
Credits:
My thanks and gratitude to Elegant Themes for the video of the Divi Settings panel changes and for their generous discount deal.
