Create landing page with Elementor from scratch

Do you want to create landing page with Elementor from scratch for your WordPress website? In our previous article we described the process to create landing page with Elementor pre built template. If you miss that you can check that out too.

How to create landing page with Elementor using pre-built template.

Landing page helps you to generate more traffic by getting your user’s personal info. No matter what type of your business is , a beautiful landing page can make your visitors into potential customers. So here in this article we will guide you to create landing page with Elementor from scratch in WordPress.

Create landing page with Elementor from scratch

When you choose template for your landing page you can easily customize it and edit the content very easily. You can realign the block and delete or add column and row, change the image, audio, video, color scheme everything very easily and in a very short time.

But when you are trying to crate your landing page from scratch then you have spend more time and effort for that as you are creating every elements from scratch.

Here you will guide you to create a beautiful landing page from scratch. We will add every single elements and content from scratch so that it will be easier for you to understand it properly.

Create the landing page

To create the landing page at first go to your WordPress dashboard and then go to Pages > Add new. From the add new page click on the Edit with Elementor option.

Elementor page setting option will show up and from the setting option we can add a title for this page and then from the Page Layout option select the default option.

When you crate our landing page using pre-built template then we choose the page layout as Elementor Canvas. But here we need to select the default option. For the default page layout option your have the default style like the header and footer section will added for your page.

You can see the image above that our header section are added in the landing page. And for the Elemenot canvas layout it will give you a blank page. No header or footer section will be available for your page in Elementor Canvas layout. As we are crating our landing page from scratch that’s why we are using default layout here. If you want you can choose the Elementor Canvas based on your design.

Decide the landing page elements

Before designing pour page we need to choose the elements what we includes in our page. Our landing page includes:

Top section
Services/Features
About
Gallery
Contact Us

Step 1 : Setup color, color picker and fonts

Initially we need to setup our editor before design our landing page. We need to set the primary and secondary color so when we add any widgets our default color will automatically set. Same thing for default fonts and some other default settings. This will help us to access the global setting quickly.

Step 2 : Top Section

Here in this section we will include :

beautiful background image
A heading that describe our brand properly
Some text about what we do
A button with a link of service page or other important page of our website

At first we create our section by clicking on the “+” icon.

When we click on the “+” icon then a structure option will show up. You need to choose the structure of our section. We can select the column and their structure from this structure option. For our top page you choose the structure by clicking on it.

Our section is created. It will look like this. If you want to use the full width then just click on the six dot option and then go to the left dashboard and from the Content width drop-down menu select Full Width and turn on the Stretch Section option on.

Now we are going to add a background image for our section. To add a background image just click on the section and from the dashboard go to Style tab and the click on the Background menu. There are 4 types of background option.

Classic – you can add a single image here.
Gradient – From the gradient option you can select color gradient as your background.
Video – Add a video as background.
Slide show – Add multiple images as a slide show in background.

You can choose any of the option from here. You are selecting the classic type as we just set an image at background. To set image click on the Choose image option below and then upload your image and set it.

There are also many option you can set the background position from the position menu. You can set the position as center or center left, right. There are many options available. You can also set the attachment of the background as fixed or scroll. If you fixed the background , when you scroll you image will fixed and the page scroll. But if you select the background scroll, then the image will also scroll with the page.

Background Overlay

From the background overlay option we can add color gradient and increase or less the opacity to make our background more attractive .

You can easily see the difference between the two background. Style your background as you want to make it more beautiful

Add heading and text

We set our background properly now the next step is to add a heading about our brand and some description. Elementor offer you so many blocks. You can see all the block in the left dashboard. Before adding our heading we just create a inner section in our section. To create inner section just drag the inner section block and drop it into the section. Now to add our heading we need to drag the heading block and drop it into the inner section. You can set the size, HTML tag and alignment from the option too.

Now click on the Style tab to style our heading. You can set our text color, text shadow, typography, line height, letter spacing and many more options are available.

Our heading is ready now it’s time to add a description. To add description select the Text Editor block drag it and drop it into the inner section. And to add a Button just use the button block. We can style our text editor and button as the same way we edit our heading.

from the Shape Divider option we can add different shade in our section.

For the button there are some extra options available. From the content tab you can set the button type, add text, link and alignment.

From the style tab you can set the button typography, text shadow and set the hover option.

Our top section is fully complete now you design our about section.

Step 3 : About

In about section we will use a color gradient at background and include a heading and a text widgets area. This section will be a one column section. This style is the same of our top section.

Step 4 : Service

Our service area will be a two column section. From the right column we will add a car image and in the left column we will add some service of our brands.

Click on the “+” icon to add section and in the select column option select the two column.

To make the section full width follow the same step we did in our top section. In the left column we will add 3 different service.

For our services you will add an icon a heading and a text editor. So you will take two inner section. In first inner section we will ad our icon and the next one we add a heading and text.

We can style the heading and text in the same way we did in our top section. After that just duplicate it to add more services. You can duplicate any section by clicking right button of your mouse and then click on the duplicate option.

From the advance tab you can adjust the inner section by adding the margin and padding.

Our service section in done, now in the right column we will add our image. To add image just drag the image block in the section and then from the dashboard upload your image.

After uploading the image from the Style tab you can set some style for your image and from the advance tab use margin and padding to adjust image.

Our section is done now we will ad some color gradient in this section.Click on the six dot of the main section and then from the dashboard go to Style > Background > Background Type. Select the background type gradient. Select a color and and some color gradient style as you want.

From the Background Overlay option add some color overlay and form the Shape Divider option add a shape of your section. After everything is done our service section will look like this.

Step 5 : Gallery Section

In the gallery section we will add some image of our brands. For that we will select a one column section. In the section we will take a inner section and give a heading and image block to upload our images. We can duplicate the section to realign our images.

After uploading the images you can style the background. you can add a background image or video to make your gallery section more attractive.

Step 6 : Contact Us

Our last section of this landing page is Contact Us form. Free Elementor doesn’t allow you to add form block. You need to use Elementor Pro to use form widgets. But you can add form in another way. Elementor offers you to add custom HTML code. So you can copy a form code and paste it into the section if you want to add a form.

To add custom HTMl form code add a inner section and then drag the HTML block on it.

After that using the margin and padding to place the form. And from the Style tab, you can style the section. Or we just can add a number and address of our brand by adding inner section and style it.