In this Halloween special, we give you 7 seasonal web design tricks and treats to transform your website into a thrilling creation that will make your audience scream for more.
Enter our full monster makeover post, if you dare, and get our Halloween pack of tutorials, icons, templates and other frightful freebies
welcome Elementor ghosts and ghouls to
our Halloween special where I will show
you seven tricks and treats to dress up
your website for Halloween and transform
it into a monster I mean into a
Halloween themed website let’s get
started the first Halloween section will
create is our hero section called
the haunted homepage and this will be a
scary and haunting scene that is a great
fit for Halloween and I’ll start off by
creating all the text elements of the
page as you can see I’m using black and
yellow all the colors of Halloween as
well as fonts that are a good fit for
Halloween which is Henny Penny and other
fonts include Griffey and Crips Terr and
you might be wondering why we would add
this to our homepage and it’s a great
way to celebrate Halloween with your
customers and promote your black brand
promote your holiday sales if you have
them and it just looks really great and
it’s really cool so it’s a great
addition for the festive season and now
I’m adding the finishing touches on the
button and the other textual elements
and then I’ll show you a cool trick how
I can take this section to another level
so I’m going to style and I’m adding a
black background gradient that will
create this night sky effect and I want
to have an even more impact so I’ll go
to style background overlay and actually
add a background image which is the
silhouette of the cemetery really scary
set it to contain bottom center and no
repeat and there you have it a beautiful
scene of a night Cemetery very great fit
for Halloween and if you want to take it
to another level here is a video of some
rain I can actually set it as the
background for this scene and the whole
scene transformed into something really
haunting and creepy perfect for our
Halloween our second Halloween makeover
is for this services section we will
create the killer feature services
section and I’m starting off by changing
all the back the background for a
background gradient of yellow and orange
which is a great fit for the pumpkin
look so I’m sending it as radial so it
starts from the center and once we’re
done with that we’ll go on to change the
fonts again to henny-penny and change it
to white I’ll do that quickly for all
the services here and this is a great
chance to mention that all of the images
you see here will be available for
download in the blog post and in the
description below so you can use it on
your site and on your client sites so
once I’m done with the fonts I can also
change the regular icons instead of the
briefcase choose a pumpkin here choose a
candle replace it for the haunted house
the skull and I have a vampire and Magic
Hat so don’t forget to save your
previous section before you change it
look how it looked before and after our
change looks amazing next up we have the
bloody dreadful CTA section so you see
here a regular call to action section
I’m changing the summer sale to
Halloween sale and the icon I’ll change
it to the image I remind you all the
resources will be available for free
download
so change its size and now we’re going
to again use a gradient this time a
bloody red gradient fit for Halloween
it’s dark it’s nice and very bloody I’ll
add here I’ll change the font to
creepster
[Music]
the whole scene transformed into
something really disturbing I’ll add a
small box shadow change the color of the
button and now’s the trick a cool trick
I’ll go to shape divider and choose the
drops and now you can see it’s a blood
drops before regular call to action
section after a Halloween sale that is
very bloody and very terrifying
next is the starving zombie restaurant
menu section you see a nice classical
menu I’m changing it to Halloween menu
so I will change the text again I’m
sticking with Henny Penny
change the wait a bit
now all the dividers I will change to
our own custom dividers that feature the
spider webs and the pumpkins on all the
rest of the Halloween
icons and this changes the entire look
and feel of our special menu and if you
have a restaurant website this is a
perfect addition it can also be a great
fit for blogs and anywhere you want to
make a small change that doesn’t take
too long but transform your website into
a seasonable Halloween website look at
the final result I’ll give it an orange
touch and then we’re done
a few changes and it looks very
Halloween like before and after what a
ghostly
effect our next chilling section is the
contact the dead contact form you see
here a regular contact form
I’ll start by changing the background to
a night scene remove those shape
dividers and I’ll I’ll play around with
the position of the image set it to auto
and change the colors a bit and of
course this time I’ll choose Griffey for
the font family
so we’re gonna make a small change to
the form and set this pumpkin image
below the forum and this will change the
entire form and give it that Halloween
chat touch so I’m going to give it some
minus margin to align it with to be
inside of the forum and then I can play
around however I like aligned it to the
center left and the result is nice so we
have before a regular beautiful phone at
forum and after with the holiday spirits
inside number six is the price slasher
pricing section we will transform this
regular price table into a beautiful and
Goering scene and I’ll actually use a
special trick right here so pay
attention it’s something that not
everyone of you will know and it’s
pretty surprising I’m starting off by
setting the background gradient changing
all the topography of the textual
elements and changing the price table as
well the trick I’ll be using is by
setting the background of the price
table to be transparent I can actually
use a geographic geometrical shape as
the background to give the whole price
table the tombstone look so I’m just
adjusting the position top center
no-repeat and contain and by changing
the padding I’ll be able to situate the
entire price table inside of the
geometric form and this will give the
whole scene that cemetery look will
complete it by adding the silhouette
below and you’ll see it will look
amazing now I’m adding some final
touches for this price table and I’ll do
the same for the right one
[Music]
so as you can see two tombstones and
they look absolutely haunting and our
whole scene is really nice and I can
also change the background gradient to
the moon seen the moon background and
now it’s complete and it looks very dark
and terrifying before and after what a
difference less but not least is my
favorite scene of the mall the 404 page
from hell and I’ll start off by changing
the background to black and change the
colors of all the text elements I also
need to change the content of the text
so I’ll change it to sorry
you’ve gone straight to hell and the
button also climb back up home now you
see a cool little trick that I’ll show
you I’ll add a background video and this
will be a fire fire video
the fire you see right here and by
putting a background image on top of it
I’ll create a mask so you can see the
pumpkin mask and on top behind it is the
slithering fire and doesn’t it look just
amazing what a disturbing 404 page I can
also choose this smoking background
instead and this is no less terrifying
what a nightmare for for Paige I love it
[Music]
before and after with a ghostly effect
Halloween is a great time to dress up
your site in a fun and fear-inspiring
way Elementor makes this possible with a
few easy steps download our free
Halloween pack transform your website
and share the result with us and with
your friends wishing you a happy
Halloween this is Ben from Elementor
[Music]
