ℹ️ Note: Cet article a été traduit automatiquement en utilisant l'IA et peut contenir des inexactitudes. Si quelque chose ne va pas, veuillez contacter notre équipe de soutien.

L'onglet Design vous donne le plein contrôle sur la façon dont votre popup ressemble et se sent sur le devant de la boutique. Des modèles et de la typographie aux animations, couleurs, boutons, style de coupon, et même CSS personnalisé – presque tous les éléments visuels peuvent être personnalisés pour correspondre à votre identité de marque.

Ce guide explique chaque option de conception disponible afin que vous puissiez créer en toute confiance des popups polis et à haute conversion.

⚠️ Avant de commencer

Pour configurer les paramètres de conception :

→ Ouvrir un popup existant
→ Ou créer un nouveau popup d'abord

Ensuite, passez au Conception onglet dans l'éditeur popup.

ℹ️ Certaines sections de conception n'apparaissent que pour des types de popup spécifiques ou des fonctionnalités activées.

Exemples

• Le style minuteur de compte à rebours apparaît uniquement pour les PopUps de compte à rebours
• Le style du coupon n'apparaît que lorsque l'affichage du coupon est activé
• Le style de tranche apparaît uniquement pour Spin Wheel PopUps

🎨 Modèle

Les modèles vous permettent d'appliquer instantanément des styles visuels pré-conçus à votre popup. Cela aide les marchands à lancer rapidement des popups de style professionnel sans configurer manuellement chaque configuration individuelle.

Ceci est utile lorsque vous voulez un popup de style professionnel sans personnaliser manuellement chaque réglage.

Exemples disponibles

• Aube
• Vendredi Noir
• Beauté
• Festive
• Forêt
• Océan
• Aqua
• Électrique
• Parti

Vous pouvez ensuite personnaliser le modèle sélectionné.

👀 Visibilité

Contrôles sur lesquels le popup doit apparaître. Cela aide à créer des expériences popup plus ciblées selon que les clients naviguent à partir d'appareils de bureau ou mobiles.

Options disponibles

• Bureau et mobile — visibles partout
• Uniquement bureau — cachées sur les appareils mobiles
• Uniquement mobile — cachées sur les appareils de bureau

Ceci est utile lors de la création de campagnes spécifiques aux appareils.

🖼️ Contexte contextuel

Cette section contrôle le style de fond de fenêtre popup. Le style d'arrière-plan joue un rôle majeur dans la perception visuelle de la popup sur le devant de la boutique.

Arrière-plan couleur unique

Utilise une couleur de fond solide pour le popup.

Vous pouvez :

• Choisir une couleur visuellement
• Ou collez manuellement un code couleur HEX

Historique

Crée un effet dégradé bicolore.

Lorsque activé, des paramètres supplémentaires apparaissent :

• Degré d'angle de graduation
• Couleur du dégradé initial
• Couleur du dégradé final

ℹ️ Les contrôles de Gradient ne deviennent actifs qu'après avoir activé Gradient Background.

🌫️ Contexte général

Contrôle la superposition de devant de magasin montrée derrière le popup. La superposition aide le client à se concentrer sur le popup en le séparant visuellement du reste du contenu en vitrine.

Par exemple, lorsqu'un popup s'ouvre, le reste de la vitrine peut apparaître diminué avec une superposition sombre transparente pour attirer l'attention vers le popup.

Options disponibles

• Aucun historique — popup apparaît sans superposition ombrée
• Contexte général — ajoute une superposition semi-transparente derrière le popup

📐 Mise en page et frontière popup

Ces paramètres contrôlent la structure et la forme du popup global. Régler l'espacement, les bordures et le calibrage permet au popup de se sentir plus propre, plus équilibré et visuellement poli.

📏 Taille du popup

Contrôle les dimensions générales du popup.

Options disponibles

• Petites
• Moyenne
• Grandes
• Page complète

Les tailles popup plus grandes offrent plus d'espace pour les images, les produits et le contenu supplémentaire.

🎨 Couleur de fond de la fenêtre popup

Définit la couleur de fond du conteneur popup lui-même.

Vous pouvez :

• Utilisez le sélectionneur de couleurs
• Ou saisissez manuellement un code couleur HEX

🟦 Rayon d'angle

Contrôle comment arrondis les coins popup apparaissent.

Exemples

• Valeurs inférieures → coins plus nets
• Valeurs supérieures → coins arrondis plus doux

🧱 Taille de la bordure

Contrôle l'épaisseur de la bordure popup.

