Divi Switch

Follow the instructions below to install and configure your new product

Remember: In order for the Divi Switch Plugin to work, you must have Divi from Elegant Themes. If you do not have it you can purchase it here. Once you have it, please install it on your self-hosted WordPress website.


A. DESCRIPTION OF THE DIVI SWITCH PLUGIN

Divi Switch makes customizing the Divi Theme easier than ever. Install the plugin and take advantage of a series of new ‘switches’ in your Divi theme options, each one makes powerful visual changes to Divi.

B. MAJOR FEATURES

We’ve included a growing list of switches that let you create:

  • New Mobile Menu Options
  • Overlay Transitions
  • Hover Animations & Transitions
  • Improved Mobile Responsiveness
  • Menu Edits
  • Call to Actions
  • On-scroll Actions
  • Button Styles
  • Better Slider Transitions
  • Cleaner Footers
  • Better Comments Sections
  • Code Boxes
  • Multiple Filter Effects for Sections, Rows & Modules
  • Section Separators (Diagonal Lines, Circles & Arrows)
  • Screen pre-loaders
  • Instagram filters!
  • Pretty Sub Menus
  • Header & Footer Background Images
  • Material Design Buttons
  • Collapsed Sub Menus
  • Much more!

Keep an eye out for more switches in the near future and sister plugin ‘Extra Switch’ . We’ll also be creating a ‘Child Theme Developer Addition’ which will enable you to package your own switches inside of themes. 

C. HOW TO INSTALL

  1. Download the plugin zip file and install through your plugin options like normal.
  2. Activate the plugin and head Divi theme options where your new switches will be waiting for you.

D. USING DIVI SWITCH

Once you’ve installed Divi Switch correctly, you can head over to your dashboard where you’ll find your new ‘switchet’ ready to use.

dashboard

Each toggle has a title, short description and a shadowed out switch. If you want to activate the effect, just click on the switch and it’ll turn purple. There is no need to save anything. Simply refresh your page to see the changes in action.

TWO-STEP SWITCHES

Some switches, such as filters, aren’t things that you’d wan’t to turn on ‘theme wide’ so a further step is needed to activate them on the modules you want to effect.

css filters

In the cases where this is necessary, clear instruction will be in the switch description. In this example, if I wanted to add a ‘sepia’ filter to an image module then I would copy ‘ds_sepia’ without the quotes into the module CSS class. CSS Classes can be added in the custom CSS tab of almost any section, row or module.

custom css

Switches that can be added to menu items such as the menu CTA’s, require you to add a class to the menu item. If you’ve never done this before, here’s how it is done:

menu items1

Navigate to your menu settings (Appearance > Menus ). At the top of the window you’ll find a drop down label for screen options with a series of check-boxes. Turn on the option for CSS classes.

Now in each menu item option there’ll be a box to add a CSS class. The CSS classes that can be used are detailed in the relevant switch descriptions.

custom css2

G. FREQUENTLY ASKED QUESTIONS

Will Divi Switch work with Extra?

No, but there’s an Extra Switch in development so stay tuned.

Can I add my own colour schemes to buttons etc?

Yes, We’ve listed the hex values for the six colour schemes at the top of the plugin style sheet. You can simply ‘find and replace’ those values using any decent text editor. 

Is this the same as Divi Booster? 

No. Both are great plugins and both do different things. If you’re serious about customizing Divi then we’d suggest owning both.

Will I lose my changes if I un-install the plugin?

You need the plugin to be active to take advantage of the customizations. Changes are stored within the plugin. However, if you deactivate the plugin or need to reinstall for any reason, your toggle choices will be saved and will activate as soon as the plugin is activated again.

H. KNOWN ISSUES

Conflicting Switches

Some switches try and do the same thing. The App Style Menu & The mobile Menu on desktop, for example, both try to realign the logo and navigation items. If both are activated then neither will work as expected. There are two side menu toggles but only one should be used. If you notice a switch not behaving as you would expect, look for a switch that may be causing a compatibility issue. 

Heavily customized Divi conflicts

If you’re using Divi Switch on an already heavily customized version of Divi then you may find some switches behaving oddly. Always check how a switch is behaving when activated.

Still need help? Contact Us Contact Us