Nous avons tous vu ces barres de message en haut ou en bas d’un site Web. Ils nous informent généralement de l’utilisation des cookies, nous alertent d’une vente ou nous demandent de nous inscrire à la newsletter. Il existe de nombreux plugins que vous pouvez utiliser pour ajouter ces barres à votre site Web. Et si vous pouviez utiliser le Divi Builder pour les créer? Vous pouvez avec un plugin tiers appelé Divi Bars.

Divi Bars crée ces barres de messages en vous permettant d’utiliser les mises en page Divi. Vous pouvez insérer n’importe quel type de contenu, le rendre grand ou petit, le placer en haut ou en bas, le laisser défiler ou rester en place, et même l’afficher en fonction d’un déclencheur.

Divi Bars fonctionne avec Divi et Extra et est disponible à partir de Site Web de l’éditeur. J’utilise la version 1.0.

Installer et activer les Divi Bars

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

Après avoir activé le plugin, un message apparaîtra indiquant que vous devez entrer la clé API. Cliquez sur le lien ou accédez à dans le menu du tableau de bord les paramètres, Activation des Divi Bars.

Entrez votre clé API et votre adresse e-mail et enregistrez les modifications. Un message apparaîtra en haut indiquant le nombre d’activations qu’il vous reste (cela dépend de la licence que vous avez achetée).

Paramètres de Divi Bars

Aller à dans le menu du tableau de bord Barres Divi, les paramètres. Ici, vous pouvez entrer un sélecteur CSS personnalisé et choisir le fuseau horaire par défaut.

Activer les styles de sortie en ligne

Vous devez activer les styles de sortie en ligne. Aller à dans le menu du tableau de bord Deux, Options du thèmeet choisissez le constructeur Tab. Activez l’option du milieu (styles de sortie en ligne). Assurez-vous de cliquer Sauvegarder les modifications.

Créer une barre divi

Aller à dans le menu du tableau de bord Barres Divi, Ajouter un nouveau. Vous verrez un écran comme celui montré ci-dessus qui vous permet de créer une barre Divi. Sélectionnez Divi Builder de la même manière que vous sélectionnez une page ou un article. Il existe également des boîtes dans lesquelles vous pouvez choisir les couleurs d’arrière-plan, ajouter des déclencheurs, définir des pages et des positions, personnaliser le bouton de fermeture et définir des déclencheurs automatiques.

Remarque – La barre doit avoir un déclencheur pour qu’elle apparaisse. Si vous le laissez activé Rien il n’est pas affiché. Plus à ce sujet plus tard.

Divi Bars utilise le Divi Builder

Créez des mises en page comme d’habitude. Cela signifie que vous pouvez ajouter n’importe quel module du Divi Builder, y compris les formulaires de contact, la vidéo, la boutique, les images, l’inscription par e-mail, la carte, le portfolio, etc. Le remplissage et les bordures ont déjà été supprimés des sections et des lignes afin que la barre ne avoir un a prend beaucoup de place. Toutes les fonctions d’animation de Divi fonctionnent également.

Aucune mise en page de la bibliothèque Divi standard n’est utilisée, mais vous pouvez enregistrer et réutiliser vos mises en page dans la bibliothèque. Seuls ceux conçus pour les Divi Bars sont disponibles dans le Charger depuis la bibliothèque Languette.

Fond de Divi Bars

Dans la zone Arrière-plan de Divi Bars, vous pouvez choisir la couleur de l’arrière-plan et la police. Il en résulte uniquement des couleurs d’accompagnement avec un paramètre d’opacité. Je recommande d’utiliser les fonctionnalités d’arrière-plan des sections Divi Builder, mais c’est ici si vous le souhaitez.

Paramètres additionnels

Dans les paramètres supplémentaires, vous pouvez créer votre propre déclencheur de sélection CSS. Les listes déroulantes vous permettent d’afficher les barres Divi sur un côté ou sur des côtés spécifiques et de sélectionner la position. Vous pouvez également déplacer la page vers le haut ou vers le bas et choisir si les barres Divi sont définies.

Fermer les personnalisations du bouton

Dans les personnalisations du bouton Fermer, vous pouvez spécifier le nombre de jours pendant lesquels le cookie doit durer, afficher ou masquer le bouton Fermer et personnaliser le bouton. Les ajustements incluent la couleur du texte, la couleur d’arrière-plan, la taille de la police, le rayon du cadre et le remplissage. Il offre un aperçu lorsque vous apportez des modifications afin que vous puissiez les voir en temps réel.

Déclencheurs automatiques

Les déclencheurs automatiques vous permettent de choisir comment les afficher. Chaque déclencheur a ses propres paramètres. Si vous le laissez activé Rien il n’est jamais montré.

  • Choisir Retard chronométré Spécifiez ensuite combien de temps attendre l’apparition des Divi Bars. Pour toujours l’afficher, choisissez Temporisation et réglez le délai sur 0.
  • Choisir Pourcentage de défilement et spécifiez le nombre de pixels ou le pourcentage de défilement avant d’afficher la barre. Cela signifie que vous pouvez afficher la barre lorsque l’utilisateur atteint un certain point sur l’écran.
  • Choisir Fin intention pour afficher la barre lorsque l’utilisateur déplace la souris vers la barre d’adresse.

Vous pouvez également désactiver sur les appareils mobiles, afficher une seule fois lors du chargement d’une page, spécifier les pages à afficher et spécifier le moment où la barre est affichée. Vous pouvez définir la date et l’heure de début et de fin.

