Quoi de plus simple et visuel pour attirer l’oeil de vos visiteurs qu’une barre de notification tout en haut de votre site?

Vous avez surement vu celle de Divi Community avec la promo sur la licence annuelle de Divi?

Et bien sachez que vous pouvez faire exactement la même avec le plugin Divi Bars. C’est un plugin premium de Tim Stiffer de Divi Life ( Divi Overlays est de lui aussi).

Celui-ci propose en effet de construire des barres de notifications, d’appel à l’action, d’op-tins et quasiment tout ce que vous voulez avec le Divi Builder. Cerise sur le gâteau, vous pouvez définir quand et ou s’affiche ces barres suivant un horaire, une page, le pourcentage de scroll de l’écran…

Voici un exemple de ce qui est possible:

divi bars exemples

Plutôt sympa non?

Si vous voulez l’utiliser sur votre site il va donc falloir vous le procurer.

Suivant la licence pour laquelle vous opterez, il vous en coutera le prix suivant:

prix divi bars

 

Pour télécharger Divi Bars, cliquez sur le bouton ci-dessous:

 

Une fois que vous aurez effectué votre achat, rendez-vous sur votre compte Divi Life dans l’onglet API Download et cliquez sur Download.

divi bars download
Le plugin est fourni avec dfférents templates (des barres déjà toutes prêtes) que vous pourrez trouver dans l’onglet Download de votre compte:

templates divi bars
Vous avez par exemple des comptes à rebours, des opt-ins ou une barre standard avec texte et bouton.
Téléchargez les templates qui vous intéresse pour les utiliser et personnaliser ensuite sur votre site.
Une fois Divi Bars installé et activé sur votre site, vous verrez apparaitre dans l’administration un onglet “Divi Bars”:

onglet divi bars
Pas de piège ici :
  • l’onglet Divi Bars listera toutes les barres que vous avez crée
  • l’onglet Add New vous permet de créer une nouvelle barre
  • l’onglet Settings (options) vous permet de définir le fuseau horaire ainsi qu’une classe CSS particulière pour nos barres

Nous allons maintenant créer notre première barre de notification. Cliquez sur Add New.

Nous voila sur l’écran d’ajout de notre barre. Cliquez sur “Utiliser le générateur Divi” pour avoir accès au builder.

Et maintenant?

Et bien vous faites comme d’habitude, vous avez accès à tous les modules classiques!

Je vais vous montrer l’exemple de la barre de Divi Community. Voici les modules que j’utilise:

 

bars divi community

Un module texte standard avec ma phrase affichée sur la barre ainsi qu’un module bouton.

Simple non?

Le plugin offre toutefois des réglages d’affichage un peu avancés. Les voici:

 

options supplementaires divi bars

  • CSS Selector Trigger: vous pouvez définir ici une classe CSS particulière pour votre barre
  • All Pages: vous pouvez choisir ici d’afficher votre barre sur toutes les pages ou seulement certaines en particulier
  • Position: vous pouvez affichez votre barre tout en haut ou tout en bas de votre site
  • Push Page up/down: si vous cochez cette option, la barre va se mettre soit au dessus soit en dessous du contenu (l’option par défaut), sinon elle va se superposer à votre menu ou footer.
  • Do not fix to top: cocher cette option si vous voulez que votre barre ne soit pas fixe sur l’écran (elle disparaitra si le visiteur scroll vers le bas)

 

close divi bars

  • Close Button Cookie: utile suivant ce que vous allez définir comme option de répétition d’affichage pour votre barre: une fois par jour, par page, par utilisateur…
  • Hide Main Close Button: n’affiche pas le bouton “Fermer” de la barre. Elle sera donc tout le temps visible
  • Customize Close Button: en cochant cette option, vous allez pouvoir personnaliser la taille de votre croix “X”, sa couleur et ses marges.

 

automatic triggers divi bars

Ici vous avez accès au option d’affichage et/ou de répétition:

  • Timed Delay: vous avez le choix entre afficher votre barre après x secondes (mettez 0 pour qu’elle s’affiche au chargement de la page), après x% de scroll de la part du visiteur (par exemple au bout de 50% la barre s’affiche), au moment ou l’utilisateur à l’intention de quitter votre site, ou de ne pas l’afficher avec “none”.
  • Disable on Mobile: si vous cochez cette option votre barre ne sera pas affichée sur les téléphones
  • Display Once per page load: Affiche votre barre une fois par page même si vous rechargez la page.
  • Enable Scheduling: cette option vous permet de définir des dates d’affichage pour votre barre. Très utile pour afficher des promotions sur vos produits par exemple..

 

divi bars background

Vous pouvez définir ici une couleur de fond d’écran pour la barre ainsi que la couleur de la police si vous ne l’avez pas fait dans les modules du Divi Builder.

Utiliser les templates à télécharger sur Divi Life

Je vous ai parlé des templates fournis lors de l’achat du plugin. Et bien pour les utiliser, il va falloir les importer.

Pour cela créer une nouvelle barre, activez le Visual Builder et cliquez sur l’onglet suivant en haut à droite du builder :

importer divi builder

Une nouvelle fenêtre s’ouvre. Cliquez sur “Importer” et choisissez l’un des fichiers que vous avez téléchargé sur Divi Life:

 

importer templates divi bars

Et voila, la barre est maintenant chargée dans votre Divi Builder et vous n’avez plus qu’à la modifier suivant vos besoins.

 

Pour télécharger Divi Bars:

Mon avis

Un plugin pas forcément évidemment à prendre en main sans les layouts fournis à l’achat (cela dit on s’en sort quand même), mais qui permet de mettre en avant très simplement un produit, un article ou un formulaire de capture d’emails.

Je le recommande donc à tout ceux qui cherchent à créer ce type d’effet sans notion de code.

Mettez nous en commentaire les barres que vous avez crée avec le plugin pour montrer aux internautes ce qu”il est possible de faire 😉

D'autres tutoriels pouvant vous intéresser