Changer le style de plusieurs éléments lorsque vous passez le curseur ou cliquez sur Split

Une copie de tous les paquets de mise en page de la page d’atterrissage Divi les plus récents, ainsi que d’autres ressources Divi gratuites étonnantes, conseils et conseils tonnes. 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 disposition de section dans la Bibliothèque Divi, allez à la Bibliothèque Divi.
Cliquez sur le bouton importer. Dans la fenêtre contextuelle de portabilité, sélectionnez l’onglet importer, puis sélectionnez les fichiers téléchargés à partir de votre ordinateur. Puis cliquez sur le bouton importer. Une fois terminé, la disposition de la section est disponible dans Divi Builder. Commençons le tutoriel. Que devez – vous commencer? Pour commencer, vous devez faire ce qui suit: si ce n’est pas déjà fait, installez et activez le thème Divi. Créez une nouvelle page dans WordPress et utilisez Divi Builder pour éditer la page à l’avant (Visual Builder). Sélectionnez l’option créer à partir de zéro. Ensuite, vous aurez une toile vierge à concevoir dans Divi.
Partie 1: conception de la disposition de la Section pour commencer, créez une nouvelle ligne à deux colonnes. Paramètres de la section avant d’ajouter des modules, ouvrez les paramètres de la section et mettez à jour ce qui suit: couleur de fond: # FFFFFF Style du séparateur supérieur: voir capture d’écran couleur du séparateur supérieur: # FFFFFF hauteur du séparateur supérieur: 5vw style du séparateur inférieur: même couleur du séparateur inférieur: # FFFFFF hauteur du séparateur inférieur: 5vw remplissage: 6vw haut, 6vw bas Ajoutez un nouveau formulaire d’image avant l’image dans la colonne de gauche des deux lignes de colonne. Puis Téléchargez l’image à afficher. Dans ce tutoriel, nous utiliserons l’apprentissage pour gérer les images des paquets de mise en page (LMS)
Environ 800 pixels multipliés par 550 pixels. Sur l’onglet conception, mettez à jour l’alignement et activez l’option force pleine largeur. Alignement de l’image: largeur de la Force centrale: s Après l’image suivante, nous créerons une autre image qui s’affichera lorsque nous survolerons \/ cliquerons sur le bouton. Pour créer une image, copiez le formulaire image précédent. Puis Téléchargez la nouvelle image. L’image doit être de la même taille que les autres images, car lorsque vous passez le curseur \/ Cliquez, elle remplace les autres images. Pour cette image, nous lui donnerons une position absolue. Cela fait que l’image est directement au – dessus de l’autre image sans occuper l’espace réel sur la page. Position: absolue Sur l’onglet conception, changez l’opacité sous options de filtre pour rendre l’image complètement invisible. Opacité: 0% Ajouter un titre de texte dans la colonne de droite pour ajouter un nouveau formulaire de texte. Ensuite, collez le code HTML suivant dans la zone de contenu du corps: Conception Tout ce que tu veux.

Avec Divi
Notez que certains mots du texte sont inclus dans l’étiquette span. C’est ainsi que nous utiliserons plus tard des CSS personnalisés pour localiser et façonner ces mots. Sur l’onglet conception, mettre à jour les options de style H3 comme suit: en – tête 3 caractères: en – tête Montserrat 3 poids de police: en – tête ultra bold 3 style de police: en – tête tt 3 taille du texte: 65 Px (bureau et tablette), 40 Px (téléphone) en – tête 3 espacement des lettres: 0,8 em hauteur de ligne de l’en – tête 3: 1,3 em Ceci traitera de la disposition de la section contenant les éléments de conception que nous changerons lorsque vous passez le curseur \/ cliquez sur le bouton. Dans la section suivante, nous ajouterons un bouton pour démarrer le changement de style.
Appuyez sur le bouton créer une section pour créer une nouvelle section générale sous la section courante.

