Comment créer des sections de héros de blog dynamiques et attrayantes avec Divi

Chaque fois qu'une nouvelle mise à jour sort, les possibilités de conception dont vous disposez augmentent. La combinaison de contenu dynamique et d'options de survol, par exemple, peut apporter des résultats étonnants. Pour le démontrer, nous allons vous montrer comment créer 3 superbes sections dynamiques de héros de publication de blog en utilisant uniquement les options intégrées de Divi. Nous vous guiderons étape par étape à travers chacun des exemples qui vous inciteront également à créer vos propres variations.

Allons-y !

Aperçu

Avant de plonger dans le didacticiel, examinons le résultat final des trois exemples que nous allons créer.

Exemple 1

Exemple #2

Exemple #3

Ajouter un nouvel article de blog

Détails de la publication

Tout d'abord, commencez par créer un nouvel article de blog. Ajoutez le titre, la catégorie de choix et l'image en vedette. Une fois cela fait, activez le Divi Builder.

Paramètres de la page Divi

Avant de passer à Visual Builder, modifiez les paramètres de la page Divi dans le coin supérieur droit du nouveau billet de blog.

• Mise en page : pleine largeur
• Titre du message : Masquer

Basculer vers Visual Builder

Il est temps de passer au Visual Builder pour commencer à créer les différents exemples !

Création des modules

Ajouter une nouvelle section + une ligne à une colonne

Avant de nous plonger dans chacun des exemples séparément, nous allons commencer par créer les modules de texte contenant du contenu dynamique. Tout au long des trois exemples, nous utiliserons ces modules prédéfinis pour terminer la conception. Une fois que vous avez ajouté une nouvelle section, ajoutez-y une nouvelle ligne en utilisant la structure de colonnes suivante :

Module de texte du titre de l'article

Sélectionnez le contenu dynamique du titre de l'article

Le premier module dynamique dont nous avons besoin contiendra le titre du message. Ajoutez un nouveau module de texte et sélectionnez Titre du message dans la liste des contenus dynamiques.

Paramètres de texte

Ensuite, allez dans les paramètres de texte et apportez quelques modifications.

• Police du texte : Lato
• Poids de la police de texte : gras
• Couleur du texte : #000000
• Taille du texte : 58 px (ordinateur de bureau), 45 px (tablette), 35 px (téléphone)
• Hauteur de la ligne de texte : 1 em
• Orientation du texte : Centre

Espacement

Modifiez également les valeurs d'espacement.

• Marge inférieure : 50px
• Rembourrage supérieur : 10px
• Rembourrage inférieur : 10px

Module de texte sur la date de publication

Sélectionnez la date de publication du contenu dynamique

Le deuxième module dont nous aurons besoin est un module de texte contenant la date de publication. Allez-y, ajoutez-en un et sélectionnez Date de publication dans la liste de contenu dynamique.

Paramètres de texte

Modifiez ensuite les paramètres de texte de ce module.

• Poids de la police de texte : léger
• Couleur du texte : #000000
• Taille du texte : 30 pixels (ordinateur de bureau), 20 pixels (tablette), 16 pixels (téléphone)
• Espacement des lettres du texte : 14 px
• Orientation du texte : Centre

Espacement

Ajoutez également une marge inférieure.

• Marge inférieure : 50px

Module de texte des catégories de messages

Sélectionnez les catégories Contenu dynamique

Le dernier module que nous ajouterons est un module de texte contenant le contenu dynamique des catégories de publication.

Paramètres de texte

Accédez aux paramètres de texte et modifiez l'orientation du texte.

• Orientation du texte : Centre

Paramètres de texte de lien

Ensuite, appliquez quelques modifications aux paramètres du texte du lien.

• Poids de la police du lien : ultra gras
• Style de police du lien : majuscule
• Couleur du texte du lien : #000000
• Taille du texte du lien : 15px
• Espacement des lettres des liens : 5px

Espacement

Ajoutez ensuite un rembourrage inférieur.

• Rembourrage inférieur : 20px

Frontière

Et terminez avec une bordure inférieure subtile.

• Largeur de la bordure inférieure : 1px
• Couleur de la bordure inférieure : #000000

Création de l'exemple #1

Ajouter une nouvelle section

