Élément de chapiteau

Qu'est-ce que l'élément de marquee ?

Élément de chapiteau est utilisé pour créer un effet de défilement horizontal pour une ligne contenant d'autres éléments.

Voici quelques fonctionnalités clés de l'élément Marquee qui auraient pu être utilisées pour :

• Mettre en avant les promotions et les offres spéciales:Les sites de commerce électronique peuvent avoir utilisé l'élément Marquee pour mettre en avant des promotions spéciales, des remises ou des offres à durée limitée. L'effet de défilement peut attirer l'attention sur ces offres, les rendant plus visibles pour les utilisateurs visitant le site.
• Partenariats de marques d'affichage : Les sites de commerce électronique peuvent utiliser l'élément Marquee pour afficher une liste déroulante de logos de partenaires. Cela peut mettre en valeur les marques pertinentes et augmenter la crédibilité du site, en instaurant la confiance avec les utilisateurs grâce à des logos reconnaissables.
• Témoignages de clients défilants : L'élément Marquee aurait également pu être utilisé pour mettre en avant les commentaires des clients. Cet affichage dynamique peut mettre en avant les commentaires positifs, renforçant ainsi la fiabilité du site en mettant en avant les expériences des clients satisfaits.
• Afficher l'appel à l'action:Dans certains cas, les sites de commerce électronique peuvent avoir utilisé l'élément Marquee pour afficher des CTA défilants. Cela peut attirer l'attention de l'utilisateur sur des actions importantes telles que « S'inscrire maintenant » ou « En savoir plus », ce qui suscite l'engagement et améliore les taux de conversion grâce à des invites claires et visibles.

Comment ajouter l'élément de bandeau défilant dans GemPages v7

Étape 1: Aller sur le site web de Éditeur GemPages V7 et recherchez l'élément Marquee dans la barre de recherche.

Étape 2:Faites glisser et déposez l'élément dans la zone souhaitée.

Veuillez noter que:

• Vous pouvez ajouter n'importe quel élément à l'intérieur d'un chapiteau sauf: Onglets, Accordéon, Formulaire de contact, Produit, Bannière Héros, Liste de produits, Liste d'articles et Carrousel.
• Évitez de placer plus de 20 chapiteaux par page pour éviter les problèmes de performances.
• Sur les connexions plus lentes, la taille du chapiteau peut s'ajuster une fois le chargement des images volumineuses terminé.

Configurer l'onglet Paramètres

Gestion des articles 

Dans la section Gestion des articles, vous pouvez :

• Réorganiser les éléments : faites glisser pour réorganiser.
• Dupliquer un élément : cloner un élément existant.
• Supprimer l'élément : supprimez un élément indésirable.
• Ajouter un élément : créer un nouvel élément de sélection.

Espacement des éléments

Ajustez l'espace entre les éléments à l'aide du curseur (par défaut : 60 px).

Style d'article

1. Largeur maximale : La largeur maximale d'un seul élément dans le chapiteau — tous les éléments du chapiteau partageront la même largeur maximale.

La valeur de largeur maximale par défaut est Ajuster au contenu, ce qui signifie que la largeur de chaque élément de sélection s'adaptera automatiquement au contenu qu'il contient.

Il existe 3 options de largeur :

• Ajuster au contenu : largeur de l'élément = largeur du contenu à l'intérieur.
• En fonction du nombre d'articles : largeur de l'article = largeur du chapiteau / nombre d'articles.
• Personnalisé : définir une largeur maximale fixe : l'utilisateur peut saisir manuellement la valeur de largeur souhaitée en pixels.

2. Contexte: Appliquer une couleur ou une image d'arrière-plan.

3. Bordure, coin, ombre : Personnalisez la forme et la profondeur de chaque objet.

Séparateur

Activez/désactivez les séparateurs entre les éléments pour une meilleure distinction visuelle.

Effet de chapiteau

• Direction : définissez la direction de défilement (gauche ou droite).
• Arrêter au survol : mettre l'animation en pause lorsque l'utilisateur survole.
• Vitesse : ajustez la vitesse de défilement.

Taille

• Largeur: Ajustez la largeur d'un élément de texte. La valeur par défaut est de 100 %, ce qui signifie que l'élément s'adaptera automatiquement à la largeur de l'écran.
• La taille: Ajustez la hauteur d'un bandeau défilant. La valeur par défaut est « Auto », ce qui signifie que le bandeau défilant s'adaptera automatiquement à son contenu.
• Rembourrage: Ajustez l'espace entre la bordure et le contenu de chaque élément.

Présentation

Couleur : Appliquer une couleur de fond à la sélection.

Forme

Configurez les bordures, les coins et les ombres.

Aligner

• L'alignement sera désactivé lorsque la largeur sera de 100 %.
• Sinon, l'option d'alignement par défaut est l'alignement centré.

Configurer l'onglet Avancé

Reportez-vous à cet article pour plus d'instructions sur la configuration de l'onglet Avancé de l'élément Marquee.

Afficher sur

Vous pouvez décider sur quels appareils l'élément Marquee sera affiché : Bureau, Tablettes et MobileBasculez simplement chaque option pour afficher ou masquer l'élément sur des appareils spécifiques.

Espacement (px)

Ajuste le marge et rembourrage valeurs autour de l'élément Marquee à l'aide du modèle de boîte visuelle :

