Divi Tips 54 : Divi Switch

Divi Switch: a multi-functional plugin that's good for you!

Updated on 06/06/2019 | Published on 10/05/2019 | 11 comments

1,571 words


Every time I create a new site with Divi, I often change the same things: remove the grey line under the menuBut why didn't I discover Divi Switch before?

This multifunctional plugin allows you to correct and customise Divi without having to worry about the code and the creation of a child theme. It allows you to focus on what is most important: content and design.

I have tested Divi Switch and I suggest you discover all its features...

Divi Switch plugin

Announcement: this article contains affiliate links that you will easily recognise. The classic links are in purple and sponsored links are in pink.

The list of possibilities offered by Divi Switch is long! Here's what you can do with this multifunctional plugin...

  1. Modifying the Divi Header (header and menu)
  2. Modifying the Divi Footer
  3. Acting on the main content
  4. Customise the responsive
  5. Acting on the comment section
  6. Customise archive pages
  7. Integrate layouts in specific locations
  8. Download SVG files
  9. Exporting a plugin
  10. Adding options in the customizer

Before going any further, note that Divi Switch is a premium plugin that you can purchase as a yearly or lifetime license from Aspen Grove Studios or Divi Space.

obtenir Divi - get Divi

1 - Modifying the Divi Header

We have already seen, in a previous article, that you can do cool things with the Divi Header (site header).

But some options remain unavailable in Divi.

And I don't blame them, it's a good choice thatElegantThemes the fact that it does not offer hundreds of options and that it does not become a gas factory like Ocean WP for example.

But that means you'll have to do some customising to get the design you want...

Here's how Divi Switch will help you:

Divi Switch personnalise le Header
Divi Switch allows you to customise the header section
  1. Go to the Divitab > Theme Options > Divi Switch > Header
  2. With one click you can remove the grey line under the main menu.
  3. You will also be able to make the phone number clickable: the one you make appear in the Top Menu (the menu above the main menu).
  4. If you display your social network icons in the Top Menu, you can open them in a new window (see also how to open the footer icons in a new window)
  5. If you want to centre the items in your Top Menu, you can do so in one click.
  6. If you want your logo to look different when the user scrolls down your site (when they go further down a page), you can upload a different logo here.
  7. You will be able to add a text next to the mobile menu icon (hamburger).
  8. You can even decide to display a different logo on each page of your site.
  9. And what's more, if your menu doesn't suit you, you can replace it with a layout saved in your library. A layout will have to be created and saved in your library beforehand.
  10. Don't forget to save your changes.

2 - Modifying the Divi footer

A custom footer is often an essential element in the design of a site. We have already seen how to create a footer that is revealed on scroll or even manual addition of new icons.

Here is what you can do:

modifier le footer de Divi
Modify the footer
  1. Go to the Divitab > Theme Options > Divi Switch > Footer
  2. With one click, you can remove the "bullets points", i.e. the bulleted list that can sometimes appear in the footer widgets.
  3. You can completely remove the bottom of the footer, the one where the credits appear or the social network icons.
  4. An interesting option here is to allow the footer to be placed completely at the bottom of the screen when the page content is too short.
  5. Finally, you can replace the footer widget area with a layout previously saved in your library.

3 - Act on the main content

This tab provides options for various Divi modules or content.

Options pour personnaliser le Main Content
Options for customising the Main Content
  1. Go to the Divi tab > Theme Options > Divi Switch > Main Content.
  2. Remove the grey line separating the main content from the sidebar
  3. Add a preloader (pre-loading icon) that allows the user to wait.
  4. Add an animation to the preloader.
  5. Choose the colour of the preloader.
  6. Choose the portfolio image ratio (squares, rectangles etc.).
  7. Do not allow images from the Divi gallery to open in a lightbox.
  8. Change the animation of the slider description.
  9. Change the animation of the slide module and the Video Slider module.
  10. Delete the custom post type "Project" (Projects Post Type).
  11. Add a custom maintenance page: you will be able to choose from your creations saved in your Divi library.
  12. Add a custom 404 error page: choose a layout from your library.

