Divi is a highly customizable theme. You can customize Sections, Rows, and Modules through CSS to add menu options, image effects, section separators, text effects, and lots more. The easiest way to add these customizations is by using a plugin such as Divi Switch.
Divi Switch from Divi.Space adds over 50 customizations that you can enable independently at the flip of a switch, allowing you to enable the features you want. Some of the features include a CSS class. Those features include the CSS Class for you to paste into the fields where you want them.
Customizations include animations, image color filters, section separators, menu options, etc. You can remove the line separating the sidebar, the line separating the menu, add a code box, display comments in a cleaner format, remove the counter when it hits zero, and much more.
- You can purchase the plugin here: Divi Switch
In this plugin highlight we’ll take a look at many of the features of Divi Switch and see them in action. The images in these examples are from Unsplash.com.
Divi Switch is added to the Divi menu in the dashboard. This opens a dashboard screen with all of the toggle switches complete with descriptions, instructions, and CSS Classes. Once you enable the switch and that feature is active. The settings are global. Some require you to add the CSS class to the Section, Row, or Module. You don’t have to save settings. Just flip the switch and the setting is done.
All of the switches are on a single page that’s divided into sections. The menu divides the sections. Sections include Menu, Mobile Menu, Footer, Theme, Modules, Transitions, and Filters. Selecting a menu item takes you to that section. There’s a back-to-top button to get you back to the menu quickly.
Let’s take a look at some of the features and see some examples.
The Menu settings include first menu link fly in on scroll, multiple button styles, an app style menu, and mobile menu on desktop. You can also remove the menu bottom line, center align the top header, enlarge the info in the top header, hide the logo before scroll, and remove the border line on top of the submenus.
The button styles require you to add CSS to the menu. Here’s a quick look at how to this.
CSS in the Menu
Some of the menu items require CSS class to use them. To use the CSS class you must first enable CSS for the menu. In Menus, select the Screen Options tab in the upper right corner of the screen. Next check the box that says CSS Classes. The CSS class option will now be added to the menu items.
Now when you open a menu item an optional CSS Classes field is available. This is where you’ll add the CSS classes. You must add the CSS class on every menu item that you want to have the class individually. This means each button can have a different color and style.
Flat Menu CTA Button
This is the flat CTA button. Your color choices are dark, light, blue yellow, red, and green. This is great for creating a call to action button in your menu that stands out from the rest.
3D Menu CTA Buttons
The 3D style makes the button stand out a little more.
Bottom Line and Top Header
This example uses Remove the Menu Bottom Line, Center Align Top Header, and Enlarge the Phone and Email Info in Top Header.
The mobile menu features include a fixed header on mobile, a light or dark side menu, show the words Select page on mobile menu in either light or dark, replace the hamburger menu with word Menu, and add the word Menu beside the hamburger icon.
Mobile Menu on the Dark Side
This one uses Mobile Menu on Desktop with Side Menu Dark and Show Select Page on Mobile Menu Light selected.
The footer switches let you remove bullet points from the footer, completely hide bottom footer, and stop the footer from floating on pages that don’t have enough content.
Stop the Footer Floating on Empty Pages
The typical page with no content allows the footer to rise to just under the content.
Stop the Footer Floating on Empty Pages keeps the footer where it belongs – at the bottom.
You can remove the sidebar dividing line, choose an interesting light or dark home page pre-loader, add separators to the top or bottom of a section, display comments in a cleaner format, makes buttons square, add a code box, style Contact 7 forms, display archive and category pages in two columns, and remove the sidebar on archive and category pages.
Remove the Dividing Sidebar Line
This example uses Remove the Dividing Sidebar Line. The line between the sidebar and the content is removed.
CSS Section Separators
The section separators use a CSS Class. To add the class, go to the Section that you want to add the separator, click on Settings, and go into Custom CSS. Paste the CSS class code within the field named CSS Class.
The top section includes up arrow, upward slant, and circle. The bottom section includes down arrow, downward slant, and circle.
This code creates a slanted top.
The result is a slant that includes a shadow.
This one has a down arrow for the bottom section.
Cleaner Blog Comments
The standard comments nest like in the image above. If a commenter responds to a nested comment, their comment is nested under that comment. This can make some of the comments difficult to read.
Cleaner Blog Comments indents the responses equally for a cleaner look.
Add Code Boxes
Code placed within articles can be tricky. Sometimes WordPress wants to run the code, other times it thinks it’s a single sentence and runs the text across the screen in an unreadable format. The best way to display code is to use a code box. This keeps the code contained within the article in a readable format that can be copied easily. This is one of those code boxes.
This switch creates a code box when you use the <pre></pre> tags. Place the code between the tags and the code is automatically shown within a code box instead of running or formatting badly.
Better Archive Pages – Two Columns
This one shows archive and category pages in two columns instead of one. It looks best without the sidebar, especially if you have a lot of pages with modules in multiple columns.
Remove Sidebar on Archive Pages
This switch will remove them from archive and category pages. This shows the category page in two columns.
There are several module CSS classes that can be added to the Section, Rows, or Modules. The styles let you replace the toggle icon with an arrow that rotates when selected, format portfolio image with three different styles, grow and spin blurb icons, keep gallery images from opening in a lightbox, hide a counter once it reaches 0, and place an animated overlay over projects.
‘Book’ Portfolio Images
This one displays the portfolio images in the proportions of a book or paper in portrait mode. My original images were closer to a square. The sides have been cropped to create the book proportions. You can also display them as square or cinema mode which makes them look wide screen.
Blurb Icon Grow
The blurb image will grow on hover. You can also have it to spin.
Project Overlay – Spin
This switch makes the hover overlay that spins as it covers the image. You can also choose zoom or slide up.
There are four different transitions for the slide description. It will fly in on right, left, x, or y axis. You can also add the same transistions to the slide’s image or video.
Hover CSS Transition Effects
This one has 27 different CSS effects that include transitions and animations. These are CSS classes that are added to Sections, Rows, and Modules. The effects work on hover. Some animate and stop while others continue the animation until you move the mouse away.
The example above uses skew. As you can see it skews the image to the right.
This one is rotate. The image itself rotates as you hover over it.
There are 8 slider effects: 4 for the description and 4 for images and videos. They include fly in left, fly in right, and flip on x or y axis. I’ve captured these images with the animation in process.
Flip on Y Axis
This example uses Slide Description Flip on Y Axis. The slide stays in place while the description flips into view. Once it’s loaded it stays in place.
Slide Image and Video Flip on X Axis
This one uses Slide Image and Video Flip on X Axis. The text comes in as normal and the image has the animation.
There are several types of filters. They can be added to Sections, Rows, and Modules using CSS classes, allowing you to apply the filters as specifically as you want. CSS Filters include grayscale, saturation, blur, invert, brighter, and sepia. The Instagram filters are 12 variations of color saturation. CSS and Instagram filters modify colors work best on images.
Other elements under the Filter menu include a switch to square the fullwidth portfolio module projects, and two text shadows – one for light and one for dark – to improve their visibility.
Let’s take a look at some of the Instagram filters. For comparison here’s the original image with no filters.
This one is Nashville. It saturates the yellows.
This one is Sutro. It darkens the image and tints toward brown.
This is xpro2. It has an orange/red saturation.
This one is Rise. It has a slight yellow tint with a hint of red.
Text Shadow Dark
This one places a shadow behind the text to increase its visibility. You can see the difference in the image above. The text on the top has no effects while the text on the bottom has the dark shadow. This is helpful to make a specific portion of text to stand out.
Text Shadow Light
Text Shadow Light places a light shadow behind the text to reduce the contrast and make it more readable.
Updates, Documentation, License, Support
The plugin includes automatic updates for life. It also has a link on the plugins’ page where you can check for updates. Documentation is provided by a knowledge-base article at Divi.Space. It includes an FAQ and a list of known conflicts. The license covers use on unlimited websites for both you and your clients. Support is for one year via email. There’s a support form placed prominently on the account page when you log in.
Divi Switch adds over 50 customizations to Divi that can give your website that extra flare and make it look spectacular. The user interface is simple and intuitive – giving you a list of customizations with descriptions and an on/off switch for each one. Some do require you to add a CSS class but that’s easy to do and it does tell you how. It works great with many other Divi plugins. It doesn’t work with Extra but there is an Extra Switch in the works.
If you’re looking for lots of customizations that you can add in the easiest way possible, Divi Switch may be what you’re looking for. You can see this plugin at the Divi.Space website: Divi Switch.
Have you tried Divi Switch? Tell us about your experience in the comments below!
Featured Image by Tofiq Quliyev / shutterstock.com