In this tutorial, we’ll add a background slideshow to a hero section and an inner section column.
You’ll learn how to:
✔︎ Add a background slideshow
✔︎ Synchronize multiple slideshows on the same page
✔︎ Play videos on mobile devices
hi oh it’s live from elemental today
I’ll show you how to use elementals
background slideshow feature which
allows you to set a slideshow as the
background for sections columns and
intersections this way you can build
more complex layouts like the one you
see here while still preserving cool
transition effects so let’s dive in and
see how it’s done
first off let’s have a look at the
layout I’ve created a section that takes
up the entire screens height and have
applied a background slideshow to it the
section has two columns with an inner
section in the column on the right this
inner section also has two columns with
another slideshow set as the background
in the left one as you can see both
slideshows fade together giving it this
cool transition effect there’s a video
playing in the background as well but
I’ll get to that soon first let’s start
creating in our hero section go to the
style tab and select slideshow as the
background type add your images to
create a new gallery you can reorder
them individually or reverse the order
like Sir then simply insert it cool now
let’s check out the presentation
settings here we can set the background
slide show to infinitely loop next we
can set the slider ration which is in
milliseconds 4,000 means it takes four
seconds for the images to change it’s a
bit long so I’ll go ahead and set it to
a thousand now the images change every
second here we can set the slide
transition to fade slide right or left
as well as down or up I’ll go ahead and
set it to fade we can control the
transition duration as well which also
is in milliseconds mm for example sets
the fade transition to take two seconds
before seeing the following image here
we can set the Ken Burns effect
switching it to yes gives us the option
to set the zoom direction let’s check it
out
great this is the exact effect I was
looking for the cool thing about
elementals background slideshow feature
is that you can use it in sections
columns and inner sections as you can
see over here I’ve added an intersection
with two columns in the left column
go to style and change the background
tab to slideshow select your images
create the gallery and insert it piece
of cake
go ahead and play around with the
presentation settings I’ve made sure to
set the slide and transition duration to
the same as the hero section giving it
this cool synchronized background
slideshow fade effect by the way talking
about backgrounds in addition to youtube
we’ve added Vimeo as a source for
background videos as well so you can
enjoy the benefits of your Vimeo account
in the sections background settings
simply paste your Vimeo link let’s check
it out
cool one last thing you can also set
video backgrounds to play on mobile
Elementor won’t play them by default but
you can easily set it by turning on the
play on mobile switch over here cool
well that’s it now you know how to use
elementals background slideshow feature
as well as add the cool stuff to enhance
your website backgrounds and really make
them stand out have fun playing around
and don’t forget to subscribe to our
YouTube channel for more tips and
tutorials ciao for now
