In this 404 page series, we will be showing how to create beautiful 404 page templates. Elementor’s 404 Page Template lets you set up a beautiful 404 page in no time.
In this tutorial you will learn how to:
✓ Use Photoshop to slice your images.
✓ Create a cool design with the Media Carousel widget
✓ Set up a 404 page template with Elementor
hi Oh today I’ll teach you how to create
this awesome animated 404 page using the
elemental media carousel widget 404
error pages are an important part of
your website’s user experience in SCR in
order to avoid negative experiences and
keep visitors on your site they need to
know why a link that press doesn’t work
and the Googlebot needs to get the
correct 404 status code as well
therefore you should design the 404 page
with this in mind want to know how to
create it no problem it’s not as hard as
it might seem the main idea here is that
we use the media carousel widgets in a
somewhat counterintuitive yet creative
way in Photoshop we created this 404
design and produce three versions of it
a blue purple and yellow one we sliced
each version into eight vertical parts
and save them as images in Elementor we
divided our section into add columns as
well each column received its own media
carousel widgets with three slide items
set with a 3d cube effect each item
received one image blue purple and
yellow so that all of the vertical
columns together make up the three
versions of the 404 design it might
sound a little confusing but don’t worry
I’ll show you exactly how to make it
step by step so let’s dive in first off
let’s start with the design we will use
Photoshop but you can use any image
editing software set the document size
to 23 20 by 1000 pixels and to start off
with let’s place the blue version of the
image then go to view and and the new
guide layout choose columns and set the
number to eight set the gutter to zero
great now we have guides next go to the
slice tool and on the top bar you can
see the slices from guides button press
it now the image will be sliced based on
the position of the guides go ahead and
save all eight for web now all you need
to do is repeat the same process for the
other two image versions now that
done in Photoshop it’s time to go over
to elemental first off we’ll use
elementals theme builder to create a 404
template to replace the default
wordpress one so let’s create our
template go to the dashboard and choose
elemental go to my templates and press
the add new button on the pop-up window
and a select choose single and the
select post type choose 404 page fill
the template name finally press the
create template button we automatically
are offered pre-designed
pages and blocks but we don’t need them
we’re going to create our own so we’ll
press the X here now let’s add a section
we needed to have eight columns so
choose six columns and add the other two
by right-clicking on a columns icon and
choose add new column now we’re ready to
add the first media carousel widget
go ahead search for it and drag it into
the first column first off in the
content tab and the slides make sure the
skin is set to carousel it should serve
by default now let’s start with the
first blue version of the vertical slice
delete all the slides
besides item 1 and click it now set the
image the image is the first version out
of 3 for the first vertical slice of the
design now let’s add the other to
duplicate the first item and set the
second image do the same for the third
one now all you need to do is set the
effect to cube and set the height and
width so that the image fits exactly the
way you want i set the height to 500
pixels and the width to 100% now let’s
tweak the carousel a bit open additional
options select hide error and set the
pagination to none and make sure that
the image fit is set to cover it should
say by default great now
as you can see we have a gap between the
columns and for this design we need to
go back to the section settings and
under layout to set the columns gap to
no gap let’s also add some top margin in
the Advanced tab so the section will fit
properly
okay great then with the first carousel
off to the next copy the first carousel
and paste it in the second column all
you need to do is change the images of
the items to the ones from the second
vertical slice now do the same for the
remaining columns let’s speed it up I
think you’re getting the hang of it okay
starting to look good let’s check what
we have so far
cool but what if we could make it a
little bit better go back to each
carousel and in the content tab go to
the additional options we will change
the autoplay speed to different times so
that each carousel will animate
independently let’s have a look at the
effect cool one last thing as you can
see the cube effect adds a bottom shadow
to the carousel in order to hide this
all you need to do is add a new section
and under min height set it to 100
pixels now and the style give it a white
background color and in the Advanced tab
and Link the margins and set the top
margin to negative 15 pixels great no
more shadow this design and animation is
mobile-friendly just make sure to adjust
the slides tablet and mobile Heights
accordingly and you’re ready to go
well that’s it now you can create your
own awesome animated 404 pages with the
elemental media carousel widget the
sky’s the limit don’t forget to
subscribe to our YouTube channel for
more tips and tricks see you later
