Dans le domaine de la conception web, nous considérons généralement les ombres comme quelque chose que nous pouvons ajouter à Photoshop, ou comme des attributs CSS (comme les ombres de boîte ou de texte). Mais avec Divi, on peut sortir de la boîte. En apportant quelques modifications aux filtres intégrés de Divi et aux options d’effet de défilement, nous pouvons transformer n’importe quelle image en ombre réelle. Dans ce tutoriel, nous vous montrerons comment créer des ombres d’images en mouvement lorsque vous Défilez dans Divi. L’astuce est de trouver une image PNG avec une forme unique de sorte qu’après la transformation, l’image conserve sa forme et ressemble à l’ombre réelle de l’image. Une fois l’image \ ombre prête, nous pouvons ajouter quelques effets de défilement pour déplacer les ombres pendant que l’utilisateur défile. Cet effet extraordinaire (mais familier) ajoutera un élément de conception extraordinaire à votre site Web pour apporter une nouvelle vitalité.
Allons – y! Voici une brève introduction à la conception que nous allons construire dans ce tutoriel. Téléchargement gratuit mise en page pour obtenir les dessins de ce tutoriel, vous devez d’abord les télécharger en utilisant les boutons ci – dessous. Pour accéder au téléchargement, vous devez vous abonner à notre liste de diffusion quotidienne Divi en utilisant le tableau ci – dessous. En tant que nouvel utilisateur, vous recevrez plus de Divi Goods et un paquet gratuit Divi Layout le lundi! Si vous êtes déjà sur la liste, il vous suffit de saisir votre adresse e – mail ci – dessous et cliquez sur télécharger. Vous ne serez pas « ré – abonné » ou vous recevrez un courriel supplémentaire.
Télécharger le fichier
C’est là que le texte sera conçu. Nous utiliserons l’image de la branche dans le paquet de mise en page du thérapeute holistique. Ce sera la même image que nous utiliserons plus tard pour déplacer les ombres.
Ajouter une image ajouter un nouveau formulaire image sous le formulaire texte.
Partie 2: créer des ombres d’images en mouvement une fois la fiction terminée dans la colonne de gauche, nous pouvons commencer à créer des images en mouvement et des ombres.
Ajouter une image primaire ajouter un nouveau module d’image dans la colonne de droite.
Ajouter une image primaire ajouter un nouveau module d’image dans la colonne de droite.
Téléchargez ensuite une image d’au moins 800 pixels de largeur. Comme nous ajouterons des ombres mobiles pour les branches de l’arbre, il est logique d’utiliser des images de position extérieure.
Ensuite, tracez la marge inférieure par défaut sous le formulaire comme suit: marge inférieure: 0px
Commençons par ajouter la même image PNG de la branche du paquet de mise en page du thérapeute global. Et voilà…