Comment concevoir une mise en page de messages récents par catégorie avec des effets de survol cool dans Divi

Nous sommes tous habitués à voir des articles récents affichés sur un site Web. Ils sont généralement générés à l'aide du widget de publication récente de WordPress ou d'un plugin pour afficher les articles les plus récemment publiés sur le blog. Et ils apparaissent généralement sur la page du blog, au bas des articles, dans les barres latérales ou en tant que section vedette d'une page de destination (quelque chose comme ça).

Pour ce tutoriel, nous allons vous montrer comment afficher les publications récentes par catégorie. En utilisant uniquement le Divi Builder (et quelques modules de blog), nous allons créer une section qui affiche les derniers articles de quatre catégories différentes. Ces articles récents par section de catégorie incluront des balises de catégorie uniques, des animations et des effets de survol, le tout sans plug-in.

Vérifiez-le!

Aperçu

Voici un bref aperçu de la conception et des fonctionnalités de la mise en page des articles récents par catégorie que nous construirons ensemble.

Téléchargez GRATUITEMENT les articles récents par catégorie

Pour mettre la main sur les designs de ce tutoriel, vous devrez d'abord le télécharger en utilisant le 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 abonné et ne recevrez pas 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 !

Pour importer la mise en page sur votre page, extrayez simplement le fichier zip et faites glisser le fichier json dans le Divi Builder.

Allons au tutoriel, voulez-vous ?

Ce dont vous avez besoin pour commencer

Pour commencer, vous devrez effectuer les opérations suivantes :

1. Si vous ne l'avez pas encore fait, installez et activez le thème Divi.
2. Créez une nouvelle page dans WordPress et utilisez le Divi Builder pour éditer la page sur le front-end (constructeur visuel).
3. En outre, la fonctionnalité de la section des articles récents dépend de la présence de articles de blog réels sur votre site avec des catégories qui leur sont attribuées. Assurez-vous donc d'avoir configuré quelques articles de blog fictifs si vous utilisez un site de test.

Après cela, vous aurez une toile vierge pour commencer à concevoir dans Divi.

Création de la section Articles récents par catégorie dans Divi

Créer une ligne à 4 colonnes

Pour démarrer dans le Divi Builder, créez une ligne de 4 colonnes.

Création d'un blog Module 1

Chacune des quatre colonnes contiendra un module de blog séparé. Ajoutez le premier module de blog à la colonne 1.

Chacun des modules de blog affichera par défaut le message le plus récent de votre site. Tout ce que nous allons faire est de sélectionner une catégorie spécifique à inclure pour ce module de blog spécifique. Ensuite, nous limiterons le nombre de messages à 1 afin qu'un seul message s'affiche. Cela nous donnera le dernier article de blog pour cette catégorie de manière dynamique.

Contenu du blog

Mettez à jour les options de contenu du blog comme suit :

