Comment diviser l'écran de votre modèle de publication de blog avec le générateur de thème de Divi

Lors de la création d'un site Web, il y a de fortes chances que vous incluiez une page de blog et des articles de blog. Bien sûr, la partie la plus importante d'une stratégie de blog est de créer un contenu de blog de haute qualité, mais la partie conception de tout cela joue également un rôle important dans le succès de votre stratégie. Lors de la création d'un site Web avec Divi, vous pouvez rationaliser l'apparence de vos articles de blog dans Divi Theme Builder en créant un modèle de publication avec un contenu dynamique. Nous partageons régulièrement des modèles d'articles de blog sur notre blog qui vous aident à accélérer le processus, mais si vous cherchez spécifiquement à créer un article de blog en écran partagé, vous adorerez cet article. Nous vous montrerons étape par étape comment procéder et vous pourrez également télécharger le fichier modèle JSON gratuitement !

Allons-y.

Aperçu

Avant de plonger dans le didacticiel, jetons un coup d'œil rapide au résultat sur différentes tailles d'écran.

Bureau

Mobile

Téléchargez GRATUITEMENT le modèle de publication de blog en écran partagé

Pour mettre la main sur le modèle de publication de blog gratuit en écran partagé, vous devez d'abord le télécharger à l'aide du 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 !

1. Accédez à Divi Theme Builder et ajoutez un nouveau modèle de publication

Accédez à Divi Theme Builder et ajoutez un nouveau modèle

Commencez par vous rendre sur le Divi Theme Builder. Une fois là-bas, ajoutez un nouveau modèle.

Utiliser le modèle sur tous les messages

Utilisez le nouveau modèle sur tous vos messages.

• Utiliser sur : tous les messages

Commencer à créer le corps du modèle

Et commencez à créer le corps du modèle.

2. Construire le corps du modèle d'article de blog

Paramètres de section

Espacement

Une fois dans l'éditeur de modèles, vous remarquerez une section. Ouvrez ses paramètres, passez à l'onglet Conception et supprimez tous les rembourrages supérieur et inférieur par défaut.

• Rembourrage supérieur : 0px
• Rembourrage inférieur : 0px

Ajouter une nouvelle ligne

Structure des colonnes

Continuez en ajoutant une nouvelle ligne en utilisant la structure de colonnes suivante :

Dimensionnement

Sans ajouter encore de modules, ouvrez les paramètres de ligne et modifiez les paramètres de dimensionnement comme suit :

• Utiliser une largeur de gouttière personnalisée : Oui
• Largeur de gouttière : 1
• Égaliser les hauteurs de colonne : Oui
• Largeur : 100 %
• Largeur maximale : 100 %
• Hauteur minimale : 100 vh (ordinateur de bureau), automatique (tablette et téléphone)
• Hauteur maximale : 100 vh (ordinateur de bureau), aucun (tablette et téléphone)

Espacement

Supprimez ensuite tous les rembourrages supérieur et inférieur par défaut.

• Rembourrage supérieur : 0px
• Rembourrage inférieur : 0px

Débordements

Et définissez les débordements de la ligne sur masqués.

• Débordement horizontal : masqué
• Débordement vertical : caché

Paramètres de la colonne 1

Fond dégradé

Ensuite, ouvrez les paramètres de la colonne 1 et ajoutez un fond dégradé.

• Couleur 1 : rgba(255,255,255,0)
• Couleur 2: #000000
• Type de dégradé : Linéaire
• Placer le dégradé au-dessus de l'image d'arrière-plan : Oui

Image de fond

Nous utilisons l'image vedette dynamique comme image d'arrière-plan pour la colonne suivante.

• Image d'arrière-plan : image en vedette

Paramètres de la colonne 2

Espacement

Ensuite, nous allons ouvrir les paramètres de la colonne 2 et ajouter des valeurs de remplissage personnalisées aux paramètres d'espacement.

• Rembourrage supérieur : 8 %
• Rembourrage inférieur : 8 %
• Rembourrage gauche : 8%
• Rembourrage droit : 8 %

Débordements

Pour permettre aux gens de faire défiler la deuxième colonne, où le contenu de la publication et la zone de commentaire apparaîtront, nous allons modifier le débordement vertical dans les paramètres de visibilité.

• Débordement vertical : défilement (bureau), visible (tablette et téléphone)

Ajouter un module de titre de message à la colonne 1

Éléments

Il est temps d'ajouter des modules, en commençant par un module de titre de publication dans la colonne 1. Désactivez l'option d'image en vedette dans les paramètres des éléments.

• Afficher l'image en vedette : Non

Paramètres du texte du titre

Passez à l'onglet Conception et modifiez les paramètres de texte H1 en conséquence :

• Titre Titre Niveau : H1
• Police du titre : Work Sans
• Poids de la police du titre : gras
• Couleur du texte du titre : #ffffff
• Taille du texte du titre : 60 px (ordinateur de bureau), 45 px (tablette), 35 px (téléphone)
• Espacement des lettres du titre : -1px
• Hauteur de la ligne de titre : 1,2 em

Paramètres de méta-texte

Modifiez ensuite les paramètres de méta-texte.

• Meta Font: Work Sans
• Style de police Meta : majuscule
• Couleur du méta-texte : #eaeaea
• Espacement des lettres méta : 2px

Dimensionnement

Ensuite, modifiez la largeur sur différentes tailles d'écran.

• Largeur : 81 % (ordinateur de bureau), 100 % (tablette et téléphone)

Espacement

Ajoutez ensuite des valeurs de remplissage réactif.

