create landing page with Elementor

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.

create-landing-page-with-elementor.png-

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.

create-landing-page-with-elementor

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.

create-landing-page-with-elementor

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.

create landing page with Elementor

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.

create-landing-page-with-elementor

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.

create landing page with Elementor

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 .

create landing page with Elementor

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.

create landing page with Elementor

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.

create landing page with Elementor

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.

create landing page with Elementor

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

create landing page with Elementor

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

create landing page with Elementor

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.

create landing page with Elementor

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.

create landing page with Elementor

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.

create landing page with Elementor

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.

create landing page with Elementor

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

create landing page with Elementor

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.

Final Result

Our landing page is done. Now let’s see the result.

 

We hope this article will help you to create your landing page from scratch.

For better Elementor workflow and productivity you can install the Absolute Addons plugin which makes your website creation experience to the next level. Create a website faster than ever with 250+ ready design blocks. Just download and start making your website in minutes. 

Wrapping up

A landing page is very important for a website. You can display your website information in a very creative way on your landing page. Elementor made it easy to create the landing page in a very easy way.

We hope this article will help you to create your own landing page for your website. You can see our other tutorials to learn How to Create a Maintenance Mode Site With Elementor

How to Add Image Masking in Elementor

We hope this article will help you. If you like this article please like our Facebook page to stay connected.