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

Ce tutoriel est une variante d’un précédent tuto

Voir la démo

Télécharger la source

Le CSS qui va bien

Tout d’abord le CSS de Divi met une largeur maximal à ce module. On va donc lui dire de prendre 100% de la largeur de notre ligne.

.dg-article-resume .et_pb_blurb_content {
 max-width: 100%;
 }

La partie Image

On va tout simplement aligner l’image à Droite et lui donner une largeur maximal de 80%.

.dg-article-resume .et_pb_main_blurb_image {
 text-align: right;
 }
.dg-article-resume .et_pb_main_blurb_image img {
 width: 80%;
 }

C’est tout 🙂

La partie Texte

Comme pour le précédent tuto, on met le conteneur du texte en Flex pour le centrer verticalement.
Plus d’information sur le fonctionnement de la disposition en Flex

.dg-article-resume .et_pb_blurb_container {
 display: flex;
 flex-direction: column;
 justify-content: center;
 height: 100%;
 position: absolute;
 top: 0;
 width: 30%;
 }

On le positionne également en absolute pour le passer par dessus de l’image.

C’est tout 🙂

Le reste du code CSS qui vous rencontrerai dans le fichier source est simplement de l’esthétisme.

Voir la démo

Télécharger la source

Importer les sources