Comment utiliser Elementor pour créer un en-tête transparent ?

Les en-têtes transparents peuvent être un excellent moyen d'améliorer l'apparence de votre site. Cela permet à la conception de votre site Web de se démarquer et de paraître plus interactive pour les visiteurs de votre site.

Mais pouvez-vous utiliser Elementor pour créer un en-tête transparent sur WordPress sans connaître aucun langage de programmation ? La réponse est oui! Vous pouvez certainement. Cet article vous montrera les instructions pour créer facilement un en-tête transparent Elementor.

Les avantages de l'utilisation d'en-têtes transparents

Vous pouvez facilement créer des en-têtes transparents Elementor attrayants. Mais si vous le souhaitez, vous pouvez aller plus loin et le corriger lorsque les visiteurs font défiler le contenu de la page. Ci-dessous les avantages :

Excellent pour les longues pages Web

L'utilisation d'un en-tête collant transparent est un moyen élégant et rapide de garantir à vos visiteurs une expérience agréable.

Ils peuvent aider votre site Web à avoir un système de navigation plus convivial. Si le contenu de votre site est très long, cet avantage sera très bénéfique.

Idéal pour les sites Web exploitables

Les en-têtes collants transparents fonctionnent mieux sur les sites Web exploitables, tels que les sites de vente au détail ou de commerce électronique. C'est parce que vous voulez que les visiteurs effectuent une action spécifique tout en restant sur le contenu de la page.

Lorsque l'en-tête est magnifiquement affiché lors de la navigation sur votre site Web, les visiteurs le trouveront plus pratique à explorer.

De plus, comme l'en-tête est transparent, il ne réduira pas la lisibilité du contenu. Par conséquent, l'ajout d'un en-tête transparent peut réduire le taux de rebond de votre site et aider à guider efficacement vos visiteurs.

Améliorez la capacité de navigation de votre site

L'utilisation d'un en-tête collant transparent sur votre site encourage vos visiteurs à agir immédiatement. Cela leur fait gagner du temps lors de la recherche d'une option particulière.

Et au lieu de mettre le logo de votre marque partout sur la page d'accueil, vous pouvez l'afficher élégamment sur un en-tête collant transparent.

Comment utiliser Elementor Pro pour créer un en-tête transparent ?

Maintenant, apprenons à créer et personnaliser un en-tête transparent à l'aide d'Elementor Pro.

Installer et activer le plugin Elementor Pro

Si votre site n'a pas encore eu Elementor Pro, vous devez l'installer et l'activer.

1. Depuis le tableau de bord WordPress, accédez à Plugins > Ajouter un nouveau .

2. Trouvez le plugin en entrant 'Elementor'. Vous verrez alors le constructeur de site Web Elementor répertorié comme une option.
3. Cliquez respectivement sur le bouton Installer maintenant et sur le bouton Activer .
4. Après avoir acheté Elementor Pro avec succès, rendez-vous sur my.elementor.com.
5. Connectez-vous avec les informations que vous avez reçues dans l'e-mail après l'achat.
6. Ensuite, vous serez redirigé vers la page Profil . Cliquez sur le bouton Télécharger le plugin dans le coin supérieur droit pour télécharger le fichier .zip sur votre ordinateur.

7. Depuis le tableau de bord WordPress de votre site, cliquez sur Plugins > Add New . Ensuite, cliquez sur le bouton Upload Plugin dans le coin supérieur gauche.
8. Cliquez sur le bouton Choisir un fichier . Sélectionnez le fichier .zip que vous venez de télécharger. Cliquez ensuite sur Activer .
9. En haut du tableau de bord du site, vous recevrez une notification vous demandant d'activer votre clé de licence.

Créer un menu pour votre site

Ensuite, vous devez créer un menu d'en-tête à l'aide du tableau de bord WordPress si vous ne l'avez pas encore fait. Vous trouverez ci-dessous un guide d'introduction.

1. Depuis le tableau de bord WordPress, accédez à Apparence > Menus .

2. Saisissez le nom du menu dans la zone de texte Nom du menu. Ensuite, cliquez sur le bouton Créer un menu .
3. Concentrez-vous sur le panneau de gauche. Ici, vous pouvez ajouter les pages, les publications, les catégories et les liens personnalisés du site au menu.

4. Vous pouvez faire glisser et déposer des éléments de menu pour les réorganiser ou créer des sous-menus sur le panneau de droite.

5. Lorsque vous êtes satisfait, n'oubliez pas de cliquer sur le bouton Enregistrer le menu .

Utilisez Elementor Pro pour créer un en- tête normal

1. Accédez à Modèles > Ajouter nouveau depuis le tableau de bord WordPress.

2. Une fenêtre contextuelle apparaîtra. Sélectionnez le modèle d'en-tête Elementor dans le menu déroulant et entrez son nom dans la zone de texte Nommez votre modèle . Ensuite, cliquez sur le bouton CRÉER UN MODÈLE .

3. La galerie de modèles Elementor apparaîtra dans une fenêtre contextuelle. Vous pouvez naviguer dans tous les styles d'en-tête Elementor. Une fois que vous avez choisi un favori, déplacez votre curseur dessus puis cliquez sur le bouton Insérer . Vous pouvez également les prévisualiser tous.

Créer un en- tête collant transparent à l' aide d' Elementor Pro

1. Maintenant, vous devez rendre l'en-tête transparent à l'aide d'Elementor Pro. Pour ce faire, cliquez sur le bouton à six points au-dessus de l'en-tête.

2. Dans la section "Mise en page", choisissez le menu souhaité dans le menu déroulant Menu.

