Banner Cards
The Banner Cards section displays multiple promotional cards in a grid or carousel. Each card can combine a banner image, text, heading, and a selected product…
2 phút đọc
Trong trang này
The Banner Cards section displays multiple promotional cards in a grid or carousel. Each card can combine a banner image, text, heading, and a selected product, making it useful for highlighting collections, products, or promotional content.
1. Layout
Control how many cards appear on each device.
Setting | Description |
|---|---|
Items per row (Desktop) | Number of cards displayed per row on desktop. |
Items per row (Tablet) | Number of cards displayed per row on tablet. |
Items per row (Mobile) | Number of cards displayed per row on mobile. |
Spacing between items | Controls the gap between cards. |
Width | Sets the overall section width. |
2. Carousel settings
When the cards can slide, use the carousel settings to control their behavior:
Loop: Continuously cycles through the cards.
Autoplay: Automatically moves between cards. Set to
0to disable autoplay.Pause on hover: Pauses autoplay when the customer hovers over the section.
Use navigation: Shows Previous/Next controls.
Enable Use pagination to show a pagination indicator for the carousel.
You can customize its style, rounded appearance, spacing between dots, and spacing between pagination and content.
Use Only show on mobile or Hide on mobile to control pagination visibility by device.
3. Banner Card Item
Add a Banner Card Item block for each card you want to display.
Setting | Description |
|---|---|
Banner Background Image | Sets the main image of the card. |
Image ratio | Controls the image/card ratio. Use Adapt to image to follow the uploaded image ratio. |
Select Product | Adds a product widget to the card. |
Display colors by block | Enables a separate color scheme for this card. |
Color scheme | Selects the card's color style. |
Card Border Radius | Controls the roundness of the card corners. |
Image Dark Overlay Opacity | Adds a dark overlay to improve text readability over the image. |
Inside each Banner Card Item, add content blocks such as Text and Heading to build the banner content.