Divi Switch : un plugin multifonction qui vous veut du bien !

À chaque fois que je crée un nouveau site avec Divi, je modifie souvent les même choses : enlever la ligne grise sous le menu, ouvrir les icônes du footer dans un nouvel onglet etc… Mais pourquoi je n’ai pas découvert Divi Switch avant ?!

Ce plugin multifonction permet de corriger et de personnaliser Divi sans se prendre la tête avec le code et la création d’un thème enfant. Il permet de se concentrer sur le plus important : le contenu et le design.

J’ai testé Divi Switch et je vous propose de découvrir toutes ses fonctionnalités…

La liste des possibilités offertes par Divi Switch est longue ! Voici ce que vous pourrez faire avec ce plugin multifonction…

1. Modifier le Header de Divi (entête et menu)
2. Modifier le Footer de Divi
3. Agir sur le contenu principal
4. Personnaliser le responsive
5. Agir sur la partie commentaire
6. Personnaliser les pages d’archives
7. Intégrer des layouts à des endroits précis
8. Télécharger des fichiers SVG
9. Exporter un plugin
10. Ajouter des options dans le « customizer »

Avant d’aller plus loin, notez que Divi Switch est un plugin premium que vous pourrez vous procurer en licence annuelle ou lifetime sur les sites de Aspen Grove Studios ou de Divi Space.

1 – Modifier le Header de Divi

Nous avons déjà vu, lors d’un précédent article, qu’on peut faire des choses sympas avec les options de paramétrage du Header de Divi (entête du site).

Mais certaines options restent indisponibles dans Divi.

Et je ne leur jette pas la pierre, c’est un bon choix qu’ElegantThemes fait : celui de ne pas proposer des centaines d’options et de ne pas devenir une usine à gaz comme Ocean WP par exemple.

Mais cela implique que vous devrez faire quelques customisations pour obtenir le design que vous souhaitez…

Voici comment Divi Switch va vous y aider :

1. Rendez-vous à l’onglet Divi > Option du thème > Divi Switch > Header
2. En un clic, vous pourrez supprimer la ligne grise qui se trouve sous le menu principal.
3. Vous pourrez également rendre le numéro de téléphone clicable : celui que vous faites apparaitre dans le Top Menu (le menu au-dessus du menu principal).
4. Si vous affichez vos icônes de réseaux sociaux dans le Top Menu, vous pourrez les ouvrir dans une nouvelle fenêtre (voir aussi comment ouvrir les icônes du footer dans une nouvelle fenêtre)
5. Si vous voulez centrer les éléments de votre Top Menu, vous pourrez le faire en 1 clic.
6. Si vous souhaitez que votre logo soit différent lorsque l’utilisateur scrolle votre site (quand il descend plus bas dans une page), vous pourrez télécharger un logo différent ici.
7. Vous pourrez ajouter un texte à côté de l’icône du menu mobile (hamburger).
8. Vous pourrez même décider d’afficher un logo différent sur chaque page de votre site.
9. Et en plus, si votre menu ne vous convient pas, vous pourrez le remplacer par un layout enregistré dans votre bibliothèque. Un layout devra être préalablement créé et enregistré dans votre bibliothèque.
10. N’oubliez pas de sauvegarder vos changements.

2 – Modifier le footer de Divi

Un footer personnalisé est souvent un élément essentiel dans le design d’un site. Nous avons déjà vu comment créer un footer qui se dévoile au scroll ou même l’ajout manuel de nouvelles icônes.

Voici ce que vous pourrez faire ici :

1. Rendez-vous à l’onglet Divi > Option du thème > Divi Switch > Footer
2. En un clic, vous pourrez supprimer les « bullets points », c’est-à-dire la liste à puce qui peut apparaître quelques fois dans les widgets du footer.
3. Vous pourrez supprimer totalement le bas du footer, celui où apparaissent les crédits ou encore les icônes des réseaux sociaux.
4. Une option intéressante ici : permettre au footer de se placer totalement en bas de l’écran lorsque le contenu de la page est trop court.
5. Enfin, vous pourrez remplacer la zone des widgets en pied de page par un layout préalablement enregistré dans votre bibliothèque.

3 – Agir sur le contenu principal

Cet onglet propose des options qui concernent divers modules ou contenus de Divi.

1. Rendez-vous à l’onglet Divi > Option du thème > Divi Switch > Main Content.
2. Supprimer la ligne grise qui sépare le contenu principal de la sidebar
3. Ajouter un preloader (icône de pré-chargement) qui permet de faire patienter l’internaute.
4. Ajouter une animation au preloader.
5. Choisir la couleur du preloader.
6. Choisir le ratio des images du portfolio (carrées, rectangles etc.).
7. Ne pas permettre aux images de la galerie Divi de s’ouvrir dans une lightbox.
8. Changer l’animation de la description du slider.
9. Changer l’animation du module Diapo et du module Video Slider.
10. Supprimer le custom post type « Projet » (Projects Post Type).
11. Ajouter une page de maintenance personnalisée : vous pourrez choisir parmi vos créations enregistrées dans votre bibliothèque Divi.
12. Ajouter une page d’erreur 404 personnalisées : choisissez un layout dans votre bibliothèque.

