Peut differer legerement de l interface reelle.
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.
L’overlay de la vignette ne s’applique qu’à l’image de la vignette (indépendant de l’overlay de l’arrière-plan du bouton). Les réglages au survol sont également disponibles individuellement.
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é.
- Image : sélection d’image,
Répéter,Méthode d'ajustement,Rotation (degrés),Opacité: ajuste l’affichage de l’image de la vignette et met en valeur le sujet principal. - Responsif : active les réglages individuels par appareil.
Fonction PRO (vidéo) : les réglages vidéo de la vignette 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.
Limitation de la transition de couleur au survol : la couleur de la vignette utilise directement la propriété CSS background pour la transition. Par conséquent, le passage d’un aplat à un dégradé (ou inversement) entre l’état normal et le survol ne produit pas de transition fluide : le changement est instantané. Cela est dû au fait que background-color (aplat) et background-image: linear-gradient() (dégradé) sont des propriétés CSS distinctes que le navigateur ne peut pas animer entre elles. Pour une transition fluide, utilisez des combinaisons identiques (aplat/aplat ou dégradé/dégradé) pour les deux états.
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.
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 de la vignette s’applique aux changements d’état au survol de l’overlay, de l’image, de la couleur, de la bordure, du rayon et de l’opacité. Elle fonctionne indépendamment des transitions du bouton principal et de l’icône.
Différence avec l’arrière-plan et le band : la vignette ne dispose pas de réglages de Pattern ni de Transform (Skew). Si vous avez besoin d’un calque décoratif avec motif, utilisez le band. En revanche, la vignette dispose de réglages de taille, bordure, rayon, position et opacité, qui ne sont pas disponibles pour l’arrière-plan.