4 superbes exemples de module de titre de poste de Divi et comment les réaliser

Pour tous les blogueurs Divi à la recherche de nouvelles façons d'engager les gens avec vos articles de blog, le module Divi Post Title est un excellent point de départ. Le module de titre de publication vous permet de styliser le titre de la publication (et l'image en vedette) de diverses manières pour d'innombrables designs époustouflants. Cela vous permet de créer de beaux articles qui accrochent vos lecteurs potentiels dès le premier coup d'œil. Aujourd'hui, je vais vous montrer quatre façons étonnantes de styliser le module Divi Post Title pour attirer vos lecteurs.

Commençons!

Aperçu

Voici un aperçu rapide des conceptions de modules de titre de poste présentées dans ce didacticiel.

#1 Encadrement abstrait

Commencez à construire n°1

#2 Chevauchement du texte et de l'image en vedette

Commencer le bâtiment #2

#3 Arrière-plans de contenu uniques pour la lisibilité

Commencer la construction #3

#4 Effet d'empilement avec deux images en vedette

Commencer le bâtiment #4

Commencer

Abonnez-vous à notre chaîne Youtube

Tout ce dont vous avez vraiment besoin pour ce tutoriel est Divi. Nous allons créer de nouveaux articles et utiliser le Divi Builder pour créer les designs de titre de publication. Vous aurez également besoin de quelques images pour servir d'images vedettes.

La configuration pour les nouveaux messages

Pour ce didacticiel, j'utiliserai le Divi Builder pour créer des exemples de conception de titre de publication sur un nouveau message. Pour configurer les builds de ce didacticiel, vous devrez procéder comme suit :

1. Créer un nouveau poste.
2. Ajoutez un titre à votre message.
3. Ajoutez une image en vedette à votre message.
4. Déployez le Divi Builder.
5. Choisissez de construire à partir de zéro
6. sous Paramètres de la page Divi, sélectionnez la mise en page Pas de barre latérale et sélectionnez Masquer le titre de la publication.
7. Cliquez ensuite pour créer sur le front-end ou déployez le mode d'affichage du bureau sur le backend afin de pouvoir concevoir la page visuellement.

C'est à vous de décider si vous souhaitez ou non créer un nouveau message pour chaque conception ou simplement ajouter plusieurs conceptions de titre de message à un seul message. Gardez simplement à l'esprit que si vous ajoutez plusieurs titres de publication dans une publication, ils hériteront du même titre de page et de la même image en vedette.

#1 Encadrement abstrait

Cette conception de titre de publication épurée comporte des éléments de cadrage abstraits subtils qui conviendront parfaitement à votre image et à votre titre de publication. L'effet de cadrage est créé à l'aide d'un style personnalisé de bordure et d'ombre de boîte.

Voici comment procéder.

Assurez-vous de configurer le nouveau message comme décrit au début de cet article (Ajouter un titre, Image en vedette, Pas de mise en page de la barre latérale, masquer le titre de la publication par défaut). Ajoutez une nouvelle section avec une ligne à une colonne à votre message. Ajoutez ensuite le module de titre de publication à la ligne.

Dans les paramètres du titre de la publication, définissez le placement de l'image en vedette comme suit :

Placement de l'image en vedette : au-dessus du titre

Mettez ensuite à jour, ajoutez un dégradé d'arrière-plan pour ajouter un petit élément de conception abstrait dans le coin inférieur droit du module.

Couleur d'arrière-plan du dégradé gauche : rgba(0,0,0,0.06)
Couleur du dégradé de fond à droite : rgba(0,0,0,0)
Type de dégradé : Radial
Direction radiale : en bas à droite
Position de départ : 10 %
Position finale : 0%

Continuez à mettre à jour le reste de la conception comme suit :

Police du titre : Josefin Sans
Alignement du texte du titre : à droite
Taille du texte du titre : 36px
Hauteur de la ligne de titre : 1,7 em (ordinateur de bureau), 1,3 em (tablette et smartphone)
Police Meta : Josefin Sans
Style de police méta : TT
Alignement du méta-texte : à gauche
Espacement des lettres méta : 2px
Hauteur de la ligne méta : 2 em
Marge personnalisée : -5vw haut
Rembourrage personnalisé : 5vw en haut, 5vw en bas, 5vw à gauche, 5vw à droite
Largeur de la bordure droite : 4px

La marge -5vw tire le module vers le haut en dehors de la ligne afin que la bordure droite se trouve au-dessus de la bordure gauche que nous ajouterons à la ligne.

Ajoutons maintenant un élément de conception abstrait à l'aide de box shadow :

Box Shadow : voir capture d'écran
Position horizontale de l'ombre de la boîte : 112px
Position verticale de l'ombre de la boîte : 85 px
Force de propagation de l'ombre de la boîte : -80px
Couleur de l'ombre : rgba (224,43,32,0.3)

