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 drsquoeffet de défilement, nous pouvons transformer nrsquoimporte quelle image en ombre réelle. Dans ce tutoriel, nous montrerons comment créer des ombres drsquoimages en mouvement lorsque Défilez dans Divi. Lrsquoastuce est de trouver une image PNG avec une forme unique de sorte qursquoaprès la transformation, lrsquoimage conserve sa forme et ressemble à lrsquoombre réelle de lrsquoimage. Une fois lrsquoimage ombre prête, nous pouvons ajouter quelques effets de défilement pour déplacer les ombres pendant que lrsquoutilisateur 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, devez drsquoabord les en utilisant les boutons ci dessous. Pour accéder au téléchargement, devez abonner à notre liste de diffusion quotidienne Divi en utilisant le tableau ci dessous. En tant que nouvel utilisateur, recevrez plus de Divi Goods et un paquet gratuit Divi Layout le lundi! êtes déjà sur la liste, il suffit de saisir votre adresse e mail ci dessous et cliquez sur . Vous ne serez pas « ré abonné » ou recevrez un courriel supplémentaire.
Télécharger le fichier
Inscrivez à Divi Newsletter et nous enverrons par courriel une copie du dernier paquet de mise en page de la page drsquoatterrissage Divi, ainsi qursquoun grand nombre drsquoautres ressources, conseils et astuces Divi gratuits. Suivez nous et serez bientôt maître Divi. êtes déjà abonné, entrez votre adresse e mail ci dessous et cliquez sur pour accéder au paquet Layout. Vous êtes inscrit avec succès. Vérifiez votre adresse e mail
Crsquoest là que le texte sera conçu. Nous utiliserons lrsquoimage 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. Alors Téléchargez lrsquoimage. Dans lrsquoonglet conception, utilisez les paramètres du filtre pour réduire lrsquoopacité de lrsquoimage. Opacité: 20% Ensuite, utilisez les options de transformation suivantes pour déplacer lrsquoimage vers la gauche et vers le haut: Transform trans X: 20% Transform y: 90% Ensuite, donnez une position absolue à lrsquoimage. Position: absolue
Partie 2: créer des ombres drsquoimages 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 drsquoimage dans la colonne de droite.
Téléchargez ensuite une image drsquoau moins 800 pixels de largeur. Comme nous ajouterons des ombres mobiles pour les branches de lrsquoarbre, il est logique drsquoutiliser des images de position extérieure.
Ensuite, tracez la marge inférieure par défaut sous le formulaire comme suit: marge inférieure: 0px Créer lrsquoombre 1 de lrsquoimage en mouvement maintenant, nous sommes prêts à créer la première ombre de lrsquoimage en mouvement. Lrsquoidée de base est drsquoutiliser une image au format PNG pour ne pas afficher lrsquoarrière plan transparent de lrsquoimage. Ensuite, nous utiliserons lrsquoeffet filtre pour ajuster la luminosité, lrsquoopacité et le flou afin de transformer lrsquoimage pour qursquoelle ressemble à une ombre. Comme lrsquoimage PNG a une forme unique, les ombres conservent la même forme.
Commençons par ajouter la même image PNG de la branche du paquet de mise en page du thérapeute global. Et voilà Ajoutez un formulaire drsquoimage sous lrsquoimage dans la colonne de droite. Puis chargez l
