Lorsque vous créez n’importe quel type de site Web, il est probable que vous voudrez aussi écrire occasionnellement sur ce site. En plus d’avoir besoin d’une page de blog qui affiche tous les billets de blog sous forme de liste, nous vous recommandons d’avoir un modèle de billet de blog qui peut être automatiquement attribué aux nouveaux billets de blog que vous créez. Il est facile de concevoir un modèle de billet de blog en utilisant le générateur de thème Divi. Maintenant, avec la nouvelle option adhésive de Divi, vous pouvez également faire coller la barre latérale! Dans le tutoriel d’aujourd’hui, nous allons vous montrer comment faire cela, et vous pouvez également télécharger gratuitement le fichier json du modèle de billet de blog!
On y va. Aperçu avant d’aller plus loin dans ce tutoriel, jetons un coup d’oeil rapide aux résultats sur différents écrans de taille. Bureau
Inscrivez – vous à Divi Newsletter et nous vous enverrons par courriel une copie du dernier paquet de mise en page de la page d’atterrissage Divi, ainsi qu’un grand nombre d’autres ressources, conseils et astuces Divi gratuits. Suivez – nous et vous serez bientôt maître Divi. Si vous êtes déjà abonné, entrez votre adresse e – mail ci – dessous et cliquez sur télécharger pour accéder au paquet Layout.
Vous vous êtes inscrit avec succès. Vérifiez votre adresse e – mail pour confirmer votre abonnement et Obtenez gratuitement le paquet hebdomadaire Divi Layout! https:\\youtu.
Dynamic nuto ajoute le premier formulaire de texte à la colonne 1 et sélectionne le contenu dynamique suivant: contenu dynamique: catégorie de poste Les paramètres de texte passent à l’onglet conception du formulaire et modélisent le texte en conséquence: caractères de texte: couleur du texte de l’aile: # FFFFFF taille du texte: 1rem espacement des lettres de texte: 1px hauteur de la ligne de texte: 2em
Le paramètre link to text change également la couleur du texte lié. Couleur du texte du lien: # FFFFFF Après avoir cloné un formulaire texte deux fois et placé des duplicatas dans les colonnes restantes le premier formulaire texte est terminé, vous pouvez Cloner le formulaire entier deux fois et placer des duplicatas dans les deux colonnes restantes de la ligne. Modifier le contenu dynamique modifier le contenu dynamique de chaque copie. Première copie: prochaine date de publication Deuxième répétition: nombre de commentaires affichés: commentaires liés à la zone de commentaires: Oui Ajouter une section # 2 l’espacement ajoute une autre section directement sous la section précédente. Ouvrez les paramètres de section et appliquez les valeurs de remplissage supérieures et inférieures suivantes:
Remplissage supérieur: 0px remplissage inférieur: 150 px Ajouter une nouvelle ligne de structure de colonne continuer en ajoutant une nouvelle ligne en utilisant la structure de colonne suivante: Redimensionner sans ajouter de module, ouvrir les paramètres de ligne et modifier les paramètres de taille en conséquence: utiliser la largeur de gouttière personnalisée: Oui largeur de gouttière: 2 largeur: 90% largeur maximale: 2580 px Espacement ajoutez des valeurs de marge personnalisées plus tard. Marge supérieure: 100 pixels marge inférieure: Bureau: 100 pixels tablette et téléphone: 50 px
La colonne définit l’espacement 1, puis ouvre les paramètres de la colonne 1 et applique le remplissage à gauche et à droite. Remplissage à gauche: 5% remplissage à droite: 5% Configuration de la colonne 2 couleur
Remplissage supérieur: 250 Px remplissage inférieur: 250 px Bordure ensuite, allez à la configuration de la bordure et ajoutez des filets. Tous les angles: 20px Shadow box complète la configuration du module en appliquant les paramètres shadow box suivants: Force shadow box Blur: 50 Px Shadow color: rgba (0,0,0,0,08) Ajouter un module de contenu de poste à la colonne 1 Paramètres du corps du texte le module suivant dont nous avons besoin dans le modèle de poste est le module de contenu de poste. Ce module représente le contenu d’un billet de blog dynamique. Passez à l’onglet conception du formulaire et modifiez les paramètres de texte comme suit: caractères de texte: taille du texte latéral: 1.1rem hauteur de la ligne de texte: 2.3 em Les paramètres du texte du titre changent également la police du titre. Police d’en – tête: aile Espacement et suppression de la marge inférieure par défaut. Marge inférieure: 0px Enfin et surtout, allez dans l’onglet avancé et appliquez la classe CSS suivante: classe CSS: contenu du billet de blog Ajouter un module de code à la colonne 1 comme espace entre le titre et le contenu du paragraphe ajouter un code CSS nous utilisons la classe CSS assignée au module de contenu du message pour ajouter de l’espace entre le titre et le contenu du paragraphe. Ajouter un formulaire de code sous le formulaire de contenu du message et entrer le code CSS suivant dans le formulaire: & lt; Style & gt;
– Oui. Contenu du blog P,
– Oui. Contenu du billet de blog H1,
– Oui. Contenu du billet de blog H2,
– Oui. Contenu du billet de blog H3,
– Oui. Contenu du billet de blog H4,
– Oui. Contenu du billet de blog H5,
– Oui. Contenu du billet de blog H6
{Y}
Bord supérieur: 20px;
Bord inférieur: 20px;
}
& lt \ Style & gt; Ajouter un module de barre latérale à la colonne suivante de la disposition de la colonne 2. Ici, nous ajouterons un module de barre latérale. Passez à l’onglet conception du module et cachez le séparateur de bordure. Afficher le séparateur de bordure: Non Paramètres du texte du titre
Le caractère du titre change ensuite. Caractère du titre: aile Paramètres du corps du texte et caractères du corps. Caractéristiques du corps: côtés Ajouter un formulaire d’activation de courriel à la colonne 2 ajouter du contenu sous le formulaire de la barre latérale et nous ajouterons un formulaire d’activation de courriel. Ajoutez une copie de votre choix. Ajoutez un compte plus tard pour lier votre compte e – mail. Supprimez la couleur de fond, puis supprimez la couleur de fond. Paramètres des champs passer à l’onglet conception du formulaire et modifier les paramètres des champs en conséquence: caractères des champs: côtés Shadow box: first option Shadow color: rgba (0,0,0,0,06) Paramètres de texte nous changeons également la couleur du texte dans les paramètres de texte. Couleur du texte: noir Les paramètres du texte du titre sont ensuite modifiés. Niveau du titre: H3 caractère du titre: titre de l’aile taille du texte: 1,5 rem
Vous vous êtes inscrit avec succès. Vérifiez votre adresse e – mail pour confirmer votre abonnement et Obtenez gratuitement le paquet hebdomadaire Divi Layout! https:\\youtu.
Dynamic nuto ajoute le premier formulaire de texte à la colonne 1 et sélectionne le contenu dynamique suivant: contenu dynamique: catégorie de poste
Remplissage supérieur: 0px remplissage inférieur: 150 px
Remplissage supérieur: 250 Px remplissage inférieur: 250 px
– Oui. Contenu du blog P,
– Oui. Contenu du billet de blog H1,
– Oui. Contenu du billet de blog H2,
– Oui. Contenu du billet de blog H3,
– Oui. Contenu du billet de blog H4,
– Oui. Contenu du billet de blog H5,
– Oui. Contenu du billet de blog H6
{Y}
Bord supérieur: 20px;
Bord inférieur: 20px;
}
& lt \ Style & gt;
Le caractère du titre change ensuite. Caractère du titre: aile
Les paramètres du texte du titre sont ensuite modifiés. Niveau du titre: H3 caractère du titre: titre de l’aile taille du texte: 1,5 rem Ensuite, nous modélisons les boutons. Chaque bouton utilise un style personnalisé: Oui taille du texte du bouton: 20 Px couleur du texte du bouton: # FFFFFF Gradient Color 1: # 8995ff Gradient Color 2: # 6163b5 type de gradient: direction de gradient linéaire: 150 degrés largeur du bord du bouton: 0px Rayon du bord du bouton: 5px caractères du bouton: côté Espacement, nous complétons la configuration du module en supprimant la valeur de remplissage par défaut dans les paramètres d’espacement. Remplissage supérieur: 0px remplissage inférieur: 0px remplissage gauche: 0px remplissage droit: 0px Ajouter l’arrière – plan du gradient de section # 3 à la section suivante et à la dernière section. Ajouter l’arrière – plan de gradient suivant: couleur 1: # 8995ff couleur 2: # 6163b5 type de gradient: direction de gradient linéaire: 150 degrés L’espacement passe à l’onglet conception de la section et supprime le remplissage supérieur par défaut
Sur la barre latérale à gauche du modèle, ouvrez les paramètres de ligne et faites glisser la deuxième colonne en haut. Modifier la bordure de la barre latérale ouvrir la colonne de la barre latérale et modifier les paramètres de la bordure en conséquence: largeur de la bordure droite: Bureau: 5px tablette et téléphone: 0px couleur de la bordure droite: # 8995ff largeur de la bordure gauche: aucune Si nécessaire, appliquer l’inversion de colonne si vous décidez d’utiliser la barre latérale collante à gauche du modèle de billet de blog, vous voudrez peut – être placer la barre latérale sous le contenu du billet sur un écran plus petit. Pour ce faire, utilisez la deuxième méthode de ce tutoriel Divi pour inverser l’ordre de chevauchement des colonnes Divi. Aperçu maintenant que nous avons terminé toutes les étapes, regardons enfin les résultats sur les différents écrans de taille. Bureau Mobile Dans cet article, nous vous montrons comment tirer le meilleur parti de la conception de modèles de blog que vous avez créée en utilisant Divi Theme Builder. Plus précisément, nous vous avons montré étape par étape comment l’option adhésive de Divi comprenait une barre latérale adhésive. Lorsque les visiteurs lisent le contenu d’un article, la barre latérale collante les suit et leur permet de voir l’article pertinent, vos options de courriel ou tout autre contenu que vous décidez d’insérer dans la barre latérale collante. Vous pouvez également télécharger gratuitement le fichier json du modèle! Si vous avez des questions ou des suggestions, n’hésitez pas à faire part de vos commentaires dans la section commentaires ci – dessous. Si vous souhaitez en savoir plus sur Divi et recevoir plus de cadeaux sur Divi, assurez – vous de vous abonner à notre newsletter et à YouTube Channel afin que vous soyez toujours l’un des premiers à apprendre et à bénéficier de ce contenu gratuit.
Sur la barre latérale à gauche du modèle, ouvrez les paramètres de ligne et faites glisser la deuxième colonne en haut.