4 - Customise the responsive

Go to the Divi tab > Theme Options > Divi Switch > Mobile.

Options pour personnaliser le responsive de Divi
Options for customising Divi's responsive

Here you can simply change the level of responsiveness. That is, if you find that the tablet (or mobile) version doesn't trigger fast enough or the opposite, you can easily change the width of the content in pixels. This is the "breakpoint " .

You will be able to specify a value for each screen type.

5 - Acting on the commentary section

Nothing very interesting here... Too bad!

options pour les commentaires
Options for comments
  1. Go to the Divitab > Theme Options > Divi Switch > Mobile
  2. You will be able to place the comments in a toggle.
  3. Record it.

6 - Customise the archive pages

Here, however, you will be able to obtain a feature that the theme lacks: the ability to customise the archive pages.

Archive pages are dynamic pages that are automatically generated in WordPress. For example, these are category pages, tag pages, author pages etc.

These pages have a specific URL like: mywebsite.com/category/the-name-of-your-category.

Divi Switch allows you to make these archive pages sexier:

options pour les pages d'archive
Options for customising archive pages
  1. Go to the Divitab > Theme Options > Divi Switch > Archives
  2. You will be able to display the title of your category at the top of the page.
  3. You will be able to remove the sidebar on the archive pages.
  4. Add the words "read more" below each item.
  5. Add a line to separate each item on the archive.
  6. Save

7 - Integrating layouts in specific locations

This is ideal if you need to display promotional elements in strategic locations, which you can change later with just one click.

Possibilité d'insérer un layout
Possibility of inserting a layout at the beginning or end of a post
  1. Go to the Divitab > Theme Options > Divi Switch > Integration
  2. You will be able to add a pre-saved layout above the main content.
  3. The same goes for placing content after the main content (before the comments)
  4. The same goes for adding a layout before the content of your articles.

Note: these layout additions will be done identically on all pages.

8 - Downloading SVG files

Divi Switch - Onglet Avancé
Divi Switch - Advanced tab

The Divi > Theme Options > Divi Switch > Advanced tab will allow you to allow SVG files to be uploaded to your media library.

9 - Exporting the parameters as a plugin

This is a brilliant idea! The Import/Export tab allows you to create a plugin on the fly. It will contain all the options you have set up with the Divi Switch plugin.

This means that you could create a "basic" plugin that adds a lot of pre-saved customisations and you could install it on all your sites. Without having to install Divi Switch and set it up again.

Furthermore, if you install this plugin within your clients' sites, they will not be able to change the Divi Switch options as they have been embedded in the extension itself.

Divi Switch - Onglet Import Export
Divi Switch - Import Export tab
  1. Go to Divitab > Theme options > Divi Switch > Import-Export
  2. You will be able to use the import function which will save you time in setting up. This means that you already have a plugin created from Divi Switch and that it is also installed.
  3. Alternatively, you can export your own settings by entering the name of your plugin.
  4. The description of the plugin.
  5. The author of the plugin.
  6. The URL of the author's website.
  7. The version of the plugin.
  8. Then you can click on Export Plugin to download it locally and install it on another site.

10 - Adding options in the customizer

In addition to all the options listed above, you will find additional options in the customiser (on the Appearance > Customise tab):

Options supplémentaires dans le customizer
Additional options in the customizer
  1. You can change the Mobile Menu icon (the famous Hamburger).
  2. Add a background image to your header.
  3. Customise the 'back to top' button.
  4. Change the colours and design elements of your archive pages.

Need more resources on Divi? Visit the ElegantThemes blog which is full of ideas and tutorials!

In conclusion...

Divi Switch is a plugin that intervenes at various levels of customization. Many of them can be done "by hand" if you know a little CSS and PHP. Others are a bit more complex... However, if getting your hands in the code doesn't thrill you, this premium plugin is a real must-have for Divi users. It is also a significant time saver!