Donc vous
Appliquer une ligne dans la section. Ajouter un bouton dans la colonne pour ajouter un nouveau module de bouton. Changez le texte du bouton en \ Partie 2: ajout d’une classe CSS à un élément maintenant que notre conception est prête, nous utiliserons le code personnalisé (CSS et jquery) pour apporter les modifications de conception restantes. Mais avant de commencer à ajouter du code personnalisé, nous devons ajouter des classes CSS à tous les éléments que vous souhaitez éditer lorsque vous passez le curseur ou cliquez sur un bouton. Ajouter une classe CSS à une section pour ajouter une classe CSS à une section, ouvrez les paramètres de la section et cliquez sur l’onglet avancé. Puis entrez la classe CSS suivante: classe CSS: et – change – style _ Section Ajoutez la classe CSS à l’image, puis ouvrez les paramètres de la première image dans la colonne de gauche et ajoutez la classe CSS suivante: classe CSS: et avant l’image il s’agit de l’image affichée avant le déplacement de la souris \/ cliquez sur le bouton. En utilisant la couche mode, ouvrez les paramètres de la deuxième image (image cachée à l’aide d’un filtre opaque) et ajoutez la classe CSS suivante après l’image: CSS Class: et il s’agit de l’image affichée après la souris \/ cliquez sur le bouton. Ajoutez la classe CSS au texte, puis ajoutez la classe CSS suivante au formulaire de texte dans la colonne de droite: classe CSS: et style texte Ajouter une classe CSS au bouton, et enfin ajouter une classe
Les boutons personnalisés CSS en bas sont les suivants: classe CSS: et bouton basculer nous avons besoin de cette classe pour démarrer les boutons plus tard dans le Code avec la fonction de clic de souris. Partie 3: ajouter du code personnalisé pour changer le style lorsque vous passez le curseur ou Cliquez maintenant que toutes les classes CSS sont prêtes, nous pouvons ajouter le Code nécessaire pour changer le style de tous ces éléments lorsque vous passez le curseur ou cliquez sur un bouton. Ajouter un formulaire de code pour ajouter du Code, ajoutez un formulaire de code sous le bouton inférieur. Collez le Code jquery, puis collez le jquery suivant. Assurez – vous d’inclure le code dans l’étiquette du script parce que nous ajoutons le code à un document HTML au lieu d’un fichier JS. (fonction ($)
USD (file). Ready (Function () {
$(\
$(\
Var $this = $(this);
$this. Toggleclass (\
});
});
}) (jquery); Si vous regardez le Code, vous devriez être en mesure d’identifier la classe CSS que nous avons ajoutée au bouton et à la section. La classe button (\
Couleur: # FFFFFF;
}
– Oui. Et – change – style _ active. Et style text H3 span {
Couleur: # 67ddc1;
}
– Oui. Et basculer le bouton _ activer {
Transformation: échelle (1.1);
Couleur de fond: # 67ddc1! Important
}
– Oui. Et – change – style _ active. Et avant l’image. Et après l’image. Et style texte H3 {
Transition: toutes les 0,3 secondes;
}
Lorsque la section (ou le bouton) a une nouvelle classe, ces clips CSS utilisent le même concept pour changer le style de l’élément. Résultats finaux (en vol stationnaire) Une fois le Code ajouté, sauvegardez les modifications et ouvrez la page pour voir les résultats. Notez comment notre projet cible change lorsque vous passez le curseur sur un bouton. Changer de style lorsque vous cliquez au lieu de survoler si vous voulez changer de style pour ces mêmes éléments lorsque vous cliquez sur un bouton au lieu de survoler, il suffit d’apporter quelques modifications à jquery. La plupart des codes resteront inchangés. La principale différence est que la méthode de vol stationnaire est remplacée par un clic. Nous avons ajouté un code utile pour modifier le texte du bouton en cliquant dessus. Pour ajouter une fonction de clic, remplacez la jquery actuelle par ce qui suit (assurez – vous qu’elle est à nouveau incluse dans l’étiquette du script): (fonction ($) {
USD (file). Ready (Function () {
$(\
E. preventdefault ();
$(\
Var $this = $(this);
$this. Toggleclass (\
Si ($this.hasclass (‘et – toggle – button _ active’) {
$this. Texte (\
< Modifier
$this. Texte (\
}
});
});
}) (jquery); C’est le résultat final. Possibilité de localiser et de modifier le style de plusieurs éléments d’une page lorsque vous passez le curseur ou cliquez sur qu
Alcosa est une compétence utile dans la conception de pages Web. Vous pouvez utiliser cette technologie dans une variété de cas d’utilisation (avant et après, CTA, etc…) Bien sûr, il est utile d’en savoir plus sur css et js \/ jquery. Cependant, comme vous pouvez le voir dans ce tutoriel, vous n’avez pas besoin de connaître le ton du Code pour obtenir des résultats étonnants! J’ai hâte d’entendre vos commentaires. Bonjour!