Paramètres de bande

Overlay

L’apparence peut légèrement différer de la version réelle.

Point clé : définit un calque de couleur par-dessus l’arrière-plan. Utile pour ajuster la lisibilité sur une photo ou une vidéo.

Impact : atténue les écarts de luminosité du sujet et facilite la lecture du texte.

Conseil : commencez par une couleur unie en ajustant l’opacité, puis passez au dégradé si nécessaire.

Paramètres

• Color / Gradient : couleur unie ou dégradé pour ajuster l’expression de l’arrière-plan.
• Opacity : opacité pour ajuster l’apparence globale.
• Mix Blend Mode : mode de fusion pour ajuster la superposition avec l’arrière-plan.
• Responsif : active les réglages individuels par appareil pour éviter les problèmes d’affichage.

Pattern

L’apparence peut légèrement différer de la version réelle.

Point clé : définit le type et l’intensité du motif d’arrière-plan. Ajoute de la texture sans surcharger.

Impact : ajoute de l’expression ; un motif est plus riche qu’un aplat uni.

Conseil : le texte reste le sujet principal ; réduisez le contraste du motif pour un résultat stable.

Paramètres

• Pattern Type : type de motif pour définir la texture de l’arrière-plan.
• Pattern Color : couleur du motif pour ajuster le contraste avec l’arrière-plan.
• Pattern Size : taille du motif pour ajuster la densité.
• Pattern Opacity : opacité du motif pour ajuster l’intensité.
• Blend Mode : mode de fusion pour optimiser la superposition avec le fond et le texte.
• Responsif : active les réglages individuels par appareil.

Image

L’apparence peut légèrement différer de la version réelle.

Point clé : définit le mode d’affichage de l’image ou de la vidéo. Le cadrage, la position et la répétition modifient fortement le rendu.

Impact : une même image peut donner un résultat très différent selon les réglages.

Conseil : commencez par le Fit, puis ajustez la position, et terminez par l’opacité et l’overlay pour la lisibilité.

Paramètres

• Type de média (Image / Vidéo) : choisit le type de média utilisé en arrière-plan.
• Image : Répéter, Méthode d'ajustement, Rotation (degrés), Opacité : ajuste l’affichage de l’image de fond du band et contrôle l’intensité décorative.
• Responsif : active les réglages individuels par appareil.

Fonction PRO (vidéo) : les réglages vidéo du band sont disponibles dans la version payante (ZenBlocks PRO). L’URL vidéo et les options de position nécessitent la version PRO.

Color

L’apparence peut légèrement différer de la version réelle.

Point clé : définit la couleur de base. C’est le fondement de la structure en couches.

Impact : le rendu final dépend de la combinaison avec l’overlay et la couleur du texte.

Conseil : privilégiez une couleur lisible en combinaison texte/fond plutôt qu’une couleur tape-à-l’œil isolée.

Paramètres

• Base Couleur : couleur de base de l’élément.
• Opacity : opacité pour ajuster l’apparence globale.
• Blend Mode : mode de fusion pour optimiser la superposition.
• Responsif : active les réglages individuels par appareil.

Transition de couleur au survol : la transition de couleur du band utilise un fondu croisé interne (deux calques superposés pour les états normal et survol, basculés par opacité). Ce mécanisme permet une transition fluide même entre un aplat et un dégradé (ou inversement).

Size

L’apparence peut légèrement différer de la version réelle.

Point clé : définit la largeur et la hauteur de l’élément. Optimise le rendu par appareil.

Impact : à contenu identique, la taille modifie la lisibilité et l’impression.

Conseil : vérifiez d’abord sur PC puis contrôlez sur mobile pour éviter les retours à la ligne ou les manques d’espace.

Paramètres

• Width : largeur de l’élément.
• Height : hauteur de l’élément.
• Responsif : active les réglages individuels par appareil.

Border

L’apparence peut légèrement différer de la version réelle.

Point clé : définit la couleur, l’épaisseur et le type de bordure. Rend le contour visible pour identifier l’élément.

Impact : même sur un fond clair, la bordure délimite clairement la zone.

