Comment concevoir des reflets pour les images et le texte dans Divi
Publié: 2019-05-19La conception de réflexions 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. Et, Divi facilite la création de ces reflets directement à partir du Divi Builder sans avoir à utiliser un éditeur de photos.
Dans ce tutoriel, je vais vous montrer comment concevoir des reflets pour les images et le texte dans Divi. La clé pour créer des reflets est d'utiliser l'option d'échelle de transformation de Divi pour créer une version en miroir de l'élément. Après cela, vous pouvez ajouter une superposition personnalisée que je vais vous montrer comment faire avec un module de texte.
Commençons!
Aperçu
Voici un aperçu des conceptions que nous allons construire dans ce tutoriel.
Téléchargez GRATUITEMENT la mise en page des réflexions de texte et d'image
Pour mettre la main sur les designs de ce tutoriel, vous devrez d'abord le télécharger en utilisant le bouton ci-dessous. Pour accéder au téléchargement, vous devrez vous inscrire à notre liste de diffusion Divi Daily en utilisant le formulaire ci-dessous. En tant que nouvel abonné, vous recevrez chaque lundi encore plus de bienfaits Divi et un pack Divi Layout gratuit ! Si vous êtes déjà sur la liste, entrez simplement votre adresse e-mail ci-dessous et cliquez sur télécharger. Vous ne serez pas « réinscrit » ni ne recevrez d'e-mails supplémentaires.
Télécharger gratuitement
Rejoignez la newsletter Divi et nous vous enverrons par e-mail une copie du pack ultime de mise en page de la page de destination Divi, ainsi que des tonnes d'autres ressources, trucs et astuces Divi incroyables et gratuits. Suivez-le et vous serez un maître Divi en un rien de temps. Si vous êtes déjà abonné, saisissez simplement votre adresse e-mail ci-dessous et cliquez sur télécharger pour accéder au pack de mise en page.
Vous vous êtes enregistré avec succès. Veuillez vérifier votre adresse e-mail pour confirmer votre abonnement et accéder aux packs de mise en page Divi hebdomadaires gratuits !
Pour importer la mise en page sur votre page, extrayez simplement le fichier zip et faites glisser le fichier json dans le Divi Builder.
Passons au tutoriel, voulez-vous ?
Abonnez-vous à notre chaîne Youtube
Ce dont vous avez besoin pour commencer
Pour commencer, il vous suffit de Divi. Assurez-vous que le thème Divi est installé et actif. Nous allons créer nos designs à partir de zéro en utilisant le Divi Builder sur le front-end (constructeur visuel). Vous aurez également besoin de quelques images fictives pour ce tutoriel (une image de fond 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 un nouveau. Donnez un titre à votre nouvelle page et déployez le Divi Builder sur le front-end. Sélectionnez l'option « Créer à partir de zéro ». 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 derrière la création de designs de réflexion dans Divi implique trois étapes :
- Créez un module avec votre image ou votre texte
- Dupliquez le module et utilisez l'échelle de transformation pour créer l'image ou le texte en miroir
- Ajoutez une superposition de dégradé à l'élément en miroir à l'aide d'un séparateur ou d'un module de texte à position absolue.
Cette technique de conception n'est pas limitée à des modules individuels. Vous pouvez réellement ajouter des reflets à 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 ajouterons une réflexion à une ligne dans notre conception de réflexion de texte un peu plus tard dans ce didacticiel. Mais pour l'instant, commençons par comment créer une réflexion d'image.
Comment créer une réflexion d'image
Pour créer un reflet d'image, commençons par créer une nouvelle section régulière avec une ligne à une colonne.
Ajoutez ensuite un module d'image à la ligne.
Téléchargez l'image souhaitée de la galerie multimédia vers le module d'image. Mettez ensuite à jour les paramètres d'image suivants :
Largeur maximale : 600 px
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 en miroir de l'image directement sous l'image.
Pour ce faire, dupliquez le module image. Mettez ensuite à jour les paramètres de l'image dupliquée comme suit :
Opacité : 40%
Transformer l'axe X de l'échelle : -100 %
La propriété transform scale est ce qui fait pivoter l'image verticalement et horizontalement pour créer une version miroir de l'image.
Cela prend en charge la conception de réflexion de base. Cependant, nous pouvons ajouter une superposition de dégradé supplémentaire à notre image du bas 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 superposition de dégradé à notre image du bas, nous pouvons utiliser un module de texte. Nous pouvons donner au module de texte une position absolue afin 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 diviseur) vous donnera l'option bonus d'ajouter ultérieurement du contenu au-dessus de l'image de réflexion si vous le souhaitez.
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.
Mettez ensuite à jour les paramètres du module de texte comme suit :
Couleur d'arrière-plan du dégradé de gauche : rgba(255,255,255,0)
Dégradé d'arrière-plan à droite : #ffffff
Largeur : 100 %
Hauteur : 50 %
Ajoutez ensuite le CSS personnalisé suivant à l'élément principal :
position: absolute !important; top: 50%;
Ce positionnement absolu du module de texte recouvre le module de texte sur la moitié inférieure de la ligne.
Voyons à quoi ressemble le design jusqu'à présent.
Ajouter une couleur d'arrière-plan
Si vous ne voulez pas d'arrière-plan blanc, vous pouvez expérimenter avec d'autres couleurs d'arrière-plan pour créer un motif de réflexion unique sur toute la largeur.
Pour ce faire, ouvrez les paramètres de ligne et mettez à jour les éléments suivants :
Couleur d'arrière-plan : #000000
Largeur : 100 % :
Largeur maximale : 100 % ;
Rembourrage personnalisé : 0px en haut, 0px en bas
Voyons maintenant le résultat.
Ajout de texte à la superposition du module de texte
N'oubliez pas que, puisque nous utilisons un module de texte comme superposition sur l'image du bas, nous pouvons ajouter du contenu si nous le souhaitons.
Pour ce faire, ouvrez les paramètres du module de texte et mettez à jour les éléments suivants :
Contenu : « Réflexion d'image »
Texte Couleur du texte : #ffffff
Taille du texte du texte : 30px
Orientation du texte : centre
Conception finale
Voici la conception finale de la réflexion de l'image.
Créer une réflexion de texte dans Divi
Pour cet exemple suivant, nous allons créer une conception de réflexion de texte. Le processus est très similaire à la façon dont vous créeriez un reflet d'image. Cependant, pour cet exemple, je vais créer une réflexion pour une ligne entière. Cela permettra à l'utilisation de refléter à la fois le texte et l'image d'arrière-plan pour un joli design d'en-tête.
Voici comment faire.
Créez d'abord une nouvelle section régulière avec une ligne à une colonne. Ajoutez ensuite un module de texte à la ligne.
Mettez à jour le contenu avec le mot « Reflection ».
Mettez ensuite à jour les paramètres de conception comme suit :
Police du texte : Oswald
Style de police de texte : TT
Texte Couleur du texte : #333333
Taille du texte du texte : 10vw
Hauteur de la ligne de texte : 0,9 em
Orientation du texte : centre
Marge personnalisée : 0px en bas
Rembourrage personnalisé: dessus 4vw
Mettre à jour les paramètres de ligne
Maintenant que notre module de texte est personnalisé, il est temps de mettre à jour les paramètres de la ligne.
Ouvrez les paramètres de ligne et mettez à jour les éléments suivants :
Image d'arrière-plan : insérer une image d'arrière-plan
Largeur de gouttière : 1
Largeur : 100 %
Largeur maximale : 100 %
Rembourrage personnalisé : 0px en haut, 0px en bas
Voici à quoi ressemble le design jusqu'à présent.
Création de la ligne de texte de réflexion
Pour créer le texte de réflexion pour cette conception, nous allons refléter la ligne entière afin que nous puissions inclure l'image d'arrière-plan dans la réflexion.
Dupliquez la ligne et mettez à jour les éléments suivants :
Axe Y de l'échelle de transformation : -100 %
Maintenant, la ligne ci-dessous est une image miroir de la ligne ci-dessus. Il ne nous reste plus qu'à ajouter une superposition.
Ajouter une superposition de dégradé à l'aide d'un module de texte
Pour ajouter une superposition de dégradé à notre réflexion de texte de la rangée inférieure, nous pouvons utiliser un module de texte comme nous l'avons fait dans la première conception de réflexion d'image ci-dessus. Comme auparavant, nous pouvons donner au module de texte une position absolue afin qu'il remplisse toute la ligne et se place au-dessus de l'autre module de texte avec notre texte de réflexion. Ensuite, nous pouvons ajouter un fond dégradé à la superposition du module de texte.
Allez-y et créez un nouveau module de texte sous le module de texte dans la rangée du bas.
Ouvrez les nouveaux paramètres du module de texte et supprimez le contenu afin que le module de texte soit vide.
Ensuite, mettez à jour les paramètres comme suit :
Couleur d'arrière-plan du dégradé à gauche : #ffffff
Dégradé d'arrière-plan à droite : rgba(255,255,255,0.13)
Position de départ : 38 %
Largeur : 100 %
Hauteur : 100 %
Ajoutez ensuite le CSS personnalisé suivant à l'élément principal :
position: absolute !important; top: 0;
C'est ça!
Résultat final
Découvrez le résultat final.
Voici le même design sans aucune image de fond.
Dernières pensées
Les reflets peuvent avoir l'air vraiment cool si vous prenez le temps de les concevoir de la bonne manière. Heureusement, Divi a les outils pour y arriver. Il existe d'autres méthodes pour créer des réflexions CSS, mais malheureusement, elles ont tendance à ne pas être compatibles avec tous les navigateurs. Les conceptions de ce didacticiel auront fière allure sur tous les navigateurs.
J'ai trouvé que les réflexions ont fière allure sur les en-têtes de page et sur la présentation d'images pour une pièce de portfolio. Et je suis sûr qu'il y a aussi beaucoup d'autres implémentations.
J'ai hâte de vous entendre dans les commentaires.
À votre santé!