Comment recréer un aperçu d’un paquet de mise en page et en utilisant l’effet de vol stationnaire de la souris sectorielle dans Divi

Une caractéristique de la conception de nouveaux sites Web sur des thèmes élégants. Com est un aperçu du paquet de mise en page par défaut sur la page des produits Divi. La particularité de cette conception est que chaque paquet de mise en page a trois images séparées lorsque vous déplacez la souris. Aujourd’hui, nous allons vous montrer comment recréer la conception de l’aperçu d’un paquet de mise en page en utilisant l’effet de vol stationnaire tout aussi impressionnant du ventilateur dans Divi. En raison de la conception plus avancée, nous utiliserons quelques CSS personnalisés en combinaison avec les options de conception intégrées de Divi. Mais ne vous inquiétez pas, ça ne prendra pas beaucoup de temps à construire et ça en vaudra la peine.
On y va. Voici un aperçu du paquet de mise en page et de l’effet de vol stationnaire ventilateur. Notez que lorsque la souris se déplace, la ligne inférieure produit un effet, et lorsque la souris se déplace, l’image est tournée individuellement. La disposition en trois colonnes sur le Bureau correspondra à une colonne sur la tablette et le téléphone. Téléchargement gratuit de la mise en page des effets lorsque vous passez le curseur sur l’aperçu du paquet de mise en page Pour maîtriser les graphiques 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 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à inscrit, entrez votre adresse e – mail
Cliquez sur tout 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 d’extraire le fichier zip et de faire glisser le fichier json dans Divi Builder.
On va voir le tutoriel, non? Pour commencer à vous abonner à notre canal YouTube, vous devez configurer le thème Divi et activer une nouvelle page créée à partir de zéro sur le générateur frontal (visuel) de Divi. Trois images pour un contenu fictif. L’image doit être d’environ 250 pixels x 375 pixels pour un effet optimal. Comme il s’agit d’un aperçu de page Web, vous pouvez créer n’importe quelle capture d’écran de votre propre conception de page, puis recadrer \/ redimensionner chaque image en conséquence. Ensuite, lorsque vous passez le curseur sur Divi, vous aurez une toile vierge pour commencer à créer des onglets.
Recréer les sections de construction d’aperçu et les lignes du paquet de mise en page et en utilisant l’effet de défilement de la souris de secteur dans Divi créer de nouvelles sections générales en utilisant trois lignes de colonne. Avant d’ajouter des modules, ouvrez les paramètres de ligne et mettez à jour la taille et l’espacement comme suit: largeur de la gouttière: 2 largeur: 90% largeur maximale: 1120 Px (bureau), 400 Px (tablette) Ensuite, ajoutez un peu de remplissage aux lignes de la tablette pour augmenter l’espacement sur l’appareil mobile. Colonne 1 remplissage: 20% vers le bas colonne 2 remplissage: 20% vers le bas colonne 3 Remplissage: 20% vers le bas Ajouter l’image 1 maintenant, nous sommes prêts à ajouter la première des trois images qui composent la conception de l’aperçu du paquet de mise en page. Continuez à ajouter le module image à la colonne 1. L’image est ensuite téléchargée dans le module image (pour 3
Utilisez le schéma d’affichage wireframe parce que nous avons quelques chevauchements qui rendent l’utilisation de Visual Builder plus difficile. Déployez le mode wireframe et copiez l’image 2. Nous avons copié l’image parce que nous transférons la plupart des paramètres pour l’image 2. La seule différence (sauf la nouvelle image) est que nous devons placer l’image à droite, pas à gauche.
Ouvrez l’image copiée (Figure 3) et mettez à jour le formulaire d’image avec la nouvelle image (250 × 375). Le CSS personnalisé est ensuite mis à jour en changeant la propriété de position gauche en propriété de position droite. Aucune autre modification du CSS n’est nécessaire. Si vous le souhaitez, vous pouvez copier et coller le CSS suivant dans l’élément principal pour remplacer le CSS actuel. Position: absolument! Important
En haut: 12px;
Droite: 25px;
Hauteur: 200px;
Ombres de boîte: 0 10px 70px 0 rgba (103151255,.22), 0 15px 105px 0 rgba (103151255,.22);
Rayon limite: 9px;
Jusqu’à présent, tout va bien et c’est le résultat final. Bien que le design soit vraiment beau, faisons un saut qualitatif avec l’effet de vol stationnaire du ventilateur. Ajouter un effet CSS de ventilateur de vol stationnaire habituellement, si nous traitons une seule image, nous pouvons facilement ajouter l’effet au – dessus de la souris en utilisant l’option Divi intégrée. Mais cet effet de vol stationnaire exige que nous activions simultanément l’état de vol stationnaire de plusieurs éléments enfants (images) Lorsque nous survolons la colonne mère. Lorsque vous passez le curseur sur une colonne, vous voulez apporter les ajustements suivants à l’image. Ajoutez une durée de transition à chaque image pour lisser la transition lorsque vous déplacez la souris. Ajuster l’image 1 à 180 Px de largeur et 240 Px de hauteur. Cela fait que le conteneur d’image devient plus grand et plus étroit pour afficher plus d’images. Ajuster l’image 2 et
– Oui. Et \ \ u pb \ \ u Image: n enfant (3) {
Droite: 0;
– transformation webkit: rotation (5 degrés);
Transformation: rotation (5 degrés);
} J’a i ajouté un commentaire au – dessus de chaque clip css pour vous rappeler ce que chaque clip CSS fait. Une fois terminé. Vérifiez le résultat final. Résultats finaux Effet de vol stationnaire optionnel: lorsque vous faites tourner les images 1 et 2 en vol stationnaire respectivement, pour ajouter une autre couche participante à l’image d’aperçu du paquet de mise en page, vous pouvez faire tourner les images 1 et 2 séparément de l’effet de vol stationnaire initial. Cela permettra à l’utilisateur d’interagir avec l’image d’une manière unique. Vous pouvez également ajouter des liens individuels ou des aperçus de Lightbox à ces images si vous le souhaitez. C’est ce que tu fais. Extraire les propriétés de conversion de la configuration de page CSS personnalisée d’abord, vous devez supprimer deux lignes de CSS personnalisés qui tournent l’image lorsque vous passez le curseur sur une colonne. Ouvrez le CSS personnalisé pour la configuration de la page et extrayez ce qui suit: – transformation webkit: rotation (- 5deg);
Transformation: rotation (- 5 degrés);
– transformation webkit: rotation (5 degrés);
Transformation: rotation (5 degrés);
Ajoutez les attributs de transformation à la transmission de la souris pour l’image 2, puis ouvrez les paramètres du module image pour l’image 2, et utilisez les options de transformation intégrées de Divi pour ajouter les mêmes valeurs de rotation de transformation que nous avons précédemment supprimées pour afficher l’état lorsque la souris passe. Changer la roue de l’axe Z (stationnaire): – 5deg changer la roue de l’axe X (stationnaire): – 20px Ajoutez les attributs de transformation lorsque vous passez le curseur sur l’image 3, puis Rafraîchissez les paramètres du module d’image pour l’image 3 pour ajouter les attributs de rotation de transformation. Changer la roue de l’axe Z (stationnaire): 5deg changer la roue de l’axe X (stationnaire): 20px Vérifiez maintenant les résultats finaux. Résultats finaux Ajouter un lien
Images si vous souhaitez créer un lien de redirection pour afficher une mise en page spécifique ou un paquet de conception de page sur une page séparée, vous devrez peut – être ajouter la même URL de lien aux trois images du paquet. Pour ce faire, ouvrez chaque module image et ajoutez une URL de lien. Ajoutez un nouvel aperçu du paquet de mise en page à d’autres colonnes pour compléter le dessin, et nous pouvons copier trois images dans la colonne 1, puis les coller dans les colonnes 2 et 3. Ensuite, tout ce que vous avez à faire est de mettre à jour chaque image dans les colonnes 2 et 3 avec la nouvelle image. C’est tout! C’est la conception finale. Lorsque vous passez le curseur sur une colonne, la ligne supérieure affiche l’effet lorsque vous passez le curseur sur la souris. La deuxième ligne montre l’effet de vol stationnaire auxiliaire du ventilateur ajouté aux images 2 et 3, respectivement. La disposition en trois colonnes sur le Bureau correspondra à une colonne sur la tablette et le téléphone. L’effet de vol stationnaire en forme de ventilateur est un élément de conception magnifique et accrocheur que vous pouvez utiliser pour rendre la mise en page sur votre site Web. La combinaison de CSS personnalisés et de paramètres Divi intégrés que nous avons décrits dans ce tutoriel fonctionnera merveilleusement. Cette configuration sera un bon point de départ pour explorer d’autres conceptions en utilisant Divi Builder. J’espère que cela vous donnera un peu d’inspiration pour faire avancer votre portefeuille. J’ai hâte d’entendre vos commentaires. Bonjour!