La valeur est mesurée en pixels.

🎨 Couleur de la bordure

Définit la couleur de la bordure popup.

✨ Animation popup

Contrôle comment le popup entre dans l'écran. Les animations d'entrée aident le popup à se sentir plus doux et plus interactif tout en le rendant plus visible pour les visiteurs.

Options disponibles

• Fade
• Diapositive
• Bounce

Les animations aident à rendre le popup plus doux et plus interactif.

🔘 Bouton flottant

ℹ️ Cette section n'apparaît que lorsque Bouton d'action flottant est activé dans le Contenu onglet.

Les paramètres du bouton flottant vous permettent de personnaliser l'apparence du bouton que les visiteurs cliquez pour ouvrir votre popup. Ces options vous aident à assortir le bouton avec la marque de votre magasin tout en le gardant visible et facile à interagir avec.

Paramètres disponibles

🔷 Forme

Choisissez la forme générale du bouton flottant.

Options disponibles

• arrondi
• Carré
• Pill
• Cercle

🎨 Couleur du bouton

Contrôle la couleur de l'icône ou du texte affiché sur le bouton flottant.

Vous pouvez :

• Choisissez une couleur en utilisant le sélectionneur de couleurs
• Saisissez un code couleur HEX manuellement

🖌️ Taille de la police

Contrôle la taille de l'icône ou du texte affiché à l'intérieur du bouton flottant.

La valeur est mesurée en pixels.

🟫 Couleur de fond

Définit la couleur de fond du bouton flottant.

Vous pouvez :

• Choisissez une couleur en utilisant le sélectionneur de couleurs
• Saisissez un code couleur HEX manuellement

🌑 Ombre

Ajoute un effet d'ombre optionnel autour du bouton flottant.

Options disponibles

• Aucune
• Petites
• Moyenne
• Grandes

🧱 Couleur de la bordure

Contrôle la couleur de la bordure du bouton flottant.

📐 Rayon d'angle

Contrôle la façon dont les coins arrondis du bouton flottant apparaissent.

Des valeurs plus élevées créent une apparence plus douce et plus arrondie.

🔤 Typographie

Les paramètres de la typographie contrôlent comment tous les éléments de texte apparaissent dans le popup. Ces paramètres aident à maintenir la cohérence visuelle entre les rubriques, les descriptions, les boutons et les messages de validation afin que le popup se sente professionnellement conçu et plus facile à lire.

L'application prend en charge les polices intégrées ainsi que les polices thématiques.

🏷️ Titre Typographie

Contrôle le style du titre popup.

Paramètres disponibles

• Police du titre
• Taille du titre
• Couleur du titre

📝 Description Typographie

Contrôle le style de description popup.

Paramètres disponibles

• Police de description
• Désignation Taille
• Description Couleur

⚠️ Message d'erreur Typographie

Contrôle les messages d'erreur de validation affichés pour les deux :

• Champs de courriel
• Champs du numéro de téléphone

Paramètres disponibles

• Police d'erreur
• Taille du message d'erreur
• Couleur du message d'erreur

📝 Styling du champ d'entrée

Cette section contrôle l'apparence des champs d'entrée du courriel et du numéro de téléphone. Un style d'entrée approprié améliore la lisibilité et aide les formes à se sentir plus fiables et visuellement alignées avec votre marque de magasin.

Paramètres disponibles

• Couleur du texte d'entrée
• Couleur de fond d'entrée
• Couleur de la bordure d'entrée

Ces paramètres aident vos champs de formulaire à correspondre à votre marque en vitrine.

🔘 Styling de bouton

Contrôle la conception du bouton pop-up call-to-action. Comme le bouton est habituellement l'élément de conversion principal à l'intérieur du popup, le style approprié peut améliorer significativement les taux de clic et d'engagement.

🔤 Police du bouton

Choisissez la famille de polices utilisée à l'intérieur du bouton.

Vous pouvez utiliser:

• Polices thématiques
• Polices intégrées

🎨 Couleur du bouton

Contrôle la couleur de fond du bouton.

🔠 Taille et couleur du texte du bouton

Ce réglage contrôle :

• Taille du texte (champ gauche)
• Sélection de couleur de texte (champ intermédiaire)
• Valeur de couleur HEX (champ droit)

Exemple

• Grand texte blanc sur le bouton sombre
• Petit texte noir sur le bouton lumineux

Rayon d'angle

Contrôle la façon dont les coins des boutons apparaissent.

Des valeurs plus élevées créent des boutons plus doux.

🎟️ Coupon Styling

