Overview
Transcript
Overview
In this spooky tutorial, we explain how to create a Halloween landing page on WordPress using Elementor. This landing page has all the elements you need for a proper scare: an impactful hero section, ancient scroll contact form as well as some creepy content on the bottom.
Transcript
hi and welcome to this Elementor
tutorial in which I will be showing you
how to create this cool-looking
Halloween festival invitation landing
page and as you can see it looks rather
scary so I’ll show you how to make this
step-by-step and without further ado
let’s begin so I’ll add a new page name
it he’ll win change the template to
element or canvas and publish it
click on edit with Elementor now I go to
page settings and set the background
color to black add a new section and for
every new section that I make I’d like
to begin with the minimum height and
that is just to get a sense of the work
area and what I’m going to create inside
of it but it’s a mirror of prefer
ability now I drag in a new heading
center it
choose the griffey font which looks very
halloween-themed make it real big
[Music]
now for the bottom heading I’m gonna use
Quattro cinta font and these two fonts
look very good together they complement
one another as you will see immediately
I’m gonna use negative margins to bring
the headings closer together there looks
nice I’m gonna drag in an image and I’ll
load in one of our previously made hello
in themed dividers you can download them
for free along with other Halloween
decorations and cool elements
and I’ll use negative margins again to
make this look like a single unit drag
in another heading some more information
about the event
nice I’m gonna make this top section a
little bit longer and set the column
position to bottom and give the column a
little bit of margin underneath I’m
gonna set in an image background
looks nice and I’ll set an image overlay
choose gradient make the top color
transparent
there now it doesn’t look like the image
is being cut underneath on to our next
section I’m gonna drag in a columns
widget use a single column and drag in
an image box inside of it now I’m gonna
set a transparent background and then
load in an image as a background overlay
now gonna use this scroll now the reason
I set the background as overlay is so I
can adjust the opacity level and I like
to give a small percentage of
transparency to the background so it
will blend in nicely with the whole page
now I’m gonna adjust the minimum height
and reveal the full size of the scroll
set the image to no-repeat and I’m gonna
just the content width of the outside
section
to reveal the sides of the scroll some
top margin for the image box I’ll load
in one of our Halloween decorations as
the image
change the content and now I can begin
stylizing it
now I’d like to give small opacity to
the image so it will look like it’s
embedded on the scroll
and give some opacity to the text as
well now I’m going to adjust the content
width of the inside section to set the
border of our content give some padding
from the sides for the image box just to
make the text look a little bit more
organized there looks fine now we’ll
drag in a forms widget and begin adding
some fields
change the input size to medium which
will make our fields a little bit bigger
the same goes for the button I hide the
label now I can begin stylizing it
change the background color to black
give it some opacity
set the border-radius to 12
I changed the text of the button
play around with the padding of the
button
looks fine I want to further adjust the
content width of the section and make
the content a little bit thinner
I’m gonna give some top margin to the
forum to separate the elements from one
another drag in a new image and load one
of our hello in decorations give it some
opacity top March
now there’s no Halloween without
pumpkins so unloading a nice
cool-looking pumpkin image we have
adjust the size of it give it negative
margin to make them lean on the scroll
I’m going to set a background of
gradient
I’ll make it subtle and try to make it
look like the pumpkins cast a small
shadow on the scroll
there looks nice our next section is
gonna have two columns with some more
information about the event
I’m dragging a heading and the text
field
looks nice now I’ll drag in an image
widget and again loading one of our
dividers set some negative top margin to
bring the text closer looks good now
we’re going to duplicate this whole
column
align everything to the right and change
the contents and replace the image
now set some insight bedding to the
sides
and add an image background we have the
school haunted looking castle now we’re
gonna set the background overlay and
choose a solid black color and play
around with its opacity until the text
looks readable now we completed our
landing page and looks cool it looks
Halloween like and we can move on and
make it mobile responsive so I’ll switch
to mobile mode as you can see it looks
rather messy and what I like to do is
set all the margins and the bearings to
zero and personally for me it makes it
much easier to understand what exactly
do I need to adjust so I’ll begin with
sizing the headings
their top suction looks good
so I just play around with the value of
the bearings until the textfield looks
tight
and give it the right bedding from the
sides
and add a top margin to the bottom
column now our page is all done
including the mobile version we have our
top header section with the heading and
a cool background the middle section
with the form and a call to action and
the bottom section with some further
information and a nice break round to it
I hope you’ve enjoyed this tutorial
please subscribe for more awesome
content this was earlier from Elementor
and a happy Halloween