• Type de message : messages
• Nombre de messages : 1
• Catégories incluses : Actualités (ou l'une des vôtres)
• Utiliser des extraits de messages : NON
• Longueur de l'extrait : 120

Options d'élément

Mettez ensuite à jour les options des éléments comme suit :

• Afficher les catégories : NO
• Afficher l'extrait : NON (ordinateur de bureau), OUI (survol et tablette)
• Afficher la pagination : NON

Conception de blogs

Ensuite, mettez à jour la conception comme suit :

• Couleur d'arrière-plan (bureau) : #ffffff
• Couleur d'arrière-plan (survol): #8ac829
• Poids de la police du titre : semi-gras
• Style de police du titre : TT
• Taille du texte du titre : 24 px
• Espacement des lettres du titre : 1px
• Hauteur de la ligne de titre : 1.4em
• Couleur du corps du texte : #ffffff
• Poids de la police Meta : Légère
• Espacement des lettres méta : 3px

• Hauteur minimale : 450 px (ordinateur de bureau), automatique (tablette)
• Rembourrage : 5 % en haut, 5 % en bas, 5 % à gauche, 5 % à droite
• Box Shadow : voir la capture d'écran
• Style d'animation : Zoom

Cela s'occupe de la conception de notre premier module de blog. Nous devons maintenant créer notre balise de catégorie personnalisée.

Création de la balise de catégorie 1

Pour créer la balise, ajoutez un nouveau module de texte sous le module de blog, puis faites-le glisser au-dessus du module de blog.

Contenu du texte

Mettez à jour le contenu du corps avec le nom de la catégorie que vous avez choisie pour le module de blog. Dans mon exemple, j'affiche le message récent de la catégorie Actualités, j'ajouterai donc le mot « Actualités » au contenu du corps.

Conception de la balise de catégorie

Sous les paramètres de conception de texte, mettez à jour les éléments suivants :

• Couleur d'arrière-plan : #8ac829
• Poids de la police de texte : ultra gras
• Texte Couleur du texte : #ffffff
• Alignement du texte : au centre
• Largeur : 120px
• Marge : 80px en haut, -80px en bas
• Remplissage : 10px en haut, 10px en bas
• Style d'animation : Fondu
• Délai d'animation : 1000 ms
• Indice Z : 1

Étant donné que nous utilisons une marge négative pour déposer la balise sur la carte de blog, nous devrons définir l'index z sur 1 afin que la balise reste au-dessus du module de blog.

Maintenant que nous avons terminé un article, nous pouvons déployer le mode d'affichage filaire et copier ces modules dans les autres colonnes.

Copiez le module de texte et de blog dans la colonne 1 et collez-les dans les colonnes 2, 3 et 4 afin d'avoir exactement les mêmes modules dans chaque colonne.

Pour chaque module de blog en double, nous devons lui attribuer une nouvelle catégorie de blog et une couleur d'arrière-plan survolée. Et pour chaque balise de catégorie en double, nous devons mettre à jour le nom de la catégorie pour qu'il corresponde à la catégorie sélectionnée pour le module de blog, puis mettre à jour la couleur d'arrière-plan pour qu'elle corresponde à la couleur d'arrière-plan du survol du module de blog.

Mettre à jour les modules dans la colonne 2

En restant en mode filaire, ouvrez les paramètres du module de blog dans la colonne 2 et mettez à jour les éléments suivants :

• Catégories incluses : Entreprise (ou la vôtre)
• Couleur d'arrière-plan (survol): #f64937

Mettez ensuite à jour les paramètres du module de texte dans la colonne 2 comme suit :

• Corps : « Entreprise »
• Couleur d'arrière-plan : #f64937

Mettre à jour les modules dans la colonne 3

Ouvrez ensuite les paramètres du module de blog dans la colonne 3 et mettez à jour les éléments suivants :

• Catégories incluses : Argent (ou le vôtre)
• Couleur d'arrière-plan (survol): #6529c7

Mettez ensuite à jour les paramètres du module de texte dans la colonne 3 comme suit :

• Corps : « Argent »
• Couleur d'arrière-plan : #6529c7

Mettre à jour les modules dans la colonne 4

Ouvrez ensuite les paramètres du module de blog dans la colonne 4 et mettez à jour les éléments suivants :

• Catégories incluses : Coaching (ou le vôtre)
• Couleur d'arrière-plan (survol): #f17809

Mettez ensuite à jour les paramètres du module de texte dans la colonne 4 comme suit :

• Corps : « Coaching »
• Couleur d'arrière-plan : #f17809

Mise à jour des paramètres de ligne

Nous devons apporter quelques ajustements à notre rangée, notamment une hauteur définie et une largeur de gouttière personnalisée. Mettez à jour les paramètres de ligne suivants :

• Utiliser une largeur de gouttière personnalisée : OUI
• Largeur de gouttière : 2
• Largeur : 94%
• Largeur maximale : 1400px
• Hauteur : 540 px (ordinateur de bureau), automatique (tablette)
• Remplissage : 0px en haut, 0px en bas

Nous définissons la hauteur de la ligne sur 540 pixels sur le bureau afin d'empêcher la ligne de se développer et de déplacer d'autres contenus sur la page lorsque vous survolez une carte de blog. Assurez-vous de régler la hauteur sur auto sur la tablette afin de ne masquer aucun contenu.

Mise à jour des paramètres de chaque colonne

Pour donner aux articles de blog récents un effet de survol appliqué aux deux modules simultanément, nous pouvons ajouter l'effet de survol à la colonne qui contient les deux modules qui composent l'article de blog. Ouvrez les paramètres de chacune des colonnes et mettez à jour les éléments suivants :

• Échelle de transformation (survol) : 115%

Ajoutez ensuite le CSS personnalisé suivant à l'élément principal sur l'affichage de la tablette uniquement :

transform: none !important

Ce petit extrait désactivera l'effet de survol de l'échelle de transformation pour mobile.

Désormais, chaque fois que les publications récentes sont toutes définies avec une balise de catégorie correspondante et une couleur d'arrière-plan correspondante qui s'affiche lorsque vous survolez la carte. En outre, la carte deviendra plus grande et affichera également l'extrait en survol.

Mise à jour des paramètres de section

Pour la section, donnons-lui un nouveau dégradé d'arrière-plan et un peu de remplissage. Ouvrez les paramètres de la section et mettez à jour les éléments suivants :

• Couleur de fond du dégradé de gauche : #6529c7
• Dégradé d'arrière-plan à droite : #f64937
• Direction du gradient : 270 degrés
• Rembourrage: haut 10vw, bas 10vw

Résultat final

C'est ça! Voyons le résultat final. Cette image comprend un titre qui peut facilement être ajouté pour compléter la conception.

Et voici les effets d'animation et de survol.

Dernières pensées

Créer une mise en page des articles récents par catégorie est vraiment un processus facile une fois que vous sortez un peu des sentiers battus. Tout ce que vous avez vraiment besoin de faire est de créer un module de blog pour chaque catégorie que vous souhaitez afficher. Limitez ensuite ce module à l'affichage du message le plus récent pour une certaine catégorie. Après cela, vous avez le pouvoir de Divi à vos côtés pour vous occuper de la conception.

Cette mise en page peut être utilisée n'importe où sur votre site, y compris les modèles de création de thèmes. N'hésitez donc pas à les importer partout où vous en avez besoin en utilisant les options de portabilité. J'espère que cela vous sera utile pour votre prochain projet ou au moins vous donnera un peu d'inspiration pour faire tourner ces roues pour des conceptions Divi encore meilleures.

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

À votre santé!