Comment créer des en-têtes collants verticaux avec des conteneurs dans Elementor

Qu'est-ce qu'un titre vertical collant ?

L'en-tête vertical collant est un type de barre d'en-tête fixée sur le côté de la page et qui reste visible lorsque l'utilisateur fait défiler la page, ce qui lui permet d'accéder facilement à d'autres zones de la page ou de naviguer rapidement. Cette conception peut être utilisée pour des contenus tels que des catalogues, des menus de navigation et des informations de contact, afin de faciliter la navigation de l'utilisateur.

préliminaire

Avant de commencer, assurez-vous que les éléments suivants sont en place :

1. Installé et activé Elementor Pro (car l'effet collant nécessite la version Pro).
2. Vous avez créé une nouvelle page ou vous êtes prêt à ajouter des en-têtes collants verticaux à une page existante.
3. Vous comprenez déjà l'utilisation de base du conteneur Elementor (il est recommandé d'utiliser l'élément Flexbox (fonctionnement en mode conteneur).

Étape 1 : Créer un modèle de page unique

Nous créons cette fois un modèle de page unique et, pour ce modèle, nous créons des en-têtes collants verticaux avec des conteneurs.

Accédez à la page de création du modèle

1. Dans le backend de WordPress, naviguez vers Elementor > Modèles > Nouveau.

2. Dans la fenêtre pop-up, sélectionnez page unique comme type de modèle et nommez le modèle, par exemple "Enterprise Service Page Template".

Sélectionnez le type de page

1. En haut de la galerie de modèles, sélectionnez "Pages". Étiquettes.
2. Parcourez la bibliothèque des modèles de page disponibles. Vous pouvez utiliser le champ de recherche pour trouver un modèle approprié, tel que "Services" ou "Entreprise".

3. S'il est dédié à un certain type de page, vous pouvez également ajouter une condition spécifique dans les paramètres de la condition.

Étape 2 : Création d'un conteneur dans Elementor

1,Ajout de conteneurs

Sur la page, cliquez sur "Ajouter un nouveau conteneur"et faites-le glisser dans la zone de conception de la page. Ce conteneur servira de conteneur parent pour l'en-tête vertical collant.

2,Réglage de l'orientation du conteneur

Sélectionnez le conteneur et, dans le panneau de configuration situé à gauche, définissez l'orientation du conteneur sur perpendiculairec'est-à-dire alignés verticalement pour que le contenu puisse être empilé verticalement. Cette étape est essentielle pour obtenir des titres verticaux.

3,Définir la largeur du conteneur

Dans "type"Définissez la largeur du conteneur à une taille appropriée, par exemple 200 px ou moins, afin qu'il ne prenne pas trop de place sur la page. Cette largeur peut être personnalisée en fonction de la conception et des besoins de la page.

Étape 3 : Créer une barre de navigation verticale collante

Insertion de titres et d'éléments de navigation

• Dans le conteneur, ajoutez un "légende"Définissez le titre du widget "Navigation rapide" ou "Catalogue".

Ajouter une liste

• Sous le titrecontinuez à ajouter dans le même conteneur que le titre Liste des icônes peut-être Widget boutonUtilisé comme élément de navigationNous utilisons une liste d'icônes.

• Ajouté :

Ajouter un projet

• A propos de nousCliquez dessus pour accéder à la section du profil de l'entreprise.
• ServicesPour plus d'informations, veuillez consulter la rubrique "Introduction à la ligne de service".
• TémoignagesVous pouvez également cliquer sur le lien suivant : Aller à la section Commentaires des clients.
• Contactez nousPour plus d'informations, veuillez consulter le site web de l'Agence européenne pour la sécurité et la santé au travail.

Les noms et les icônes peuvent être modifiés.

Mise en place de liens d'ancrage

Ajoutez des liens d'ancrage à la liste des boutons ou des icônes pour chaque élément de navigation. Définissez des ancres pour chaque section du contenu de la page, par exemple 1TP5A propos de nouset#serviceset#estimonialset#contact-Us etc.

• mettre en placeA propos de nouspoint d'ancrage
  • Dans l'éditeur Elementor, trouvez l'élément "Ancres de menu" Widget. Faites glisser le widget au-dessus du titre de la section À propos de nous (ou à un autre endroit approprié). Dans les paramètres du widget, saisissez un nom pour le point d'ancrage (par ex. à propos de nous) pour créer un lien vers cet emplacement ultérieurement.

• Définition des liens d'ancrage
  • Retour à la liste des icônesA propos de nousen haut de la page, ajoutez1TP5A propos de nousVous pouvez cliquer sur le saut après le lien d'ancrage.

• Les autres éléments du menu suivent cette procédure pour définir leurs liens d'ancrage.

Personnaliser le style de la barre de navigation

• Dans "type"Vous pouvez personnaliser les polices, les couleurs et l'espacement pour qu'ils correspondent au style du site web.

• configurablecouleur de fondLa barre de navigation est plus claire et plus indépendante grâce à l'utilisation de marges et d'effets d'ombre.

Étape 4 : Réglage de l'effet collant

Pour que la barre latérale reste fixe lorsque l'utilisateur fait défiler la page, procédez comme suit :

1. Définition des ID CSS pour les barres de navigation et les zones de contenu

Sélectionnez le conteneur de la barre de navigation et "niveau élevé "pour ajouter un identifiant CSS ; par exemple, définissez l'identifiant comme suitbarre latérale .

• Ajouter un code CSS personnalisé

Ouvrez le CSS personnalisé dans Elementor (Global Settings ou Custom CSS for Navigation Bar Container). Ajoutez le code suivant :

#sidebar{
    position : fixed ; /* Position fixe de la barre latérale, ne bouge pas lors du défilement */
    left : 0 ; /* Alignement de la barre latérale sur le côté gauche de la page */
    top : 0 ; /* La barre latérale commence en haut de la page */
    height : 100vh ; /* Fixer la hauteur de la barre latérale à la hauteur de la fenêtre de visualisation */
    width : 200px ; /* Ajustez la largeur de la barre latérale selon vos besoins */
    z-index : 10 ; /* Assurez-vous que la barre latérale est au-dessus des autres éléments */
    padding-top : 250px ; /* Ajustez la marge intérieure supérieure si nécessaire */
    overflow-y : auto ; /* Autoriser le défilement lorsque le contenu de la barre latérale est long */

    display : flex ; /* Utiliser la mise en page flexbox */
    flex-direction : column ; /* aligner le contenu verticalement */ justify-content : centre ; //
    justify-content : centre ; /* Contenu centré verticalement */
}