3. Accédez à l'onglet Style pour modifier la couleur d'arrière-plan et la valeur de transparence de l'en-tête. Dans la section "Arrière-plan", choisissez le type d'arrière-plan Classique (indiqué par un pinceau).

4. Cliquez sur le bouton Sélecteur de couleurs . Ensuite, choisissez une couleur et une valeur de transparence souhaitées.
5. Vous pouvez modifier davantage l'apparence générale de l'en-tête, y compris la typographie, la superposition d'arrière-plan, la bordure et le séparateur. N'hésitez pas à expérimenter.
6. Ensuite, allez dans l'onglet Avancé . Ensuite, faites défiler jusqu'à la section Effets de mouvement . Activez l'option Effets de défilement .

7. Choisissez l'option Page entière dans le menu déroulant Effets relatifs à .
8. Enfin, choisissez l'option Top dans le menu déroulant Sticky .
9. Lorsque vous êtes satisfait, cliquez sur le bouton Publier pour appliquer les modifications.

Le résultat sera similaire à celui ci-dessous :

Comment utiliser Elementor pour créer un en-tête transparent gratuitement ?

Si votre budget est limité et que vous ne voulez pas dépenser d'argent pour Elementor Pro, vous avez besoin d'un autre plugin pour créer des en-têtes transparents.

Dans cet article, nous utiliserons le plugin Essential Addons for Elementor. Il s'agit de la bibliothèque de widgets la plus populaire avec plus d'un million d'utilisateurs actifs.

Vous obtiendrez gratuitement de nombreux widgets pour faire en sorte qu'un site Web se démarque et soit aussi attrayant que possible. Notez que vous n'avez pas besoin de la version premium pour créer des en-têtes transparents.

Installer et activer le plugin Elementor et Essential Addons for Elementor

1. Depuis le tableau de bord WordPress, accédez à Plugins > Ajouter un nouveau .

2. Trouvez le plugin en entrant ' Elementor '. Vous verrez alors le plugin Elementor répertorié comme une option.
3. Cliquez respectivement sur le bouton "Installer maintenant" et sur le bouton "Activer".
4. Répétez le processus ci-dessus avec le plugin Essential Addons for Elementor.

Créer un menu pour votre site

Nous avons déjà couvert cela ci-dessus. Veuillez faire défiler jusqu'à savoir-faire.

Utilisez les addons essentiels pour Elementor pour créer un en- tête collant transparent

1. Accédez à Compléments essentiels > Éléments . Ici, activez le widget Menu simple . N'oubliez pas de cliquer sur le bouton ENREGISTRER LES PARAMÈTRES .

2. Créez une nouvelle page/publication ou ouvrez-en une existante avec Elementor.
3. Cliquez sur le bouton Paramètres (indiqué par une roue dentée) dans le coin inférieur gauche. Sélectionnez 'Elementor Canvas' dans le menu déroulant Mise en page . De cette façon, vous pouvez vous débarrasser de l'en-tête fourni avec le thème.

4. Revenez au menu du widget en cliquant sur l'icône des neuf carrés. Recherchez le widget Menu simple . Faites-le glisser et déposez-le à l'emplacement souhaité.

5. Dans la section Général , choisissez le menu souhaité dans le menu déroulant Sélectionner un menu.

6. Accédez à l'onglet Style pour modifier la couleur d'arrière-plan et la valeur de transparence de l'en-tête.

7. Dans la section Arrière -plan, choisissez le type d'arrière-plan Classique (indiqué par un pinceau).
8. Cliquez sur le bouton Sélecteur de couleurs . Ensuite, choisissez une couleur et une valeur de transparence que vous souhaitez.
9. Vous pouvez modifier davantage l'apparence générale de l'en-tête, y compris la typographie, la superposition d'arrière-plan, la bordure et le séparateur. N'hésitez pas à expérimenter.
10. Ensuite, allez dans l'onglet Avancé . Ensuite, faites défiler jusqu'à la section Positionnement . Choisissez l'option Fixe dans le menu déroulant Position .

11. Revenez au menu du widget en cliquant sur l'icône des neuf carrés. Recherchez le widget Spacer . Faites-le glisser et déposez-le juste en dessous du widget Menu simple .

12. Dans la section Spacer , ajustez la valeur Space pour qu'elle corresponde à la hauteur de l'en-tête.

13. Lorsque vous êtes satisfait, cliquez sur le bouton Publier pour appliquer les modifications.

Comment créer un en-tête transparent pour les utilisateurs de Woostify ?

Si vous utilisez le thème Woositfy, même la version gratuite, vous pouvez rapidement appliquer un bel en-tête transparent pour l'ensemble de votre site en quelques minutes. Suivez les instructions ci-dessous pour savoir-faire :

1. Accédez à Apparence > Personnaliser à partir du tableau de bord WordPress.

2. Ensuite, allez dans Mise en page > En- tête transparent .

3. Activez la bascule Activer l'en-tête transparent .

4. Dans le nouvel onglet Général et Design , vous pouvez personnaliser le nouvel en-tête transparent en fonction de vos besoins. Par exemple, vous pouvez l'activer/désactiver sur des pages particulières, telles que 404, les messages, etc.,

5. N'oubliez pas de cliquer sur le bouton Publier lorsque vous êtes satisfait du résultat.

Derniers mots

La création d'un en-tête transparent Elementor est une approche élégante pour aider les utilisateurs à naviguer sur votre site.

L'en-tête que nous avons créé est entièrement réactif. Par conséquent, vous n'avez pas à vous soucier de ce problème. Pour ceux qui utilisent Woostify, vous devriez opter pour la troisième voie. C'est aussi le moyen le plus simple et le plus rapide de créer un bel en-tête transparent.