Utilisez le lien d’ancrage dans Divi pour accomplir 5 choses importantes

Page FAQ comptable, tapez FAQ dans la barre de recherche. Ensuite, cliquez sur la mise en page et l’aperçu affiché, puis cliquez pour la distribuer à la page en utilisant ce bouton de mise en page.
Vous pouvez maintenant ajouter une fonction de lien d’ancrage. Par exemple, je vais utiliser le bouton en haut du titre comme lien d’ancrage, de sorte que lorsque vous cliquez, la page défile vers un commutateur spécifique qui s’ouvre automatiquement en même temps. Pour ce faire, ouvrez d’abord les paramètres du bouton et ajoutez l’URL de lien suivante au bouton: URL du lien du bouton: # toggle3 j’ai fourni l’id \ Ensuite, ajoutez une classe CSS unique au module bouton: classe CSS: activez switch, puis enregistrez les paramètres. Ce nom de classe vous aide à vous souvenir de l’ouverture du genou lorsque vous cliquez sur un bouton. Nous utiliserons cette classe dans un jqeury personnalisé pour obtenir la fonctionnalité requise au fil du temps. Ensuite, faites défiler vers le bas vers la ligne contenant les deux colonnes du module activation \/ désactivation pour la FAQ. Ouvrez le troisième réglage du module de commutation dans la première colonne. C’est le module que nous voulons faire défiler et ouvrir lorsque nous cliquons sur un bouton (ou un lien d’ancrage).
Dans l’onglet avancé, ajoutez l’ID CSS suivant: CSS id: toggle3 il est important que cela soit entièrement lié à l’URL du lien du bouton que vous avez utilisé précédemment. La seule différence ici est que vous devez omettre « # ». La dernière étape consiste à ajouter du code personnalisé à
Notre page. Pour ce faire, allez aux options de thème Split et ouvrez l’onglet intégration, puis Collez ce qui suit dans la section corps, comme indiqué dans le GIF ci – dessous. Jquery (fonction ($)
Ouvrez le bouton basculer et cliquez sur
$(‘a.open-toggle’). On (‘Click’, Function (event)
$(\
});
});
N’oubliez pas d’envelopper le code dans les balises de script appropriées. Vous pouvez maintenant tester la page pour voir si elle fonctionne correctement. Comprendre le rôle de ce code. Regardons de plus près. Voici le fragment de code: jquery (fonction ($)
Ouvrez le bouton basculer et cliquez sur
$(‘a.open-toggle’). On (‘Click’, Function (event)
$(\
});
});
Dans le Code, le sélecteur A. Open – TOGGLE fait référence à un bouton avec une classe personnalisée. Le sélecteur \
La classe \
Ce code est une variante du concept suivant. J’essaie de le rendre aussi simple que possible. Cette technique merveilleuse s’applique également aux cartes et aux accordéons.
L’astuce est d’identifier la bonne classe CSS pour l’élément d’accord ou la carte afin que vous puissiez l’utiliser dans votre code. Créer un menu de navigation pour la page Cette conception de menu est populaire sur les sites Web d’une page. Il peut être utile de créer des liens dans les menus pour passer d’une page à l’autre. Cela peut être utile si vous construisez un site Web d’une page ou une page d’atterrissage. Pour en savoir plus sur ce processus, consultez la documentation sur la façon de créer un site Web de page en utilisant Divi. Voici une brève description de la façon de le faire. Il s’appliquera à n’importe quelle mise en page par défaut, mais dans ce cas, j’utiliserai la mise en page de la page d’accueil web freelance. Créez une nouvelle page, déployez Visual Builder, sélectionnez sélectionner la mise en page par défaut, puis déployez la mise en page de la page d’accueil freelance sur votre page. Vous devez maintenant ajouter un ID CSS à chaque section que vous voulez lier (ou faire défiler vers). Trouvez la section intitulée mes services. Ouvrez les paramètres partiels, cliquez sur l’onglet avancé et ajoutez l’ID CSS suivant: CSS id: services Ensuite, localisez la section emplois en vedette et attribuez un ID CSS à cette section comme suit: ID CSS: emplois Et ajoutez l’ID CSS suivant à la section À notre sujet: CSS id: about Avec le réglage correct de l’ID CSS unique pour ces trois sections, nous pouvons créer nos propres liens d’ancrage de menu. À partir du tableau de bord, allez à apparence > menu et créez un nouveau menu principal. Ensuite, créez trois liens personnalisés en utilisant l’URL suivante et le texte du lien: Custom Link 1 URL: # Service Link Text: Service Custom Link 2 URL: # work Link Text: Work Custom Link 3 URL: # about Link Text: information N’oubliez pas de sélectionner la position d’affichage dans le menu principal. C’est pour ça que tu le sais.
Voici votre menu. Maintenant, quand vous visitez votre page, vous pouvez essayer. Vous remarquerez peut – être un écoulement de fluide. Ceci est dû au fait que le thème Divi ajoute automatiquement un défilement en douceur: Cette fonctionnalité a été ajoutée dans la version 2.4 de Divi. Pour plus d’inspiration pour créer un site de tueur d’une page, Voir l’article suivant: comment construire une barre latérale fixe réactive avec des liens ancrés comment utiliser Divi pour créer une section plein écran avec des liens de défilement en haut et en bas comment créer un lien actif sur le Web Nous pouvons le prouver avec l’exemple ci – dessus. Puisque nous avons ajouté des identifiants CSS aux trois sections de la page (Service, travail, information), nous pouvons passer non seulement à ces sections en utilisant les liens d’ancrage du menu, mais aussi à ces sections à partir de pages complètement différentes. Lorsque vous créez un lien sur une page différente, il suffit d’utiliser l’URL du lien d’ancrage. Si vous voulez insérer un lien de section de service avec l’id de service, il ressemblera à www.your Domain. Com \/ pagina \/ Servizi. Voici un exemple de la façon dont une page sera chargée et défilée vers la section mes services lorsque vous y serez lié à partir d’une autre page. S’applique à de nombreuses exigences d’action différentes (p. ex., en savoir plus, obtenir Divi, voter pour moi, etc.) Vous voudrez peut – être passer de différentes pages du site à. Techniquement, utilisez le point Divi pour naviguer ces liens d’ancrage intégrés. Vous n’avez pas besoin d’ajouter un ID de section CSS. La navigation par points crée automatiquement un lien ancré à partir d’une section. Pour activer la navigation par points pour une page, définissez simplement l’option de navigation par points à on dans la configuration de la page partagée en haut à droite.
Écran lors de l’édition d’une page. Une fois la navigation par points activée, Divi ajoute automatiquement un menu transparent sur le côté de la page. Lorsque vous cliquez, chaque point défile vers différentes parties de la page. Pour plus d’informations, il y a un article sur la façon d’étiqueter la navigation de point. Ajouter un lien d’ancrage à un titre ajouter un lien d’ancrage à un titre est toujours une bonne idée. Il s’agit d’un bon moyen d’indexer des pages plus longues qui contiennent beaucoup de contenu, vous permettant de naviguer facilement vers chaque titre de la même page ou de lier à ces titres à partir d’autres pages du site. Il peut également aider les moteurs de recherche à scanner votre site Web. Pour ajouter un ID CSS à un titre en utilisant Divi Builder, ouvrez le formulaire contenant le texte du titre. Assurez – vous que l’onglet texte est ouvert. Rechercher les étiquettes de titre (H1, H2, H3, etc.) Entrez ensuite l’ID entre crochets pour la balise de titre initiale. Voici un exemple d’en – tête H3 avec id \
Maintenant, tant que vous utilisez l’URL d’amarrage correcte, je peux lier à ce titre de n’importe où. Ceci devrait être le cas dans cet exemple: www.your Domain. Com \/ page \/ # Webdesign Ceci est également utile pour les pages ou les messages qui n’utilisent pas Divi Builder. Pour ajouter un lien d’ancrage au titre de ces pages ou articles, ouvrez l’onglet texte dans l’éditeur de texte WordPress. Il suffit de trouver le titre de votre choix et d’ajouter un ID à l’étiquette du titre, comme indiqué ci – dessous. C’est exactement ce que j’ai fait pour cet article. Le lien vers le Haut de cet article est un bon résumé qui peut être relié aux différents titres de l’article. Quelque chose d’intéressant. Il y a des chaînes d’ancrage enveloppées