Étape 5 : Ajouter un style d'arrière-plan et un effet d'ombre (facultatif)

Réglage de la couleur d'arrière-plan
Dans "type"Sélectionnez la couleur de fond appropriée pour que les conteneurs se distinguent clairement sur la page.

Ajouter un effet d'ombre
Pour que le titre collant ait l'air plus hiérarchique, vous pouvez définir l'effet d'ombre dans "Box Shadow", de sorte qu'il ait l'effet visuel de planer sur la page.

Étape 6 : Prévisualisation et publication

1. Effet de prévisualisation
   Cliquez sur la page "avant-premières"pour voir comment l'en-tête collant se comporte lors du défilement de la page. Assurez-vous que le conteneur est toujours fixé en haut de la page lors du défilement et qu'il n'est pas écrasé par d'autres éléments.
2. Ajustements
   En fonction de l'effet de prévisualisation, ajustez la taille, l'alignement et les marges du conteneur du contenu du titre pour vous assurer que le contenu est clair et n'affecte pas la mise en page des autres éléments de la page.
3. Page de lancement
   Après avoir vérifié que tout fonctionne correctement, cliquez sur "poste"pour mettre la page en ligne. Votre en-tête vertical collant a été créé.

Résumé :

Les en-têtes collants verticaux sont des barres de navigation qui sont fixées sur le côté d'une page et qui restent visibles lorsque les utilisateurs font défiler la page, ce qui leur permet d'accéder rapidement aux différentes parties de la page. La création de tels en-têtes dans Elementor implique quelques étapes clés : tout d'abord, créez un modèle de page unique et ajoutez un conteneur orienté verticalement comme corps de la barre d'en-tête collante. Ensuite, les titres et les éléments de navigation sont ajoutés au conteneur, en utilisant une liste d'icônes ou de widgets de boutons avec des liens d'ancrage pour chaque élément. Appliquez ensuite un code CSS pour ancrer la barre latérale afin qu'elle soit toujours visible lors du défilement.

Contactez nous
Vous n'arrivez pas à lire le tutoriel ? Contactez-nous pour une réponse gratuite ! Aide gratuite pour les sites personnels et les sites de petites entreprises !	Service clientèle WeChat
① Tel : 020-2206-9892
② QQ咨询：1025174874
(iii) Courriel : info@361sale.com
④ Horaires de travail : du lundi au vendredi, de 9h30 à 18h30, jours fériés.