Personnaliser le design d'un compte à rebours
Modifiez les couleurs, les polices, les arrière-plans, les bordures et les espacements pour que le compte à rebours s'accorde à votre boutique.
Un modèle vous donne une apparence de départ. L’onglet Design est l’endroit où vous la faites vôtre, ou la reconstruisez entièrement, puisque chaque élément est modifiable.
Les minuteurs et les dates de livraison estimées disposent d’un onglet Design complet. Les comptes à rebours de stock et de panier offrent moins d’options, qui se trouvent dans l’onglet Settings.
L’onglet Design, avec l’aperçu qui se met à jour au fil des modifications.
Changer de modèle
Section intitulée « Changer de modèle »Vous n’êtes pas bloqué avec le design choisi au départ. Ouvrez le sélecteur de modèles depuis le générateur et choisissez-en un autre ; les saisons sont réparties en onglets en haut : Default, New year, Valentine, Summer Sale, Moon Festival, Halloween, Black Friday, Christmas et Winter Sales.
Changer de modèle remplace le design. Votre texte, votre durée et vos conditions sont conservés.
Design d’un minuteur
Section intitulée « Design d’un minuteur »L’onglet Design d’un minuteur comporte quatre sections, plus le CSS personnalisé.
Design Main Section
Section intitulée « Design Main Section »Le conteneur extérieur du compte à rebours : le panneau qui contient tout le reste.
| Groupe | Contrôles |
|---|---|
| Background | Une couleur unie ou une image importée. Avec une couleur, vous disposez d’une Main background color avec des valeurs Left et Right distinctes : un aplat est la même couleur des deux côtés, et un dégradé en utilise deux |
| Overlay image | Assombrit une image d’arrière-plan importée pour que le texte reste lisible par-dessus |
| Text | La police de tout le compte à rebours. Activez Use custom font style pour choisir une famille de polices et une graisse |
| Padding | L’espace à l’intérieur du panneau, défini en Top / Right et Bottom / Left |
| Border | Taille, rayon et style de bordure (Solid, Dotted ou Dashed) ainsi que la couleur |
| Shadow | Yes ou No |
Element styling: Title et Subtitle
Section intitulée « Element styling: Title et Subtitle »Le Title et le Subtitle ont chacun leur propre police, taille de police, couleur et marges. C’est ici que vous faites dominer le titre et reculer le sous-titre, ou que vous les rapprochez.
Design Timer Section
Section intitulée « Design Timer Section »Les chiffres eux-mêmes.
| Groupe | Contrôles |
|---|---|
| Font | Timer font size pour les chiffres et Label font size pour les mots en dessous |
| Border | Taille et style de l’encadré autour de chaque unité |
| Color | Number color, Data text color pour les libellés, Background color pour l’encadré de chaque unité, Dot color pour les séparateurs et Border color |
| Padding | L’espace à l’intérieur de l’encadré de chaque unité |
Définir un arrière-plan et une bordure sur les unités donne un aspect encadré ; laisser les deux vides donne de simples chiffres sur le panneau.
Si vous avez activé le bouton, il dispose de sa propre bordure (rayon, taille, style), de ses couleurs (arrière-plan, texte, bordure) et de son padding.
Design Mobile Section
Section intitulée « Design Mobile Section »Des tailles de police distinctes pour les téléphones, décrites dans l’application ainsi : “Optimize countdown appearance and layout for mobile devices to ensure a smooth and responsive user experience.”
Vous pouvez définir des tailles propres au mobile pour le Title, le Subtitle, le Timer number et le Timer label, ainsi qu’un padding mobile.
Cette section mérite une minute sur chaque compte à rebours. Un titre bien lisible à 25 px sur ordinateur est généralement trop grand sur un téléphone, et quatre unités de minuteur à la taille ordinateur passent souvent à la ligne ou débordent.
Design d’une date de livraison estimée
Section intitulée « Design d’une date de livraison estimée »L’onglet Design d’une date de livraison est divisé selon ses deux parties :
- Design Main Widget : le message (polices, couleurs, taille, bordures, espacements).
- Design Process Widget : la barre Ordered → Dispatched → Delivered (icônes, couleurs et espacements).
Si votre mise en page est Message only ou Progress bar only, seule la moitié concernée compte.
Design d’un compte à rebours de stock et de panier
Section intitulée « Design d’un compte à rebours de stock et de panier »Ces deux types ont leurs contrôles de design dans l’onglet Settings.
Stock countdown propose Alignment, des couleurs distinctes pour le message, le curseur, le chiffre du stock et l’arrière-plan, ainsi qu’une Animation : None, Flash ou Pulse.
Cart countdown propose la position, les couleurs du message, du minuteur et de l’arrière-plan, les bordures et les polices.
CSS personnalisé
Section intitulée « CSS personnalisé »Chaque type se termine par une zone Custom CSS (Developer Zone) pour tout ce que les contrôles ne couvrent pas. Consultez CSS personnalisé.
Conseils pratiques
Section intitulée « Conseils pratiques »Inspirez-vous de votre thème. Un compte à rebours aux couleurs de votre marque semble faire partie de la boutique ; avec les valeurs par défaut du modèle, il paraît plaqué. La couleur d’accent de votre thème est généralement le bon arrière-plan.
Le contraste compte plus que la couleur. Les chiffres sont l’essentiel : assurez-vous qu’ils sont lisibles sur ce qui se trouve derrière, y compris dans le bas de la plage de tailles.
Vérifiez sur une vraie page. L’aperçu montre le compte à rebours seul, sur son propre arrière-plan. Votre page produit comporte un prix, un bouton et des images qui lui font concurrence.
Vérifiez sur un téléphone. Utilisez la Design Mobile Section plutôt que d’accepter ce que produisent les tailles ordinateur sur un petit écran.