Point culminant du plugin Divi : Divi Widget Builder

Avez-vous déjà eu envie de placer des modules et des mises en page Divi dans des zones de widgets ? La simple pensée des mises en page Divi dans les barres latérales et les pieds de page me donne des idées de possibilités de conception au-delà de mon propre niveau de compétence. Ce qui est intéressant, c'est que c'est facile à faire quel que soit votre niveau de compétence. Comment? Avec un plugin tiers appelé Divi Widget Builder.

Divi Widget Builder vous permet d'afficher n'importe quelle mise en page Divi dans votre bibliothèque Divi au sein d'un widget. Cela inclut des modules individuels et des pages complètes, y compris toutes leurs fonctionnalités et ajustements. Il fonctionne à la fois avec Divi et Extra. Dans cet article, nous examinerons Divi Widget Builder et verrons à quel point il est facile d'ajouter des mises en page Divi à vos zones de widgets.

Vous pouvez acheter Divi Widget Builder sur le site de l'éditeur.

Installer et activer Divi Widget Builder

Téléchargez et activez le plugin comme d'habitude.

Une fois que vous avez activé le plugin, vous devrez entrer votre clé de licence. Accédez à Divi , Divi Widget Builder dans le menu du tableau de bord et entrez votre clé de licence. Aucune autre configuration n'est requise pour utiliser le plugin, mais vous aurez besoin de dispositions Divi à utiliser dans les widgets.

Bibliothèque Divi

Vous pouvez utiliser n'importe quelle mise en page Divi dans Divi Widget Builder. Je ne recommande pas de créer des mises en page comme vous le feriez pour une page ou un article. Par exemple, une grille à 3 ou 4 colonnes (pour les blogs, les projets, les textes de présentation, etc.) semblerait étrange dans la barre latérale. Ceci est facile à résoudre en créant des mises en page dans des colonnes simples. En d'autres termes, créez des mises en page spécifiquement pour la barre latérale ou le pied de page.

Les modules simples fonctionnent bien dans la barre latérale. Les exemples comprennent:

• Plans
• Formulaires de contact
• Compte à rebours
• Comptoirs de bar
• Bouton
• Blog
• Connexion
• Compteur de nombres
• Personne
• Témoignage

Créez une mise en page et utilisez ces modules avec des superpositions d'arrière-plan, combinez-les, ext., pour créer des widgets vraiment intéressants. Le ciel est la limite.

Création d'une mise en page

Créez votre mise en page en vous rendant sur Divi , Divi Library dans le menu du tableau de bord. Sélectionnez Ajouter nouveau en haut à gauche.

Donnez un nom à la mise en page et sélectionnez le type de modèle dans le menu déroulant. Faites défiler vers le bas et vous pouvez sélectionner une catégorie pour votre modèle si vous le souhaitez. Vous aurez une autre chance de sélectionner la catégorie ou même d'ajouter de nouvelles catégories sur l'écran suivant. Cliquez sur Soumettre lorsque vous avez terminé.

Maintenant, construisez simplement votre mise en page comme d'habitude.

Le widget constructeur de widgets Divi

Un nouveau widget est ajouté à vos widgets appelé Divi PB Widget. Pour le voir, allez dans Apparence , Widgets dans le tableau de bord. Déposez ce widget dans n'importe quelle zone de widget (y compris les barres latérales, les pieds de page ou tout ce que vous avez créé). Il fournit une liste déroulante dans laquelle vous pouvez choisir n'importe quel élément de la bibliothèque Divi à afficher dans le widget.

Il existe deux autres sélections :

Afficher le titre de l'élément de la bibliothèque – affiche le nom de la mise en page dans la barre latérale de votre site Web. Cela fonctionne comme un titre pour le widget. Décochez-la pour masquer le nom.

Ajoutez des éléments de bibliothèque à utiliser comme widgets ici – cliquer sur le mot « ici » dans cette phrase (enfin, pas ma phrase) vous amène à la bibliothèque Divi où vous pouvez créer vos mises en page. J'aime que ce lien soit inclus car il aide à éviter la confusion quant à l'endroit où créer les mises en page et vous donne un accès rapide à la bibliothèque.

Une fois que vous avez fait vos sélections, cliquez sur Enregistrer et la nouvelle mise en page est appliquée à l'emplacement du widget que vous avez placé Divi PB Widget. Le widget fonctionne même avec vos propres zones de widget personnalisées.

Exemples de générateur de widgets Divi

Voici un aperçu de quelques exemples assez que j'ai concocté. Ils sont simples, mais j'espère que cela vous donnera une idée de la façon dont cela fonctionne.

Carte

Cet exemple affiche un flux de blog avec une barre latérale. La barre latérale est ajoutée au sein d'une mise en page 2/3 Divi avec un module de blog sur la gauche.

Cet exemple utilise un seul module de carte. J'ai inclus le nom de la mise en page. Je n'ai pas stylisé le module de carte, il est donc entouré d'un cadre blanc. Ceci est facilement ajusté. Si j'apporte des modifications au module, ces modifications sont répercutées sur le widget lorsque j'actualise la page.

