Comment ajouter une barre flottante dans Elementor

Une barre flottante est une bannière fixée en haut ou en bas d'une page web. Elle est souvent utilisée pour afficher des informations promotionnelles, des annonces importantes ou des appels à l'action (CTA) afin d'attirer l'attention des visiteurs sans interrompre leur navigation.

Notez que la barre flottante est un modèle et non un widget (Widget) ou d'autres éléments. Il doit se trouver dans la section WordPress Ajoutez-le dans le backend, vous ne pouvez pas l'ajouter dans l'interface utilisateur. Elementor créés directement dans l'éditeur.

Scénarios d'utilisation courante

Exemple de cas :
Jan est propriétaire d'un magasin de vêtements. Les prévisions météorologiques annoncent de la pluie pour les semaines à venir et elle ajoute une barre flottante à son site web pour rappeler aux visiteurs qu'elle vend des parapluies. Cette barre flottante est affichée au bas de toutes les pages.

Autres scénarios d'utilisation: :

• Promotions : les codes de réduction peuvent être affichés dans la barre flottante
• Sauts de navigation : diriger les utilisateurs vers de nouvelles sections ou des pages spéciales
• Déclenchement de l'action : Mise en place CTA bouton qui invite l'utilisateur à s'inscrire ou à cliquer sur la fonction de chat

Ajout d'une barre flottante : guide étape par étape

Voici un exemple complet dans lequel nous créons une barre flottante qui dirige l'utilisateur vers un chat avec le service clientèle. Cette barre flottante est réalisée à partir d'un modèle prédéfini fourni par Elementor.

Attention :

• La barre flottante est créée sur la base d'un modèle existant.
• Le contenu peut être personnalisé, mais la structure doit être sélectionnée dans la bibliothèque de modèles.

Étape 1 : Créer un modèle flottant

La barre flottante étant un type de modèle, vous devez d'abord créer un modèle.

• s'inscrire WordPress Dans les coulisses, entrez :
  Modèles > Éléments flottants

• Cliquez sur le bouton à droite :Ajouter un nouvel élément flottant

• Sélectionnez dans le menu déroulant :Barres flottantes

• (Facultatif) Nommez la barre flottante, par exemple "Barre promotionnelle parapluie".

• frappe (sur le clavier)Créer un élément flottant

Le système ouvre automatiquement Elementor bibliothèque de modèleset passez à la catégorie Barres flottantes. À ce stade, vous devez sélectionner un modèle dans la liste.

Conseil : les modèles marqués d'un "Pro" ne sont disponibles que pour les modèles Elementor Pro Utilisation par l'utilisateur.

Étape 2 : Insérer le modèle

• Survolez un modèle favori et cliquez sur le boutonInsérer

• Le modèle est chargé dans l'éditeur Elementor.

Étape 3 : Modifier le contenu de la barre flottante

La barre flottante peut être librement ajustée en fonction du modèle sélectionné dans l'ongleticône (informatique)Il s'agit notamment des textes, des boutons CTA et des positions.

L'opération décrite dans l'exemple est la suivante :

1) Modification de l'icône

• Le panneau se trouve dans la section Icône Champ d'icônes

• Cliquez sur le bouton icône à droite pour ouvrir la galerie d'icônes.

• Recherchez et sélectionnez l'icône du parapluie et cliquez sur "Insérer".

2. modification du texte de la bannière

• localiser Champ Annonce (contenu de l'annonce)
• La modification se lit comme suit :Découvrez nos parapluies.(Un orage se prépare ? Venez voir nos parapluies).

3. mise en place du bouton CTA

• spectacle (un billet) Champ du bouton CTA

• Modifier le texte du bouton en :Restez au sec !

• Ajouter des liens de saut de page aux liens des boutons

4. modification de l'emplacement de l'affichage

• Passez à Onglet Avancé

• Cliquez sur l'icône du bas (qui représente le placement de la barre flottante en bas de la page)

• Vous verrez la barre flottante en bas du navigateur lors de la prévisualisation.

Étape 4 : Publier et définir les conditions d'affichage

• Cliquez sur le bouton Publier dans le coin supérieur droit.

• Dans la fenêtre pop-up, cliquez surAjouter une condition

Si vous utilisez le Elementor ProVous pouvez définir dans quelles pages, articles ou catégories la barre flottante sera affichée. Par exemple : ne l'afficher que sur la page d'accueil, ou l'afficher sur la page du produit.

• Après avoir défini les conditions, cliquez surEnregistrer et fermer

Dans ce cas, la barre flottante apparaîtra sur la page spécifiée pour attirer l'attention du visiteur.

court

La barre flottante est une solution frontale non intrusive pour afficher des promotions, des annonces et des boutons interactifs. Elle s'appuie sur des modèles, mais offre une grande liberté de contenu et de style. Utilisation Elementor Pro les utilisateurs peuvent définir les conditions d'affichage et les plages de pages pour mieux s'adapter au style du site web.

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.