Point culminant du plugin Divi – Divi Switch

Divi Switch est un plugin tiers pour Divi qui ajoute de nombreuses nouvelles fonctionnalités à Divi que vous pouvez activer ou désactiver en appuyant simplement sur un commutateur. De nombreux membres de la communauté Divi connaissent Divi Switch car il existe depuis plusieurs années, mais leur mise à jour 3.0 a apporté de nombreuses nouvelles fonctionnalités et améliorations qui méritent d'être examinées. Certaines de ces nouvelles fonctionnalités incluent : un nouveau tableau de bord, un mini plug-in pour l'importation et l'exportation, des préchargeurs, de nouveaux paramètres de personnalisation de thème, des personnalisations de logo, des pages 404 et de maintenance personnalisées avec des mises en page intégrées, une prise en charge des images SVG, etc.

Dans cet article, nous examinerons le nouveau Divi Switch et porterons une attention particulière à son ensemble de fonctionnalités mis à jour.

Installation de Divi Switch

Téléchargez et activez Divi Switch comme n'importe quel plugin. Un nouvel onglet est ensuite ajouté au menu Options du thème Divi dans le tableau de bord appelé Divi Switch. Saisissez votre clé de licence et activez le plugin. L'onglet révélera alors un nouveau tableau de bord intuitif.

Tableau de bord Divi Switch

Divi Switch a été repensé et tous les paramètres ont été déplacés de sa place distincte dans le menu administrateur vers la page d'options du thème Divi. Les commutateurs eux-mêmes sont répartis dans les sous-onglets sous le nouvel onglet « Divi Switch » dans les options du thème Divi.

Chaque bascule a un titre, une courte description et un commutateur ombré réglé par défaut sur « Désactivé ». Si vous souhaitez activer l'effet, cliquez simplement sur le commutateur et il basculera sur « activé ». Il deviendra bleu pour indiquer qu'il est activé.

Pour voir la description des fonctionnalités, sélectionnez le point d'interrogation qui apparaît à droite lorsque vous survolez l'effet.

Regardons plusieurs onglets et voyons ce qu'il peut faire.

Entête

L'onglet En-tête ajoute 8 commutateurs et personnalisations. Vous pouvez supprimer le soulignement de l'en-tête, rendre le numéro de téléphone cliquable, ouvrir les liens sociaux dans un nouvel onglet, centrer les éléments d'en-tête supérieurs, utiliser un logo différent lors du défilement, modifier le texte du menu hamburger, utiliser un logo spécifique à la page et remplacer le menu plein écran avec une mise en page Divi.

Personnalisations de logo

Le thème Divi a la possibilité de définir un logo personnalisé qui peut être affiché sur chaque page ou publication. Mais que se passe-t-il si vous devez utiliser différents logos sur votre site ? Divi Switch ajoute plusieurs options de logo afin que vous ayez plus de logos à afficher et vous permet de contrôler comment et où ils s'affichent. Les paramètres vous permettent de choisir un logo différent lors du défilement et vous pouvez définir un logo différent pour des pages spécifiques.

Logo différent sur le défilement

Pour afficher un nouveau logo lors du défilement, téléchargez simplement le logo dans l'écran des paramètres. Le logo alternatif s'affichera désormais lorsque le visiteur fera défiler.

Logo spécifique à la page

Avec le logo spécifique à la page, vous n'êtes pas limité à un seul logo sur votre site Web. Vous pouvez avoir autant de logos que vous le souhaitez et cela vous donne un contrôle total sur quel logo s'affiche sur quelle page.

Si vous avez activé le logo spécifique à la page dans les paramètres, une nouvelle fonctionnalité est ajoutée au bas de la zone de contenu des pages et des publications. Vous pouvez maintenant définir un logo différent pour la page d'accueil, et un autre pour les autres pages et publications. Ici, vous téléchargez simplement le logo que vous souhaitez que cette page ou cet article affiche.

Cet exemple montre différentes pages avec chaque page montrant une variation sur le logo du site.

