The Card Flip widget allows you to overlay text on images with an interactive flip animation, revealing additional content on hover. This engaging effect is perfect for showcasing products, features, or extra information in a visually appealing way.
Key Features
Interactive Flip Effect
Hovering over a card flips it, displaying content on the back.
Customizable Front & Back
Each side can include titles, descriptions, images, videos, colors, gradients, or patterns.
Multiple Style Options
Adjust card shape, corner radius, backgrounds, and overlays to improve readability.
Content Styling
Control fonts, colors, sizes, and icons for both front and back content.
Optional Links
Add clickable links to cards for extra functionality.
Platform Integration
Use with staggered effects and loading animations for enhanced presentation.
Efficient Setup
Create one card, clone it for consistency, then customize each individually as needed.
How to Use
Access the Widget
In your Back Office, click the Widget icon → Card Flip.
Add Content
Enter the title, description, and optional link.
Customize Appearance
Adjust the front and back backgrounds with color, gradient, image, video, or pattern.
Modify corner radius and content fonts, colors, and icons.
Insert & Clone
Insert the widget onto your page.
Clone cards to maintain consistent styling, then personalize each card as needed.
Save and Preview
Save your changes and preview the flip animation live on your page.
The Card Flip widget is a dynamic way to add interactive, animated content sections to your website, boosting engagement and visual appeal.
Watch the Video Demo:
Video Transcript:
The Card Flip widget is a great tool that will allow you to add animation and interaction to your website.
This is where you place your mouse over the item and it flips to reveal more information.
This can also be used in conjunction with other features of the platform, such as a staggered effect and loading animations.
As you can see, there are lots of different options that you can set up.
The cards are made-up of two main parts, the front, which is the title and the back which reveals the content.
Each of these are independent and can be set up differently.
To set this up, please go into your back office and click on the widget icon.
Locate the card, flip and add a title.
There are a few little arrows that you can choose from, and you can adjust their styles.
You can add an optional link at this point.
Once you're done adding your content, you can move on to the next tab.
Here we can select the shape of your card.
As I mentioned, there is a front and the back to your card.
To edit the front part, expand the front accordion.
Here you can choose whether the background is a colour, gradient, image, video or pattern.
If you choose colour, this will give you the colours in your colour palette.
Same for the gradient.
You have your colour palette and the option to choose the direction of your gradient and the type of gradient it is.
If you choose an image or a video, it will prompt you to browse to your image or video and allow you to add an overlay over the top.
This may be necessary to allow for the title to be easily read.
You can choose the colour and adjust the opacity.
In this case I'm going to have a simple colour to set up the back, just expand the back accordion.
Once again you have the same options.
In this case I'm going to choose an image.
OK, at this point you can add a corner radius if needed.
This is to round off the edges of your pop up.
To edit the actual style of the content, click on the content tab.
This will allow you to change all the fonts of the title and the description.
You can change the colours and sizes here.
Same for the icon, you can choose to have a different colour if you wish.
Once you're done, hit Insert widget.
At this point I would recommend that you finalise all the settings that you need for your card flip.
It is much easier to set up one first and then clone this item as many times as you need it.
This ensures that all the settings are uniform.
You can then go back and edit the colours or pictures or wording that you need.
Let's hit save and have a look.
There we go.
Comments
0 comments
Please sign in to leave a comment.