Create a Homepage For Your Business With Elementor

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 100 pixels oh and open the navigator it 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 2 amazing our first section is done 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 2% and move it here 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 1.4 for the button change the font 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 30 pixels should do the trick okay 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 60 VH and set the column position to top 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 12 in advanced add some margin from the 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

Channel: Elementor

Views: 197,726

Keywords: elementor, wordpress, page builder, elementor skator, elementor skater, homepage, landing page, home page, elementor pro

Id: sI5sLDINqqY

Length: 18min 18sec (1098 seconds)

Published: Sun Sep 15 2019