Espacement

Commençons à créer le premier exemple ! Juste en dessous de la section précédente que vous avez créée, allez-y et ajoutez-en une nouvelle. Ouvrez ses paramètres 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 avec la structure de colonnes suivante :

Dimensionnement

Ouvrez les paramètres de dimensionnement de cette ligne et modifiez les choses.

• Faire cette ligne en pleine largeur : Oui
• Utiliser une largeur de gouttière personnalisée : Oui
• Largeur de gouttière : 1
• Égaliser les hauteurs de colonne : Oui

Espacement

Ajoutez ensuite des valeurs d'espacement personnalisées.

• Rembourrage supérieur : 0px
• Rembourrage inférieur : 0px
• Remplissage supérieur de la colonne 2: 130px
• Remplissage inférieur de la colonne 2 : 130px
• Remplissage gauche de la colonne 2 : 50px
• Remplissage à droite de la colonne 2 : 50px

Ajouter un module d'image à la colonne 1

Sélectionnez le contenu dynamique de l'image en vedette

Continuez en ajoutant un module d'image à la première colonne. Au lieu de télécharger une image, associez le module à l'image vedette dynamique.

Bordure par défaut

Nous ajoutons également une bordure droite au survol. Pour ce faire, choisissez d'abord la largeur de bordure par défaut suivante :

• Largeur de la bordure droite : 0px

Survol de la frontière

Et ajoutez les paramètres suivants au survol :

• Largeur de la bordure droite : 24 px
• Couleur de la bordure droite : #FFFFFF

Ombre de la boîte par défaut

Idem pour l'ombre de la boîte, appliquez les paramètres d'ombre de la boîte par défaut suivants :

• Position verticale de l'ombre de la boîte : 0px
• Force du flou de l'ombre de la boîte : 0px
• Force de propagation de l'ombre de la boîte : 80px
• Couleur de l'ombre : rgba(255,255,255,0)

Survol de l'ombre de la boîte

Et changez les choses en survol :

• Position horizontale de l'ombre de la boîte : 600 px
• Position verticale de l'ombre de la boîte : 0px
• Force du flou de l'ombre de la boîte : 0px
• Force de propagation de l'ombre de la boîte : 80px
• Couleur de l'ombre : # E4BAC7

Transitions

Pour créer une transition en douceur, modifiez la durée de la transition dans l'onglet avancé.

• Durée de transition : 1200 ms

Placez les modules dynamiques dans la colonne 2

La seule chose qui reste à faire pour terminer cet exemple est de placer les modules que nous avons créés dans la première partie de ce tutoriel dans la deuxième colonne.

Création de l'exemple #2

Ajouter une nouvelle section

Séparateur supérieur par défaut

Sur le prochain! Ajoutez une nouvelle section avec le séparateur supérieur suivant :

• Style de séparation : rechercher dans la liste
• Couleur du séparateur : #FFFFFF
• Hauteur du diviseur : 50px
• Disposition des diviseurs : au-dessus du contenu de la section

Survol du diviseur supérieur

Modifiez la hauteur du diviseur en survol.

• Hauteur du diviseur : 174px

Espacement

Supprimez ensuite tout le rembourrage personnalisé de la section. Cela permettra à la ligne et à la section d'entrer en collision dans l'une des étapes suivantes.

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

Transitions

Pour créer une transition de séparation fluide, modifiez la durée de transition dans l'onglet Avancé.

• Durée de transition : 500 ms

Ajouter une nouvelle ligne

Structure des colonnes

Maintenant, allez-y et ajoutez une ligne à votre section en utilisant la structure de colonnes suivante :

Couleur d'arrière-plan par défaut

Ajoutez-y la couleur de fond suivante :

• Couleur d'arrière-plan : #FFFFFF

Survol de la couleur d'arrière-plan

Changez la couleur d'arrière-plan en survol.

• Couleur d'arrière-plan : rgba(255,255,255,0,56)

Image en vedette Image d'arrière-plan dynamique

Téléchargez également l'image en vedette en tant qu'image d'arrière-plan de ligne dynamique. Après cela, modifiez le mélange de l'image d'arrière-plan.

• Mélange d'images d'arrière-plan : écran

Dimensionnement

