Vous en avez assez de la mise en page par défaut de la page listant vos articles de blog dans Divi ?
Vous souhaitez dynamiser son design pour le rendre plus actuel ?
Dans ce tutoriel, je vais vous expliquer en détails comment personnaliser l’affichage de la page blog de Divi avec des effets au survol.

Vous n’avez ni le temps, ni l’envie de suivre ce tutoriel ? Achetez ce layout prêt à utiliser pour seulement 5 €.

J'achète ce layout !

Préparez la structure de la page

Si votre page ne contient pas encore de section, insérez tout d’abord une section normale.

Dans cette section, ajoutez une ligne d’une seule colonne.

Dans les réglages de la ligne, onglet “Style”, ajustez les paramètres selon la capture d’écran ci-dessus.
Ceci afin de supprimer l’espace entre les colonnes et que la ligne occupe toute la largeur de l’écran.

Vous pouvez maintenant insérer un module “Blog” dans la ligne.

Personnalisez le module “Blog”

Onglet “Contenu”

Rubrique “Contenu”

1. Choisissez le type de posts à afficher : pour un blog, il s’agit généralement des articles mais peut-être avez-vous créé un custom post type spécifique ?
2. Précisez le nombre de posts à afficher
3. Cochez les catégories de posts que vous souhaitez faire apparaitre
4. Utilisez un format de date “à la française”
5. Choisissez de montrer juste un extrait et non tout le contenu de l’article
6. Laissez sur “Oui” si vous voulez que les extraits soient définis automatiquement
7. Précisez une longueur d’extrait un peu plus courte que la valeur par défaut pour gagner de la place

Rubrique “Éléments”

Notez que ces réglages du module “Blog” sont spécifiques au design que j’ai réalisé pour ma démo.
Si vous activez des éléments supplémentaires comme le nom de l’auteur ou le nombre de commentaires, il vous faudra vous-même faire les ajustements nécessaires dans le code JS et CSS que je vous donne plus tard.

1. Conservez l’image à la une
2. Activez le bouton “Lire plus”
3. Masquez l’auteur
4. Conservez la date
5. Affichez le nom des catégories
6. Désactivez le nombre de commentaires
7. Montrez l’extrait de l’article
8. Désactivez la pagination

Onglet “Style”

Rubrique “Modèle”

Sélectionnez le modèle de type “Grille”.

Rubrique “Superposition”

1. Activez l’effet de superposition au survol de chaque article
2. Choisissez la couleur transparente afin de masquer l’icone qui vient normalement en superposition
3. Précisez une couleur de superposition en noir transparent rgba(0,0,0,0.5)

Rubrique “Titre texte”

• “Police titre” : J’ai utilisé la police “Alfa Slab One”
• “Couleur du texte titre” : #ffffff
• “Titre taille du texte” : 35px
• “Espacement des lettres titre” : 2px
• Vous pouvez si vous le souhaitez ajouter une ombre portée au texte pour améliorer sa lisibilité

Rubrique “Métadonnées texte”

• J’ai choisi de les mettre en capitales
• “Couleur du texte métadonnées” : #ffffff
• “Métadonnées taille du texte” : 18px

Rubrique “Lire plus texte”

• J’ai choisi de mettre le texte en capitales
• “Couleur du texte Lire plus” : #ffffff

Rubrique “Bordure”

• “Disposition de la grille Largeur de la bordure” : supprimez la bordure de la grille du blog en précisant une valeur de 0px.

Onglet “Avancé”

Ajoutez un ID CSS à votre module blog afin de le cibler plus précisément dans vos règles CSS.
Pour ma démo, j’ai utilisé l’ID CSS dc_blog.
Libre à vous de le modifier ici. Mais si tel est le cas, pensez également à le changer dans le code JS et CSS qui va suivre.

Ajoutez les CSS nécessaires

Réduisez la hauteur du module “Blog”

Étant donné que nous souhaitons placer le titre, les métadonnées, etc. sur l’image à la une de l’article, il faut supprimer l’espace qui pourrait subsister sous chaque article.
Pour cela, on remet à zéro la marge interne basse de chaque article et la marge externe basse de l’image à la une.

Positionnez le titre, les métadonnées et l’extrait

Il faut maintenant attribuer une position par défaut au titre, aux métadonnées et à l’extrait de l’article.
Grâce à jQuery, nous viendrons ensuite modifier les valeurs de position lors du survol.

• Ligne 3 : la classe .title_plus_meta cible un élément que nous allons créer un peu après avec jQuery et qui regroupera les métadonnées et le titre de l’article.
• Ligne 9 : par défaut, l’élément article n’a pas de positionnement spécifié ; ce qui nous poserait un problème pour la suite. Nous lui attribuons donc une position relative.
• Lignes 13 à 19 : on précise donc la position de l’élément qui contient l’extrait de l’article et le bouton “Lire plus”.
  Et on le masque par défaut en jouant sur son opacité et sa visibilité. On l’affichera au survol avec jQuery.

