Comment ajouter une barre d'annonce à l'échelle du site et une notification en haut de page à l'aide du code personnalisé Elementor

Savez-vous comment l'utiliser ?Elementor Faut-il ajouter une bannière d'annonce bien visible en haut du site web ? La fonctionnalité Code personnalisé d'Elementor offre une méthode sûre et flexible pour implémenter une telle bannière à l'échelle du site sans modifier les fichiers du thème. Cet article vous guidera étape par étape, depuis le début, sur la manière d'utiliser le Code personnalisé pour ajouter une notification en haut de page entièrement fonctionnelle et visuellement attrayante.

I. Pourquoi utiliser Elementor Custom Code pour créer des bannières d'annonce ?

Comparé aux plugins ou à la modification manuelle des fichiers de thème, le code personnalisé est plus adapté aux débutants et offre une sécurité et une stabilité accrues. Il présente les avantages suivants :

• Applicable à tous les thèmes, et ne deviendra pas obsolète en raison des mises à jour des thèmes.
• Peut être chargé en une seule fois sur l'ensemble du site, éliminant ainsi le besoin de modifications répétées des pages.
• Prend en charge HTML, CSS et JavaScript, offrant des capacités de personnalisation étendues
• Les conditions d'affichage peuvent être contrôlées, par exemple en affichant uniquement sur la page d'accueil.
• Léger et économe en ressources, il offre une plus grande efficacité que l'installation de plug-ins supplémentaires.

Extrêmement utile pour des scénarios tels que les campagnes marketing, les promotions pendant les fêtes et les annonces logistiques.

II. Fonctionnement de la fonctionnalité d'annonce à l'échelle du site

Les éléments de l'avis sont généralement composés de trois parties :

• Bloc HTML comme contenu de l'annonce
• CSS contrôle le style et le positionnement fixe
• En injectant un code personnalisé, celui-ci apparaît en haut de chaque page.

Il suffit de l'écrire une seule fois, et Elementor le chargera automatiquement sur l'ensemble du site.

III. Travaux préparatoires pour la création d'un code personnalisé

Vous aurez besoin de :

• Installé Elementor(La version gratuite suffira)
• Privilèges d'administrateur backend
• Précisez le libellé des annonces promotionnelles, telles que « Livraison gratuite pour les commandes supérieures à X £ » ou « Nouveautés désormais disponibles ».

Aucune connaissance en programmation n'est requise ; il suffit de copier le code.

4. Comment ajouter une annonce à l'aide d'un code personnalisé ?

4.1 Accéder à la page Code personnalisé

Dans le backend, ouvrez les éléments suivants dans l'ordre : Elementor → Code personnalisé → Ajouter nouveau. Entrez un nom, tel que « Barre d'annonce à l'échelle du site ».

4.2 Définition de l'emplacement du code

Sélectionnez dans Emplacement :Extrémité du corps (recommandé)Cette approche n'affectera pas la vitesse de chargement des pages et facilitera la mise en œuvre d'un effet d'en-tête fixe.

4.3 Ajout d'une structure HTML pour les éléments d'annonce

Collez ce qui suit dans l'éditeur de code :

<div class="site-announcement-bar">
  <span>🎉 Livraison gratuite sur tous les articles pour une durée limitée – offre actuellement disponible !</span>
  <a href="/fr/boutique/" class="notice-btn">Voir maintenant</a>
</div>

Il s'agit d'une structure simple, adaptée à l'affichage d'événements, d'avis ou de liens de redirection.

4.4 Ajout de styles CSS

Pour maintenir la barre d'annonce en haut de la page, appliquez les styles suivants à l'élément ci-dessus : HTML Placés ensemble :

.site-announcement-bar {   position : fixed ;   top : 0 ;   left : 0 ;   width : 100 % ;
  background: #155111; colour: #ffff; padding: 10px 0; text-align: centre; font-size: 15px; z-index: 9999; } .site-announcement-bar .notice-btn { margin-left: 12px;
  rembourrage : 6px 14px ; arrière-plan : #f4c21d ; couleur : #000 ; rayon de bordure : 4px ; décoration du texte : aucune ; épaisseur de police : gras ; }

Une barre de notification supérieure s'affichera avec un fond noir et du texte blanc, ainsi que des boutons jaunes pour un effet visuel clair et accrocheur.

V. Ajouter un bouton « Fermer » à la section « Avis » (facultatif)

Pour permettre aux utilisateurs de fermer manuellement la barre d'annonce, intégrez le contenu suivant.

5.1 Ajouter un bouton Fermer HTML

×

Placez ce bouton dans la barre d'annonce.

VI. Évitez que le contenu soit masqué par des barres d'annonce.

Les sections d'annonces épinglées en haut peuvent masquer le contenu de la page ; le style suivant peut être appliqué :

body { padding-top : 50px ; }

Ajustez les chiffres en fonction de la hauteur du panneau d'affichage.

VII. Méthode pour afficher les annonces uniquement sur certaines pages spécifiques

Si vous ne souhaitez pas que la barre d'annonce apparaisse sur toutes les pages, vous pouvez définir des conditions :Elementor Code personnalisé → Conditions

Sélectionner :

• Ensemble du site
• Première page
• Singulier (page d'article unique)

Cela permet une configuration plus précise pour les événements, les jours fériés et les collections de produits.

VIII. Solutions aux problèmes courants

1. La section « Annonces » ne s'affiche pas ?

Vérifiable :

• Le code personnalisé a-t-il été publié ?
• La position de chargement est-elle correctement sélectionnée (l'extrémité de la carrosserie étant la plus stable) ?
• Certains styles sont-ils remplacés par le thème ?

2. La version mobile est-elle mal conçue ?

Optimisez les polices et les mises en page à l'aide de requêtes multimédias :

@media (max-width: 768px) {   .site-announcement-bar {     font-size: 13px;     padding: 8px 0;   } }

3. Vous souhaitez rendre la barre d'annonce plus visible ?

Peut être ajouté :

• Fond dégradé
• Effet de texte défilant
• Module compte à rebours
• Icône d'activité

Il suffit d'ajuster le CSS pour améliorer l'apparence visuelle.

IX. résumé

Code personnalisé Elementor Un outil puissant mais léger, qui ne nécessite que quelques lignes de code HTML et CSS pour créer une bannière d'annonce à l'échelle du site. Il n'est pas nécessaire de modifier les fichiers de thème ni d'installer des plugins supplémentaires, ce qui le rend idéal pour les sites de commerce électronique, les plateformes de contenu et les pages marketing. En suivant les étapes décrites dans cet article, vous pouvez rapidement mettre en place votre propre système de notification sur votre site web, en concevant librement son style et son champ d'affichage, afin que les utilisateurs puissent voir d'un seul coup d'œil les contenus essentiels !

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.