Comment concevoir un mur photo 3D dans Divi en utilisant les options de perspective et de transformation

Vous ne pouvez concevoir des murs de photos 3D qu’en utilisant un éditeur de photos comme Photoshop ou sketch. Mais ce n’est pas le cas! Aujourd’hui, il y a beaucoup de projets apparemment impossibles que vous pouvez construire sur le Web en utilisant CSS seulement. Avec un générateur de page comme Divi, il n’est même pas nécessaire d’en savoir beaucoup sur css pour créer une telle conception. C’est pourquoi je vais vous montrer aujourd’hui comment concevoir un mur photo 3D dans Divi. L’astuce est d’utiliser l’attribut CSS de perspective. Une fois qu’une ligne de CSS est ajoutée à l’élément parent, vous pouvez utiliser l’option de conversion intégrée de Divi pour faire tourner l’élément dans un design 3D réaliste.
Allons – y! Voici un aperçu du mur photo 3D que nous allons concevoir aujourd’hui. Téléchargement gratuit exemples de mise en page de murs de photos 3D pour obtenir des dessins de murs de photos 3D dans 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 Inscrivez – vous à Divi Newsletter et nous vous enverrons par courriel une copie du dernier paquet de mise en page de la page d’atterrissage Divi, ainsi qu’un grand nombre d’autres ressources, conseils et astuces Divi gratuits. Suivez – nous et vous serez bientôt maître Divi. Si vous êtes déjà abonné, entrez votre adresse e – mail ci – dessous et cliquez sur télécharger pour accéder au paquet Layout. Vous vous êtes inscrit avec succès. Vérifiez votre adresse e – mail pour confirmer votre abonnement et Obtenez gratuitement le paquet hebdomadaire Divi Layout! Pour importer une mise en page dans une page, il suffit de décompresser le fichier zip
Ci – dessous. Ensuite, ouvrez les paramètres de ligne pour la nouvelle section et Restaurez les options de conversion à l’état par défaut. Alors copiez cette ligne. Ensuite, copiez la ligne (et non la section) et le titre qui contient le formulaire texte dans le premier exemple de conception. Ensuite, collez – le entre les deux lignes qui contiennent l’image. C’est une configuration similaire à celle de la première feuille, sauf que toutes nos lignes sont en une seule section. C’est important pour la prochaine étape. Nous voulons que nos deux murs d’image soient à gauche et à droite de la page, avec le texte au milieu. Une façon simple est d’utiliser Flex Display dans nos sections. Cela permettra d’aligner nos lignes horizontalement à l’intérieur de la section. Pour ce faire, ouvrez la section paramètres et ajoutez les CSS personnalisés suivants à l’élément principal: (Notez que nous avons augmenté la valeur de perspective à 700 Px pour créer plus de distance d’espace Z que la perspective de l’utilisateur.) Principaux éléments du CSS: perspective: 700px;
Affichage: Flex; Regarde! Nos murs sont prêts à tourner. Ajoutez plus d’images aux murs plus hauts pour rendre notre mur photo 3D plus haut, tout ce que nous avons à faire est d’ajouter une autre image dans chacune des quatre colonnes de chaque ligne contenant l’image. Assurez – vous qu’ils ont 3% de remplissage comme tout le monde. Avant de faire tourner le mur d’image, changez la largeur des deux lignes latérales, et nous devons d’abord ajuster la largeur à 100%. Ouvrez les paramètres de ligne du mur d’image gauche et mettez à jour ce qui suit: largeur: 100% (bureau, tablette, téléphone) largeur maximale: 100% Par conséquent, faites de même pour la ligne de droite. Tourner les lignes de bord pour un effet 3D maintenant, nous sommes prêts à ajouter la rotation de transformation à chaque ligne. À l’intérieur.
Page design. Je dois dire qu’il est vraiment intéressant d’utiliser les techniques de cet article pour tester différentes conceptions. Les propriétés de perspective et les options de transformation travaillent ensemble pour créer d’innombrables formes de vie, comme des projets 3D! N’oubliez pas que ces lignes (ou murs) peuvent être remplies avec n’importe quel formulaire dans Divi. On peut aussi essayer de faire de la publicité. J’espère que cela vous motivera à créer quelque chose d’unique aujourd’hui. J’ai hâte d’entendre vos commentaires. Bonjour!