Comment créer une page de blog dans Divi

En règle générale, chaque pack thématique contient une mise en page de blog, qui vous permet de rendre rapidement votre blog opérationnel. Cependant, avez-vous déjà souhaité savoir comment est construite l’une de ces pages de blog ? Dans cet article, nous utiliserons l'une de ces mises en page de blog pour démontrer comment utiliser le module blog de Divi pour créer une page de blog. Nous vous guiderons pas à pas à travers chaque paramètre.

Commençons!

Aperçu de la conception

Créer une page

Tout d’abord, allez dans Pages>Ajouter un nouveau et créez une nouvelle page.

Par conséquent, donnez un titre à la page qui vous semble plausible. J'utilise le nom de page Acai Blog Page du pack de mise en page. Dans la barre latérale droite, sélectionnez les propriétés de page de votre choix. Je garde les attributs seuls.

Créer des sites Web incroyables

Avec le meilleur constructeur de page Elementor

Commencer Maintenant

Titre de la page: Page du blog sur l'açaï

Passer à Divi Builder

Ensuite, vous souhaiterez passer au Divi Builder. Utilisez Divi Builder en cliquant sur le bouton violet au centre de la page. Cela vous mènera au front-end, où le Divi Builder sera actif, prêt à ce que nous commencions à créer la page.

Section Héros Avec Titre

Section Héros de style

Nous commencerons par la première section. Ouvrez les options de la section.

Apportez quelques modifications aux paramètres de la section.

Contexte: #f9f3fd
Étiquette d'administrateur:Blog

Titre de la page du blog

Ensuite, nous créerons une ligne pour le titre. Sélectionnez la ligne avec le signal vert avec une seule colonne.

Ajoutez ensuite un module de texte.

Styliser le module de texte

Ouvrez le paramètre de texte et apportez les modifications suivantes pour l'en-tête H1.

Police: Titre 1
Texte: Notre blog

Passez maintenant à l’onglet Conception et effectuez les modifications ci-dessous.

Alignement du texte:Centre
Texte du titre: H1
Police: Cormorant Infant
Poids:Gras

Modifiez également la couleur, la taille et la hauteur de la police.

Couleur: #442854
Taille du texte sur le bureau: 130px
Hauteur de ligne: 0,8em

Modifiez maintenant la taille du texte du titre.

Taille du texte sur la tablette: 60px

Modifiez maintenant la taille de l'icône du téléphone.

Téléphone : 40px

Créez le dernier article de blog et le CTA

Notre zone des héros présente la publication la plus récente et un formulaire de courrier électronique d'inscription. Créez une nouvelle ligne sous notre première ligne et choisissez la conception en colonne avec les deux tiers à gauche et un tiers à droite.

Ouvrez le paramètre de ligne et modifiez l'espacement à partir de l'onglet Conception.

Rembourrage inférieur: 0px

Module d'articles de blog en vedette

Suite à cela, nous fournirons un module Blog. Cette section contiendra notre contenu le plus récent. Ajoutez le module Blog en cliquant sur l'icône d'ajout grise dans la colonne de gauche de notre nouvelle ligne.

Sous Paramètres de contenu, saisissez 1 pour le bloc Post Count.

Nombre de messages: 1

Éléments

Dans l'onglet Contenu, descendez jusqu'à la section Éléments et décochez l'auteur et la pagination.

Afficher l'auteur: Non
Afficher la pagination:non

Mise en page

Sous l’onglet Conception, modifiez les paramètres de mise en page et de superposition.

Mise en page: Pleine largeur
Superposition d'images en vedette: désactivée

Texte du titre

Modifiez maintenant le texte du titre en fonction des paramètres suivants.

Niveau de titre: H2
Police: Cormorant Infant
Poids:Gras
Couleur: #442854

Modifiez également la taille de la police.

Taille : ordinateur de bureau 30 px, tablette 20 px, téléphone 18 px
Hauteur de la ligne de titre: 1,1em

Le corps du texte

Pour les paramètres du corps du texte, modifiez les éléments suivants.

Police: Cabine
Couleur: #442854
Hauteur de ligne: 1,8em

