In this tutorial, I will show you how to create this trendy kind of Elementor carousel where there are little tags or labels here and there.
The tags are animating in sequentially, with a little bounce animation.
See the demo here:
To be clear, this is a Slides element carousel, with three slides. Each slide has an image. Here we created transparent PNG images. Here is one of them:
I was originally asked to create this by Dom Carver, an amazing designer and co-founder of Serene Agency, and I really liked the design, so I thought I'd share it in a tutorial.
Features:
- Polyvalent: Works with any amount of tags you want
- Responsive: I went through extra lengths in the CSS so that the little tags would always fit, no matter the viewport
- Customizable: Set any padding, color, font and font size that you want for the tags
- Requires editing HTML and CSS: Everything is well explained, but you will need to be familiar with editing basic HTML and CSS for this tutorial
- Slides element: Elementor Pro is required as we are modding the "Slides" element here
Let's get started!
First, import the template of your choice
This is a premium tutorial. Purchase access to unlock the full tutorial.
6 Responses
Is it possible to add pause button to it or make it stop on hover (For accessibility reasons)?
Greetings Menny!
Yes, if you go under Slides element > Content tab > Slider Options, you can choose there to pause on hover or interaction.
Cheers!
Thank you 🙂
I just purchased this template, but I cannot use any of my site.
If the JSON imported, then blank page displayed (no content), If cross-copy used, then error message: 'Make sure the both sire are updated to last version of Elementor'. (all my sites are up to date).
Please advise the solutions.
Ooh.. just found the solutions. Only works if Flexbox Container is active. You should highlight this requirement.
Sorry about this Levente!
I'm glad you managed. I updated my cross site copy paste tutorial to specifically mention that flexbox containers needs to be active.
Cheers!