Divi Switch est l’un des plugins pour Divi les plus populaires. À la manière du plugin Divi Booster et tout en étant complémentaire, il permet d’ajouter bon nombre d’options ou d’effets de style à votre site en cliquant juste sur des boutons On/Off. Plutôt simple donc.

C’est un plugin premium qui vous coutera 19$/an pour un seul site.

Je vais vous détailler ici toutes les options qu’il propose et leur utilité afin que vous puissiez vous faire une idée du plugin.

Si vous souhaitez le télécharger afin de suivre cette article, cliquez sur le bouton suivant:

Vous trouverez toutes les options de Divi Switch dans l’administration de votre site. Cliquez sur Divi-> Divi Switch

Elles se présentent de la manière suivante:

Toutes les possibilités sont affichées les unes à la suite des autres, avec simplement un bouton à cliquer pour activer l’option.

Je vous mets un petit menu de navigation si vous voulez vous rendre directement dans une section particulière :

• Menu
• Mobile Menu
• Footer
• Theme
• Modules
• Transitions
• Filters

 

On commence de suite avec le …

Menu

 

• FIRST MENU LINK FLY IN ON SCROLL: le premier lien du menu apparaitra avec un effet de slide depuis la gauche de l’écran lorsque l’utilisateur scrollera vers le bas de la page
• ‘FLAT’ MENU CTA BUTTONS: cette option transforme n’importe quel item du menu en un bouton d’appel à l’action (CTA) en ajoutant simplement une classe CSS prédéfinie. Vous avez le choix entre 6 classes : button-dark (noir), button-light (clair), button-blue (bleu), button-yellow (jaune),  button-red (rouge), button-green (vert)
• ‘3D’ MENU CTA BUTTONS: idem que l’option précédente sauf que le bouton aura aspect 3D. Les couleurs disponibles sont également les mêmes que précédemment.
• APP STYLE MENU: le logo et le menu seront positionnés à une distance fixe de la gauche et la droite de l’écran quelque soit la taille de celui-ci
• MOBILE MENU ON DESKTOP: remplace le menu standard par un menu hamburger (comme le menu mobile) sur ordinateur et tablette
• REMOVE THE MENU BOTTOM LINE: cette option supprime la barre inférieure et l’ombre sous menu
• CENTER ALIGN TOP HEADER: centrez simplement les éléments de la barre de menu supérieur (icônes de réseaux sociaux, téléphone et email)
• ENLARGE THE PHONE AND EMAIL INFO IN TOP HEADER: augmentez la taille du numéro de téléphone ainsi que de l’email de la barre de menu supérieur
• HIDE THE LOGO BEFORE SCROLL: le logo n’apparaitra que lorsque l’utilisateur commencera à scroller et sera masqué avant
• REMOVE THE BORDER LINE ON TOP OF SUBMENUS: cette option supprime la barre bleue (si vous avez laissé la couleur d’origine de Divi) au dessus des sous-menus

Mobile menu – options valable uniquement sur téléphone

 

• FIXED HEADER ON MOBILE: le menu mobile sera fixe, donc toujours affiché à l’écran.
• SIDE MENU – LIGHT: affiche un menu mobile verticale avec un effet de slide depuis la droite. Ce menu sera de couleur claire. Vous pouvez voir ce que ça donne sur playground.divi-community.fr
• SIDE MENU – DARK: idem que l’option précédente sauf qu’ici le menu sera foncé
• SHOW ‘SELECT PAGE’ ON MOBILE MENU – LIGHT: affiche le texte “select page” à coté de l’icone hamburger du menu. Le texte sera sur fond clair. Cette option n’est pas vraiment intéressante à mon sens.
• SHOW ‘SELECT PAGE’ ON MOBILE MENU – DARK: idem que précédemment sauf que le fond sera foncé
• REPLACE BURGER MENU WITH WORD ‘MENU’: cette option remplace l’icône hamburger du menu mobile par le mot “Menu”
• ADD THE WORD ‘MENU’ TO THE BURGER ICON: cette option permet d’ajouter le mot “Menu” à coté de l’icône hamburger

Footer – toutes les options permettant de modifier le pied de page de Divi

 

• REMOVE BULLET POINTS FROM FOOTER: supprimez les points (comme dans les listes à puce) affichés avant les items du pied de page
• HIDE BOTTOM FOOTER: cachez le pied de page avec les liens de crédits d’Elegant Themes
• STOP THE FOOTER FLOATING ON EMPTY PAGES: une des options les plus pratiques. Lorsque vous avez une page avec peu de contenu, le footer n’est pas en bas de l’écran et cela laisse apparaitre une zone blanche sous votre page. Cette option oblige le footer à être en bas de page et règle ainsi ce problème

Theme – les options globales du site

 

