Bring instant movement and depth to static content with Vev's 3D Image Carousel—your winning widget from our last hackathon. Simply add three or more cards to create the carousel effect, and place images, text, or CTA buttons for some dynamic page navigation.
Add the 3D Image Carousel to your project
From the top menu bar, click Add Menu (
Shortcut: M)Search and select 3D Image Carousel
Click and drag the element to your canvas
Configuration Options
Double-clicking the element on your canvas to open the configuration options. From here, you can:
define the gap between your cards (in px)
This is set to 40px for desktop and tablet, and 20px for mobile by default, but you'll want to adjust this depending on the number of cards you use.
add/edit images
add titles to your card
add subtitles/description of your card
enable/disable CTA button on your card
If enabled, you'll be able to select from a range of links (some settings may change depending on which link type you choose).
Link Type | Description | Configuration Options |
Page | Links to internal pages in your project | Go to page: a dropdown menu where you can select the page you want to link to.
Animation: a list of animations for transitioning between pages. |
Element | Links to a specific element or section in your project | Widget select: a dropdown menu where you can select the element you want to link to. Name widgets from the layers panel so that they show up. |
External | Links to an external URL | External URL: a field where you can enter any URL. Remember to add "https://" before the domain name.
Open in a new tab: toggle to open the URL in a new tab.
Add rel=nofollow: toggle to add the rel=''nofollow'' attribute to your link.
Add rel=sponsored: toggle to add the rel=''sponsored'' attribute to your link. |
Redirects the user to Gmail with the specified email address as the recipient | Email: a field where you can define a recipient email address.
Subject: a field where you can define the email's subject line. | |
Phone | Redirects the user to make a phone call | Phone: a field where you can enter a contact number. |
File | Allows the user to download a pre-loaded file | File to be downloaded: click to upload the file from your PC.
Target: choose the redirection's behavior (download, open in a new tab, or open in current tab).
Download filename: a field where you can enter the file's name. |
Lastly, add/edit text to your button
🎨 Styling options
Background:
TE: Change the background of the CTA button (if enabled)
OV: Change the overlay
Text:
TE: Text Content Title
Style the title of the card
TE: Text Content Description
Style the subtitle of the card
TE: Text Content Link Button
Style the text of the button
NA: Navigation Arrows
Change the size and color of the arrows
Padding: Add padding to the button (if enabled)
Border: Set a border style and line weight for the button
Border Radius:
CA: Carousel Cell Content
Curve the radius of the card border
TE: Text Content Link Button
Curve the radius of the button border (if enabled)
Effects: Add different types of shadows or blur effects to the button (learn more about effects).
Icons:
Set custom shape: Replace the default icon with a shape or custom SVG (refresh your canvas after adding custom SVG for your icons).
Note: Every style change will affect all cards.
Best practice
You can add as many cards as you want, but for the best experience on your mobile device, we recommend you add up to seven cards.