Métatexte

Apportez également quelques modifications au métatexte.

Police: Cormorant Infant
Poids: Régulier
Style:Aucun
Couleur: #442854
Taille: ordinateur de bureau 16px, tablette 15px, téléphone 14px
Hauteur de ligne: 1,8em

Espacement

Ajoutez maintenant un peu d'espacement.

Marge supérieure: 0vw

Boîte ombre

Enfin, désactivez box-shadow.

Ombre de la boîte:désactiver

Module de texte d'e-mail de blog

Nous allons maintenant passer à la colonne de droite et développer le CTA email. Pour commencer, insérez un module Texte dans la colonne de droite. Sélectionnez l’icône grise + et tapez Texte.

Contenu

Sélectionnez Titre 2 et saisissez un texte attrayant.

Police: H2
Texte: Abonnez-vous aux offres et aux recettes

Texte du titre

Pour le texte d'en-tête, sélectionnez Alignement central, choisissez H2, sélectionnez Cormorant Infant et réglez-le sur Gras.

Alignement du texte:Centre
Texte du titre: H2
Police: Cormorant Infant
Poids:Gras

Couleur: #442854
Taille : 32px
Hauteur de ligne: 0,95em

Espacement

Enfin, ajoutez une marge inférieure à l'élément.

Marge inférieure: 10px

Module d'option d'envoi de courrier électronique pour le blog

Ajoutez maintenant un module d'option de courrier électronique dans la colonne de droite.

Contenu

Supprimez le titre et le corps du texte.

Titre : Aucun
Corps du texte: Aucun

Faites défiler jusqu'à Compte de messagerie et ajoutez votre fournisseur de services.

Ensuite, faites défiler jusqu'à Arrière-plan et désélectionnez-le.

Utiliser la couleur d'arrière-plan:non

Des champs

Accédez à l'onglet Conception et modifiez la couleur d'arrière-plan des champs.

Couleur de fond: rgba (255255255,0)
Couleur du texte des champs: #442854

Faites défiler jusqu'aux options de police et apportez les modifications suivantes.

Police des champs: Cabine
Taille : 16px
Hauteur de ligne: 1,8em

Champs Coins arrondis: 32px
Largeur de la bordure: 2px
Couleur de la bordure: #442854

Bouton

Faites défiler jusqu'à Bouton et sélectionnez Utiliser des styles personnalisés pour le bouton.

Utiliser des styles personnalisés pour le bouton:Oui
Taille : 18px
Couleur : #ffffff
Arrière-plan du bouton: #442854

Rayon de bordure: 50px
Police: Cormorant Infant
Poids:Gras

ajoutons de la marge et du rembourrage de boutons.

Marge supérieure du bouton: 20px
Rembourrage supérieur et inférieur: 12px
Remplissage gauche et droit: 32px

Ajouter une nouvelle ligne pour la liste des blogs

Ajoutons une seule ligne de colonne sous la section héros.

Paramètres de ligne de liste de blog

Accédez à l'onglet Conception et ajustez le remplissage.

Remplissage supérieur: 0px

Module de blog pour votre ligne

Ajoutez un module Blog à votre nouvelle ligne.

Styliser le fil du blog

Contenu du flux du blog

Entrez 3 pour le nombre de publications dans les paramètres du module Blog. Vous pouvez personnaliser le nombre de publications qui apparaissent à l'écran à l'aide de l'option Nombre de publications.

Un nombre inférieur, comme 3, nous permet de nous concentrer sur les publications les plus récentes tout en gardant la page gérable. C'est une excellente option si vous ne mettez pas beaucoup à jour ou si vous souhaitez garder la page propre. Augmenter le nombre d'articles affichés, par exemple 6 à 9, est une excellente suggestion si vous souhaitez vous concentrer sur le flux du blog.

Nombre de messages: 3

Saisissez 1 comme décalage. Cela demande à Divi de commencer par le deuxième article de blog, ce qui nous empêche d'afficher le même contenu que l'article de blog en surbrillance. Ligne au-dessus de celui-ci.

Numéro de décalage de poste:1