Quelques bonus pour aller plus loin

Les règles suivantes sont optionnelles mais permettent d’obtenir un design plus sympa.

Ajoutez un dégradé sur l’image

J’ai ajouté un petit dégradé du noir au transparent sur le bas l’image à la une. Ceci afin que le texte blanc soit plus lisible.

Affichez la catégorie dans un bloc

Pour faire ressortir le nom de la catégorie, je l’ai placé dans un bloc encadré avec un fond.
Notez le sélecteur a[rel="tag"]qui permet de ne cibler que le lien de la catégorie car celui-ci possède l’attribut relayant la valeur tag.

Personnalisez le bouton “Lire plus”

Par défaut, cet élément a un design très sommaire qui s’apparente plus à un simple lien texte.
Je l’ai donc stylé de façon à ce qu’il ressemble plus à un “vrai” bouton.

Je vous explique un peu plus loin comment modifier l’intitulé de ce bouton avec jQuery.

Ajoutez un effet Ken Burns à l’image à la une

Vous avez certainement remarqué qu’au survol, l’image à la une est zoomée et effectue une légère rotation.
Nous vous avions expliqué dans ce tuto il y a quelques années comment appliquer cet effet.

Modifiez les propriétés de transition, scale et rotate comme bon vous semble.
Attention toutefois à ne pas trop forcer sur l’effet pour qu’il reste élégant. Remarquez les faibles valeurs que j’ai utilisées.

On récapitule l’ensemble des CSS citées

Ajoutez le Javascript nécessaire

Désormais, il est temps de donner vie à notre mise en page grâce à jQuery.

Si vous ne savez pas où insérer ces lignes de Javascript, je vous invite à lire notre tutoriel Comment ajouter du code jQuery dans Divi.

Avant-propos

Je vais vous détailler point par point chaque étape et je récapitulerai à la fin l’intégralité du code à produire.

Tout d’abord, toutes les instructions sont à englober dans les fonctions suivantes :

• Ligne 1 : on indique que les instructions doivent se déclencher lorsque la structure html de la page est construite.
• Ligne 3 : cette fonction indique que les instructions s’appliqueront l’une après l’autre, dans l’ordre, déjà au premier article, puis au second, etc.

Intervertissez le titre et les métadonnées de l’article

Habituellement, les articles de Divi affichent déjà le titre puis les métadonnées (catégorie, date, etc.).
Nous allons donc inverser ces 2 éléments avec le code suivant :

• Remarquez l’utilisation de this qui fait référence au fait que nous sommes dans une fonction .each() et qui se rapporte à l’élément #dc_blog article.
• La méthode .insertAfter(), comme son nom l’indique, permet d’insérer le premier élément de l’instruction après le second.

Regroupez les métadonnées et le titre de l’article dans un même div

Par défaut, le titre et les métadonnées de l’article sont 2 éléments bien distincts.
Comme nous allons avoir besoin de jouer sur leur position, le plus simple est de les regrouper au sein d’un même div.

• On cible donc la classe du titre et des métadonnées. Avec la méthode .wrapAll(), on les englobe dans un div auquel on attribue la classe .title_plus_meta.
• Notez qu’il n’est pas nécessaire de préciser la balise fermante </div>.

Positionnez le div contenant les métadonnées et le titre de l’article

Il s’agit désormais de positionner ce nouveau div que nous venons de créer.
Sa position doit être dynamique car nous allons ensuite la modifier lors du survol.
Nous allons donc effectuer un petit calcul pour définir la position top de notre élément lors du chargement de la page.

• Ligne 1 : nous ciblons notre div et utilisons la méthode .css() pour modifier ses styles.
• Ligne 2 : vous reconnaissez la propriété CSS top à laquelle nous appliquons la valeur suivante :
  • on récupère la hauteur de l’image à la une
  • on lui soustrait la hauteur du div contenant (dans l’ordre) les métadonnées et le titre de l’article
  • on lui soustrait encore 20px qui correspondent à la marge que je souhaite laisser entre le titre et le bas de l’image à la une

Définissez la position au survol du div contenant les métadonnées et le titre de l’article

Maintenant, modifions la position du div lors du survol de l’article par le curseur de la souris.

• Ligne 1 : en ciblant l’article, nous créons une fonction avec l’événement .mouseenter(). Littéralement, à l’entrée de la souris sur l’article.
• Ligne 2 : nous agissons maintenant sur le div regroupant le titre et les métadonnées.
  Les méthodes .stop() et .animate()utilisées conjointement permettent de spécifier une animation pour l’objet et de la stopper si nécessaire.
  En l’occurence, dans notre cas ce sera si la souris sort de la zone d’affichage de l’article.
