Comment ajouter une barre supérieure dans WordPress avec Elementor

Une barre supérieure fournit un moyen efficace de mettre en évidence des messages, des promotions et des appels à l'action importants sur WordPress. Il est positionné en haut de la page Web dans le but d'attirer l'attention des visiteurs sans entraver l'expérience de navigation des utilisateurs.

Une barre supérieure bien conçue peut considérablement augmenter les conversions car elle peut instantanément attirer l'attention des visiteurs et les guider vers des actions telles que l'inscription aux newsletters, la saisie des offres à durée limitée et l'exploration de nouveaux contenus. Il fonctionne comme un rappel persistant sans déranger les utilisateurs.

L'ajout de barres supérieures à WordPress est très simple avec Elementor. Dans cet article, nous couvrirons un guide étape par étape sur la façon d'ajouter une barre supérieure dans WordPress avec Elementor. Restez avec nous jusqu'à la fin.

Qu'est-ce qu'une barre supérieure?

Une barre supérieure est une section horizontale étroite affichée en haut d'un site Web au-dessus de l'en-tête principal. Contrairement aux pop-ups ou aux bannières, il est utilisé pour présenter les coordonnées, les descriptions de liens, les annonces importantes, les offres promotionnelles et les messages. Vous pouvez améliorer l'engagement des utilisateurs par des personnalisations étendues, comme les couleurs, les polices et les boutons spécifiques à la marque.

La barre supérieure n'est pas toujours affichée en haut d'un site Web 24/7. Au lieu de cela, il est généralement montré pendant les périodes de campagne à des fins promotionnelles. Il est défini par différents noms en fonction de ses cas d'utilisation. Nous en discuterons dans la section suivante. Continuez à lire.

Comment s'appelle la barre supérieure sur un site Web?

Comme dit il y a à peine une minute, la barre supérieure d'un site Web est définie par différents noms en fonction de son objectif et de sa fonctionnalité. Jetez un œil à certains termes communs utilisés pour la barre supérieure, qui sont répertoriées ci-dessous.

• Barre d'annonce - Utilisé pour partager les annonces, les notifications d'événements et les mises à jour importantes.

• Barre de notification - Affiche les offres à durée limitée, les nouvelles de la maintenance du système et les messages urgents.

• Promo Bar - met en évidence des promotions spéciales, des remises exclusives et des campagnes pour stimuler les ventes.

• BAR INFORMATION - PROPRIÉTÉ les numéros de contact, les coordonnées des achats, les adresses locales et les heures d'ouverture.

• Sticky Bar - reste réparé en haut du site Web même lorsque les utilisateurs font défiler les publications et les pages.

• Barre flottante - se déplace lorsque vous faites défiler les poteaux et les pages pour assurer une présence notable.

Comment ajouter une barre supérieure dans WordPress avec Elementor

La partie théorique est terminée. Maintenant, nous couvrirons la partie tutoriel de cette section, expliquant un guide étape par étape sur la façon d'ajouter une barre supérieure dans WordPress à l'aide d'Elementor.

Pré-requis: installer Elementor ou HappyAddons

Pour créer une barre supérieure sur l'intégralité du site Web, vous devez avoir accès au Builder de Theme Theme Elementor, qui est une fonctionnalité premium. Si vous souhaitez utiliser la version premium du plugin et que vous recherchez une option gratuite, vous devez essayer le plugin HappyAddons.

HappyAddons est en fait un addon au plugin Elementor avec de nombreuses fonctionnalités gratuites qui sont normalement premium dans Elementor. Par exemple, HappyAddons a également un constructeur de thème, qui est assez similaire à Elementor, mais il est entièrement gratuit.

Donc, dans cette section, nous utiliserons le plugin HappyAddons pour expliquer le tutoriel. Installez et activez les plugins suivants sur votre site.

• Élémentor
• Happyaddons

Une fois qu'ils sont installés et activés sur votre site, commencez à suivre le tutoriel expliqué ci-dessous. Nous vous montrerons comment créer une barre supérieure sur WordPress comme celle que vous pouvez voir dans l'image ci-dessous.

Étape 01: Allez au constructeur de thème HappyAddons

Accédez à HappyAddons> Builder de thème . Comme le plugin Elementor, vous pouvez créer un en-tête, un pied de page, un modèle d'article de blog et une page d'archives avec le constructeur de thème du plugin HappyAddons.

Étape 02: Accédez à la section d'en-tête

Comme la barre supérieure est affichée sur le dessus de l'en-tête Web, vous devez le personnaliser à partir de la section d'en-tête. Alors, ouvrez l'en-tête avec l'option Modifier avec Elementor.

Apprenez à créer du contenu hors canaux dans Elementor.

Étape 03: Ajoutez un nouveau conteneur au-dessus de l'en-tête

Faire planer votre curseur sur l'en-tête affichera l' icône plus (+) . Cliquez sur cette icône vous permettra d'ajouter un nouveau conteneur à l'en-tête ci-dessus. Fais-le.

Étape 04: Personnalisez la barre supérieure et ajoutez-y du contenu

Vous devez ajouter une couleur contrastée à l'arrière-plan de la barre supérieure. Pour ce faire, cliquez sur l' icône à six points du conteneur> Accédez à l'onglet Style > Trouvez l'option de couleur > Sélectionnez une couleur.