Customiser Divi avec Divi Switch
Divi Switch - plugin pour Divi
plus d'astuces pour Divi
obtenir divi bouton
quizz divi bouton
newsletter bouton
formation divi bouton
guide divi pdf bouton
bouton support divi

You might like it too:

DiviGrid : ajoutez 27 modules au Visual Builder !

DiviGrid : ajoutez 27 modules au Visual Builder !

J’ai testé DiviGrid et ses 27 modules. Découvrez avec moi ce que nous offre ce plugin premium pour Divi, comment l’utiliser et comment importer les démos. Vous allez certainement adorer le module « Justified Gallery » !

11 Commentaires

  1. valeriemersiervalerie

    Merci pour ce condensé d’infos sur Divi Switch.
    Est-ce que dans le temps avec les multiples MAJ Divi, le plug ne sera pas, très vite, obsolète ? C’est une question sûrement bête, mais celui-ci regroupe tellement de fonctions différentes que je me dis que s’il bug, le site entier bug.
    Quel est votre avis sur la question ?
    Merci de votre retour,

  2. Lycia Diaz

    Hello Valerie ! C’est une bonne question ! Je pense que ce plugin est maintenu par une équipe sérieuse. Et comme c’est un plugin premium, c’est dans leur intérêt de le maintenir correctement. Si c’était un plugin gratuit, j’aurais un peu plus de doute… Mais tu peux peut-être leur poser la question…

  3. valeriemersiervalerie

    Merci Lycia… je vais les interroger à ce sujet.

  4. Pascal

    Bonjour Lycia et merci pour votre site.

    Lors de l’installation de ce plugin ma page par Accueil ( la seule pour l’instant) à complètement bugger.

    Le logo est énorme, le menu prend la moitié de la page, le bouton de recherche ce retrouve en dessous du header et impossible de modifier le header. En désactivant le plugin tous reviens correctement. Avez vous une réponse à cela ?

  5. Lycia Diaz

    Salut Pascal.
    J’ai pas trop de réponse à te donner… J’ai testé ce plugin avant la version 4.0.x de Divi, est-ce que cela pourrait venir de là ? Sinon, je pense plutôt à un paramétrage. As-tu paramétré le plugin lui-même ? Cela pourrait rentrer dans l’ordre, je suppose…

  6. Pascal


    J’ai trouvé la solution. Cela venait du plugin ithemes security. Pour cela il faut decocher la protection php des plugins.

    Bonne soirée

  7. Lycia Diaz

    Ah super Pascal pour le tuyau !
    Bonne soirée.

  8. amandine chanson

    J’aimerai supprimer les puces mises automatiquement dans mon footer!
    A ce jour, je ne trouve pas la partie divi switch dans mon divi « option du thème ».
    Avez-vous un autre chemin svp? J’ai beau chercher je ne trouve pas 🙁

    Merci beaucoup par avance.

  9. Lycia Diaz

    Salut Amandine,
    Divi Switch est une extension tierce qui ne fait pas partie de Divi, c’est donc pour ça que tu ne la trouves pas.

  10. Juliette Douguedroit


    J’ai acheté le plugin Divi switch pour l’option. Page specific logo. J’ai réussi à changer le logo pour chaque page mais 2 problemes : le logo apparait petit peu importe la taille du fichier. Et surtout, je dois changer l’url de destination (par exemple sur la page http://ppfranchise.ada.fr/ada-bikes j’ai besoin que le logo redirige sur celle-ci et non sur la home page. Savez-vous comment faire ? C’est très urgent, pour un client. Merci

  11. Lycia Diaz

    Salut Juliette, il faudrait demander au support du plugin Divi Switch.

Soumettre un commentaire

Votre adresse e-mail ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Ce site utilise Akismet pour réduire les indésirables. En savoir plus sur comment les données de vos commentaires sont utilisées.