4 – Personnaliser le responsive

Rendez-vous à l’onglet Divi > Option du thème > Divi Switch > Mobile.

Ici vous pourrez simplement modifier le niveau de responsive. C’est-à-dire que si vous trouvez que la version tablette (ou mobile) ne se déclenche pas assez vite ou le contraire, vous pourrez facilement changer la largeur du contenu en pixel. C’est le « breakpoint » ou « point de rupture ».

Vous pourrez spécifier une valeur pour chaque type d’écran.

5 – Agir sur la partie commentaire

Rien de très intéressant ici… Dommage !

1. Rendez-vous à l’onglet Divi > Option du thème > Divi Switch > Mobile
2. Vous pourrez placer les commentaires dans une bascule.
3. Enregistrez.

6 – Personnaliser les pages d’archives

Ici par contre, vous pourrez obtenir une fonctionnalité qui fait défaut au thème : celle de pouvoir customiser les pages d’archives.

Les pages d’archives sont des pages dynamiques générées automatiquement dans WordPress. Par exemple, ce sont les pages de catégories, les pages d’étiquettes, les pages d’auteurs etc.

Ces pages ont une URL spécifique comme : mywebsite.com/category/le-nom-de-votre-categorie.

Divi Switch permet de rendre ces pages d’archives plus sexy :

1. Rendez-vous à l’onglet Divi > Option du thème > Divi Switch > Archives
2. Vous pourrez afficher le titre de votre catégorie en début de page.
3. Vous pourrez supprimer la sidebar sur les pages d’archive.
4. Ajouter la mention « lire plus » en dessous de chaque élément.
5. Ajouter une ligne pour séparer chaque élément présent sur l’archive.
6. Sauvegarder

7 – Intégrer des layouts à des endroits précis

C’est idéal si vous avez besoin d’afficher des éléments promotionnels à des endroits stratégiques, que vous pourrez changer ultérieurement en 1 seul clic.

1. Rendez-vous à l’onglet Divi > Option du thème > Divi Switch > Integration
2. Vous pourrez ajouter un layout pré-enregistré au-dessus du contenu principal.
3. De même pour placer un contenu après le contenu principal (avant les commentaires)
4. De même pour ajouter un layout avant le contenu de vos articles.

Notez : ces ajouts de layouts se feront sur toutes les pages à l’identique.

8 – Télécharger des fichiers SVG

L’onglet Divi > Option du thème > Divi Switch > Advanced vous permettra d’autoriser le téléchargement des fichiers SVG dans votre bibliothèque de médias.

9 – Exporter les paramètres sous la forme d’un plugin

Voilà une idée brillante ! : l’onglet Import/Export permet de créer un plugin à la volée. Celui-ci contiendra toutes les options que vous aurez paramétrées grâce au plugin Divi Switch.

Cela signifie que vous pourriez créer un plugin « basique » qui ajoute de nombreuses personnalisations pré-enregistrées et que vous pourrez l’installer sur tous vos sites. Sans avoir à installer Divi Switch et le paramétrer à nouveau.

De plus, si vous installez ce plugin au sein des sites de vos clients, ils ne pourront pas modifier les options de Divi Switch puisqu’elles ont été embarquées dans l’extension elle-même.

1. Aller à l’onglet Divi > Option du thème > Divi Switch > Import-Export
2. Vous pourrez utiliser la fonction d’import qui vous permettra de gagner du temps en paramétrage. Cela signifie que vous êtes déjà en possession d’un plugin créé à partir de Divi Switch et que ce dernier est également installé.
3. Sinon, vous pourrez exporter vos propres réglages en saisissant le nom de votre plugin.
4. La description du plugin.
5. L’auteur du plugin.
6. L’URL du site de l’auteur.
7. La version du plugin.
8. Puis, vous pourrez cliquer sur Export Plugin pour le télécharger en local et l’installer sur un autre site.

10 – Ajouter des options dans le « customizer »

En plus de toutes les options que l’on vient d’énumérer, vous trouverez des options supplémentaires dans le customiser (à l’onglet Apparence > Personnaliser) :

1. Vous pourrez changer l’icône du Menu Mobile (le fameux Hamburger).
2. Ajouter une image d’arrière-plan à votre header.
3. Personnaliser le bouton « retour vers le haut ».
4. Changer les couleurs et les éléments de design de vos pages d’archives.

Besoin de plus de ressources sur Divi ? Visitez le blog de ElegantThemes qui regorge d’idées et de tutos !

En conclusion…

Divi Switch est un plugin qui intervient à divers niveaux de personnalisation. Plusieurs d’entre elles peuvent être faites « à la main » si on s’y connait un peu en CSS et en PHP. D’autres, sont un peu plus complexes… Toutefois, si mettre les mains dans le code ne vous fait pas vibrer, ce plugin premium est vraiment un must-have pour les utilisateurs de Divi. Il représente également un gain de temps significatif !