Les titres sont l'un des premiers éléments que les utilisateurs voient lorsqu'ils visitent un site web et constituent un outil de navigation essentiel. Alors que lesEn-tête collantIl s'agit même d'une tendance majeure dans le domaine de la conception de sites web en raison de ses avantages.Possibilité de garder les titres visibles tout au long du défilement de la pagequi améliore considérablement l'expérience de l'utilisateur et la navigabilité du site.

Cet article explique en détail comment utiliser la fonction Elementor Plugin pour créer des en-têtes collants dans WordPressNous examinerons également certaines techniques avancées permettant d'optimiser davantage l'apparence et le comportement des en-têtes collants, telles que la personnalisation des CSS. Nous examinerons également quelques techniques avancées, telles que la personnalisation des feuilles de style CSS, afin d'optimiser l'aspect et le comportement des en-têtes collants.

Pourquoi utiliser Elementor pour créer des titres autocollants ?

Elementor est l'un des constructeurs de pages les plus populaires de WordPress, apprécié pour son interface intuitive de type "glisser-déposer" et ses puissantes fonctionnalités. Il y a plusieurs avantages à utiliser Elementor pour créer des en-têtes collants :

1. Pas besoin d'écrire du codeElementor : Elementor permet aux utilisateurs de créer des mises en page web complexes à l'aide de simples opérations de glisser-déposer sans écrire une seule ligne de code. C'est particulièrement intéressant pour les débutants.
2. Des options de conception flexiblesElementor : Elementor fournit une multitude d'outils de conception qui permettent aux utilisateurs d'ajuster facilement la mise en page, les couleurs, les polices, les arrière-plans, etc. des titres.
3. Options collantes intégréesElementor : Elementor dispose d'options collantes intégrées que les utilisateurs peuvent simplement régler pour que les titres restent visibles lorsque la page défile.
4. Compatibilité avec d'autres outils: Elementor vs. Astra Pro La compatibilité avec des thèmes premium tels que peut élargir encore les possibilités de conception d'un site web.

Etapes pour créer des titres autocollants avec Elementor

Étape 1 : Création du menu principal

Avant de pouvoir créer des rubriques autocollantes, vous devez d'abord configurer le menu principal de votre site web. Le menu principal est le cœur de la navigation des utilisateurs et contient des liens vers les pages principales du site.

1. Connectez-vous à l'interface d'administration de WordPress et naviguez jusqu'à "état extérieur">"menu".

2. Créez un nouveau menu, ajoutez les pages ou les liens personnalisés que vous souhaitez afficher dans l'en-tête.

3. Enregistrez le menu et assurez-vous qu'il est défini comme menu principal.

Étape 2 : Création de titres dans Elementor

Après avoir configuré le menu, l'étape suivante consiste à créer le modèle de titre dans Elementor.

1. Dans le backend de WordPress, naviguez vers "modèle">"Constructeur de thèmes".

2. Sélectionner "Ajouter un nouveau modèle"Dans la fenêtre pop-up, sélectionnez "légende", puis nommez le modèle.

3. En option, vous pouvez choisir parmi des modèles de titres prédéfinis ou créer un nouveau modèle de titre à partir de zéro.

Étape 3 : Conception de l'en-tête

Dans l'éditeur Elementor, commencez à concevoir la mise en page de votre titre. Voici un flux simple pour la conception d'un titre :

1. Ajouter une structureLa structure de la page : Tout d'abord, ajoutez une structure à deux colonnes. Réglez la largeur du contenu sur "boxed".
2. Ajouter un logoLe logo du site : Ajoutez le logo du site dans la première colonne et alignez-le à gauche.

3. Ajouter un menu de navigationAjouter le menu de navigation dans la deuxième colonne et sélectionner le menu principal que vous venez de créer. Alignez le menu de navigation vers la droite.

L'apparence de l'en-tête peut être optimisée en ajustant la largeur des colonnes, les couleurs d'arrière-plan, les styles de police, etc. Si vous souhaitez ajouter d'autres éléments de conception tels que des boutons, des boîtes de recherche, des icônes de médias sociaux, etc., vous pouvez utiliser d'autres widgets fournis par Elementor.

Étape 4 : Rendre le titre collant

Une fois le titre conçu, l'étape suivante consiste à le définir comme un titre collant.

1. Cliquez sur Modifier la section du titre (toute la section du titre) et allez dans Avancé > Effets de mouvement.

2. Sous "Effets de mouvement", trouvez "coller qqch. au sommetL'option "On" doit être activée.
3. Option permettant de choisir les appareils sur lesquels afficher les titres autocollants (par exemple, ordinateur de bureau, tablette, téléphone portable, etc.)

4. Cliquez "poste"et suivez les instructions pour définir les conditions d'affichage du titre, par exemple en l'affichant sur l'ensemble du site ou en excluant des pages spécifiques.

Optimiser les titres collants avec des feuilles de style CSS personnalisées

Bien que les outils de conception fournis avec Elementor soient déjà très puissants, si vous souhaitez personnaliser davantage l'apparence des en-têtes collants, vous pouvez utiliser des feuilles de style CSS personnalisées pour obtenir des effets plus sophistiqués.

Voici un exemple de CSS personnalisé permettant d'ajuster la hauteur, la couleur d'arrière-plan et les effets de transition d'un titre collant :

code cssCopy
selector.elementor-sticky--effects {
    background-color : rgb(255, 220, 168) !important ;
}
selector {
    transition : background-color 3s ease !important ; }
}
selector.elementor-sticky--effects >.elementor-container {
    min-height : 80px ;
}
selector > .elementor-container {
    transition : min-height 1s ease !important ; }
}

Grâce à ces règles CSS, il est possible de contrôler le défilement de l'en-tête collant lorsque le boutonEffets de transition pour le changement de couleur de l'arrière-plan, la hauteur du titreetc. Pour appliquer ce CSS, il suffit, dans l'éditeur Elementor, de sélectionner la section de l'en-tête et d'aller dans "niveau élevé">"CSS personnalisé"Il suffit de coller le code.

rendre un verdict

En-têtes collantsIl peut améliorer de manière significative l'expérience utilisateur de votre site web, en particulier si le contenu est long ou nécessite une navigation fréquente. Avec Elementor, il est facile de créer des titres collants et les débutants peuvent s'y mettre rapidement.