Comment ajouter un bouton à bascule dans l'en-tête avec le thème Ex2?

Le bouton à bascule pour l’affichage sur ordinateur de bureau: Élément de constructeur d'en-tête

Le bouton à bascule est un moyen attrayant d'afficher du contenu comme un menu, un bouton, une recherche, etc. dans l'en-tête de l’affichage de votre site pour
les ordinateurs de bureau. Il est spécialement conçu pour les écrans d'ordinateur et fonctionne de la même manière que le bouton dit “hamburger” disponible pour l’affichage mobile.

Lorsqu'un utilisateur clique sur le bouton bascule, il affiche une fenêtre hors champ (Off-Canvas) à l'écran avec tout le contenu que vous avez ajouté à l'intérieur. Comme il nécessite peu d’espace, c'est un excellent moyen d'afficher le contenu dans l'en-tête.

Cet élément bénéfique du constructeur d’en-tête est une fonctionnalité Ex2-Theme Pro disponible depuis la version 3.3. Avant cette version, vous deviez utiliser un code personnalisé pour amener un bouton bascule, mais cela n’est plus nécessaire.

Vous pouvez désormais afficher facilement du contenu hors canevas sur le bureau et le personnaliser complètement avec le nouvel élément Bouton bascule.

Comment ajouter un bouton bascule pour l’affichage sur les ordinateurs de bureau

Comme il s'agit d'une fonctionnalité premium, assurez-vous que votre thème Ex2-Theme Pro est mis à jour et activé. Suivez ensuite les étapes présentées ci-dessous :

Étape 1 : Ouvrez le constructeur d’en-tête, puis cliquez sur la section où vous souhaitez ajouter un bouton à bascule. Dans la liste des éléments, choisissez “Toggle Button”.
Étape 2 : Vous pouvez maintenant choisir le contenu, c'est-à-dire les éléments à afficher dans la fenêtre qui apparaîtra lorsque les utilisateurs cliqueront sur le bouton bascule.

Vous verrez alors la section "Off-Canvas Menu” dans le constructeur d'en-tête dès que vous ajouterez le bouton bascule. Cliquez sur cet onglet pour accéder aux options hors-champ, où une
liste d'éléments est disponible.

Choisissez les éléments requis dans cette liste et ils seront automatiquement ajoutés à la section hors champ. Vous pouvez ajouter divers éléments tels que des boutons, une barre de recherche, un lien vers vos comptes de médias sociaux, des widgets, des éléments de code HTML, votre menu hors champ, etc.

Pour configurer ces éléments, cliquez simplement dessus pour accéder à toutes les options de personnalisation.

À noter :

Pour ajouter un menu dans la section hors champ, utilisez l'élément "Off-Canvas Menu” de la liste. Les menus principal et secondaire ne fonctionneront pas dans la section hors toile.

Par défaut, le menu hors toile affichera toutes les pages de votre site Web, tout comme le menu WordPress par défaut. Vous devrez créer un menu hors-champs dédié ou affecter un autre menu
existant en tant que menu hors-champs.

Si vous ne savez pas comment créer et attribuer un menu hors canevas, voici les étapes:

Cliquez sur le menu hors-champs
Dans le personnalisateur, cliquez sur "Configurer le menu à partir d'ici"
Dans la liste déroulante "Off-Canvas Menu", sélectionnez le menu requis. Si le menu désiré ne figure pas dans la liste, vous pouvez "Créer un nouveau menu" et le définir comme hors-champ.

Étape 3 : Une fois que vous avez ajouté tout le contenu requis dans la section hors toile, vous pouvez concevoir le bouton bascule selon votre choix. Pour le personnaliser, cliquez sur le bouton dans le constructeur d'en-tête et toutes les options de conception s'ouvriront dans le personnalisateur.

Vous pouvez alors y définir les éléments suivants :

Icônes: Choisissez l'un des trois modèles différents qui vous sont présentés
Style de bouton à bascule: Choisissez l’un des trois styles prédéfinis pour le bouton
Étiquette de menu: Sert à ajouter une étiquette pour le bouton de menu.

Cliquez sur l'onglet Design pour définir la taille, la couleur et la marge du bouton à bascule.

Étape 4 : Vous pouvez personnaliser la fenêtre hors toile et définir sa disposition et ses couleurs.

Pour ce faire, cliquez sur l'icône d'engrenage pour Off-Canvas, et les options s'ouvriront dans le personnalisateur. Sous l'onglet Général, vous pouvez définir le type et l'alignement de la position, tandis que sous l'onglet Design, vous pouvez définir les couleurs et l'espacement.

À noter :

Si vous passez à l’affichage sur tablette ou sur appareils mobiles dans le personnalisateur, vous observerez une section hors-champ. Notez que la section hors-champ avec le bouton bascule pour l’affichage sur un ordinateur de bureau, sur une tablette ou sur des appareils mobiles fonctionnent séparément.

Cela vous permet de concevoir différents menus à bascule sur différents appareils. L’affichage hors-champ pour les ordinateurs ne sera pas automatiquement hérité sur les tablettes ou les appareils mobiles et vice-versa.

Mis à jour le : 20/03/2023