A custom 404 page on your WordPress site, can lead to more sales and user engagement.
In this tutorial, we’ll learn how to use Elementor’s powerful Theme Builder to create a custom 404 page for your WordPress website.
You’ll learn how to:
✔ Use the Theme Builder
✔ Create a 404 (error) page
✔ Add animations to your website or landing page
✔ And more!
hi oh it’s zip from Elementor have you
been following our monthly template kit
releases they consist of templates that
make up a complete website including a
header footer a blog archive and single
blog a pop up and for a full page all
created using elementals powerful theme
builder you also might have come across
this awesome for a full page in the
portfolio site kit you can simply add it
via elementals theme builder in your
dashboard and the templates go to theme
builder add new
and choose the single template type
select for a full page for post type and
give it a name then create the template
as you can see you can find the for a
full page in the library over here ready
to be inserted but that would be too
easy so let’s go ahead and create it
from scratch add a section with one
column then set the content width to
full width and change the height to min
height set it to 90 VH go to style and
give it a grey background color then
under border set the type to solid and
width 250 pixels also change the color
to white cool now let’s add an inner
section given a min height of 450
duplicate the column so we have 3 in
total add a heading widget in the first
column and type 4
align it to the middle and then and the
style change the color to red
and under topography change its size the
slider goes up to 200 but you can
manually enter any size you want I’ll go
ahead and set it to 500 click on the
first columns handle to enter its
settings then and the style set the
background tab to slideshow and click
here to add images here we will select
the images for the gallery select the
girl with the red shirt as well as to
empty pngs with the same dimensions soon
you’ll see why click create a new
gallery here we can change the order of
the media files in the slideshow make
sure the picture of the girl is set to
the left because we wanted to appear
first then click insert gallery now for
the slideshow settings set the duration
to 0 and the transition to slide right
also set the transition duration to 1500
great now all we need to do is duplicate
what we just created and change it a bit
so duplicate the column and delete the
empty one next to it
here in the second column change the
number to zero and the style change the
color to orange will add the image of
the girl with the orange shirt so it
blends nicely just like with the red
number four so in the column settings
and the style let’s change the slide
show pictures delete the image of the
girl with the red shirt click on add to
gallery and add the girl with the orange
shirt then add it to the gallery this
time drag the girl’s image to the middle
this way the animation is timed properly
together with the MT pngs
to get the cool color change effect then
insert the gallery for the last column
like before duplicate and delete change
the number to four
and under style change its color to
purple
in the column settings and the style
enter the gallery and delete the girl
image click Add to gallery and select
the last image then add it to the
gallery great the picture appears lost
that’s already the right order then
click insert gallery let’s publish
then save and close now check it out
cool the images changed just like I want
them to
let’s go back to the editor now before
we go on let’s arrange everything for
mobile
click on the number and under style
typography changed the size to 145 enter
the column settings and under layout set
the column width to 33% let’s do the
same to the other columns change the
number size and the column width
okay great now go to the intersection
settings and set the minimum height to
select the number and this time change
its size to 300 pixels like before do
the same in the other columns as well
then in the inner section settings set
the minimum height to 270 pixels okay
great now let’s go back to desktop mode
and duplicate the intersection as you
can see it appears under the first one
so to make things clear I’ll open the
navigator
and name this in a section first in a
section I’ll do the same for the second
intersection and call it second in a
section now I’ll go ahead and delete the
text widget with a number
then in the column settings and the
style let’s change the slideshow images
like before
delete the girl image hit add to gallery
and add the guy with the red pants then
add to gallery the guide picture will
appear lost great
click insert gallery then change the
transition to slide left and set its
transition duration to 2000 so the
animation will be a little slower than
the first intersection now delete the
other columns
and duplicate the first column twice
in the second column settings and the
style change the image to the orange guy
and add to gallery then drag the image
to the middle now for the last column
like before delete the image and add the
blue one click Add to gallery and drag
it to be first
okay great now all that’s left to do is
add a negative top margin to the second
intersection so go to its settings and
under advanced set the top margin to
negative 450 pixels
see how it exactly appears on top of the
first intersection cool let’s do the
same for tablet
I’ll and link the values and set the top
margin to negative 270
for mobile I’ll do the same but set the
top margin to negative 135 instead okay
we then now let’s see it in action
awesome well that’s it now you know how
to create an awesome for a full-page
template using elements whose powerful
theme builder have fun playing around
and don’t forget to subscribe to our
YouTube channel for more tips and
tutorials ciao for now
