skip to Main Content

Comment créer des reflets d’images sur Divi

Divi : le thème WordPress le plus facile à utiliser

Divi : Le meilleur thème WordPress de tous les temps !

Avec plus de 600.000 téléchargements, Divi est le thème WordPress le plus populaire au monde. Il est complet, facile à utiliser et livré avec plus de 62 templates gratuits. [ Recommandé ]

La conception de reflets pour les images et le texte est une technique de conception classique qui peut être utilisée pour pimenter le contenu d’une page Web. De plus, Divi facilite la création de ces réflexions directement à partir de Divi Builder sans avoir à utiliser un éditeur de photo.

Dans ce tutoriel, je vais vous montrer comment concevoir des réflexions pour des images sur Divi. La clé pour effectuer des réflexions consiste à utiliser l’option de transformation de Divi pour créer une version miroir d’un élément. Après cela, vous pouvez ajouter une superposition personnalisée que je vous montrerai comment utiliser avec un module de texte.

Commençons !

Aperçu

Voici un aperçu des designs que nous allons construire dans ce tutoriel.

Ce dont vous avez besoin pour commencer

Pour commencer, tout ce dont vous avez besoin est Divi. Assurez-vous que le thème Divi est installé et actif. Nous allons créer nos conceptions à partir de zéro en utilisant Divi Builder sur le front-end (constructeur visuel). Vous aurez également besoin de quelques images factices pour ce tutoriel (une image d’arrière-plan d’environ 1920px x 600px et une autre image d’environ 500px x 350px).

Lorsque vous êtes prêt, accédez à votre tableau de bord WordPress et accédez à Pages > Ajouter. Donnez un titre à votre nouvelle page et déployez Divi Builder sur le front-end. Sélectionnez l’option “Build from Scratch”. Maintenant, vous êtes prêt à partir !

L’idée de base derrière la création d’une réflexion d’image et de texte dans Divi

L’idée de base de la création de motifs de réflexion dans Divi comprend trois étapes:

  1. Créer un module avec votre image ou votre texte
  2. Dupliquer le module et utiliser l’échelle de transformation pour créer l’image ou le texte en miroir
  3. Ajouter une superposition de dégradé à l’élément en miroir à l’aide d’un diviseur ou d’un module de texte à positionnement absolu.

Cette technique de conception ne se limite pas à des modules individuels. Vous pouvez réellement ajouter des réflexions à des lignes entières dans Divi en utilisant cette méthode, qui est utile pour créer des conceptions d’en-tête uniques. Nous allons ajouter la réflexion à une ligne de notre conception de réflexion de texte un peu plus tard dans ce didacticiel. Mais pour l’instant, commençons par créer un reflet d’image.

Comment créer une réflexion d’image

Pour créer une réflexion d’image, commençons par créer une nouvelle section régulière avec une ligne d’une colonne.

Ajoutez ensuite un module d’image à la ligne.

Créez Facilement votre site Web avec Elementor

Elementor vous permet de créer facilement n'importe quel design de site Web avec un look professionnel. Arrêtez de payer cher pour ce que vous pouvez faire vous-même. [ Gratuit ]

Téléchargez l’image que vous voulez de la médiathèque vers le module image. Puis mettez à jour les paramètres d’image suivants:

Largeur maximale: 600px
Alignement du module: centre
Marge personnalisée: 0px en bas

Créer l’image miroir

Pour créer l’effet de réflexion, nous devons d’abord créer une copie dupliquée de l’image directement sous l’image.

Pour ce faire, dupliquez le module image. Puis mettez à jour les paramètres de l’image dupliquée comme suit:

Opacité: 40%
Axe X de l’échelle de transformation: -100%

La propriété Transform scale est ce qui fait basculer magiquement l’image verticalement et horizontalement pour créer une version en miroir de l’image.

Cela prend en charge la conception de réflexion de base. Cependant, nous pouvons ajouter une incrustation de dégradé supplémentaire à notre image inférieure pour une conception de réflexion plus réaliste.

Ajouter une superposition de dégradé à l’aide d’un module de texte

Pour ajouter une incrustation de dégradé à notre image inférieure, nous pouvons utiliser un module de texte. Nous pouvons donner au module de texte une position absolue de sorte qu’il se trouve au-dessus de l’image du bas. Ensuite, nous pouvons ajouter un fond dégradé au module de texte. L’utilisation d’un module de texte (au lieu d’un séparateur) vous donnera l’option supplémentaire d’ajouter du contenu par-dessus l’image de réflexion ultérieurement si vous le souhaitez.

Cherchez-vous les meilleurs thèmes et plugins WordPress ?

Téléchargez les meilleurs plugins et thèmes WordPress sur Envato et créez facilement votre site web. Déjà plus de 49.720.000 de téléchargements. [EXCLUSIF]

Allez-y et créez un module de texte sous l’image du bas.

Supprimez le contenu par défaut afin que le module de texte soit vide.

Divi Reflections pour le texte et les images

Puis mettez à jour les paramètres du module de texte comme suit:

Dégradé de fond à gauche Couleur: rgba(255,255,255,0)
Dégradé de fond à droite Couleur: #ffffff

Largeur: 100%
Hauteur: 50%

Ajoutez ensuite le code CSS personnalisé suivant à l’élément principal:

position: absolute !important;
top: 50%;

Ce positionnement absolu du module de texte superpose le module de texte sur la moitié inférieure de la ligne.

Ajout d’une couleur de fond

Si vous ne souhaitez pas d’arrière-plan blanc, vous pouvez utiliser d’autres couleurs d’arrière-plan pour créer un motif de réflexion sur toute la largeur.

Pour ce faire, ouvrez les paramètres de ligne et mettez à jour les éléments suivants:

Couleur de fond: #000000
Largeur: 100%:
Largeur Max: 100%;
Rembourrage sur mesure: 0px haut, 0px bas

Créez Facilement votre Boutique en ligne

Téléchargez gratuitement WooCommerce, le meilleurs plugins e-commerce pour vendre vos produits physiques et numériques sur WordPress. [Recommandé]

Voyons maintenant le résultat.

Les réflexions peuvent sembler vraiment cool si vous prenez le temps de les concevoir correctement. Heureusement, Divi a les outils pour y arriver. Il existe d’autres méthodes pour effectuer des réflexions CSS, mais malheureusement, elles ont tendance à manquer de support de la part des navigateurs. Les dessins de ce didacticiel auront fière allure sur tous les navigateurs.

J’ai constaté que les réflexions avaient fière allure dans les en-têtes de page et dans la présentation d’images pour un élément de portefeuille. Et je suis sûr qu’il y a beaucoup d’autres implémentations.

C’est tout pour ce tutoriel, j’espère qu’il vous permettra d’ajouter des reflets sur votre site WordPress en utilisant les fonctionnalités internes de Divi.

Cet article comporte 0 commentaires

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Ce site utilise Akismet pour réduire les indésirables. En savoir plus sur comment les données de vos commentaires sont utilisées.

Back To Top
1 Partages
Partagez1
Tweetez
Enregistrer