Téléchargez 5 styles d'arrière-plan dynamiques pour vos articles de blog Divi
Publié: 2018-10-25Nous sommes ici avec un autre téléchargement gratuit de Divi ! Cette fois, nous vous donnons un avant-goût de 5 styles d'arrière-plan dynamiques différents que vous pouvez utiliser pour les articles de blog sur votre site Web. Vous pouvez facilement combiner ces styles d'arrière-plan sur le même site Web pour donner une apparence différente aux différents articles de blog que vous publiez. En plus de vous offrir gratuitement tous ces styles d'arrière-plan dynamiques, nous allons également vous guider dans la création du modèle d'article de blog que vous pouvez réutiliser pour tout article de blog que vous créez et publiez sur votre site Web.
Allons-y !
Aperçu
Commençons par examiner les 5 résultats différents et la vue sur différentes tailles d'écran.
Téléchargez les styles d'arrière-plan dynamiques GRATUITEMENT
Pour mettre la main sur les styles d'arrière-plan vibrants, vous devrez d'abord les 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 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 !
Palettes de couleurs
Pour chacun des styles d'arrière-plan, vous pouvez trouver une palette de couleurs ci-dessous. Nous ferons référence au numéro de couleur tout au long du didacticiel, alors choisissez le style d'arrière-plan et la palette que vous souhaitez créer et partez de là.
Palette #1
- Couleur #1 : #886DFC
- Couleur #2 : #7C56BD
- Couleur #3 : #372C66
Palette #2
- Couleur #1 : #42bcb2
- Couleur #2 : #9CFEF0
- Couleur #3 : #a8baf7
Palette #3
- Couleur #1 : #96b2ff
- Couleur #2 : #d999ff
- Couleur #3 : #357ff4
Palette #4
- Couleur #1 : #B981FF
- Couleur #2 : #24EEFA
- Couleur #3 : #be7bf2
Palette #5
- Couleur #1 : #e02b20
- Couleur #2 : #f6ff56
- Couleur #3 : #db241e
Créer un nouveau message
Ajouter des détails et activer Divi Builder
Commençons depuis le début! Ajoutez une nouvelle page à votre site Web WordPress, ajoutez le titre de votre page, téléchargez une image en vedette et activez le Divi Builder.
Paramètres de la page Divi
Avant de passer à Visual Builder, apportez quelques modifications à la zone Paramètres de la page Divi en haut à droite de la page sur laquelle vous vous trouvez. Cela garantira que vous travaillez entièrement avec Divi pour créer la mise en page de l'article de blog. Si vous envisagez de réutiliser le modèle sur votre site Web, vous devrez vous rappeler de modifier ces paramètres chaque fois que vous créez un nouvel article de blog.
- Mise en page : pleine largeur
- Titre du message : Masquer
Basculer vers Visual Builder
Vous pouvez maintenant basculer vers Visual Builder.
Une fois cela fait, trois options apparaîtront sur votre écran. Cliquez sur le bouton bleu pour commencer à construire à partir de zéro.
Créer un design d'article de blog
Ajouter la section #1
Image de fond
Commençons à créer le modèle ! Commencez avec une section vide en haut. Ouvrez les paramètres de la section, accédez aux paramètres d'arrière-plan et téléchargez un style d'arrière-plan de votre choix. Vous pouvez trouver les 5 variantes en allant dans le dossier téléchargé > Hero .
- Taille de l'image d'arrière-plan : couverture
- Position de l'image d'arrière-plan : en haut au centre
Espacement
Pour permettre à l'image d'arrière-plan de s'afficher complètement, jouez avec le rembourrage supérieur de la section.
- Rembourrage supérieur : 660px
Ajouter la section #2
Espacement
Juste en dessous de la section que vous venez d'ajouter, allez-y et ajoutez-en une autre. Ouvrez les paramètres, accédez aux paramètres d'espacement et supprimez tous les rembourrages personnalisés par défaut.
- Rembourrage supérieur : 0px
- Rembourrage inférieur : 0px
Ajouter une nouvelle ligne
Structure des colonnes
Continuez en ajoutant une nouvelle ligne à la section en utilisant la structure de colonnes suivante :
Espacement
Supprimez ensuite tout le rembourrage par défaut au bas de la section.
- Rembourrage inférieur : 0px
Ajouter un module de titre de poste
Éléments
Il est temps de commencer à ajouter des modules ! Dans cette rangée, nous n'aurons besoin que d'un module de titre de poste. Après en avoir ajouté un, choisissez les éléments que vous souhaitez afficher.
Paramètres du texte du titre
Ensuite, allez dans les paramètres du texte du titre et apportez quelques modifications.
- Police du titre : Abril Fatface
- Alignement du texte du titre : Centre
- Taille du texte du titre : 73 px (ordinateur de bureau), 50 px (tablette), 40 px (téléphone)
Paramètres de méta-texte
Les paramètres de méta-texte doivent également être modifiés.
- Alignement du méta-texte : Centre
- Couleur du méta-texte : couleur n° 1 (rechercher dans la palette)
- Taille du méta-texte : 18px
- Hauteur de la ligne méta : 3 em
Ajouter la section #3
Image de fond
La dernière section de cette page contiendra le contenu de l'article de blog et le CTA. Commencez par télécharger le style d'arrière-plan de votre choix. Vous pouvez trouver les variations en allant dans le dossier téléchargé > Corps . Une fois que vous avez téléchargé l'image d'arrière-plan, apportez quelques modifications aux paramètres d'arrière-plan.
- Taille de l'image d'arrière-plan : taille réelle
- Position de l'image d'arrière-plan : en haut au centre
- Répétition de l'image d'arrière-plan : espace
Espacement
Supprimez tout le rembourrage supérieur par défaut de cette section pour éliminer tous les espaces entre cette section et la précédente.
- Rembourrage supérieur : 0px
Ajouter la ligne n° 1
Structure des colonnes
Continuez en ajoutant une nouvelle ligne à la section en utilisant la structure de colonnes suivante :
Couleur de l'arrière plan
Ajoutez une couleur de fond légèrement transparente à la ligne suivante.
- Couleur d'arrière-plan : rgba(255,255,255,0.86)
Espacement
Supprimez également le rembourrage personnalisé par défaut ici.
- Rembourrage supérieur : 0px
- Rembourrage inférieur : 0px
Ajouter un module de texte
Ajouter du contenu
Continuez en ajoutant un module de texte à la ligne que vous avez ajoutée. Ici, vous pouvez ajouter tout le contenu de l'article de blog que vous souhaitez et utiliser les différents styles de texte pour obtenir le résultat souhaité. Dans l'écran d'impression ci-dessous, nous utilisons des titres et des paragraphes.
Paramètres de texte
Accédez aux paramètres de texte et apportez-y quelques modifications.
- Taille du texte : 21 pixels (ordinateur de bureau), 18 pixels (tablette), 15 pixels (téléphone)
- Hauteur de la ligne de texte : 2 em
Paramètres de cap
Les paramètres du texte d'en-tête doivent également être modifiés.
- Police de titre : Abril Fatface
- Taille du texte de l'en-tête : 46 px (ordinateur de bureau), 40 px (tablette), 30 px (téléphone)
- Hauteur de la ligne de cap : 1,5 em
Espacement
Ajoutez ensuite des valeurs de remplissage personnalisées.
- Rembourrage supérieur : 80px
- Rembourrage inférieur : 80px
- Rembourrage gauche : 80 pixels (ordinateur de bureau), 40 pixels (tablette), 30 pixels (téléphone)
- Rembourrage droit : 80 pixels (ordinateur de bureau), 40 pixels (tablette), 30 pixels (téléphone)
Boîte ombre
Pour terminer, ajoutez une ombre de boîte subtile au module de texte. Cela apportera une certaine profondeur au modèle de publication de blog.
- Force du flou d'ombre de la boîte: 80px
- Force de propagation de l'ombre de la boîte : -14px
Ajouter la ligne n° 2
Structure des colonnes
Continuez en ajoutant une nouvelle ligne juste en dessous de la précédente en utilisant une colonne.
Espacement
Supprimez également tout le remplissage personnalisé par défaut de cette ligne.
- Rembourrage supérieur : 0px
- Rembourrage inférieur : 0px
Ajouter un module d'option de messagerie
Ajouter du contenu
Ensuite, ajoutez votre CTA. Nous utilisons un module d'option d'e-mail. Après l'avoir ajouté, modifiez le contenu.
Des champs
Nous n'utilisons que l'adresse e-mail dans ce module, alors allez-y et désactivez le prénom et le nom dans les paramètres des champs.
Fond dégradé
Continuez en ajoutant un arrière-plan dégradé au module Email Optin.
- Couleur 1 : Couleur #2 (Rechercher dans la palette)
- Couleur 2: Couleur #3 (Rechercher dans la palette)
- Direction du gradient : 144 degrés
Disposition
Ensuite, modifiez la disposition du module.
- Disposition : corps en haut, forme en bas
Paramètres de texte
Modifiez également les paramètres de texte.
- Orientation du texte : Centre
- Couleur du texte : clair
Paramètres du texte du titre
Ensuite, ouvrez les paramètres du texte du titre et apportez quelques modifications.
- Police du titre : Abril Fatface
- Taille du texte du titre : 54 px (ordinateur de bureau), 40 px (tablette), 35 px (téléphone)
Paramètres des boutons
Modifiez également l'apparence du bouton.
- Largeur de la bordure du bouton : 0px
- Rayon de la bordure du bouton : 0px
- Style de police : Souligné
- Style de soulignement : double
Espacement
Enfin, utilisez différentes valeurs de remplissage personnalisées dans les paramètres d'espacement du module Email Optin.
- Rembourrage supérieur : 100 pixels
- Rembourrage inférieur : 100px
- Rembourrage gauche : 300 pixels (ordinateur de bureau), 50 pixels (tablette et téléphone)
- Rembourrage droit : 300 pixels (ordinateur de bureau), 50 pixels (tablette et téléphone)
Enregistrer la mise en page dans la bibliothèque Divi pour la réutiliser
Il ne reste plus qu'à enregistrer la mise en page dans la bibliothèque Divi. De cette façon, vous pouvez également le réutiliser pour d'autres pages ! Vous pouvez également accéder aux articles de blog en tant que pages existantes lors de la création d'une nouvelle page.
Aperçu
Maintenant que nous avons parcouru toutes les étapes, jetons un dernier coup d'œil au résultat que nous avons créé.
Dernières pensées
Dans cet article, nous avons partagé avec vous des styles d'arrière-plan époustouflants et dynamiques que vous pouvez télécharger gratuitement. En plus de cela, nous vous avons également guidé dans la création du modèle de publication de blog à partir de zéro. N'hésitez pas à utiliser ces styles d'arrière-plan pour les modèles d'articles de blog que vous concevez vous-même. Si vous avez des questions ou des suggestions, assurez-vous de laisser un commentaire dans la section commentaires ci-dessous!