Je pourrais simplement placer la carte dans la mise en page Divi, mais la placer dans la barre latérale affiche la carte, quel que soit le blog que quelqu'un lit. Il s'agit du billet de blog standard sans utiliser de mise en page Divi. En utilisant une mise en page, je pourrais créer une nouvelle carte pour chaque publication, créer une nouvelle zone de widgets et choisir la carte à afficher individuellement sur chaque publication.

Compte à rebours

Cette disposition utilise plusieurs modules de compte à rebours pour créer un seul widget. J'ai coiffé chacun séparément.

Les modules affichent un compte à rebours jusqu'au prochain match - un pour chacune des ligues couvertes par le blog. Chacun des compte à rebours utilise des couleurs spécifiques aux logos de la ligue et comprend des dégradés. Je sais – j'ai laissé de côté la LNH et plusieurs autres. Désolé pour ça.

Curseur de poste

Celui-ci ajoute un curseur de publication à la barre latérale. J'ai inclus le bouton Lire la suite du curseur de publication, la navigation par points et les flèches. J'ai également ajouté des widgets plus réguliers pour voir comment cela s'intègre.

À propos de moi

Celui-ci utilise une mise en page plutôt qu'un simple module. J'ai créé une mise en page à partir d'un article (au lieu de la créer dans la bibliothèque Divi) en utilisant la mise en page À propos de moi fournie avec Divi. J'ai modifié la mise en page pour que tout soit dans une seule colonne et j'ai réduit la taille de la police pour le titre de l'en-tête. J'ai ensuite enregistré la mise en page dans la bibliothèque afin qu'elle soit disponible pour Divi Widget Builder.

La page elle-même est une mise en page du Divi Builder appelée Creative Agency. Je lui ai donné une barre latérale gauche et choisi la disposition À propos de moi pour le widget.

Il s'agit de la même mise en page, mais au lieu d'afficher la barre latérale WordPress standard, j'ai recréé la mise en page à l'aide d'une section spécialisée. Cela se traduit par un design beaucoup plus agréable que la barre latérale WordPress standard car elle donne plus de largeur à la page et le widget peut être placé sous le module d'en-tête pleine largeur Divi.

La section spécialisée permet 3 colonnes dans une rangée, j'ai donc réduit à 3 textes de présentation au lieu de 4 et placé la barre latérale dans la colonne de gauche. J'ai créé la section spécialisée en pleine largeur et modifié la mise en page sous Paramètres de publication Divi dans le coin supérieur droit de la barre latérale gauche à la pleine largeur .

Formulaire de contact

Celui-ci utilise la mise en page Our Team fournie avec le Divi Builder. J'utilise la barre latérale droite. J'ai placé un widget Monarch dans la barre latérale avec le Divi Widget Builder, qui affiche un formulaire de contact.

Zone de widget de pied de page

Celui-ci a 3 widgets Divi Widget Builder dans la zone de pied de page. J'ai choisi une disposition de pied de page à 3 colonnes et placé un module de formulaire de contact, un module de personne et un module de curseur de blog dans les 3 zones. Il s'agit de l'incroyable pack de mise en page Code School de Jason Champagne. L'image de l'article de blog provient également de cette mise en page. Vous pouvez télécharger la mise en page à partir du blog ET ici : Téléchargez un pack de mise en page gratuit de gestion de l'apprentissage à couper le souffle (LMS) pour Divi.

Ce pied de page utilise deux mises en page différentes que j'ai créées en tant que publications. Les deux ont des images de fond. Le widget de gauche utilise plusieurs modules de texte, un module de suivi social et un module de division. L'élément de menu sous les boutons sociaux sont des liens cliquables. Il utilise également une superposition pour assombrir l'image d'arrière-plan. Le widget à droite est un module de formulaire de contact.

Utiliser Divi Widget Builder avec Extra

C'est la même disposition Notre équipe avec Extra. J'avais initialement créé le formulaire de contact en utilisant les paramètres par défaut du module. Je voulais mélanger l'arrière-plan alors j'ai rendu l'arrière-plan transparent. J'ai également modifié la couleur du texte du bouton pour le rendre visible sur le fond sombre.

Licence et documentation

Quatre licences sont disponibles :

• Site unique 7,00 $
• 3 emplacements 19,00 $
• Sites illimités 39,00 $
• À vie 89,00 $

Il comprend un an de support et des mises à jour automatiques. La documentation est fournie sur le site Web de l'éditeur.

Dernières pensées

Divi Widget Builder est simple et facile à utiliser. Le travail consiste à créer des mises en page Divi plutôt qu'à utiliser le générateur de widgets. Le choix d'une disposition dans le générateur de widgets ne pourrait pas être plus simple et la possibilité de placer autant de widgets Widget Builder dans n'importe quelle zone de widgets vous ouvre de nombreuses possibilités de conception Divi et Extra.

J'aimerais voir quelques exemples sur le site Web du développeur du plugin en action. Voir quelques cas d'utilisation créatifs donnerait à l'acheteur des idées sur la façon de l'utiliser et d'en tirer le meilleur parti. Si vous souhaitez placer des mises en page et des modules Divi dans vos zones de widgets, Divi Widget Builder est peut-être le plugin que vous recherchez.

Nous voulons de vos nouvelles. Avez-vous essayé Divi Widget Builder ? Dites-nous ce que vous en pensez dans les commentaires.

Image en vedette via robuart / shutterstock.com