Téléchargez un design de bannière de vente polyvalent GRATUIT pour Divi

Avoir une bannière de vente polyvalente sera certainement utile (et vous fera gagner du temps) pendant ces périodes cruciales de l'année où les promotions font fureur. C'est pourquoi nous proposons cette bannière de vente polyvalente pour Divi en téléchargement GRATUIT ! Cette bannière de vente peut facilement être personnalisée pour répondre à vos besoins avec seulement quelques ajustements de texte et une image d'arrière-plan. Concevoir la bannière de vente dans Divi est assez simple pour que vous n'ayez pas à vous contenter de bannières d'images qui ont souvent l'air un peu granuleuses sur le web. Alors, en plus du téléchargement gratuit, je vais vous montrer comment concevoir la bannière de vente dans Divi à partir de zéro.

Commençons!

Ce qui est inclu

Voici un aperçu de la conception de la bannière de vente incluse dans le téléchargement.

Téléchargez le design de la bannière de vente GRATUITEMENT

Pour mettre la main sur le design de la bannière de vente gratuitement, 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.

TÉLÉCHARGER

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 !

Charger la mise en page dans la bibliothèque Divi

Après avoir téléchargé le fichier, décompressez-le. Vous constaterez qu'il contient un fichier nommé « sales-banner-design.json ». C'est ce que vous allez charger dans votre bibliothèque Divi. Accédez maintenant à votre tableau de bord wordpress et accédez à Divi> Bibliothèque Divi. Cliquez ensuite sur le bouton importer en haut de la page. Dans la fenêtre contextuelle de portabilité, sélectionnez l'onglet Importer et choisissez le fichier sales-banner-design.json. Cliquez ensuite sur le bouton Importer les mises en page Divi Builder.

Maintenant, pour importer la mise en page sur votre page, créez simplement une nouvelle page et déployez le générateur visuel. Sélectionnez ensuite « Choisir une mise en page prédéfinie ». Dans la fenêtre contextuelle de chargement à partir de la bibliothèque, sélectionnez l'onglet « Vos mises en page enregistrées », puis cliquez sur la mise en page Conception de bannière de vente dans la liste. C'est ça!

Comment créer la bannière de vente à partir de zéro dans Divi

Ajout de l'arrière-plan de la section

Pour commencer, créez une nouvelle page. Après avoir donné un titre à votre page, déployez le générateur visuel et sélectionnez l'option « Créer à partir de zéro ». Ajoutez ensuite une nouvelle section avec une ligne à une colonne.

Avant de commencer à ajouter des modules à la ligne, donnez à votre section une couleur de dégradé d'arrière-plan (la couleur n'a pas d'importance à ce stade. Nous avons juste besoin d'une couleur d'arrière-plan pour voir tous les éléments de conception blancs que nous utiliserons pour nos ventes bannière.)

Personnalisation des lignes de la bannière de vente

Avant d'ajouter nos modules à la rangée, donnons d'abord à notre rangée une largeur personnalisée de 700px et supprimons tout espacement supérieur ou inférieur afin que notre rangée repose bien sur l'autre rangée que nous ajouterons en dessous. Accédez aux paramètres de ligne et mettez à jour les éléments suivants :

Largeur personnalisée : 700 px
Largeur de gouttière : 1
Marge personnalisée : 0px en haut, 0px, en bas
Remplissage personnalisé : 0px en haut, 0px en bas

Dupliquez maintenant la ligne deux fois pour obtenir un total de trois lignes identiques. Ceux-ci seront utilisés pour construire notre bannière de vente.

Ajout du cadre de bordure supérieur avec du texte adjacent

Pour créer notre bannière de vente, nous commençons par une bordure supérieure avec du texte à gauche. Pour ce faire, nous utiliserons un module diviseur et un module texte. Tout d'abord, créez un nouveau module de texte et ajoutez quelques mots de contenu dans la zone de contenu.

Contenu : « En ligne uniquement »

Passez à l'onglet Conception et mettez à jour les éléments suivants :

Poids de la police de texte : gras
Style de police de texte : TT
Couleur du texte du texte : rgba(255,255,255,0.9)
Taille du texte du texte : 15px
Espacement des lettres du texte : 2px
Hauteur de la ligne de texte : 1 em
Largeur : 22 % (ordinateur de bureau), 25 % (tablette), 40 % (smartphone)
Alignement du module : à gauche
Marge personnalisée : 0 px en haut, -15 px en bas
Rembourrage personnalisé : 0px en haut, 0px en bas

Cette marge personnalisée est un peu prématurée puisque notre intercalaire n'a pas encore été ajouté, mais il est nécessaire d'aligner le texte pour qu'il soit parfaitement adjacent à l'intercalaire qui sera bientôt ajouté.

Ajoutez maintenant un module de séparation sous le module de texte dans la même rangée. Mettez ensuite à jour les paramètres du diviseur comme suit :

Couleur : rgba(255,255,255,0.9)
Position du diviseur : en bas
Poids du diviseur : 15px
Hauteur : 15px
Largeur : 78 % (ordinateur de bureau), 75 % (tablette), 60 % (smartphone)
Alignement du module : à droite
Marge personnalisée : 0px en haut, 0px en bas
Rembourrage personnalisé : 0px en haut, 0px en bas

Bien sûr, vous devrez ajuster la largeur de votre bordure en fonction de la largeur de votre module de texte lors de la personnalisation du design selon vos propres besoins.

Ensuite, nous devons ajouter un module de séparation supplémentaire pour connecter notre séparateur à la bordure droite de la rangée que nous allons concevoir ensuite.

