Band Settings

Overlay

May differ slightly from the actual interface.

Key Point:
Set a color layer that overlays background elements. Useful for improving readability over photos or videos.

What this changes:
Evens out the brightness contrast of the subject, making text easier to read.

Adjustment tips:
Start with a solid color and set the density first. Only switch to a gradient when needed to avoid visual inconsistencies.

Settings

• Color / Gradient: Set a solid color or gradient to adjust the background appearance.
• Opacity: Set the opacity to control the overall visibility of the element.
• Mix Blend Mode: Set the blend mode to adjust how the layer interacts with the background.
• Responsive: Enable per-device settings to prevent layout issues across breakpoints.

Pattern

May differ slightly from the actual interface.

Key Point:
Set the type and intensity of the background pattern. Add visual texture without overwhelming the content.

What this changes:
Adds a textured feel, giving the surface more character than a flat solid color.

Adjustment tips:
Since the text is the main focus, keep the pattern contrast subtle for consistent results in production.

Settings

• Pattern Type: Select the pattern type to define the background texture.
• Pattern Color: Set the pattern color to adjust the contrast against the background.
• Pattern Size: Set the pattern size to control the visual density.
• Pattern Opacity: Set the pattern opacity to control how prominent the decoration appears.
• Blend Mode: Select the blend mode to optimize how the background and text interact.
• Responsive: Enable per-device settings to prevent layout issues across breakpoints.

Image

May differ slightly from the actual interface.

Key Point:
Configure how images or videos are displayed. Fit, position, and repeat settings significantly affect the appearance.

What this changes:
The same asset can have dramatically different visual impact depending on these settings.

Adjustment tips:
First choose the Fit method, then adjust the position, and finally fine-tune readability with Opacity and Overlay settings — in that order.

Settings

• Media type (Image / Video): Select the type of media to use as the background.
• Image: Repeat, Fit Method, Rotation (deg), Opacity: Adjust the band background image display to control the decorative intensity.
• Responsive: Enable per-device settings to prevent layout issues across breakpoints.

Color

May differ slightly from the actual interface.

Key Point:
Set the base color. This is the foundation color of the layer structure.

What this changes:
The final impression is determined by the relationship between overlay, text color, and this base color.

Adjustment tips:
Prioritize colors that maintain readability when combined with text and background, rather than colors that look striking on their own.

Settings

• Base Color: Set the base color to define the foundation of the element.
• Opacity: Set the opacity to control the overall visibility of the element.
• Blend Mode: Select the blend mode to optimize how the background and text interact.
• Responsive: Enable per-device settings to prevent layout issues across breakpoints.

Hover color Transition:
The band color hover Transition is internally implemented using a cross-fade approach (normal and hover states are layered separately and switched via opacity). This means that switching between normal = solid color and hover = gradient (or vice versa) will still produce a smooth Transition.

Size

May differ slightly from the actual interface.

Key Point:
Set the display size including Width and Height. Use this to optimize the appearance per device.

What this changes:
Even with the same content, size settings affect visibility and visual impression.

Adjustment tips:
After finalizing on PC, check SP individually and verify there are no text wrapping or spacing issues.

Settings

• Width: Set the width to adjust the display area.
• Height: Set the height to adjust the element's density and visibility.
• Responsive: Enable per-device settings to prevent layout issues across breakpoints.

Border

May differ slightly from the actual interface.

Key Point:
Set the border color, thickness, and style. This defines the element's outline and helps users recognize it as a clickable element.

What this changes:
Even with a light background, a border makes the boundary clearly visible.

Adjustment tips:
Overly thick borders reduce the prominence of the text, so start with around 1px and adjust from there.

Settings

• Border (ON/OFF): Toggle the border on or off to control whether the outline is emphasized.
• Color: Set the color to adjust element visibility and design consistency.
• Width: Set the border width to control the line thickness.
• Style: Select the style to adjust the appearance of lines and decoration.
• Responsive: Enable per-device settings to prevent layout issues across breakpoints.

Border Radius

May differ slightly from the actual interface.

Key Point:
Set the corner roundness of the element. Adjust your brand tone (formal or soft) at the impression level.

What this changes:
The perceived roundness depends on the ratio between the Border Radius value and the element size.

Adjustment tips:
Aim for roughly 20-35% of the element height as a starting point for a balanced look that is neither too round nor too sharp.

Settings

• Border Radius: Set the corner radius to shape the element's impression.
• Responsive: Enable per-device settings to prevent layout issues across breakpoints.

Position

May differ slightly from the actual interface.

Key Point:
Set the element's placement position. Control overlap and distance relative to surrounding elements.

What this changes:
Position settings have a wide impact and can cause layout issues if used incorrectly.

Adjustment tips:
Start with relative positioning first, and use absolute positioning only where specifically needed for easier maintenance.

Settings

• Horizontal (Left / Center / Right): Set the horizontal placement to align the layout's center of gravity.
• Vertical (Top / Center / Bottom): Set the vertical placement to optimize the top-bottom balance.
• Responsive: Enable per-device settings to prevent layout issues across breakpoints.

Opacity

May differ slightly from the actual interface.

Key Point:
Set the overall opacity and blend mode of the element. Adjust how it visually interacts with the background.

What this changes:
Even the same color can produce vastly different impressions depending on Opacity and Blend Mode.

Adjustment tips:
If readability suffers, correct the text color and background contrast first, then adjust Opacity.

Settings

• Opacity: Set the opacity to control the overall visibility of the element.
• Mix Blend Mode: Set the blend mode to adjust how the element interacts with the background.
• Responsive: Enable per-device settings to prevent layout issues across breakpoints.

Transform

May differ slightly from the actual interface.

Key Point:
Set transformations such as rotation and skew. Use these for visual accents and guiding the user's eye.

What this changes:
Even small transformations create a significant impression shift, but excessive use harms readability.

Adjustment tips:
Start near 0 degrees and make small adjustments. Avoid strong transformations in production use.

Settings

• Skew X: Set the X-axis skew to add a decorative accent.
• Skew Y: Set the Y-axis skew to adjust the element's visual character.
• Responsive: Enable per-device settings to prevent layout issues across breakpoints.

This is output as CSS transform: skew(). Hover-state Transform can also be configured independently. Large skew angles may cause the band to extend beyond the button area, so check the overflow: hidden setting in combination.

Transition

May differ slightly from the actual interface.

Key Point:
Set the speed of change from the normal state to the hover state. This controls the "feel" of the interaction.

What this changes:
If too fast, the change goes unnoticed; if too slow, it feels sluggish.

Adjustment tips:
Start with a Duration of 200-350ms as a baseline, then add delay or custom Easing only where enhanced effects are needed.

Settings

• Duration (ms): Set the duration of the change to control the speed of the effect.
• Delay (ms): Set the delay to adjust the animation start timing.
• Easing: Set the speed curve to shape the feel of the motion.
• Custom Value: Specify a custom Easing value (CSS cubic-bezier format) for fine-tuned control over the change behavior.
• Reset: Reset this section's settings to their defaults.

The band Transition applies to hover changes across all band properties: Overlay, Pattern, Image, Color, Opacity, and Transform. It operates independently from the button body Transition.

Differences from Background and Thumbnail:
The band is the most feature-rich of the three visual layers (Background, Thumbnail, and Band). Transform (Skew) is only available in Band Settings. Pattern is available in both Background and Band, but not in Thumbnail. Because Background Settings lack Size, Border, Border Radius, Position, and Transform, use either the Band or Thumbnail for decorative layers that require individual position and shape control.

Related FAQ

• Band 裝飾帶的使用情境 – ZenBlocks buttonBasic