Pour & # 39; Tête adhésive en Divi

Les titres permanents permettent aux utilisateurs d’accéder efficacement aux menus et à d’autres CTA importants. Mais parfois, les titres collants distraient, surtout les gros titres sur les petits écrans. En général, nous réduisons le titre et \/ ou cachons les éléments dans un état collant afin de créer plus d’espace pour le contenu. Cependant, la création d’Open \/ level pour ces titres collants peut être un bon choix. Un petit onglet bascule sous les titres collants vous permet de cacher \/ afficher les titres collants à tout moment. Dans ce tutoriel, nous vous montrerons comment créer des onglets on \/ off pour les en – têtes collés dans Divi.
Allons – y! Voici une vue rapide de l’onglet collant title Switch que nous allons créer dans ce tutoriel. Notez que l’onglet basculer s’affiche une fois que l’utilisateur a glissé au – dessus de la hauteur de l’en – tête. Vous pouvez ensuite activer ou désactiver un titre permanent en cliquant sur un onglet. Une fois que l’utilisateur retourne en haut de la page, l’en – tête est visible et l’onglet est caché. C’est un stylo de code qui démontre le même concept. 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 Téléchargement G
C’est sur la page. Sélectionnez l’onglet importer, sélectionnez le fichier json que vous venez d’extraire, décochez les options et cliquez sur le bouton importer. Ensuite, sélectionnez l’option \
En mode calque, cliquez sur le bouton all on \/ All off pour voir tous les éléments Divi. À la deuxième ligne de cette section, supprimez le formulaire de code. Ce code personnalisé n’est pas nécessaire pour ce tutoriel. Partie 2: créez un titre collant avec l’onglet basculer pour ce titre dans les paramètres de la section Divi, et nous allons rendre toute la section collante de sorte que le titre soit collé en haut de la page lorsque vous Défilez. Nous fournirons également une classe CSS personnalisée pour cette section, à laquelle nous utiliserons le code personnalisé plus tard.
Ouvrez la section paramètres et mettez à jour ce qui suit: classe CSS: et Divi sticky header sticky position: Stick on top Créez l’onglet Switch en utilisant le module Blurb ensuite, nous utiliserons le module Blurb pour créer notre propre onglet Switch. Pour ce faire, ajoutez un nouveau module Blurb au bas de la deuxième ligne sous le module menu. Puis ouvrez les paramètres Blurb et mettez à jour le contenu com
Et ce qui suit: supprimer le contenu du titre supprimer le contenu du corps utiliser l’icône: s icône: flèche vers le haut (voir capture d’écran) couleur de fond: # FFFFFF Sur l’onglet conception, mettre à jour ce qui suit: couleur de l’icône: # 1a3066utiliser la taille de la police de l’icône: s taille de la police de l’icône: 40px largeur: 45px hauteur: 45px Marges: 0px filet: 12 pixels en bas à gauche, 12 pixels en bas à droite transformer l’axe des X: 100% Animation image \/ icône: aucune Animation Note: lorsque la transformation y – PAN est réglée à 100%, l’icône se déplace exactement à 100% (45 Px) de la hauteur de l’icône. Dans l’onglet avancé, mettre à jour ce qui suit: CSS Class: and Divi sticky TOGGLE position: absolute position: Bottom right horizontal offset: 20px Z Index: – 1 Maintenant que Blurb a une position absolue (en utilisant translate y 100% Transform), Blurb (Switch Card) sera juste en dessous de l’en – tête complet. Il est important que l’onglet actif reste visible \/ cliquable lorsque vous cliquez sur l’onglet Activer \/ désactiver pour afficher \/ masquer le titre. Ajouter du code personnalisé pour ajouter les fonctionnalités nécessaires à ce changement d’en – tête permanent, nous devons ajouter quelques CSS et jquery personnalisés. Pour ce faire, nous ajouterons un nouveau module de code sous le module Blurb. Dans la zone de contenu du Code, collez le CSS suivant pour vous assurer que le Code est inclus dans l’étiquette de style souhaitée. Et Divi collant Switch {
Visibilité: cachée;
Opacité: 0;
Transition: tous 400ms;
}
– Oui. Et Divi collant Switch: Static {
Curseur: pointeur;
}
– Oui. Et Divi collant Switch. Et display switch {
Visibilité: visible;
Opacité: 1;
}
– Oui. Et Divi en – tête visqueux
Transition: tous 400ms! Important
}
– Oui. Et Divi en – tête visqueux. Et masquer le titre collant
Transformation: translatex (0%) translatey (- 100%)! Important
}
– Oui. Et
Les développeurs s’attendent à ce que les utilisateurs aient accès à des titres collants importants, que ce soit pour les utilisateurs qui veulent cacher ou afficher des titres à tout moment. J’espère que ce sera un projet utile pour l’avenir! J’ai hâte d’entendre vos commentaires. Bonjour!