Pour cela, dupliquez le module diviseur et mettez à jour les éléments suivants :

Largeur : 15px
Marge personnalisée : -1px en bas

Ajout du cadre de bordure inférieur avec du texte adjacent

Pour créer le cadre de bordure inférieur, nous pouvons utiliser le même élément que nous avons créé dans le cadre de bordure supérieur de notre rangée supérieure. Seulement cette fois, nous allons commencer avec le module diviseur de 15px de large. Allez-y et copiez le module diviseur 15px et collez-le dans la troisième ligne (en bas). Ensuite, mettez à jour l'alignement du module à gauche au lieu de droite.

Ensuite, copiez le module de séparation le plus long de la rangée du haut et collez-le sous le séparateur de 15 pixels de la rangée du bas. Réglez ensuite les éléments suivants :

Largeur : 75 % (ordinateur de bureau), 70 % (tablette), 50 % (smartphone)
Alignement du module : à gauche

Enfin, copiez le module de texte de la rangée du haut et collez-le sous les deux modules de séparation de la rangée du bas. Ensuite, mettez à jour les éléments suivants :

Contenu : « Commence le 1er novembre »
Largeur : 25 % (ordinateur de bureau), 30 % (tablette), 50 % (smartphone)
Alignement du module : à droite
Marge personnalisée : -15 px en haut, 0 px en bas
Rembourrage personnalisé : 15 pixels restants

Ajout des modules de texte à la rangée du milieu

Nous sommes maintenant prêts à commencer à ajouter les modules de texte à notre rangée du milieu qui contiendra le texte de notre bannière de vente principale. Nous allons empiler trois modules de texte les uns sur les autres. Allez-y et ajoutez le premier module de texte à la rangée du milieu.

Ensuite, mettez à jour les éléments suivants :

Contenu : « Tous 20 % de réduction »
Couleur d'arrière-plan : rgba (255,255,255,0.9)

Poids de la police de texte : demi-gras
Style de police de texte : TT
Texte Couleur du texte : #000000
Taille du texte : 34 pixels (ordinateur de bureau), 20 pixels (smartphone)
Espacement des lettres du texte : 2px
Hauteur de la ligne de texte : 1 em
Orientation du texte : Centre
Rembourrage personnalisé : 2vw en haut, 2vw en bas, 5vw à gauche, 5vw à droite

Donner au texte une couleur noire sur un fond blanc est essentiel pour maximiser l'effet du mode de fusion de l'écran qui permettra au texte de se fondre avec l'arrière-plan de la section. Nous ajouterons le mode de fusion d'écran à la ligne un peu plus tard.

Dupliquez maintenant le module de texte pour démarrer la conception du prochain module de texte. Mettez ensuite à jour le contenu avec le code html suivant :

<h2 style="border: 7px solid #000000;">Fall Sale</h2>

Le style en ligne ajoute simplement une bordure noire autour du texte du titre. Encore une fois, la couleur noire fonctionnera avec le mode de fusion d'écran pour exposer l'arrière-plan de la section avec le texte.

Ensuite, mettez à jour les éléments suivants :

Poids de la police de l'en-tête 2 : gras
Titre 2 Style de police : TT
Titre 2 Couleur du texte : #000000
Titre 2 Taille du texte : 100px (ordinateur de bureau), 80px (tablette), 60px (smartphone)
Espacement des lettres de l'en-tête 2 : 2px
Marge personnalisée : 0px en haut
Rembourrage personnalisé : 0px en haut, 0px en bas

Pour le dernier module de texte, dupliquez le premier module de texte dans cette rangée du milieu et collez-le sous le deuxième module de texte.

Ensuite, mettez à jour les éléments suivants :

Contenu : « Achetez maintenant »
Style de police de texte : TT, U (souligné)
Marge personnalisée : 0px en haut
Rembourrage personnalisé : haut 1vw, bas 2vw

Styliser la rangée du milieu

La phase finale de cette conception consiste à ajouter une bordure à la rangée du milieu et un effet de mode de fusion d'écran. Pour ce faire, ouvrez les paramètres de la ligne du milieu et mettez à jour les éléments suivants :

Rembourrage personnalisé : 15 px à gauche, 15 px à droite
Largeur de la bordure droite : 15 px
Couleur de la bordure droite : rgba (255,255,255,0.9)
Largeur de la bordure gauche : 15 px
Couleur de la bordure gauche : rgba (255,255,255,0.9)
Mode de fusion : écran

Le mode de fusion d'écran permet au texte de fusionner l'image d'arrière-plan pour apparaître à travers le texte pour un effet sympa !

Découvrez le résultat final.

Ajouter un lien à votre bannière de vente

Puisqu'il s'agit d'une bannière de vente, vous souhaiterez maximiser l'espace cliquable sur la bannière pour augmenter les conversions. Pour ce faire, vous pouvez ajouter un lien sur toute la rangée du milieu. Ouvrez simplement les paramètres de la ligne du milieu et entrez une URL de lien de ligne pour rediriger vers la page souhaitée.

Ajout de différents arrière-plans de section pour des conceptions uniques

Avec ce nouveau design de bannière de vente, vous pouvez facilement mettre à jour l'image d'arrière-plan pour créer des designs uniques.

Voici quelques exemples.

Dernières pensées

J'espère que cette conception de bannière de vente sera utile pour toutes les promotions Web nécessaires tout au long de l'année. La conception est conçue pour servir de bannière de vente polyvalente qui peut facilement être mise à jour avec de nouveaux textes et images d'arrière-plan de section pour un tout nouveau look. Vous pouvez même ajouter un arrière-plan vidéo !

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

À votre santé!