Ce tuto n’est pas compatible mobile, l’affichage sera la mise en forme classique de Divi

Suite à une demande je vous ai préparé un tutoriel pour changer la mise en forme du module Blog de Divi.
La particularité de ce design est que le contenu chevauche l’image.

Voir la démo

Télécharger la source

Je vous ai préparé un visuel explicatif de ce qui nous attends !

Préparer le contenu du module Blog

Rien de très compliqué à cette étape, on va choisir d’afficher l’extrait pour chaque article et d’afficher l’auteur. c’est tout !

Le css qui va bien

Maintenant il faut retravailler l’html généré par Divi pour avoir ce que l’on souhaite.
Comme c’est une mise en forme qui ne passera pas sur mobile par manque de place, le plus lisible est de retrouver la mise en forme par défaut.
Pour cela on va utiliser les média Queries CSS

@media screen and (min-width: 768px) {
}

Il faudra que la fenêtre de notre navigateur ait une largeur minimal de 768px pour prendre en compte le CSS entre les les 2 { }

La partie Texte

.dg-article article {
 position: relative;
 z-index: 1;
 display: flex;
 flex-direction: column;
 justify-content: center;
 height: 350px;
 overflow: hidden;
 }

Je suis obligé de fixer une hauteur (350px). Comme notre image sera positionnée en absolute (plus bas dans ce tuto) cela poserai des problèmes de chevauchement en verticale entre 2 articles puisque seul la hauteur de notre contenu texte serai pris en compte et il est moins haut que l’image.

Le faite de fixer une hauteur notre contenu texte sera maintenant moins haut que son conteneur <article>.

On va même en profiter pour centrer tous le contenu au centre vertical grâce au display:flex; en direction column;


.dg-article .entry-title,
 .dg-article .post-meta,
 .dg-article .post-content {
 background: #fff;
 z-index: 2;
 width: 30%;
 margin: 0;
 position: relative;
 }

C’est ici que l’on fixe la largeur de nos textes ( ici 30% )

La partie Image

Si vous avez bien regardé le visuel au début de ce tuto, vous savez d »jà que l’image sera en absolute à droite.

 .dg-article .entry-featured-image-url {
 position: absolute;
 right: 0;
 width: 80%;
 z-index: 1;
 top: 0;
 }

Au passage je déclare aussi sa largeur de 80%.
je rappel que le texte fait 30% de large les 2 éléments vont se chevaucher de 10%. Libre à vous de changer ses valeurs dans le CSS.

Le z-index à 1 nous permet de passer l’image SOUS le texte qui lui est en z-index à 2.

Voir la démo

Télécharger la source

Importer les sources