Build a Landing Page with Elementor: Step-by-Step

hi everyone welcome to our guide this is SAR from element or in this guide I'm going to show you how to build and design a landing page in WordPress using Elementor let's start with a quick overview of the landing page we'll be building today the first area takes most of our screen space it's made out of a headline some text and a call-to-action button that will lead the user to our form just below the section we see a navigation menu that helps the site visitor to quickly navigate to any part of our landing page next we have in About section that has some text just below it see the features area with a big image on the left I've also designed the gallery with some images text socials and the video background I'll talk about it later in the video in the bottom of the page we have a form for the site visitor to fill out and that's it let's start this is the wordpress dashboard let's go to pages and click on add new page we'll give the page a name and click on edit with Elementor this is how the default page looks like so first thing we'll do is go to settings page layout and choose element or canvas this gives us a clean page without the header footer or the sidebar that's a good option to go with when building a landing page just a few things before we start let's change the default fonts and colors of a website we'll click this hamburger menu here we have a color palette default fonts and color picker settings we'll set the color like so primary is white secondary and text black fons I've set up my primary and secondary headline fonts to this Adobe font but you can set your own font as you wish with the color picker will set up our colors so we can access them quickly while building our page the first area we'll add will be a section with one column we'll set its height with mean height of 90 VH which means in 90% of the screen height we'll head over to the style tab let's set the background color to blue background overlay gives us the option to set another layer on top this time we'll set an image overlay that's at the image to the middle position Center center repeat no-repeat so that the image will not repeat itself size contain and opacity let's move the slider to 1 blend modes is a new option in Elementor 2.1 what it does is mix the overlay with a background color so let's choose multiply or darken and check out how this affects the image now let's add our headline and change the text alignment Center we'll head over to style typography and let's make our text stand out a bit we'll increase the size to 120 pixels and let's add some text shadow a really light shadow set the vertical to minus 10 so the shadow will point towards the top and let's add some blur cool we'll right-click our headline duplicate and we have another title let's change the text next style typography will increase the text size a bunch to two hundred maybe even two hundred and thirty pixels letter spacing let's try minus five now even minus eight nice we'll head back to the top headline advanced and let's add a minus margin just to the bottom eighty pixels now add a text editor widget style text color white typography will increase the size to 20 pixels and let's change the way to 500 now Advanced tab and this time with percentage we'll add margin 25 right three to the bottom and 25 to the left one more thing head back to the style tab and align the text to the center now we'll add a button to our page let's change the text alignment center size medium and we'll add an icon icon position after and we'll add some space between the icon and the text let's head to the style tab text color same as the background and background color white typography will make the text bigger 25 that's too much 20 nice border radius set 250 to make the button round and box shadow same values as the titles soft shadow vertical -10 and blur 50 and now we're done with the first area the next area will add to our landing page will be the navigation area let's have a section with one column change its color under the style tab background type and we can duplicate the column right-click duplicate or right click add new column we get a section with three columns the first column will add an image we'll make the image smaller in style change it to pixels set it to 120 pixels like in content tab align to left in the second column we'll add a nav menu widget because we don't have a menu yet we'll need to edit so click on go to menu screen and let's create our menu so we're back in the WordPress dashboard to create our menu let's give it a name and click create menu because we want the menu to be internal within the page itself and not to direct to other pages of website we'll add a custom link let's add a hash tag and now write about link text also about and click Add to menu let's add another one features link text features and add to menu now last one gallery and in the link text gallery and add to menu don't forget to save your menu now back in Elementor click on update and then refresh the page we can see our menu now let's edit the menu style change the text color to white typography let's change the weight back to content will disable animation and now let's make the first column smaller and back to the section to Center everything to the middle sub content position middle now let's add a contact button right click the top button and paste here let's change the text to contact alignment right and under style we'll change it a bit text color white background color let's lower the opacity border one pixel you can add some animations let's change the border color so we'll get a subtle effect now to the about area we let a new section with one column content with 500 pixels and min height 500 pixel let's add a headline widget right about and let's go to the top headline right click copy and right click paste style so we've got the same value as the top headline head over to the alignment change it to left style typography change to 90 pixels change also this shadow at the 10 in horizontal and vertical also add 10 head over to advanced margin button 30 pixels let's add a text widget we can add some more text here under the style tab will enlarge the text to 16 pixels and line height 1.5 or when let's go for 1.6 change the text color to gray under the Advanced tab in percentage let's add 10% to the left margin maybe even 12 cool now add an icon on top of the headline change the color to yellow content view frame and let's search for an icon we like under style will make the icon a bit smaller and under the Advanced tab let's add margin-bottom of minus 50 maybe minus 55 and left 170 so the icon will appear under the title under the About section let's add a new section drag in an image widget will choose this image right click add new column and in the section settings will choose the option of 6633 let's enlarge the image in style to 100% and add a columns widget to the right column we can erase one column right click delete and add an icon widget change the coloring style content alignment left add a headline widget HTML tag click another style change the color to black add another text widget under the headline erase some of the text and copy the value from the text in the About section and paste style cancel the margin from the left under advanced we can make the headline a little smaller maybe 15 pixels 13 pixels and change the font weight to 700 change the icon style choose a different icon view stacked style size change to 20 and the advanced ID - forty pixels to the bottom margin and - 20 to the left so now we have a section that contains an icon a title and text we can duplicate it three times and let me give you a small tip here if we have a section or any other element we want to duplicate first make it mobile ready and only then duplicate it I want to get into mobile editing in this video as I want to keep it around 30 minutes so back to our editing right click the section duplicate and again and let's change the icons the next area we'll add is the gallery add new section one column and that's how the headline change the text right gallery and again let's copy the start from the first title and paste the style to our new title alignment right and under style typography change it to 180 pixels under the title let's add a columns widget and add another column in the section settings change to no gap to avoid padding between the columns and mean height 350 pixels content position middle to the left column let's add a spacer widget and let's give it a background color white and add an image position Center right size contain repeat no repeat to the second column will give a color background another space a widget as well to the right column will add a call to action widget change the skin to cover and choose an image other content here will erase the description and the button under the style tab set the mean high to 350 pixels and hover effect overlay color same color as the middle column with a lower opacity in hover we'll give it the same color back to our headline advanced add a minus margin of 70 and margin right minus 150 pixels we've added the effect where the title is off-screen add another columns widget section and this time under style we'll set a background type of video search YouTube for a video in the new Elementor 2.1 you can set a start and end time for the video which is great for creating a background loop set a mean height of 350 pixel add a new column to the right column will give a background color and add a block wot widget [Music] back to edit section content position middle edit column padding 40 pixels on every side under the style tab change the text color to white text other white as well under the content tab change the skin to quotation erase some of the text we don't need that much let's change the Twitter button till icon only and back in style lower the opacity under style author lower the opacity to create the third area let's duplicate the top area and drag it to the bottom change the columns order check this to the left and this to the right nice change the middle column color to yellow the right column also changed to yellow and pick a different image in the middle column let's add a social icons widget and we can erase the spacer here let's play with the style color custom secondary color black and make the icons a bit smaller in the call to action widget change the image and in the hover effect would change to the yellow color and also under hover yellow and here's what we have let's add CSS filter and let's add some more blur only on hover now to our contacts section add a section with one column content with 500 pixel and min Heights 800 pixel contact position middle head over to the style tab back on tap change to this color and let's add a background overlay image let's try this one position center center repeat no repeat size default an opacity let's lower it like so blend mount multiplier and the headline widget change the text and copy/paste from our top headline again paste style now duplicate and change the text to I'm in let's make this a little bigger 120 pixel and now let's make them closer to each other on the top title advanced - margin of 45 and the second title advanced we'll play with the margin from the bottom 50 pixels and from the left 20 - 20 pixels we can also add an icon let's take the icon from about copy and let's paste it here play with the settings alone and the -35 to the left cool now add a form widget switch off the label add item tell enlarge to medium and the bottom align to right let's change the text and let's add an icon after that I can position after and let's change the spacing here and make the button size medium now in style let's increase the space between the fields text color change to white background color lower the opacity add a border only to the bottom and border-radius zero pixels and let's style the button change the color to yellow text same as the background color border-radius make it round and let's shift the form a bit under the Advanced tab add 12% to the left and now let's talk about the menu we will add anchors so the user can navigate to any area on the page first let's make the menu section sticky edit section under advanced scrolling effect sticky top we can set on which devices will have it sticky and also the spacing from the top now let's add anchors drag an anchor widget here move it on top of the title call it about copy and paste over the image and then drag it on top of the image change the text to features paste again drag it on top of the title let's change the text to gallery and add one to the forum and change the name to contact let's add a link to the button under link add the hash sign contact let's check if it works click the button and look it goes straight to the forum nice one more element we can add let's go to the featured section setting under style shape divider button choose tilt change the color to a light gray something like that let's flip the direction and bring to front so it covers the image in the next section style shape divider and top this time add tilt with the same gray color from before flip it and play with the height let's add some more height to this section we'll add a shape divider from the bottom as well tilt and give it the same color as the contact section that pink color and a little fix we have to do choose the column and give it a white background color this way we won't see the shape from the bottom like so now a little trick regarding the navigation as you can see the navigation area is visible throughout the site but what if I want to hide it a little this is actually pretty simple we'll choose the navigation section advanced and under the z-index give it a one now under the gallery section settings style give it a white background and other the Advanced tab z-index set it to two this means it should cover the menu section now let's see if it works we'll scroll down and check it out the navigation is gone that's it we're done let's view what we've created we'd love to hear from you so please leave any question or comments here and don't forget to subscribe to our YouTube channel for more videos like this and more

Channel: Elementor

Views: 698,592

Keywords: landing page, web design, widgets, page builder, wordpress, elementor

Id: XjS-vPXblpk

Length: 33min 0sec (1980 seconds)

Published: Thu Jul 26 2018