In this tutorial, we’ll show you how to create the homepage as seen in the video, step-by-step.
You’ll learn how to:
✔︎ Add Motion Effects
✔︎ Use absolute position
✔︎ and much more!
hey there Cassie from Elementor here did
you watch our rad skater video now you
can learn how we did it we’ll take you
behind the scenes of our skater campaign
and share the design secrets on how to
build a cool landing page for your
business in this video you’ll learn how
to use custom positioning motion and
scrolling effects the flip box and forms
to add a sense of live motion to your
pages
first off create a new page give it a
name and click Edit with Elementor now
in the page settings let’s change the
layout to canvas
great click the plus to add a new
section and we’ll go with one column
let’s set up our work layout set the
content width to full width columns gap
to no gap height to minimum height and
set it to 140 VH now in style let’s add
our background image click on classic
and choose your image you can upload an
image or use one from the media library
let’s go with this one
now let’s tweak it a little in position
set it to center Center attachment fixed
repeat no-repeat and set the size to
cover
next drag in a heading widget and type
in your text align it to the center and
in style change the color to white in
typography change the font to Anton size
to 180 pixel weight to normal transform
to uppercase style to italic line height
to 1.2 and letter spacing to 80 awesome
let’s add the skater image so drag in an
image widget and choose our skater from
the media library
next in advanced set the top margin to
negative 400 pixel and bottom to minus
helps you keep track of all your
elements so right-click the background
here and choose navigator there it is
change the image name to skater for easy
reference moving on drag in an image
widget and choose the ramp image
in the navigator drag it under the
skater image and change its name to ramp
and change the image size to full in the
Navigator click the section to enter its
settings in layout column position
change it to bottom
now click the column and in layout
widgets space type in zero that
stretches the ramp image to the whole
width of the page now let’s add motion
effects click on the skater image open
motion effects and flip on the scrolling
effects click on vertical scroll and set
the direction to down and speed to 4.5
leave the viewport settings on default
next click on the heading widget to
enter its settings in advanced motion
effects flip the switch on Mouse effects
next click on 3d tilt leave the
direction as direct and set the speed to
great job moving on to the next section
so add a section with one column in
layout change the content width to full
width height to minimum height and set
it to 150 VH for the column position set
it to stretch and the overflow to hidden
in style add a background color I’ll add
a grayish color drag in a heading widget
in content change the text and align it
to the middle in style change the text
color and in typography change the font
to Anton and the text size to 80 pixels
excellent now drag in a text editor
widget just under the title paste your
text here cool in style align it to the
center
change the text color and in typography
set the font size to 18 pixels set the
line height to 1.8 and the letter
spacing to negative zero point two now
in advanced add a 300 pixel margin from
the left and right
brilliant drag in a button widget change
the text align it to the middle and
change its size to large in style
typography change the font to lotto
weight to bold and letter spacing to 1.5
in normal change the text and button
color in hover flip the text in button
colors so the text to yellow and the
button to dark blue now
let’s spice it up with some hover
animations why don’t we go for float
round the buttons corners by adding 40
pixels in the border radius and to make
some more space add 20 pixels padding to
the top and bottom and 50 pixels to the
left and right cool looks good click the
sections handle to enter its settings
and add some space here go to advanced
and add a hundred pixels to the top
padding drag in an image widget and
choose your image I’ll use the
skateboard image in the navigator change
its name to front skate layer and add
two more images here front middle and
back choose this one here and name it
middle skate layer
and for the last one dragon an image
widget
and rename the item in the navigator to
backs gate layer still in the backs gate
layer in advanced go to custom
positioning and change the position to
absolute and set the vertical
orientation to the bottom now click the
middle skate layer go to advanced custom
positioning set it to absolute and again
set the vertical orientation to the
bottom
now for the front skate layer advanced
custom positioning set it to absolute
and vertical orientation to the bottom
as well swell now let’s add some motion
animation to your scene first add all
the images so dragon an image widget and
choose this wheel in advanced custom
positioning set the width to custom and
use the slider to set it to 180 pixels
in position set it to absolute now
change the offset to percent and drag it
here
now at a second image so drag in a
second image widget
pick this image here advanced custom
positioning custom width set the offset
so now you just repeat this process a
few times so fast-forwarding here
great you did it so now let’s add some
motion FX click the first image we
inserted in advanced motion effects flip
on scrolling effects click the pencil
next to vertical scroll and leave the
default settings next click the pencil
next to the horizontal scroll and set
the speed to 2 in style click the pencil
next to the CSS filters and add some
blur 5 is good yep so again go over all
the images you’ve added and follow the
same routine just with some minor
changes to the speed and direction so
speeding up here
cool let’s see here all righty
click the sections handle to enter its
settings and in layout set the column
gap to no gap okay great now we’re done
with this section let’s take a look
awesome moving on add a section with one
column this is going to be our products
section set the content width to 1600
the height to min height with a hundred
VH
over in style add a background image to
your section
nice set the position to top center
repeat to no repeat and size to cover
drag in a heading widget paste your text
here and align it to the center
in style go ahead and change the text
color
in typography change the font its size
spacing what time is it time to drag in
a text editor widget paste in the text
align it to the center
change the font to lotto and font size
to 18 pixels
and drag in an intersection widget set
its width to 1600 just like we did for
the section let’s add a call to action
widget to the Left column so search for
call Paradis
tweak the settings a little change the
skin to cover and choose an image
in content changed the title remove the
description text and change the buttons
text great in style set the minimum
height to 500 pixels and the vertical
position to bottom back in content in
normal change the title and button color
to black
in typography changed the font to our
friend Anton set the size to 40 pixels
weight to normal and letter spacing to
properties as well
and in hover change the text color to
yellow I don’t want the border around
the button so I’ll set the border width
to zero let’s check it out
cool
in hover effects content disable the
animation by setting it to none still in
hover effects background remove the
overlay color on hover by sliding the
opacity slider down and change the zoom
in animation on hover and set it to 1000
milliseconds have a look we need to
space it out a little so an advanced
play with the margin add 40 pixels to
the right and 40 pixels to the left
great now duplicate your column
and duplicate again and delete the empty
column on the right
click the middle call to action widget
and replace the image let’s choose this
hoodie
change the text to hoody all right and
the one on the right change the image to
this hat
and type in accessories click the
section handle to enter its settings and
space it out a bit so add a hundred
pixels to the top awesome now for the
intersection in advanced motion effects
set an entrance animation will go with
fade in up cool so we’re done with this
section next we’ll add a section with
one column
this will be our meet our team section
change it to full width height to 100 VH
and in style give it a background color
drag in a heading widget and type in
your text align it to the center and in
style change the color and font
properties
next drag in an intersection and change
its content width to full width
duplicate the column twice
so you’ll end up with four columns
search for the flip box widget and drag
it into the left column remove the
graphic element change the title and
description and paste in your text then
click background and add the first team
member image
in position change it to Center Center
and set the size to cover in the back
card remove the title in the text and
change the buttons text to read more in
the background add an image of our team
members in action position it to Center
Center size to cover and in the settings
change the height to 70 VH in the flip
direction to the right cool okay check
this out let’s also add the 3d depth
effect
great now InStyle set the Front’s
vertical position to the bottom change
the text color so you can see it and do
the same for the description text let’s
change the font to our Anton font and
tweak a few settings
add some padding 50 for the left and
right
eighty-four the bottom and zero for the
top now for the back vertical position
to the bottom change the button size to
medium and let’s tweak the typography
settings
change the buttons text color to our
dark blue and the background to yellow
again remove the buttons border by
setting the width to zero and make it
round by setting the border radius to 50
let’s space it out a bit set 80 pixels
padding to the bottom right click your
column and right click paste on to the
next one cool isn’t it
now paste again and again it’s a real
time-saver all that’s left to do now is
change the names and images so let me
fast forward here a bit
alright let’s add some margin to the
heading widget
almost done on to our final section
choose one column set the width to 500
column gap to no gap
height to minimum height and set it to
in style set the background color and
choose an image
I’ll use this ramp
change the position to bottom center and
the size to cover
now drag in a text editor widget
and paste in your text in style set the
alignment to the middle change the text
color and typography settings as well
search for the forum widget and drag it
in just under the text we’re creating a
subscribe forum so we don’t need the
name and message fields here let’s just
delete them click on the email and
change the column width to 60% next
change the input size to medium and
remove the label
open the submit button settings and
change the text to subscribe will also
change the size to medium in the column
width to 40% in style change the column
gap in row gap to zero in the field
settings change the text color
and the typography settings to your
liking
remove the fields background color
but at a border so let’s choose our dark
blue
and set the border with two-two now
let’s make our field round by adding 50
pixels to the top and left border radius
settings in the button change the
background color to our dark blue and
the text color to the backgrounds color
let’s tweak the button typography
settings a bit
and again round the corners by adding 50
pixels to the right and bottom this time
awesome
and of course add the social icons
widget to seal the deal search for it
and drag it right under your subscribe
form tweak the default settings a bit
let’s change the Twitter icon click to
open the settings and click on the image
this will open element tours icon
library search for Instagram and there
it is let’s also change the Google+ so
just do it again click open the icon
library and type you alright there it is
YouTube’s icon SuperDuper onto changing
the shape to a circle
and in style color change it to custom
in primary color choose our dark blue
and in the secondary color choose your
backgrounds color
space them out of it in spacing type in
top 20 pixels should do it and perfecto
we’re done scroll up the page to see all
our work looks rad whoo-hoo feels like
we’re skating down the page
try building your own landing page
similar to the skater page and don’t
forget for more videos and rad tutorials
subscribe to our You Tube channel later
skater