• Ligne 3 : c’est la propriété CSS top qui va être animée avec la valeur de 20px.
• Ligne 4 : on stipule la durée de l’animation ; ici 400ms.

Explicatif intermédiaire
À la rubrique précédente, nous avons défini dynamiquement une valeur pour la position top de notre div contenant le titre et les métadonnées.
En résumé : lors du chargement de la page, ceci place la partie haute de cet élément par exemple à 305px du haut de l’image à la une.
Et nous venons maintenant de préciser que si le curseur de la souris venait à survoler l’article, la partie haute de ce div devrait se situer à 20px du haut de l’image à la une.
En bref : on survole et ça monte !

Définissez la position du div contenant les métadonnées et le titre de l’article après le survol

Cette fois, il faut préciser l’état de ce div lorsque le curseur de la souris sort de l’article.

• Ligne 1 : toujours en ciblant l’article, on créé une fonction avec l’événement .mouseleave() ; c’est-à-dire, quand la souris quitte l’article.
• Ligne 2 : nous agissons toujours sur le div regroupant le titre et les métadonnées.
  Comme précédemment, nous retrouvons les méthodes .stop() et .animate().
• Ligne 3 : pour définir la valeur de la position top, on réutilise le calcul déjà utilisé pour positionner le div lors du chargement de la page.
• Ligne 4 : l’animation dure là encore 400ms.

Positionnez l’extrait de l’article au survol

Au survol de l’article, l’extrait apparait depuis le bas.

• Ligne 1 : en ciblant l’article, nous ajoutons une fonction avec l’événement .mouseenter().
• Ligne 2 : on modifie la propriété CSS concernant la visibilité de manière à rendre visible l’élément.
  On utilise toujours les méthodes .stop() et .animate().
• Ligne 3 : nous agissons encore sur la propriété CSS top à laquelle nous appliquons la valeur suivante :
  • on récupère la hauteur de l’image à la une
  • on lui soustrait la hauteur de l’extrait
  • on lui soustrait encore 20px qui correspondent à la marge que je souhaite laisser entre l’extrait et le bas de l’image à la une
• Ligne 4 : nous modifions également la propriété CSS gérant l’opacité afin de rendre l’élément opaque (donc visible).
• Ligne 5 : l’animation dure ici un peu plus longtemps que celle du titre et des métadonnées, ceci afin de casser un peu le rythme.

Définissez la position de l’extrait après le survol

Enfin, il ne nous reste plus qu’à préciser la position de l’extrait lorsque le curseur de la souris sort de l’article.

• Ligne 1 : toujours en ciblant l’article, on écrit une fonction avec l’événement .mouseleave().
• Ligne 2 : on modifie la visibilité de l’extrait afin de le masquer.
  Il y a bien entendu toujours les méthodes .stop() et .animate().
• Ligne 3 : on définit la position topde l’extrait en additionnant la hauteur de l’image à la une avec une valeur arbitraire de 20px ; ce qui place donc notre extrait plus bas que l’image à la une.
• Ligne 4 : on rétablit l’opacité de l’extrait sur complètement transparent.
• Ligne 5 : l’animation dure là encore 500ms.

Les instructions en bonus

Inversez la date et la catégorie

Si, comme dans ma démo, vous souhaitez que la catégorie de votre article apparaisse avant la date de publication, utilisez l’instruction suivante :

Supprimez le séparateur entre la catégorie et la date

En complément, peut-être aurez-vous besoin comme moi de supprimer le pipe (la petit barre verticale “|”) qui sépare ces 2 éléments.
Cette instruction permettra de le faire :

Modifiez l’intitulé du bouton “Lire plus”

Il existe plusieurs méthodes pour modifier ce fameux bouton mal traduit. Comme nous travaillons en Javascript, voici l’instruction jQuery permettant de faire cette modification.

Attention, cette instruction est à insérer après les balises fermantes )}; de la fonction `each()`.

Remplacez 'Lire l\'article' par le texte de votre choix.
Si votre texte contient un apostrophe, pensez à bien l’échapper avec un antislash comme je l’ai fait.

Récapitulons l’ensemble du code Javascript utilisé

Pour conclure

Nous voici arrivés au terme de ce long tutoriel qui vous apprend à personnaliser la page “blog” de Divi.
Vous savez désormais animer l’affichage des articles au survol et réordonner les divers composants selon vos envies.

J’espère que mes explications détaillées sur l’utilisation de jQuery vous ont également permis de mieux vous familiariser avec le développement en Javascript.
Libre à vous maintenant d’utiliser ces indications et de vous en inspirer pour créer votre propre design sur-mesure.

Partager