In this tutorial we learn how to create a flashing images effect using the Image Carousel widget.
The tutorial will cover:
✔︎ Using the Image Carousel widget to create a flashing images effect
✔︎ Using fixed positioning
✔︎ And much more!
Hey there, it’s Ash from Elementor.
Today we’re going to let our imaginations run wild while with the ‘Image Carousel Widget’ by creating this stunning flashing image effect.
We’re creating a landing page for a new season collection for a fashion brand where this effect will look great.
So if you’re ready to get started, let’s begin.
As you can see we’ve already made a good start on this page design, but it’s now time to add in our ‘flashing images’ effect’.
We’ll start by adding in a new single column section…which we’ll set to full width…and then set the horizontal align to ‘start’.
To ensure this works as expected, we must ensure that the images being added into the image carousel, all have the same height and width.
Let’s now search for drop in the ‘Image Carousel Widget’.
With the content tab selected first of all let’s add in our first images which we’ve already uploaded to our media library. And now we’ll rearrange them. Once happy, select ‘Insert Gallery’.
We’ll set the width and height next.
And set ‘Slides to Show’ to ‘1’.
Navigation will be ‘None’.
And if we expand the ‘Additional Options’ next, we can set ‘Pause on Hover’ to ‘No’…’Pause on Interaction’ to ‘No’…’Autoplay Speed’ to 500 which equates to half a second…and finally, ’Effect’ we’ll set to ‘Fade’
Switch over the style tab next and apply a border radius.
Now switch to the advanced tab and expand ‘Positioning’. We’ll set this to ‘Fixed’ so that the carousel remains in the same position and then amend the horizontal orientation…and as well as the vertical.
Ok, this looks great and is a good start to creating our flashing image effect.
We’ll make good use of the duplication feature which will carry over all existing styles and configurations from our first ‘Image Carousel’.
Let’s remove these images…and then select our new images…just like before we can rearrange them and then insert the gallery.
We’ll tweak the image size.
And then in the advanced tab, we’ll amend the horizontal and vertical orientation like so.
Let’s now create our third ‘Flashing Image’.
For ease we’ll open up the navigator by typing CMD or CTRL + i and then duplicate our last image carousel from here.
Let’s reset the gallery…and then just like before, select our images…rearrange them…and insert.
In the advanced tab amend the positioning to your desired location.
Just two more carousels to complete now.
We’ll duplicate the first one again…reset the gallery…add our images…rearrange them…and insert.
Then amend the width…and the height.
And to finish this image carousel, we’ll head to positioning within the advanced tab, and change the horizontal orientation…and the vertical.
One last time now…duplicate our last carousel.
Reset the gallery…add in our images…rearrange them…and insert.
Set the width again…and the height.
Then adjust the horizontal… and vertical orientation.
If we minimise the widgets panel now and scroll down, you can see how the flashing images stay fixed.
It would be good to add some spacing to the top of our text however, so that visitors are able to absorb the imagery.
Select the text and switch over to the advanced tab.
Amend the z-index first to bring the text in front of everything else, then select the column inside the second section.
Open the advanced tab and unlink the padding values…change to percentage…and add 30% to the top.
Perfect!
Save and publish your changes and now let’s preview our design.
And there we have it, we’ve created a modern and stylish flashing images effect using the ‘Image Carousel Widget’.
Thank you watching.
Be sure to comment below with any questions, and don’t forget to like and subscribe for more amazing tips and tricks tutorials.