Menu plein écran

L'en-tête a également plusieurs personnalisations de menu. Pour cet exemple, j'ai modifié le texte du menu hamburger et sélectionné une mise en page pour le menu plein écran.

Voici la carte des hamburgers avec son nouveau texte.

Cliquer sur le menu hamburger ouvre le menu plein écran et affiche la mise en page Divi que j'ai sélectionnée. Il est translucide pour que vous puissiez voir le site Web en arrière-plan. Il comprend également un bouton de fermeture.

Bas de page

L'onglet Pied de page vous permet de supprimer les puces, de masquer le pied de page inférieur, d'empêcher le pied de page de flotter et de remplacer le pied de page par une mise en page Divi.

Cette mise en page a été ajoutée au pied de page de chaque page simplement en la sélectionnant dans l'onglet Pied de page.

Contenu principal

L'onglet Contenu principal ajoute 11 commutateurs et personnalisations. Vous pouvez supprimer la ligne de séparation de la barre latérale, ajouter un préchargeur de page d'accueil et définir le type et les couleurs, modifier le rapport d'image du portefeuille, empêcher les images de s'ouvrir dans une lightbox, ajuster les animations de curseur, supprimer le type de publication Projets, ajouter une page de maintenance personnalisée et ajouter une page 404 personnalisée.

Préchargeur

L'activation du préchargeur affichera une icône animée pendant le chargement de la page d'accueil. C'est très bien pour indiquer au visiteur que quelque chose se passe alors que le contenu réel de la page est toujours en cours de chargement en arrière-plan. Il dispose de 15 types de transition et de deux options de couleur.

Voici un exemple de l'apparence du préchargeur sur le site Web pendant le chargement de la page.

Pages personnalisées 404 et de maintenance avec mises en page

Ces fonctionnalités vous permettent de choisir n'importe quelle page de maintenance et une page 404 de votre liste de pages. Cela signifie que vous pouvez créer les pages à l'aide des mises en page que vous avez créées ou importées dans la bibliothèque Divi.

Pour vous aider, Divi Switch comprend des packs de mise en page de page 404 premium et de page de maintenance avec 10 mises en page prédéfinies qui peuvent facilement être personnalisées et définies par défaut. Ils sont au format JSON. L'image ci-dessus est l'une des 404 pages.

Les mises en page sont conçues par des professionnels, de sorte que votre page 404 et vos pages de maintenance ne seront pas seulement informatives, mais également attrayantes. Cet exemple est l'une des pages de maintenance. Il comprend un compte à rebours.

Mobile

L'onglet Mobile vous permet de définir des points d'arrêt pour chaque taille d'image. Entrez un nombre de la valeur que vous voulez qu'il change le point d'arrêt. Vous pouvez également réduire le menu sur mobile et afficher un texte spécifique.

Des postes

Les messages ont une fonctionnalité de commentaires intéressante. Cela déplace les commentaires vers une bascule afin qu'ils soient masqués par défaut.

C'est la bascule fermée. Il est placé au bas du message où les commentaires apparaissent normalement.

Cliquez pour ouvrir et voir les commentaires. Ceci est le formulaire de commentaire WordPress standard.

Si vous ajoutez le module de commentaires Divi à votre mise en page, vous pouvez le styliser avec les paramètres du module. Il est toujours placé dans la bascule et est fermé par défaut.

Les archives

