Comment créer une barre de promotion animée pour vos modèles de page dans Divi

Publié: 2019-11-23

Créer une barre de promotion animée pour votre modèle de page dans Divi peut être un excellent moyen de faire la publicité de produits et d'offres avec style sans avoir à compter sur un plugin. En utilisant les puissantes fonctionnalités de conception de Divi, vous pouvez créer visuellement la barre de promotion lors de la modification d'un modèle dans le générateur de thèmes de Divi. Ensuite, une fois que le modèle est prêt, la barre de promotion apparaîtra sur n'importe quelle page qui a été attribuée à ce modèle. Facile!

Allons-y et commençons !

Aperçu

Voici un aperçu de la barre de promotion que nous allons créer dans ce tutoriel.

Nous vous montrerons également comment rendre la barre promotionnelle fixe (ou collante).

Téléchargez GRATUITEMENT le modèle de page de barre de promotion

Pour mettre la main sur le modèle de page de barre de promotion de ce tutoriel, vous devrez d'abord le télécharger en utilisant le bouton ci-dessous. Pour accéder au téléchargement, vous devrez vous inscrire à notre liste de diffusion Divi Daily en utilisant le formulaire ci-dessous. En tant que nouvel abonné, vous recevrez chaque lundi encore plus de bienfaits Divi et un pack Divi Layout gratuit ! Si vous êtes déjà sur la liste, entrez simplement votre adresse e-mail ci-dessous et cliquez sur télécharger. Vous ne serez pas « réinscrit » ni ne recevrez d'e-mails supplémentaires.

Télécharger les fichiers

Télécharger gratuitement

Rejoignez la newsletter Divi et nous vous enverrons par e-mail une copie du pack ultime de mise en page de la page de destination Divi, ainsi que des tonnes d'autres ressources, trucs et astuces Divi incroyables et gratuits. Suivez-le et vous serez un maître Divi en un rien de temps. Si vous êtes déjà abonné, saisissez simplement votre adresse e-mail ci-dessous et cliquez sur télécharger pour accéder au pack de mise en page.

Vous vous êtes enregistré avec succès. Veuillez vérifier votre adresse e-mail pour confirmer votre abonnement et accéder aux packs de mise en page Divi hebdomadaires gratuits !

Pour importer la mise en page sur votre page, extrayez simplement le fichier zip et ajoutez l'un des fichiers json dans le générateur de thème Divi à l'aide de l'option Portabilité du générateur de thème.

Passons au tutoriel, voulez-vous ?

Abonnez-vous à notre chaîne Youtube

Ce dont vous avez besoin pour commencer

Pour commencer, vous devrez installer et activer le thème Divi. Assurez-vous d'avoir la dernière version de Divi.

Vous aurez également besoin d'au moins une page créée avec le Divi Builder à des fins de test afin d'attribuer le modèle de barre de promotion à cette page pour afficher le résultat.

Après cela, vous êtes prêt à partir.

Création d'une barre de promotion animée en haut d'un modèle de page

Création d'un nouveau modèle

Depuis le tableau de bord WordPress, accédez à Divi > Générateur de thèmes. Cliquez ensuite sur la case « Ajouter un nouveau modèle » pour créer un nouveau modèle.

Attribuez le modèle à la ou aux pages sur lesquelles vous souhaitez afficher la barre de promotion.

Sur le nouveau modèle, cliquez sur la zone « Ajouter un corps personnalisé » puis sélectionnez « Créer un corps personnalisé ».