Enregistrer les paramètres.

Ouvrez maintenant les paramètres de la ligne pour la redimensionner et créez le côté gauche de la conception du cadre à l'aide d'une bordure et d'une ombre de boîte.

Largeur personnalisée : 700 px
Largeur de la bordure droite : 4px

Box Shadow : voir capture d'écran
Position horizontale de l'ombre de la boîte : 112px
Position verticale de l'ombre de la boîte : 85 px
Force de propagation de l'ombre de la boîte : -80px
Couleur de l'ombre : rgba (224,43,32,0.3)

Voyons maintenant la conception finale.

#2 Chevauchement du texte et de l'image en vedette

Créez une nouvelle section avec une ligne à deux colonnes. Ajoutez ensuite un module image dans la colonne de gauche.

Cela va servir d'image vedette à l'aide de contenu dynamique. Ouvrez les paramètres de l'image et supprimez l'image fictive, puis cliquez sur l'icône de contenu dynamique en haut à droite de la zone d'aperçu de l'image. Sélectionnez ensuite Image en vedette dans la liste pour ajouter l'image en vedette à la page.

Ajoutez maintenant un module de titre de publication dans la colonne de droite. Ouvrez les paramètres et masquez l'image en vedette en définissant l'option Afficher l'image en vedette sur NON.

Ajoutez ensuite un dégradé d'arrière-plan au module de titre de publication.

Couleur d'arrière-plan du dégradé à gauche : #ffffff
Dégradé d'arrière-plan à droite : rgba(255,255,255,0)

Cela deviendra visible une fois que nous aurons ajouté une marge négative pour chevaucher l'image.

Mettez à jour le reste de la conception comme suit :

Police du titre : Fira Sans Condensed
Poids de la police du titre : ultra léger
Taille du texte du titre : 80 px (ordinateur de bureau), 70 px (tablette), 45 px (smartphone)
Meta Font: Fira Sans Condensed
Style de police méta : TT
Alignement du méta-texte : à droite
Couleur du méta-texte : #cccccc
Espacement des lettres méta : 2px
Marge personnalisée : -20 % restants (ordinateur de bureau), 0 % (tablette et smartphone)
Rembourrage personnalisé : 5vw en haut, 5vw en bas, 30px à gauche

Donnons-lui maintenant une ombre de boîte pour créer une ligne sous le titre.

Box Shadow : voir capture d'écran
Position horizontale de l'ombre de la boîte : 80px
Position verticale de l'ombre de la boîte : 82px
Force de propagation de l'ombre de la boîte : -80px

Enregistrez le paramètre et ouvrez les paramètres de ligne pour ajuster la largeur de la gouttière.

Largeur de gouttière : 1
Égaliser les hauteurs de colonne : OUI

Vérifiez maintenant la conception finale.

Conception alternative d'images arrondies

Avec seulement quelques petits ajustements, vous pouvez rendre l'image présentée circulaire et ajuster la tuile de poteau pour qu'elle soit centrée verticalement. Pour ce faire, ouvrez les paramètres de l'image et mettez à jour les éléments suivants :

Coins arrondis : 50 %

Ensuite, ouvrez les paramètres de ligne et ajoutez le CSS personnalisé suivant sous l'élément principal :

align-items: center;

Cela ne fonctionne que si Equalize Column Heights est défini sur YES, ce qui active la propriété flex nous permettant d'aligner les éléments verticalement.

Voici la conception finale.

#3 Arrière-plans de contenu uniques pour la lisibilité

Cette conception de titre de publication intègre des dégradés d'arrière-plan pour rendre le titre et le méta-texte plus lisibles avec un arrière-plan d'image en vedette.

Voici comment faire.

Créez une nouvelle section avec une ligne à une colonne. Ajoutez ensuite le module de titre de publication à la ligne.

Mettez ensuite à jour les paramètres du module de titre de publication pour masquer l'image en vedette.

Police du titre : Abril Fatface
Couleur du texte du titre : #121212
Taille du texte du titre : 75 px (ordinateur de bureau), 50 px (tablette), 30 px (smartphone)
Espacement des lettres du titre : 2px
Hauteur de la ligne de titre : 1,1 em
Meta Font: Roboto Condensed
Couleur du méta-texte : #ffffff
Taille du méta-texte : 16px
Espacement des lettres méta : 2px
Hauteur de la ligne méta : 2 em
Largeur : 60 % (ordinateur de bureau), 90 % (tablette), 100 % (smartphone)
Rembourrage personnalisé : 3vw à gauche

Ajoutons maintenant une ombre de boîte pour servir d'arrière-plan au méta-texte et le rendre lisible.

Box Shadow : voir capture d'écran
Position horizontale de l'ombre de la boîte : 0px
Position verticale de l'ombre de la boîte : -32px
Couleur de l'ombre de la boîte : #121212