Laissez la rangée occuper toute la largeur de l'écran en modifiant les paramètres de dimensionnement.

• Faire cette ligne en pleine largeur : Oui
• Utiliser une largeur de gouttière personnalisée : Oui
• Largeur de gouttière : 1

Espacement

Et ajoutez des valeurs d'espacement de remplissage personnalisées.

• Rembourrage supérieur : 200 px
• Rembourrage inférieur : 200px
• Rembourrage gauche : 100 pixels (ordinateur de bureau), 50 pixels (tablette), 20 pixels (téléphone)
• Rembourrage droit : 100 pixels (ordinateur de bureau), 50 pixels (tablette), 20 pixels (téléphone)

Transitions

Enfin, créez une transition en douceur en modifiant la durée de la transition.

• Durée de transition : 700 ms

Placer des modules dynamiques en colonne

Vous pouvez maintenant placer tous les modules dynamiques dans la colonne de la ligne et vous avez terminé avec le deuxième exemple !

Création de l'exemple #3

Ajouter une nouvelle section

Image en vedette Image d'arrière-plan dynamique

Passons au dernier exemple ! Ajoutez une nouvelle section et sélectionnez l'image en vedette comme image d'arrière-plan de la section.

Espacement par défaut

Ensuite, supprimez tout le remplissage personnalisé par défaut de la section.

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

Espacement survol

Ajoutez une marge personnalisée au survol pour créer un effet de rétrécissement.

• Rembourrage gauche : 150 pixels (ordinateur de bureau), 50 pixels (tablette), 30 pixels (téléphone)
• Rembourrage droit : 150 pixels (ordinateur de bureau), 50 pixels (tablette), 30 pixels (téléphone)

Transitions

Modifiez également la durée de la transition.

• Durée de transition : 500 ms

Ajouter une nouvelle ligne

Structure des colonnes

Une fois que vous avez terminé de modifier les paramètres de la section, continuez en ajoutant une nouvelle ligne avec la structure de colonnes suivante :

Couleur d'arrière-plan par défaut

Ajoutez la couleur d'arrière-plan suivante :

• Couleur d'arrière-plan : #ffffff

Survol de la couleur d'arrière-plan

Changez la couleur d'arrière-plan en survol.

• Couleur d'arrière-plan : rgba(255,255,255,0.46)

Fond dégradé

Ajoutez également un arrière-plan dégradé radial.

• Couleur 1: rgba(41,196,169,0)
• Couleur 2 : #ffffff
• Type de dégradé : Radial
• Position de départ : 29 %
• Position finale : 29 %

Dimensionnement

Modifiez les paramètres de dimensionnement de la ligne suivante.

• Faire cette ligne en pleine largeur : Oui
• Utiliser une largeur de gouttière personnalisée : Oui
• Largeur de gouttière : 1

Espacement

Et ajoutez des valeurs de remplissage personnalisées.

• Rembourrage supérieur : 200 px
• Rembourrage inférieur : 200px
• Rembourrage gauche : 100 pixels (ordinateur de bureau), 50 pixels (tablette), 20 pixels (téléphone)
• Rembourrage droit : 100 pixels (ordinateur de bureau), 50 pixels (tablette), 20 pixels (téléphone)

Transitions

Enfin, modifiez la durée de la transition pour une transition en douceur.

• Durée de transition : 500 ms

Placer des modules dynamiques en colonne

Allez-y et placez tous les modules prédéfinis dans la colonne de la ligne.

Modifier l'orientation du texte de tous les modules

La seule chose que vous devrez changer dans ces modules est l'orientation du texte et vous avez terminé !

• Orientation du texte : à gauche

Aperçu

Maintenant que nous avons parcouru toutes les étapes, jetons un dernier coup d'œil aux trois exemples que nous avons créés.

Exemple 1

Exemple #2

Exemple #3

Dernières pensées

Dans cet article, nous vous avons montré comment combiner du contenu dynamique avec les options de survol de Divi pour créer de superbes sections de héros de blog. Ces exemples vous inspireront indéniablement pour créer vos propres variantes et personnaliser l'article de blog que vous publiez. Si vous avez des questions ou des suggestions, assurez-vous de laisser un commentaire dans la section commentaires ci-dessous!