REMARQUE : nous ajoutons la barre de promotion à la zone du corps du modèle (pas à l'en-tête) afin qu'elle puisse fonctionner avec l'en-tête par défaut de Divi ainsi qu'avec tous les en-têtes personnalisés que vous pourriez ajouter à l'avenir.

Sélectionnez ensuite l'option « Construire à partir de zéro ».

Ajout de la barre de promotion au modèle

À l'intérieur de l'éditeur de mise en page de modèles, nous pouvons commencer à créer la barre de promotion à l'aide de Divi Builder.

Commencez par ajouter une ligne à une colonne à la section régulière.

Paramètres de ligne

Avant d'ajouter un module, mettez à jour les paramètres de ligne comme suit :

Dégradé de fond à gauche : #4a42ec
Dégradé d'arrière-plan à droite : #521d91
Direction du gradient : 90 degrés
Utiliser une largeur de gouttière personnalisée : OUI
Largeur de gouttière : 1
Largeur : 100 %
Largeur maximale : 100 %
Remplissage : 0px en haut, 0px en bas

Cela prend en compte la couleur de fond et la largeur de la barre de promotion que nous créons.

Paramètres de colonne

Avant de quitter les paramètres de la ligne, cliquez pour ouvrir les paramètres de la colonne. Ajoutez ensuite le CSS personnalisé suivant à l'élément principal de la colonne :

display: flex;
align-items: center;
justify-content: center;

Ce CSS utilise la propriété flex pour aligner le contenu (ou les modules) dans la colonne à empiler horizontalement (côte à côte). Il centre également les modules dans la colonne à la fois verticalement et horizontalement. La raison pour laquelle nous procédons de cette manière est d'éviter d'avoir à utiliser plusieurs structures de lignes de colonnes qui s'empilent les unes sur les autres sur mobile. Avec cette configuration, le contenu restera dans un alignement horizontal sur toutes les largeurs de navigateur.

Nous sommes maintenant prêts à ajouter du contenu à la barre de promotion.

Ajout du module Blurb

Pour le contenu de cet exemple de promo, nous inclurons un module de présentation avec une petite icône et un blog de texte avec un bouton à droite (un peu comme la barre de promotion sur Elegantthemes.com).

Cliquez sur le cercle gris plus l'icône à l'intérieur de la ligne et ajoutez un module de présentation.

Pour le contenu du texte de présentation, saisissez ce qui suit :

Titre : [entrez le texte promotionnel]
Utiliser l'icône : OUI
Icône : icône cadeau (voir capture d'écran)

Mettez à jour les paramètres de conception du texte de présentation comme suit :

Couleur de l'icône : #ff4a9e
Placement des images/icônes : à gauche
Utiliser la taille de la police de l'icône : OUI
Taille de la police de l'icône : 16px
Taille du texte du titre : 16px (ordinateur de bureau), 14px (téléphone)
Hauteur de la ligne de titre : 1.3em
Largeur max : 230px (téléphone uniquement)
Rembourrage : 10px haut
Style d'animation : diapositive
Direction de l'animation : à droite
Délai d'animation : 250 ms

Ajout du module de boutons

Ajoutez ensuite un module de boutons sous le module de présentation. En raison de la propriété flex, le module apparaîtra à droite du texte de présentation plutôt qu'en dessous.

Mettez à jour les paramètres de conception des boutons comme suit :

Utiliser des styles personnalisés pour le bouton : OUI
Taille du texte du bouton : 15 px (ordinateur de bureau), 13 px (téléphone)
Couleur du texte du bouton : #ffffff
Largeur de la bordure du bouton : 0px
Rayon de bordure de bouton : 20px
Poids de la police du bouton : semi-gras

Marge (bureau): 20px à gauche
Marge (téléphone) : 10 pixels restants
Rembourrage (bureau) : 0px en haut, 0px en bas
Rembourrage (téléphone) : 2px en haut, 2px en bas, 8px à gauche, 8px à droite
Style d'animation : Rebond
Délai d'animation : 1000 ms

Paramètres de section

Pour terminer la conception de la barre promotionnelle, mettez à jour la section contenant la barre promotionnelle comme suit :

Remplissage : 0px en haut, 0px en bas
Style d'animation : Rebond
Direction de l'animation : vers le bas
Durée de l'animation : 500 ms
Délai d'animation : 250 ms
Opacité de démarrage de l'animation : 100 %
Indice Z : 999

Ajout du module de contenu de publication pleine largeur

À ce stade, la barre de promotion est prête à partir. Mais puisqu'il s'agit d'un modèle, nous devons nous assurer et ajouter le module de contenu de publication pour afficher le contenu de la ou des pages utilisant ce modèle.

Pour les pages qui sont (ou seront) construites à l'aide de Divi Builder, vous souhaiterez utiliser un module de contenu de publication pleine largeur afin de maximiser la zone de contenu.

(REMARQUE : pour les pages qui utilisent l'éditeur par défaut, vous souhaiterez utiliser un module de contenu de publication standard dans une section standard afin d'avoir une largeur maximale similaire de 1080px par défaut.)

Ajouter une section pleine largeur

Sous la section contenant votre barre de promotion, ajoutez une section pleine largeur.

Ajouter un module de contenu de publication pleine largeur

Sélectionnez ensuite le module de contenu de publication pleine largeur.

C'est à peu près le cas. Assurez-vous maintenant et enregistrez la mise en page avant de quitter l'éditeur.

Ensuite, enregistrez également les modifications pour le générateur de thème.

Résultat final

Avant

Voici maintenant la page avant d'attribuer le modèle avec la barre de promotion.

Après

Et voici la même page avec le nouveau modèle avec la barre de promotion.

Le voici sur mobile.

Voici l'animation de la barre de promotion au chargement de la page.

Rendre la barre promotionnelle collante

Pour que la barre de promotion colle sous l'en-tête Divi par défaut, nous pouvons ajouter un simple extrait CSS à la section contenant la barre de promotion.

Ouvrez les paramètres de la section et ajoutez le CSS suivant à l'élément principal sur le bureau :

position: fixed;
width: 100%;

Ajoutez ensuite le CSS suivant à l'élément principal de la tablette :

position: relative;

Vérifiez maintenant le résultat.

N'oubliez pas les liens

Une fois la barre de promotion créée, vous souhaiterez ajouter l'URL du lien vers l'offre ou la page promotionnelle. Vous pouvez ajouter l'URL du lien du bouton dans l'onglet de contenu des paramètres du bouton.

Pour les conversions même été, vous pouvez également ajouter l'URL du lien à toute la ligne, sous l'option de lien des paramètres de ligne.

Dernières pensées

Dans ce tutoriel, nous vous avons montré comment concevoir une barre de promotion (à partir de zéro) à l'aide du Divi Theme Builder. La barre de promotion est complète avec de multiples animations et conceptions pour la faire vraiment se démarquer auprès des visiteurs. Vous pouvez même faire en sorte que la barre de promotion soit fixe lorsque vous faites défiler la page pour encore plus de visibilité. Et avec la possibilité de contrôler où la barre de promotion apparaît sur votre site, l'application est extrêmement pratique.

J'espère que cela vous incitera à créer vos propres barres promotionnelles.

J'ai hâte de vous entendre dans les commentaires.

À votre santé!