Conseil : commencez autour de 1 px ; une bordure trop épaisse affaiblit la lisibilité du texte.

Paramètres

• Bordure (ON/OFF) : active ou désactive la bordure.
• Color : couleur de la bordure.
• Width : épaisseur de la bordure.
• Style : type de ligne (continue, pointillée, etc.).
• Responsif : active les réglages individuels par appareil.

Border Radius

L’apparence peut légèrement différer de la version réelle.

Point clé : définit l’arrondi des coins. Ajuste le ton de la marque au niveau de l’impression.

Impact : le rendu varie selon le ratio entre l’arrondi et la taille du bouton.

Conseil : visez environ 20 à 35 % de la hauteur pour un équilibre entre douceur et netteté.

Paramètres

• Border Radius : rayon d’arrondi des coins.
• Responsif : active les réglages individuels par appareil.

Position

L’apparence peut légèrement différer de la version réelle.

Point clé : définit la position de l’élément. Contrôle la superposition et la distance avec les éléments adjacents.

Impact : la position peut provoquer des décalages de mise en page ; son champ d’impact est large.

Conseil : commencez par un positionnement relatif, et ne passez à l’absolu que pour les cas nécessaires.

Paramètres

• Horizontal (Left / Center / Right) : position horizontale.
• Vertical (Top / Center / Bottom) : position verticale.
• Responsif : active les réglages individuels par appareil.

Opacity

L’apparence peut légèrement différer de la version réelle.

Point clé : définit l’opacité globale et le mode de fusion. Ajuste le design de la superposition avec l’arrière-plan.

Impact : à couleur identique, l’opacité et le mode de fusion modifient fortement l’impression.

Conseil : si la lisibilité baisse, corrigez d’abord le contraste texte/fond avant d’ajuster l’opacité.

Paramètres

• Opacity : opacité globale de l’élément.
• Mix Blend Mode : mode de fusion avec l’arrière-plan.
• Responsif : active les réglages individuels par appareil.

Transform

L’apparence peut légèrement différer de la version réelle.

Point clé : définit la rotation et l’inclinaison. Utile comme accent visuel ou pour guider le regard.

Impact : même une déformation légère a un fort impact visuel ; un excès nuit à la lisibilité.

Conseil : partez de 0 degré et ajustez par petits incréments ; évitez les déformations prononcées en production.

Paramètres

• Skew X : inclinaison sur l’axe X.
• Skew Y : inclinaison sur l’axe Y.
• Responsif : active les réglages individuels par appareil.

Sortie en CSS transform: skew(). Les réglages de transform au survol sont également disponibles individuellement. Plus l’angle est prononcé, plus l’élément risque de dépasser le bouton ; vérifiez l’état de overflow: hidden en parallèle.

Transition

L’apparence peut légèrement différer de la version réelle.

Point clé : définit la vitesse de changement entre l’état normal et l’état au survol. Détermine la fluidité de l’interaction.

Impact : trop rapide, le changement passe inaperçu ; trop lent, la réaction paraît lente.

Conseil : partez d’une Duration de 200 à 350 ms, puis ajoutez délai et easing personnalisé uniquement là où nécessaire.

Paramètres

• Duration (ms) : durée de la transition.
• Delay (ms) : délai avant le début de la transition.
• Easing : courbe de vitesse de la transition.
• Custom Value : valeur d’easing personnalisée (format CSS cubic-bezier).
• Reset : réinitialise les paramètres à leurs valeurs par défaut.

La transition du band s’applique aux changements d’état au survol de l’overlay, du pattern, de l’image, de la couleur, de l’opacité et du transform. Elle fonctionne indépendamment de la transition du bouton principal.

Différence avec l’arrière-plan et la vignette : le band est le plus complet des trois calques visuels (arrière-plan, vignette, band). Le Transform (Skew) est exclusif au band. Le Pattern est disponible pour l’arrière-plan et le band, mais pas pour la vignette. L’arrière-plan ne dispose pas de réglages de taille, bordure, rayon, position ni transform ; si vous avez besoin d’un calque décoratif avec un contrôle individuel de la position et de la forme, utilisez le band ou la vignette.