• REMOVE THE DIVIDING SIDEBAR LINE: cette option supprime la barre verticale séparant la sidebar du contenu principal (généralement les articles)
• HOME PAGE PRE-LOADER (DARK): affiche un icône de chargement foncé sur la page d’accueil le temps que le site soit complètement chargé. Plutôt jolie et utile
• HOME PAGE PRE-LOADER (LIGHT): idem que précédemment mais de couleur claire
• TOP SECTION SEPARATORS: ajoutez très simplement des séparateurs entre vos sections : ici une diagonale, une flèche ou un demi-cercle. Il s’afficheront en haut de votre section.Vous pouvez retrouver un exemple sur mon site de test et d’exemples playground.divi-community.fr/divi-switch
• BOTTOM SECTION SEPARATORS: idem que précédemment mais les séparateurs seront affichés en bas des sections.
• CLEANER BLOG COMMENTS: cette option améliore le positionnement et l’apparence des commentaires et du bouton
• SQUARE BUTTONS: affichez des boutons carrés plutôt qu’arrondies
• ADD CODE BOXES: vous pouvez afficher du code dans un contenu préformaté en utilisant les balises <pre></pre> n’importe ou dans vos éditeurs de texte
• STYLE CONTACT FORM 7: si vous utilisez le plugin Contact Form 7 sur votre site, activez cette option et votre formulaire sera automatiquement restylisé comme les formulaires de Divi

Modules

 

• BETTER ARCHIVE PAGES – TWO COLUMNS: activez une mise en page des articles sur deux colonnes sur les pages d’archives et de catégories. Cette option marche mieux avec la suppression de la sidebar
• REMOVE SIDEBAR ON ARCHIVE PAGES: supprimez la sidebar sur les pages d’archives et de catégories pour les rendre plein écran
• REPLACE THE TOGGLE PLUS ICON WITH ROTATING ARROW: remplacez l’icône “+” du module accordéon par une icône de flèche. Retrouvez un exemple en bas de page sur playground.divi-community.fr
• SQUARE PORTFOLIO IMAGES: cette option rend les images du portfolio carré
• ‘BOOK’ PORTFOLIO IMAGES: en utilisant cette option, les images de votre portfolio auront le ratio d’un livre (format portrait)
• ‘CINEMA’ PORTFOLIO IMAGES: ici les images de votre portfolio auront un format 16:9
• BLURB ICON GROW: les icônes du module Résumé (Blurbs) seront grossis au passage de la souris
• BLURB ICON SPIN: les icônes du module Résumé (Blurbs) tourneront au passage de la souris
• STOP GALLERY IMAGES OPENING A LIGHTBOX: empéchez les images des sliders de s’ouvrir dans une lightbox
• HIDE COUNTER WHEN IT HITS ZERO: cachez le module Compteur à rebours lorsqu’il atteint 0

Transitions

 

• PROJECT OVERLAY – ZOOM: les images des projets sont zoomées au passage de la souris
• PROJECT OVERLAY – SPIN: les images des projets tournent au passage de la souris
• PROJECT OVERLAY – SLIDE UP: les images des projets ont un effet de slide au passage de la souris
• HOVER.CSS TRANSITION EFFECTS: ajoutez l’une de ces 27 classes CSS à vos modules ou images pour leur donner un effet particulier au passage de la souris et styliser votre site très simplement.
• SLIDE DECRIPTION FLY IN LEFT, SLIDE DECRIPTION FLY IN RIGHT, SLIDE DECRIPTION FLIP ON Y AXIS,  SLIDE DECRIPTION FLIP ON X AXIS,  SLIDE IMAGE & VIDEO FLY IN LEFT, SLIDE IMAGE & VIDEO FLY IN RIGHT, SLIDE IMAGE & VIDEO FLIP ON Y AXIS, SLIDE IMAGE & VIDEO FLIP ON X AXIS: toutes ces options rajoutent des effets de transitions pour le module Diapo. Suivant celles que vous choisissez, le texte arrive avec un effet de slide de la droite ou la gauche, l’image s’affiche avec un effet de rotation, de slide… Je vous laisse essayé, il y a beaucoup de possibilité.

Filters – des filtres d’effets pour vos images et sections

 

• CSS FILTERS: ajoutez l’une des 6 classes CSS suivante à vos images pour leur ajouter des filtres comme sépia, noir et blanc, inversé… : ds_grayscale, ds_saturate, ds_blur ,ds_invert, ds_brighter, ds_sepia
• INSTAGRAM FILTERS: idem que précédemment sauf qu’ici vous avez la possibilité d’ajouter des filtres similaires à Instagram pour vos images. Vous avez le choix entre 12 filtres différents
• SQUARE ‘FULL WIDTH’ PORTFOLIO MODULES: forcez le portefeuille plein écran à afficher les projets carrés
• TEXT SHADOW – DARK: ajoutez une ombre foncée à votre texte pour le rendre plus visible sur fond clair en ajoutant simplement une classe CSS (shad-dark) à vos modules, colonnes ou sections
• TEXT SHADOW – LIGHT: ajoutez une ombre claire à votre texte pour le rendre plus visible sur fond foncé en ajoutant simplement une classe CSS (shad-light) à vos modules, colonnes ou sections

Ma conclusion

 

Divi Switch est un très bon plugin ajoutant pas mal de fonctionnalités et d’effets de design sympa à Divi pour améliorer votre site sans connaissances particulières.

Il reste à un prix abordable compte tenu du nombre de possibilités qu’il offre.

Il vous permettra de gagner un temps non négligeable si vous faites plusieurs sites et utilisez souvent les mêmes fonctionnalités.

Je vous remets le lien pour le télécharger :

Partager