Élément du Constructeur d'en-tête Ex2: le bouton à bascule
Le bouton à bascule est un moyen d'afficher de manière attrayante du contenu (comme un menu, des boutons, une barre de recherche, etc.) dans l’en-tête d'un site web. Il est spécialement conçu pour l'affichage sur écrans d'ordinateurs et fonctionne comme le bouton hamburger sur affichage mobile.
Quand un utilisateur clique sur le bouton à bascule, cela ouvre une fenêtre off-canvas sur l’écran contenant tout le contenu qui y a été ajouté. Comme il prend peu d'espace, c’est une façon très efficace d’afficher le contenu dans l’en-tête d'un site.
Cet élément du constructeur d'en-tête est une fonctionnalité premium disponible depuis la version 3.3 d’'Ex2-Theme Pro. Avant cette version, il était nécessaire d'utiliser un code personnalisé pour inclure un bouton à bascule.
Désormais, vous pouvez facilement afficher du contenu off-canvas et le personnaliser complètement avec ce nouveau bouton.
Comme il s’agit d’une fonctionnalité premium, assurez-vous d’avoir le thème Ex2-Theme Pro mis à jour et activé aur votre site Wordpress. Ensuite, suivez les étapes ci-dessous:
Étape 1 : Ouvrez le constructeur d'en-tête et cliquez sur l'endroit où vous souhaitez ajouter un bouton à bascule. Dans la liste des éléments, choisissez Toggle Button.
Étape 2 : Maintenant, vous pouvez choisir les éléments à inclure. Ils seront affichés dans une fenêtre qui apparaîtra quand les utilisateurs cliqueront sur le bouton.
La section off-canvas sera visible dans le constructeur d’en-tête dès que vous aurez ajouté le bouton à bascule.
Cliquez sur la section off-canvas et vous verrez une liste d’éléments s’afficher.
Choisissez les éléments désirés à partir de cette liste. Ils seront alors automatiquement ajoutés à la section off-canvas associée au bouton. Vous pouvez ajouter une multitude d'éléments comme un menu, d'autres boutons, des éléments HTML, des widgets, des outils de recherche, des liens de médias sociaux, etc.
Pour personnaliser ces éléments, il vous suffit de cliquer sur eux. Toutes les options de personnalisation disponible s’afficheront alors dans le personnalisateur.
Pour ajouter un menu dans la section off-canvas, utilisez l’élément Off-Canvas Menu à partir de la liste. Notez que le menu principal et le menu secondaire ne peuvent pas être utilisés, il faut un autre menu.
Par défaut, le menu off-canvas affichera toutes les pages de votre site (comme le menu WordPress par défaut). Vous pouvez aussi créer un autre menu hors-canevas dédié ou attribuer ce rôle à un menu existant.
Cliquez d'abord sur le menu Off-Canvas. Ensuite, dans le personnalisateur, cliquez sur Configure Menu from Here.
Dans le menu déroulant Off-Canvas, sélectionnez le menu désiré. Vous pouvez aussi créer un nouveau menu et l’attribuer à ce rôle.
Étape 3 : Une fois que vous ajoutez tout le contenu désiré à la section off-canvas, vous pouvez personnaliser le bouton à bascule en fonction de vos préférences.
Pour ce faire, cliquez sur le bouton dans le constructeur d’en-tête. Toutes les options de personnalisation s’afficheront alors dans le personnalisateur.
Dans la section Général, vous pouvez définir ce qui suit :
Icônes – Choisissez parmi trois modèles de design différents
Style de bouton à bascule – Choisissez parmi trois styles prédéfinis offerts pour le bouton
Étiquette de menu – Ajoutez une étiquette pour le bouton de menu si vous le désirez.
Dans la section Design, vous pouvez définir la taille, la couleur et la marge du bouton à bascule.
Étape 4 : Vous pouvez personnaliser la fenêtre Off-canvas et définir sa mise en page et ses couleurs. Pour ce faire, cliquez sur l’icône d’engrenage de la section Off-Canvas. Les options disponibles s’afficheront alors dans le personnalisateur.
Sous l’onglet Général, vous pouvez définir le type et l’alignement de la position. Sous l’onglet Design, vous pouvez aussi définir les couleurs et l’espacement.
Si vous passez à l'affichage sur tablette ou appareils mobiles dans le personnalisateur, vous verrez également une section hors-ligne. Notez que la section off-canvas associé au bouton à bascule fonctionne séparément sur un ordinateur, une tablette ou un appareil mobile.
Cela vous permet de concevoir différents menus à bascule adaptés aux différents appareils. L'affichage Off-Canvas de la version pour ordinateur ne sera pas automatiquement hérité sur l'affichage pour tablettes ou des appareils mobiles (et vice-versa).
Quand un utilisateur clique sur le bouton à bascule, cela ouvre une fenêtre off-canvas sur l’écran contenant tout le contenu qui y a été ajouté. Comme il prend peu d'espace, c’est une façon très efficace d’afficher le contenu dans l’en-tête d'un site.
Cet élément du constructeur d'en-tête est une fonctionnalité premium disponible depuis la version 3.3 d’'Ex2-Theme Pro. Avant cette version, il était nécessaire d'utiliser un code personnalisé pour inclure un bouton à bascule.
Désormais, vous pouvez facilement afficher du contenu off-canvas et le personnaliser complètement avec ce nouveau bouton.
Comment ajouter un bouton à bascule pour l'affichage sur ordinateur
Comme il s’agit d’une fonctionnalité premium, assurez-vous d’avoir le thème Ex2-Theme Pro mis à jour et activé aur votre site Wordpress. Ensuite, suivez les étapes ci-dessous:
Étape 1 : Ouvrez le constructeur d'en-tête et cliquez sur l'endroit où vous souhaitez ajouter un bouton à bascule. Dans la liste des éléments, choisissez Toggle Button.
Étape 2 : Maintenant, vous pouvez choisir les éléments à inclure. Ils seront affichés dans une fenêtre qui apparaîtra quand les utilisateurs cliqueront sur le bouton.
La section off-canvas sera visible dans le constructeur d’en-tête dès que vous aurez ajouté le bouton à bascule.
Cliquez sur la section off-canvas et vous verrez une liste d’éléments s’afficher.
Choisissez les éléments désirés à partir de cette liste. Ils seront alors automatiquement ajoutés à la section off-canvas associée au bouton. Vous pouvez ajouter une multitude d'éléments comme un menu, d'autres boutons, des éléments HTML, des widgets, des outils de recherche, des liens de médias sociaux, etc.
Pour personnaliser ces éléments, il vous suffit de cliquer sur eux. Toutes les options de personnalisation disponible s’afficheront alors dans le personnalisateur.
Remarque :
Pour ajouter un menu dans la section off-canvas, utilisez l’élément Off-Canvas Menu à partir de la liste. Notez que le menu principal et le menu secondaire ne peuvent pas être utilisés, il faut un autre menu.
Par défaut, le menu off-canvas affichera toutes les pages de votre site (comme le menu WordPress par défaut). Vous pouvez aussi créer un autre menu hors-canevas dédié ou attribuer ce rôle à un menu existant.
Si vous ne savez pas comment créer et attribuer un menu hors-toile, voici les étapes
Cliquez d'abord sur le menu Off-Canvas. Ensuite, dans le personnalisateur, cliquez sur Configure Menu from Here.
Dans le menu déroulant Off-Canvas, sélectionnez le menu désiré. Vous pouvez aussi créer un nouveau menu et l’attribuer à ce rôle.
Étape 3 : Une fois que vous ajoutez tout le contenu désiré à la section off-canvas, vous pouvez personnaliser le bouton à bascule en fonction de vos préférences.
Pour ce faire, cliquez sur le bouton dans le constructeur d’en-tête. Toutes les options de personnalisation s’afficheront alors dans le personnalisateur.
Dans la section Général, vous pouvez définir ce qui suit :
Icônes – Choisissez parmi trois modèles de design différents
Style de bouton à bascule – Choisissez parmi trois styles prédéfinis offerts pour le bouton
Étiquette de menu – Ajoutez une étiquette pour le bouton de menu si vous le désirez.
Dans la section Design, vous pouvez définir la taille, la couleur et la marge du bouton à bascule.
Étape 4 : Vous pouvez personnaliser la fenêtre Off-canvas et définir sa mise en page et ses couleurs. Pour ce faire, cliquez sur l’icône d’engrenage de la section Off-Canvas. Les options disponibles s’afficheront alors dans le personnalisateur.
Sous l’onglet Général, vous pouvez définir le type et l’alignement de la position. Sous l’onglet Design, vous pouvez aussi définir les couleurs et l’espacement.
Remarque :
Si vous passez à l'affichage sur tablette ou appareils mobiles dans le personnalisateur, vous verrez également une section hors-ligne. Notez que la section off-canvas associé au bouton à bascule fonctionne séparément sur un ordinateur, une tablette ou un appareil mobile.
Cela vous permet de concevoir différents menus à bascule adaptés aux différents appareils. L'affichage Off-Canvas de la version pour ordinateur ne sera pas automatiquement hérité sur l'affichage pour tablettes ou des appareils mobiles (et vice-versa).
Mis à jour le : 29/03/2023
Merci !