Similar to carousels, 'card sliders' are a great way to showcase images and copy together on an 'information card'. Complete with a CTA (call to action) button you can get creative with displaying services, product categories, or even recipes like we've demonstrated in the preview below... Delicious.
👍🏽 Adding a card slider
From the top menu bar, click on the Add Menu (
Shortcut: M)Search for and select 'Card Slider'
Click and drag the element onto your canvas
Uploading an Image
Double-click the Cardslider
In the Icon field, click the pen
Select Add image or choose an image from one of our free stock images libraries
Adding a New Card
Double-click the Card Slider
Click the + button at the bottom of the pop-up
Navigate through the cards to customize the text and images.
🎨 Styling a card slider
Background:
IM: Change the Image Banner background
TE: Change the Text Container background
Link: Change the link background
Text:
Title: Style the title
Subtitle: Style the subtitle
Body: Style the body text
Link: Style the bottom link
BO: Style the bottom link on hover
Navigation Arrows: Change the arrow's color (If enabled)
Margin: Add margin to the body and link
Padding: Add padding to both the text container and link
Border: Set a border color, opacity, and line weight for the card, link, and bottom link
Border Radius: Curve the radius of the border of the card and link
Effects: Add different types of shadows or blur effects to the card and link. Learn more about effects
Transform: Change the image banner height
Icons:
Set custom shape: Replace the default icon with a shape or a custom SVG.
Set custom image: Replace the default icon with an image.
⚙️ Configuration options
Once you've added the Card slider to your canvas, there are a variety of configuration options, including titles, sub-titles and CTA actions.
To start, double-click the Card slider to open the configuration options.
Parameter | Description |
Image | Image for the card item |
Custom image size | Sets the height of the image to a custom value. Width is automatically scaled to maintain the image aspect ratio. |
Title | The top-most text in the text group. |
Sub-title | The second line of text in the text group. |
Body | The third text element in the text group. |
Link label | The UI text for the link button. |
Link | The destination where the user will be directed upon clicking the link. |
Horizontal image alignment | The left-to-right alignment of the image. |
Hide arrows | Show or hide the left/right arrows which can be used for navigating through the card slider. |