L'onglet Archives vous permet de contrôler les pages d'archives (pages pour les balises, les catégories, l'auteur, la recherche, etc.). Ajoutez le titre de la catégorie, supprimez la barre latérale, ajoutez un lien Lire la suite et ajoutez une ligne de séparation sous les publications.

Voici un exemple de page Auteur avec tous les commutateurs d'archivage activés.

L'intégration

L'onglet Intégration vous permet d'insérer des mises en page Divi dans des emplacements spécifiques, notamment avant le contenu principal, après le contenu principal et avant le contenu de la publication. Sélectionnez la mise en page dans les listes déroulantes.

J'ai créé une bannière pleine largeur à l'aide d'un simple module de texte et je l'ai insérée avant le contenu. Bien sûr, vous pouvez créer n'importe quel type de mise en page que vous souhaitez. C'est un excellent moyen de créer des CTA et des menus spéciaux.

Avancée

L'onglet Avancé vous permet de télécharger des graphiques vectoriels évolutifs (SVG) pour des logos, des icônes et d'autres images plus nets. Étant donné que WordPress bloque les SVG par défaut, c'est un excellent moyen d'utiliser ce format d'image avec Divi.

Importer / Exporter

L'onglet Import/Export vous permet d'exporter le code généré par Divi Switch dans un plugin de marque léger et personnalisé à installer sur les sites de vos clients. Cela facilite l'utilisation de votre code Divi Switch préféré sans avoir à installer et configurer le plugin Divi Switch lui-même. Entrez un nom pour le plug-in, fournissez une description, ajoutez les informations sur l'auteur, donnez-lui une version de plug-in et sélectionnez Exporter le plug-in.

Vous pouvez maintenant télécharger votre plugin de marque sur les sites de vos clients comme n'importe quel plugin. Il aura votre image de marque.

Personnalisateur de thème

Un nouvel onglet est ajouté au personnalisateur de thème appelé Paramètres Divi Space. Ici, vous trouverez un autre onglet appelé Divi Switch. Le personnalisateur de thème comprend des paramètres supplémentaires pour créer une icône personnalisée pour le menu mobile, modifier l'image d'arrière-plan de l'en-tête, personnaliser le bouton Retour en haut et personnaliser les pages d'archives, le tout avec un aperçu en direct.

Dans cet exemple, j'ai ajouté une image d'arrière-plan à l'en-tête. Vous pouvez le configurer pour qu'il se répète, modifier la position de l'image et modifier la taille de l'image. Au-dessus de ce paramètre se trouve une zone de sélection où vous pouvez choisir une icône pour le menu mobile.

Dans cet exemple, j'ajuste le bouton Retour en haut pour qu'il corresponde à la mise en page. Vous pouvez ajuster la taille de l'icône, le rayon, la position, la couleur d'arrière-plan, la couleur de l'icône et les couleurs de survol.

Dans cet exemple, j'ajuste la couleur, la hauteur et la largeur du séparateur pour les pages d'archive. Vous remarquerez également dans ces exemples que le logo a changé lorsque j'ai fait défiler vers le bas. J'ai toujours le paramètre d'échange de logo activé (enfin, je suppose qu'il est en fait « commuté ».)

Licence

Divi Switch propose trois licences au choix :

• Site unique – 24 $
• 3 emplacements – 50 $
• Sites illimités – 96 $

Divi Switch est également disponible dans le plan d'abonnement Divi Space.

Mettre fin aux pensées

Je suis impressionné par les nouvelles fonctionnalités de Divi Switch. Ne pas avoir à coller de classes CSS et le nouveau tableau de bord sont des fonctionnalités bienvenues. Les options de logo, le préchargeur, le mini plugin, la page 404 personnalisée et la page de maintenance ajoutent beaucoup à Divi à eux seuls. J'aime la possibilité d'insérer des mises en page Divi et de choisir un pied de page personnalisé. J'aime également les fonctionnalités de personnalisation du thème pour ajouter une image à l'en-tête, la personnaliser et modifier la couleur, la forme et la position du bouton de retour en haut.

Divi Switch ajoute de nombreuses fonctionnalités à Divi. J'ai trouvé chacun d'eux facile à utiliser. Si vous recherchez de nombreuses personnalisations que vous pouvez ajouter de la manière la plus simple possible, Divi Switch peut être ce que vous recherchez.

Nous voulons de vos nouvelles. Avez-vous essayé Divi Switch ? Racontez-nous votre expérience dans les commentaires ci-dessous !

Image en vedette via Oleh Donets / shutterstock.com