Modèles de Divi Bars

L’avantage d’utiliser Divi Builder est la facilité de création et de partage de modèles. Divi Bars dispose actuellement de 3 modèles. Voici un aperçu de chacun d’eux. Tout d’abord, importez-les comme ceci:

Importez les modèles avec le dans Divi Builder Outil de portabilité (les flèches haut et bas dans le coin droit du Divi Builder). Choisir ImporterAccédez à votre fichier et cliquez sur Importer la mise en page Divi Builder.

Si vous rencontrez des problèmes avec un rembourrage supplémentaire dans vos mises en page, vous devrez ajouter un rembourrage au CSS personnalisé de la section dans votre mise en page Divi Bars. Accédez à la section de votre disposition Divi Bars et ouvrez-la Avancée Tab. Placez votre CSS personnalisé dans le Élément principal Domaine.

Optin Email Divi Bars

Ce modèle contient un seul module de connexion par e-mail. J’ai ajouté un rembourrage sur l’onglet Avancé.

Je l’ai configuré pour pousser le contenu vers le bas pour révéler l’option e-mail au-dessus du menu. Il reste à l’écran pendant que l’utilisateur fait défiler. Cela profite de la Pack de mise en page pour agence de design.

C’est le même exemple mais maintenant j’ai ajouté une image d’arrière-plan.

Compte à rebours et bon Divi Bars

Le compte à rebours et le coupon utilisent un compte à rebours et un module de texte. Il comprend du CSS personnalisé.

J’ai configuré cela pour qu’il apparaisse au bas de la page. Ceci est utilisé dans cet exemple Pack de mise en page d’entreprise.

Voici à quoi cela ressemble lorsque le parcours standard de Divi est tourné de 90 degrés. La barre blanche au-dessus de la barre Divi provient de la mise en page.

Divi Bars Divi 3

Divi 3 affiche un module de texte et un bouton. J’ai ajouté un rembourrage sur l’onglet Avancé. Il est également livré avec un CSS personnalisé.

Voici Divi 3 avec son fond bleu et le bouton rouge.

Ici, j’ai ajouté l’image d’arrière-plan de l’en-tête et placé une superposition de dégradé.

Mon exemple de Divi Bars

J’ai ajouté un module de formulaire de contact avec une image. J’ai choisi de le montrer par le bas lorsque l’utilisateur atteint une certaine zone de pixels à l’écran. J’ai également stylisé le bouton de fermeture.

Voici le formulaire de contact dans le pack de mise en page de l’agence de design. J’ai ajouté une superposition et réduit l’opacité pour laisser apparaître une partie de l’arrière-plan. J’ai conçu le bouton du formulaire pour qu’il corresponde.

Utiliser plusieurs barres divi

Vous pouvez utiliser plusieurs barres en même temps. Il y a plusieurs moyens de le faire. Par exemple, vous pouvez en définir un pour le haut et un pour le bas. Ils peuvent survenir à des moments différents, dans des circonstances différentes ou en même temps.

Une autre option consiste à utiliser les caractéristiques de pixel ou de pourcentage. Vous pouvez afficher une barre pour la première partie de l’écran et une autre barre pour une autre partie de l’écran. Je ne recommande pas d’en avoir trop à la fois. Si vous utilisez plusieurs barres, je vous recommande de les garder petites.

Cet exemple utilise Divi 3 ci-dessus et Compte à rebours et coupon ci-dessous.

Dans le menu Divi Bars, il y a un écran où vous pouvez voir tous vos Divi Bars. Ici, vous pouvez ajouter, modifier, modifier et supprimer rapidement vos barres. Vous pouvez également copier les identifiants CSS et Menu pour créer vos propres déclencheurs manuels.

Les Divi Bars fonctionnent de la même manière avec Extra qu’avec Divi. Voici un aperçu de mon formulaire de contact en Extra avec le pack de mise en page de l’agence de design.

Licence et documentation

Il existe quatre licences disponibles:

  • Site unique – 15 $
  • 3 sites Web – 29 $
  • Sites Web illimités – 59 $
  • À vie – 129 $

Documentation est mis à disposition sur le site Web du développeur. Il comprend 6 étapes pour vous aider à démarrer rapidement et une vidéo plus détaillée de 16 minutes. Divi Bars est facile à utiliser, mais je recommande de regarder la vidéo.

Vous pouvez acheter des barres Divi à la Site Web du développeur.

Fin des pensées

J’aime les Divi Bars. Tout est intuitif sauf qu’il apparaît la première fois. Chaque barre est automatiquement définie pour ne pas apparaître tant que vous n’avez pas sélectionné un déclencheur. Ceci est utile car vous ne souhaitez pas afficher plusieurs barres simplement parce que vous les avez créées. Au début, je voulais un message quelque part qui attire l’attention sur ce fait, ou une option d’affichage oui / non. Une fois que vous avez suivi les étapes, cela a du sens.

Divi Bars est un excellent outil pour ajouter des barres de messages comme les clauses de non-responsabilité concernant les cookies, les informations sur les ventes, les actualités, les appels à l’action, etc. Cela fonctionne aussi bien pour l’expérience utilisateur que pour le marketing. Puisqu’il utilise le Divi Builder, les possibilités sont infinies.

Nous voulons de vos nouvelles. Avez-vous essayé Divi Bars? Faites-nous savoir ce que vous pensez dans les commentaires.

Image sélectionnée via venimo / shutterstock.com



Source link

Recent Posts