Comment changer & # 39; Images en vol stationnaire avec Divi

Tablette), 50 pixels (téléphone) en – tête 3 lettres Espacement: – 4px Titre 3 ombres de texte longueur horizontale: 0,04 em titre 3 ombres de texte longueur verticale: 0,04 em titre 3 ombres de texte couleur: rgba (0,0,0,0,6) Espacement Enfin, ajoutez une marge plus élevée au réglage de l’espacement. Marge supérieure: 100 pixels (bureau), 50 pixels (tablette et téléphone) Ajouter un module séparateur au séparateur d’affichage de colonne 2 ajouter un module séparateur directement sous le module texte de l’en – tête de colonne 2. Afficher les séparateurs: Oui La couleur du séparateur change la couleur du séparateur suivant. Couleur du séparateur: # e25300 Style e sélectionnez un autre style de séparateur dans les paramètres de style.
Styles de séparateurs: lignes pointillées Le poids du séparateur est également augmenté dans le réglage des dimensions. Poids du séparateur: 3px Ajoutez le module corps à la colonne 2, puis ajoutez le contenu du dernier module! Dans la deuxième colonne, ajoutez le formulaire texte du corps qui contient certains de vos choix. Paramètres de texte modifier les paramètres de texte plus tard. Taille du texte: 16px hauteur de la ligne de texte: 2.3 direction du texte: alignement Une fois toutes les étapes générales terminées, le clone crée la partition deux fois. Nous allons maintenant avoir une section distincte pour chacun des trois premiers exemples. Créer l’exemple # 1 appliquer d’autres paramètres au module image opacité par défaut commençons par créer le premier exemple! La seule chose que nous allons faire ici est de créer une transition vers le canal de la souris sans autre effet. Pour ce faire, ouvrez le module image et allez aux paramètres du filtre. Assurez – vous que l’opacité par défaut est de 100%. Opacité: 100% L’opacité lorsque vous déplacez la souris change l’opacité lorsque vous déplacez la souris. Opacité: 0% Transition Enfin, il crée une transition en douceur en augmentant la durée de la transition. Temps de transition: 1200 m
Art. Créez l’exemple # 2 pour appliquer des paramètres supplémentaires à l’espacement par défaut du module image pour le deuxième exemple! Ouvrez le module image dans la colonne 1 et assurez – vous qu’il n’y a pas d’espace intérieur personnalisé prédéfini. Continuez en ajoutant un peu de remplissage sous le canal de la souris pour permettre à l’image d’augmenter sa taille au fur et à mesure que la souris passe. Remplissage du Bas: 100 pixels Boîte d’ombre nous avons également ajouté une ombre de boîte par défaut qui disparaîtra lorsque vous passez le curseur. Position de l’ombre du cadre horizontal: – 55px position de l’ombre du cadre vertical: – 50 Px force de diffusion de l’ombre du cadre: – 10px couleur de l’ombre: # eda96a L’opacité par défaut passe ensuite aux paramètres du filtre pour s’assurer que l’opacité par défaut est de 100%.
Opacité: 100% L’opacité en vol stationnaire supprime l’opacité du module en vol stationnaire. Cela vous permet de visualiser l’arrière – plan de la colonne et de créer l’effet image lorsque la souris se déplace. Opacité: 0% Transition Enfin, augmenter la durée de la transition dans les paramètres de transition du module image. Durée de la transition: 1200 MS Créer l’exemple # 3 ajouter l’arrière – plan de la rampe à la colonne 1 pour le troisième exemple, ouvrez d’abord les paramètres de ligne et ajoutez l’arrière – plan de la rampe radiale à la première colonne. Ceci affiche l’image lorsque la souris passe par le cercle.
Couleur 1: rgb (43135218,0) couleur 2: # FFFFFF Column 1 Gradient Type: radial Column 1 radial: Center Column 1 initial Location: 60% final Location of Column 1: 60% Appliquer d’autres paramètres au module image d’opacité par défaut pour continuer en ouvrant le module image dans la colonne 1 et en veillant à ce que l’opacité par défaut soit de 100%. Opacité: 100% Opacité du curseur supprimer toute opacité du curseur pour permettre l’arrière – plan d
Colonnes. Opacité: 0% Créer l’exemple # 4 ajouter une nouvelle ligne de structure de colonne dans le dernier exemple! Ici, nous avons besoin d’une nouvelle ligne avec 6 colonnes. Colonne image de fond 1 sans ajouter de module, ouvrez les paramètres de ligne et ajoutez l’image de fond à afficher lorsque vous passez le curseur comme image de fond pour la colonne 1. Colonne 1 image de fond dupliquée: aucune duplication Répétez les étapes ci – dessus pour toutes les colonnes de la ligne pour chaque colonne de la ligne. Ensuite, allez aux paramètres de taille de ligne et supprimez tout espace entre les colonnes. Faire cette ligne pleine largeur: Oui utiliser une largeur de gouttière personnalisée: 1 Ajouter un module image à la colonne 1 charger l’image continue en ajoutant le module image à la première colonne et en chargeant l’image à afficher par défaut. Assurez – vous que l’opacité par défaut de ce module est de 100%. Opacité: 100% L’opacité en vol stationnaire et la suppression de l’opacité en vol stationnaire permettent l’affichage de l’arrière – plan de la colonne. Opacité: 0% La transition augmente la durée de la transition pour une transition en douceur. Durée de la transition: 800 MS Après avoir cloné le module Image 3 fois et placé des duplicatas dans les colonnes restantes après avoir modifié le module image dans la colonne 1, vous pouvez le cloner et placer des duplicatas dans les colonnes restantes. Assurez – vous que vous avez également changé l’image. Aperçu nous avons terminé toutes les étapes et les quatre exemples, maintenant regardons les trois exemples que nous avons créés. Changer l’image pendant que vous passez le curseur aide à apporter une interaction supplémentaire aux sections, pages et pages recommandées de votre équipe. Dans ce tutoriel, nous vous montrons comment obtenir différents types