• Rembourrage supérieur : 8 % (tablette et téléphone uniquement)
• Rembourrage inférieur : 8 % (tablette et téléphone uniquement)
• Rembourrage gauche : 7 % (tablette), 8 % (téléphone)
• Rembourrage droit : 7 % (tablette), 8 % (téléphone)

Position

Et complétez les paramètres du module en modifiant les paramètres de position comme suit :

• Position : Absolu (ordinateur de bureau), par défaut (tablette et téléphone)
• Emplacement : En bas au centre
• Décalage vertical : 10 %

Ajouter un module de contenu de publication à la colonne 2

Passons à la colonne suivante. Là, le premier module dont nous avons besoin est un module de contenu post. Ce module affichera dynamiquement le contenu de votre article.

Paramètres de texte d'en-tête

Apportez quelques modifications aux paramètres de texte d'en-tête du module.

• Police de titre : Work Sans
• Poids de la police d'en-tête : semi-gras
• Taille du texte de l'en-tête :
  • H2 : 40px
  • H3 : 30px
  • H4 : 25px
  • H5 : 16px
  • H6 : 14 pixels
• Espacement des lettres d'en-tête : -1px (H2, H3 et H4)

Classe CSS

Et ajoutez une classe CSS. Dans la prochaine étape de ce didacticiel, nous utiliserons cette classe CSS pour générer de l'espace entre les titres et les paragraphes.

• Classe CSS : blog-post-content

Ajouter le module de code à la colonne 2

Ajouter un code CSS pour l'espace entre les paragraphes et les en-têtes

Ajoutez un module de code juste en dessous du module de contenu de publication et ajoutez les lignes de code CSS suivantes pour générer de l'espace entre les en-têtes et les paragraphes :

<style>
.blog-post-content h1,
.blog-post-content h2,
.blog-post-content h3,
.blog-post-content h4,
.blog-post-content h5,
.blog-post-content h6
{
margin-top: 20px;
margin-bottom: 20px;
}
</style>

Ajouter un module de commentaires à la colonne 2

Paramètres des champs

Le prochain et dernier module dont nous avons besoin dans la colonne 2 pour terminer ce didacticiel est un module de commentaires. Modifiez les paramètres des champs du module en conséquence :

• Couleur d'arrière-plan des champs : #ffffff
• Couleur du texte des champs : #000000
• Remplissage supérieur des champs : 30 px
• Remplissage inférieur des champs : 30 px
• Remplissage gauche des champs : 30 px
• Remplissage à droite des champs : 30 px
• Police des champs : Work Sans

• Style de police des champs : majuscule
• Taille du texte des champs : 15px
• Espacement des lettres des champs : 3px
• Champs coins arrondis : 10px (tous les coins)

• Force du flou d'ombre de la boîte de champs : 30px
• Couleur de l'ombre de la boîte des champs : rgba(0,0,0,0.06)

Paramètres du texte du nombre de commentaires

Ensuite, modifiez les paramètres du texte du nombre de commentaires.

• Police du nombre de commentaires : Work Sans
• Poids de la police du nombre de commentaires : gras

Paramètres du texte du titre du formulaire

Modifiez également les paramètres du texte du titre du formulaire.

• Titre du formulaire Niveau d'en-tête : H3
• Police du titre du formulaire : Work Sans
• Poids de la police du titre du formulaire : demi-gras

Paramètres de méta-texte

Ensuite, nous apporterons quelques modifications aux paramètres de méta-texte.

• Meta Font: Work Sans
• Poids de la police Meta : semi-gras
• Couleur du méta-texte : #000000

Paramètres des boutons

Ensuite, nous allons styliser le bouton en conséquence :

• Utiliser des styles personnalisés pour le bouton : Oui
• Taille du texte du bouton : 16px
• Couleur du texte du bouton : #ffffff
• Couleur d'arrière-plan du bouton : #000000
• Largeur de la bordure du bouton : 0px
• Rayon de la bordure du bouton : 100 pixels

• Espacement des lettres des boutons : 2px
• Police des boutons : Work Sans
• Style de police des boutons : majuscules

• Rembourrage du dessus des boutons : 2 %
• Rembourrage du bas des boutons : 2 %
• Rembourrage du bouton gauche : 5 %
• Rembourrage du bouton droit : 5 %

Espacement

Nous ajouterons également une marge supérieure.

• Marge supérieure : 15 %

Corps du commentaire CSS

Et nous allons compléter les paramètres du module en ajoutant une ligne de code CSS au corps du commentaire du module dans l'onglet avancé.

margin-top: 50px

3. Enregistrer les modifications apportées au générateur de thème et afficher le résultat

Maintenant que nous avons terminé le modèle d'article de blog, il ne reste plus qu'à enregistrer toutes les modifications apportées à Divi Theme Builder et à afficher le résultat sur nos articles de blog !

Aperçu

Maintenant que nous avons parcouru toutes les étapes, jetons un dernier coup d'œil au résultat sur différentes tailles d'écran.

Bureau

Mobile

Dernières pensées

Dans cet article, nous vous avons montré une approche différente pour créer un modèle de publication de blog pour votre site Web Divi. Plus précisément, nous vous avons montré comment créer une conception de modèle de publication de blog en écran partagé à l'aide du générateur de thèmes de Divi et du contenu dynamique. Nous vous avons guidé étape par étape tout au long du processus et avons ajouté un fichier JSON que vous avez également pu télécharger gratuitement ! Si vous avez des questions ou des suggestions, n'hésitez pas à laisser un commentaire dans la section commentaires ci-dessous.

Si vous souhaitez en savoir plus sur Divi et obtenir plus de cadeaux Divi, assurez-vous de vous abonner à notre newsletter par e-mail et à notre chaîne YouTube afin que vous soyez toujours l'une des premières personnes à connaître et à tirer parti de ce contenu gratuit.