Banners
Image with badges
The Image with badges block allows you to display an image along with customizable badges. The badges can be used to highlight key information, such as promotional tags, offers, or product features.
⚙️ Block settings
Image
Upload the image that you want to display in the block.
Image ratio
Choose the aspect ratio of the image on desktop and mobile view separately.
Rounded image
Enable to make the image corners rounded.
Border
Choose whether to apply borders around the image.
🏷️ Badge settings
This block includes multiple badges that can be added to the image.
Shape
Choose the shape of the badge. Options include:
None
Petal star
Multi-point star
Circle
Scalloped circle
Custom: Upload a custom image to use as the badge shape.
Background color
Choose a background color for the badge.
Rotate
Set the rotation angle of the badge for a tilted effect.
Width
Set the width of the badge. Adjust this depending on how prominent you want the badge to be.
Offset (Left)
Adjust the badge’s left position relative to the image.
Offset (Top)
Adjust the badge’s top position relative to the image.
Text
Set the text for the badge. This can be a tag, a price, a label like "New", or any other text you want to feature.
Text preset
Choose the font style for the text in the badge. Learn more: Text presets
💡 Best practices
Use 1:1 (square) for logos or any content where equal height and width are needed. The 16:9 (landscape) ratio is ideal for promotional banners or hero images.
Badges can be used to highlight limited-time offers, product features, or special tags. Make sure the text is short and impactful.
Adjust the offset to ensure badges don’t overlap with the key visual elements of the image. Try to position badges near the corners or areas that are less busy.
Marquee
The Marquee block is a dynamic feature that allows you to create a scrolling or moving content effect across your webpage. It’s perfect for highlighting important messages, announcements, or product features in an attention-grabbing way.
The Marquee block is a private block, meaning it is restricted to certain sections.
⚙️ Block settings
Direction
Set the direction of the marquee. Choose between:
Forward
Reverse
Speed
Adjust the scrolling speed of the marquee.
Rotate (Angle)
Set the rotation angle of the marquee content (from -5° to 5°). This adds a slight tilt to the marquee items.
Pause on hover
Enable this setting to make the marquee content stop scrolling when the user hovers over it.
Show edge fade
Enable this setting to add a fading effect at the edges of the marquee content.
Enable parallax
Enable this setting to apply a parallax effect to the marquee content.
💡 Best practices
Since the marquee moves continuously, keep the text short so it doesn’t overwhelm the user. A short call to action, like "Hurry, limited time offer!" or "Check out our latest collection!" works best.
Enabling Parallax adds depth, but overuse can make the effect too distracting. Similarly, use Pause on Hover when you want to keep the content static for better visibility on hover.
Last updated