Nous allons maintenant ajouter notre image vedette à l'arrière-plan de la section à l'aide de contenu dynamique. Ouvrez les paramètres de la section et cliquez sur l'icône de contenu dynamique en haut à droite de la zone d'aperçu de l'image d'arrière-plan. Sélectionnez ensuite l'image en vedette dans la liste pour ajouter l'image en vedette à la section.

Ajoutons maintenant notre élément d'arrière-plan dégradé pour rendre le texte du titre du message plus lisible. Cliquez simplement sur l'onglet dégradé et mettez à jour les éléments suivants :

Couleur d'arrière-plan du dégradé de gauche : rgba(255,255,255,0.76)
Dégradé d'arrière-plan à droite : rgba(255,255,255,0)
Type de dégradé : Radial
Direction radiale : en haut à gauche
Position de départ : 40 %
Position finale : 0%
Placer le dégradé au-dessus de l'image d'arrière-plan : OUI

Voyons maintenant la conception finale.

#4 Effet d'empilement avec deux images en vedette

Cette conception intègre des ombres de boîte pour donner l'effet d'empiler les éléments qui composent le module de titre de publication et l'arrière-plan de la section. Il utilise également deux versions de l'image en vedette (dynamiquement) pour un élément de conception unique.

Voici comment procéder.

Créez une nouvelle section avec une ligne à une colonne. Ajoutez ensuite le module de publication à la ligne et mettez à jour le placement de l'image en vedette en titre/image d'arrière-plan méta.

Mettez ensuite à jour les paramètres de conception comme suit :

Couleur du texte : clair
Couleur d'arrière-plan du texte : rgba (1 59 104 0,79)
Orientation du texte : centre
Police du titre : Roboto Condensed
Poids de la police du titre : léger
Taille du texte du titre 70px (ordinateur de bureau), 50px (tablette), 30px (smartphone)
Hauteur de la ligne de titre : 1,3 em
Poids de la police Meta : Légère
Style de police méta : TT
Couleur du méta-texte : #cccccc
Espacement des lettres méta : 1px
Rembourrage personnalisé : 10vw en haut, 0px en bas

Ajoutons maintenant notre première ombre de boîte pour créer notre premier calque d'empilement.

Box Shadow : voir capture d'écran
Position horizontale de l'ombre de la boîte : 0px
Position verticale de l'ombre de la boîte : -46px
Couleur de l'ombre : #ffffff

Vous pouvez voir que cela sert également de moyen créatif de diviser le titre et le méta-texte.

Enregistrez maintenant vos paramètres et ouvrez les paramètres de la section. Ajoutez l'image en vedette à votre arrière-plan en tant que contenu dynamique. Ajoutez ensuite un dégradé comme suit :

Couleur d'arrière-plan du dégradé gauche : rgba (1,59,104,0,79)
Dégradé de fond à droite : rgba (1,59,104,0,79)
Placer le dégradé au-dessus de l'image d'arrière-plan : OUI

Cette conception d'arrière-plan d'image en vedette supplémentaire est un moyen unique de donner à votre titre de publication une conception unique qui changera dynamiquement avec chaque nouvelle image en vedette.

Ensuite, ajoutez un rembourrage personnalisé.

Rembourrage personnalisé (bureau): 10vw en haut, 0px en bas
Rembourrage personnalisé (smartphone): 0vw en haut, 0px en bas

Ajoutez ensuite une autre ombre de boîte pour continuer l'effet d'empilement.

Box Shadow : voir capture d'écran
Position horizontale de l'ombre de la boîte : 0px
Position verticale de l'ombre de la boîte : -92px
Couleur de l'ombre : #ffffff

Pour terminer la conception, ouvrez les paramètres de ligne et mettez à jour les éléments suivants :

Faire cette ligne pleine largeur : OUI
Largeur de gouttière : 1
Rembourrage personnalisé (bureau) : 0px en haut, 0px en bas, 6 % à gauche, 6 % à droite
Rembourrage personnalisé (smartphone : 0px en haut, 0px en bas, 0% à gauche, 0% à droite

Vérifiez maintenant la conception finale.

Dernières pensées

Avec ces conceptions de titre de publication, vous devriez avoir une assez bonne compréhension de ce qui est possible avec le module de titre de publication Divi et le Divi Builder. Avec seulement quelques ajustements de conception, combinés à la puissance du contenu dynamique pour les images en vedette, vous pouvez créer d'innombrables styles de titre de publication uniques pour vos articles de blog. Si quoi que ce soit, j'espère que ceux-ci vous inciteront à créer vous-même de superbes titres de publication.

Pour plus d'inspiration de conception connexe, consultez notre article de blog sur les sections de héros de blog dynamiques et attrayantes et le secret pour concevoir des mises en page de grille brisées dans Divi.

J'ai hâte de vous entendre dans les commentaires.

À votre santé!