Ajoutez le widget de l'éditeur de texte à la section de barre supérieure. Cela vous permettra d'ajouter du contenu texte à la section.

Sous l'éditeur de texte sur la barre latérale droite, vous pouvez écrire le contenu de texte souhaité qui sera affiché sur la barre supérieure en temps réel.

À partir de l'option marquée ci-dessous dans la section Text Editor, vous pouvez modifier la couleur et l'audace du texte que vous avez ajouté à la barre supérieure.

Vous pouvez même ajouter des espaces entre les mots et souligner certains mots. Nous avons fait cela à notre texte pour ce tutoriel. Vous pouvez les voir ci-dessous.

HappyAddons vous permet d'ajouter des effets de particules à l'arrière-plan de la barre supérieure. L' effet de particules heureuse est une technique d'animation visuelle où de petites particules brillantes se déplacent dynamiquement sur une page Web, créant une expérience utilisateur vivante et engageante.

Pour ajouter cela, accédez à Style> Effets de particules heureuses . Après cela, bascule pour activer le fond des particules .

Ensuite, vous pouvez choisir un style de particules, une couleur de particules, une opacité, un nombre de particules, une taille de particules et une vitesse de déplacement . J'espère que vous pouvez les faire vous-même.

Nous avons ajouté un court clip afin que vous puissiez vérifier comment fonctionne la fonction de particules heureuse. Cela rend la barre supérieure si bonne à regarder.

Développez la section des frontières . Vous pouvez définir une largeur de bordure et une couleur comme vous le souhaitez. Cependant, nous pensons que l'ajout d'une frontière n'est pas important pour la barre supérieure. Vous pouvez donc l'éviter.

Maintenant, développez la section du diviseur de forme . L'option de diviseur de forme vous permet d'ajouter des formes personnalisables et dynamiques en haut ou en bas des sections.

Cependant, cette option n'est pas non plus importante pour la barre supérieure. Donc, il vaut mieux l'éviter. Mais si vous avez envie d'ajouter cette fonctionnalité à la barre supérieure, vous pouvez le faire.

Voici un guide sur la façon de créer une page Web infographique avec Elementor.

Étape 05: Configurer les paramètres avancés pour la barre supérieure

Enfin, venez à l' onglet avancé . Vous obtiendrez de nombreuses options ici pour personnaliser la marge, le rembourrage, l'alignement, l'ordre, la position, la hauteur, l'effet de mouvement, le réactif, etc. Faites vous-même les personnalisations nécessaires.

Étape 06: Masquez la barre supérieure sur un type d'appareil

Vous pouvez masquer la barre supérieure sur tout appareil respectif que vous souhaitez. Par exemple, nous voulons masquer la barre supérieure sur les tablettes. Pour ce faire, élargissez la section réactive. Ensuite, activez l'option du mode périphérique dans lequel vous souhaitez masquer la barre supérieure.

Étape 07: Rendez le mobile de la barre supérieure réactif

Cliquez sur l'option de mode réactif dans le pied de page du panneau Elementor. Ensuite, sélectionnez le mode portrait mobile .

Vous pouvez voir que le contenu de la barre supérieure apparaît en trois lignes et n'est pas parfaitement aligné, contrairement à la façon dont vous le voyez en mode bureau.

Pour rendre le texte bon pour la taille de l'écran, faites les personnalisations dont vous avez besoin en restant en mode portrait mobile.

Nous avons aligné les textes de manière centralisée. Cela ne semble-t-il pas mieux maintenant? Vous pouvez le personnaliser davantage de toutes les manières souhaitées.

Étape 08: publier / mettre à jour les modifications

Lorsque toutes les personnalisations sont terminées, cliquez sur le bouton Publier / Mettre à jour en bas du panneau Elementor pour préserver toutes les modifications.

Explorez comment créer une Lightbox dans WordPress avec Elementor.

Étape 09: Aperçu de la barre supérieure du site Web

Maintenant, venez au frontend de votre site Web. Vous verrez que la barre supérieure s'affiche bien sur votre site.

Ainsi, vous pouvez facilement créer une barre supérieure sur WordPress en utilisant le plugin Elementor gratuitement.

Réflexions finales

J'espère que vous avez apprécié ce tutoriel. Mais pour tirer le meilleur parti du bar supérieur, il y a plusieurs choses clés que vous devez suivre attentivement. Concentrez-vous sur le maintien d'une conception propre et visuellement attrayante qui s'aligne sur la marque de votre site Web. Choisissez des couleurs contrastées pour la lisibilité, utilisez un texte clair et concis et gardez le message pertinent pour votre public.

De plus, optimisez pour la réactivité mobile afin que la barre supérieure reste fonctionnelle sur tous les appareils sans entraver l'expérience utilisateur. Évitez de surcharger la barre supérieure avec trop d'informations, car elle peut submerger les visiteurs. Si vous utilisez des animations ou des effets, gardez-les subtil pour maintenir le professionnalisme.

Si vous avez encore une confusion ou des requêtes à l'esprit, faites-le nous savoir à propos de la zone de commentaire ci-dessous.