• Valeurs extérieures (en haut, à droite, en bas, à gauche) contrôlent le marge (l'espace à l'extérieur de l'élément)
• Valeurs intérieures contrôler le rembourrage (l'espace à l'intérieur du conteneur de l'élément)
• Cliquez sur icône de lien au centre pour synchroniser/dissocier les valeurs.

Forme

Dans la section Forme, vous pouvez :

• Ajoutez une bordure à l'élément et sélectionnez parmi différents styles (plein, pointillé, pointillé).
• Personnalisez le rayon des coins : choisissez entre des coins carrés, arrondis ou en forme de pilule.
• Activez une ombre pour aider l’élément à se démarquer de l’arrière-plan.

Poste

Modifiez la façon dont le Marquee est positionné dans sa section ou par rapport à d'autres éléments, notamment :

• Statique
• Relatif
• Absolute
• gluant
• Parfaitement fixé

Opacité

Ajuster le niveau de transparence de l'élément :

• 100 % = entièrement visible
• 0% = entièrement transparent

Utilisez le curseur ou la zone de saisie pour affiner la visibilité. Utile pour superposer des éléments ou créer des effets visuels subtils.

Animation

Activez cette option pour ajouter une animation d'entrée ou de survol à l'élément Marquee. Une fois activée, vous pouvez personnaliser le comportement de l'animation avec les options suivantes :

• Lorsqu'il apparaît/lors du survol : Choisissez si l'animation doit être déclenchée lorsque l'élément apparaît à l'écran ou lorsqu'un utilisateur passe la souris dessus
• Types d'animations : Vous pouvez choisir parmi plusieurs styles d'animation : Aucun, Fondu, Glissement, Zoom, Secouer
• La vitesse: Réglez la vitesse de l'animation à l'aide du curseur. Déplacez-le vers la droite pour accélérer la lecture.
• Montre plus: Cliquez sur ce bouton pour accéder à des effets d'animation supplémentaires (si disponibles).
• Exposition : Utilisez le bouton Aperçu pour tester l’apparence de l’animation directement dans l’éditeur.
• Retard: Définissez un délai (en secondes) avant le début de l'animation. Ceci est utile si vous souhaitez échelonner les animations sur plusieurs éléments.
• Assouplissement : Choisissez la façon dont l'animation progresse au fil du temps, les options disponibles incluent : Entrée/Sortie progressive, Entrée/Sortie progressive, Linéaire
• Exposition : Cliquez sur Aperçu bouton pour tester instantanément l'animation dans l'éditeur.

Une utilisation excessive peut affecter les performances et distraire les utilisateurs.

Interaction

Créez des comportements personnalisés pour votre élément Marquee sans code. Cliquez Créer pour ouvrir le panneau Paramètres d'interaction.

Vous mettrez en place :

• Trigger: Choisissez quand l’interaction commence – Cliquez sur l'élément or Élément de survol.
• Action: Sélectionnez un élément cible sur la page et définissez ce qui se passe, y compris changer le style du texte, modifier le contenu, afficher/masquer, or faites défiler jusqu'à.

classe CSS

Saisissez des noms de classes CSS personnalisés (séparés par des espaces) pour appliquer vos propres règles de style à l'élément. Ceci est utile si vous souhaitez ajouter un style avancé via CSS personnalisé dans votre thème ou dans le style global GemPages.

FAQ concernant l'élément Marquee

1. Pourquoi la vitesse de défilement de ma bannière est-elle incohérente d'un appareil à l'autre ?

Des différences de vitesse peuvent survenir lorsque le chargement d'éléments contenant de nombreuses images est lent sur certains réseaux. Une fois toutes les images chargées, le défilement devient fluide. Pour éviter cela, optimisez ou compressez les images volumineuses.

2. L'élément Marquee peut-il ralentir ma page ?

Oui, si vous ajoutez trop d'éléments ou si vous imbriquez plusieurs éléments de défilement sur la même page. Nous recommandons d'utiliser moins de 20 éléments de défilement par page pour garantir des performances optimales et une animation fluide.

3. Pourquoi ma bannière change-t-elle de taille après le chargement ?

Cela se produit lorsque des éléments contiennent des images volumineuses qui se chargent complètement après le début de l'animation. L'élément recalcule sa taille une fois les images entièrement chargées. L'utilisation d'images compressées ou de largeurs d'éléments fixes permet de minimiser ces décalages.

4. Est-il possible de faire en sorte que le défilement se mette en pause au clic plutôt qu'au survol ?

L'option intégrée « Arrêter au survol » ne met en pause que le survol de la souris. Si vous souhaitez une pause au clic, vous pouvez la simuler à l'aide des interactions en activant/désactivant l'affichage ou en choisissant une version non animée.

5. Puis-je créer un bandeau défilant vertical dans GemPages v7 ?

Actuellement, l'élément Marquee dans GemPages v7 prend en charge Défilement horizontal uniquement (de gauche à droite ou de droite à gauche). Un bandeau défilant verticalement (de haut en bas ou de bas en haut) est non pris en charge nativement.

Si vous souhaitez créer un effet visuel similaire, veuillez contacter notre équipe d'assistance pour obtenir des instructions supplémentaires.

6. Comment ajouter une ombre à l'élément Marquee ?

• Cliquez sur l'élément Marquee dans l'éditeur.
• Rendez-vous dans la section Paramètres languette.
• Ouvrez le Forme .
• Permettre Shadow, puis ajustez le type d'ombre, sa couleur, le flou, la distance et la taille selon vos besoins.