ℹ️ Cette section n'apparaît que lorsque l'affichage des coupons est activé dans l'onglet Contenu.

Cette section contrôle l'apparence du conteneur de code coupon. Une section de coupon à style visuel fait ressortir les réductions plus clairement et encourage les visiteurs à copier et à utiliser l'offre pendant la caisse.

🧾 Style de bordure de coupon

Choisissez le style de bordure entourant la zone de coupon.

Exemples disponibles

• Solide
• Déchiqueté

🎨 Couleur de la bordure

Contrôle la couleur de la bordure du coupon.

🔤 Couleur du texte

Contrôle la couleur du texte affichée dans la section coupon.

🖼️ Couleur de fond

Contrôle la couleur de fond du contenant de coupon.

❎ Fermer Icon Styling

Contrôle l'apparence de l'icône popup close. Même s'il s'agit d'un petit élément, l'adaptation du style d'icône à la conception popup globale permet de maintenir une expérience utilisateur plus propre et plus polie.

Paramètres disponibles

• Fermer la couleur de l'icône
• Taille de l'icône

Options de taille disponibles

• Petites
• Moyenne
• Grandes

Déroulement du compte à rebours

ℹ️ Cette section n'apparaît que pour Countdown PopUps.

Contrôle l'apparence visuelle du compte à rebours. Le bon style de minuterie aide à créer l'urgence tout en assurant que le compte à rebours reste lisible et visuellement compatible avec le reste du design popup.

Paramètres disponibles

• Style de minuterie
• Police du minuteur
• Taille de la minuterie
• Couleur de la minuterie
• Couleur de fond du minuteur
• Police d'étiquette
• Taille de l'étiquette
• Couleur de l'étiquette

Ces paramètres aident à créer l'urgence tout en gardant la minuterie visuellement alignée avec votre vitrine.

🎡 Roue de rotation — Slice Styling

ℹ️ Cette section n'apparaît que pour Spin Wheel PopUps.

Cette section contrôle le style visuel des tranches de roue tournante et des composants de roue. Régler soigneusement ces réglages peut rendre la roue plus vibrante, ludique et attirant l'attention des visiteurs.

🎨 Couleurs des tranches

Commandes alternant les couleurs de fond.

Paramètres disponibles

• Couper 1 couleur
• Coupe 2 Couleur

Ces couleurs alternent dans toute la roue.

🔤 Étiquette de coupe

Contrôle le style de texte indiqué sur chaque tranche de roue.

Paramètres disponibles

• Couleur de l'étiquette de tranche
• Taille de l'étiquette
• Police d'étiquette de tranche

💬 Slice Message Styling

Contrôle le style de la récompense de tranche ou des messages gagnants.

Paramètres disponibles

• Police du message de tranche
• Taille du message
• Couper la couleur du message

🎯 Couleurs des composants de roue

Contrôle les autres éléments de conception de la roue.

Paramètres disponibles

• Couleur de la bordure de roue
• Couleur de la flèche
• Couleur du cercle central

💻 CSS personnalisé

💡 Les utilisateurs avancés peuvent appliquer leur propre style CSS personnalisé directement dans l'éditeur popup.

Cela vous permet de personnaliser des éléments au-delà des contrôles de conception standard. Il est particulièrement utile pour les marchands qui veulent un style avancé, des ajustements spécifiques au mobile, ou une personnalisation visuelle plus profonde.

🧩 Sélecteurs communs

L'éditeur fournit des sélecteurs ready-made tels que:

• .futureblink-popup
• .futureblink-popup .title
• .futureblink-popup .description
• .futureblink-popup .cta-button
• .futureblink-popup .close-btn

✅ Application de CSS

Après avoir ajouté votre CSS :

→ Cliquez sur Appliquer pour tester les styles immédiatement.

ℹ️ Si les styles ne s'appliquent pas correctement, ajouter !important à chaque déclaration est recommandée.

Exemple

.futureblink-popup .title {
couleur: #000 !important;
}

🚀 Résultat final

Une fois configuré avec succès :

✅ Votre popup correspond à votre identité de marque
✅ Typographie, boutons et entrées se sentent visuellement cohérents
✅ Les sections de coupon et les minuteries semblent polis
✅ Spin wheel popups devenir plus visuellement attrayant
✅ Animations et superpositions améliorent la concentration client
✅ CSS personnalisé donne aux utilisateurs avancés un contrôle plus profond
✅ Les clients ont une conception popup plus propre et plus professionnelle 🎨

Mis à jour le : 10/09/2026