Superposer deux images sur Divi

Divi | Wordpress
Retour au blog
  • Blog
  • 9
  • Superposer deux images sur Divi

3 Table des matières

Publié le 13/03/2024 | Mis à jour le 15/05/2024

Introduction

Dans cet article, nous allons voir comment superposer deux images avec le thème builder Divi.
Le résultat est disponible ci-dessous.

pexels photo 2113566 scaled
Logo HTTB

Your content goes here. Edit or remove this text inline or in the module Content settings. You can also style every aspect of this content in the module Design settings and even apply custom CSS to this text in the module Advanced settings.

Prérequis

Pour commencer, nous avons besoin du thème Divi installer, activer et mis à jour sur votre installation de WordPress. Vous pouvez suivre cet article pour le faire si ce n’est pas déjà fait : Installer le thème Divi sur WordPress.

Création de l’environnement

Nous allons créer une page vierge avec le Divi Builder pour se faire rendez-vous dans :
Pages > Ajouter une page > Utiliser le Divi Builder > Construire à partir de zéro.

La page est maintenant créée, nous pouvons mettre en place notre superposition d’image.

Superposer des images

Dans notre page nouvellement créée, nous allons ajouter une ligne avec deux colonnes. D’un côté, nous ajoutons un module image et de l’autre du texte. La disposition de la ligne n’est pas vraiment importante. J’ai choisi un cas classique où nous avons du texte à côté d’une image.

Imag

Nous allons modifier cette image par une image standard trouvée sur le net. J’ai utilisé une image téléchargée depuis le site Pexels pour l’exemple.

Étape 2 de la superposition d'images

On va maintenant ajouter un second module image juste en dessous du premier (en restant dans la même ligne). Dans ce module image, j’y ai placé le logo de notre agence web HTTB.

Étape 2 de la superposition d'images

On va maintenant modifier les paramètres du second module image pour le placer en position absolue.

superposer images4

On peut voir que déjà, nous avons un résultat. Et que la seconde image se place sur la première. On peut maintenant jouer avec le décalage vertical et horizontal pour choisir où l’on souhaite la placer. Je déconseille d’utiliser des pixels pour ça, le responsive ne sera pas beau à voir ! On peut aussi jouer sur l’emplacement de l’image qui permet de choisir où l’on souhaite la placer. Ce paramètre peut ne pas se comporter comme on le veut selon l’alignement de l’image (dans l’onglet style).

Après libre à vous de personnaliser cela comme vous le souhaitez. Pour ma part, j’ai rajouté un peu de « border radius »(arrondis sur les angles) pour ma première image afin que la deuxième s’intègre correctement.