How To Build A Landing Page With Elementor Page Builder?

In this article, we will introduce you an easy way to create a landing page with Elementor Page Builder step by step.

Note: In this article, we mention several features that are just available in Elementor Pro. Therefore, in case you are still using the old Elementor, we highly recommend that you should update to Pro.

Preparation before starting:

• An active WordPress installation
• Install Elementor
• Install Elementor Pro

Setting up a landing page:

Step 1: Switch on the WordPress dashboard

Step 2: Click on Pages > Add New

Step 3: Click  Edit With Elementor

Step 4: Scroll to the bottom left gear icon

Step 5: Switch on Page Layout > Click on Elementor Canvas to work on a blank landing page

Inserting the elements for a Landing Page:

Step 1: Choose the folder icon to insert a template

Step 2: Click on Blocks tab

Step 3: Using the select dropdown to insert different blocks which will create your landing page. You can follow the landing page structure below:

Header: The header in the landing page is normally minimized. Here is the example of a site logo and we centered it to the middle.

Hero: Certainly, it plays the most important role on a landing page because this is the first thing that your users can see when they land on your page. It is also called ‘Above the Fold’ section on several pages. In this place, we should add the most important factors of a page like Title, sub-title and subscribe form.

Services: In this part, we will describe the key features or the main services that we provide.

Testimonial: This is the evidence showing that your customers are pleased with your services.

Portfolio: This section display several examples so that customers can know whether your services can adapt to their need or not.

Footer: Provide customers another call in order to inspire them to do as you desire. Your Privacy Policy and Terms of Use should be included in this section.

Modifying Each Block:

Checking out every single and making some necessary changes for your own.

There are several example changes: Change Photos, Change colors, Change backgrounds, Change title content.

Modifying Your Landing Page For Mobile:

Every block has 100% mobile responsive pre-designed. Moreover, you are also able to take a view or customize your landing page setting on mobile gadgets.

Previewing And Making Your Landing Page Public:

Before publishing your landing page, you should take a preview in order to make sure everything looks nice.

Click on the eye icon that is at the bottom left of the panel.

Then click on the green button ‘Publish’ to publish your landing page.

In conclusion

If you have any questions about this instruction, don’t hesitate to leave a comment below. We will try to answer your questions as soon as possible. Please take a look at our free Elementor WordPress themes here.

Image credit: docs.elementor

• Author
• Recent Posts

LT Digital Team (Content & Marketing)

Welcome to LT Digital Team. We make daily blogs for Joomla! and WordPress CMS, support customers and everyone who has issues with these CMSs and solve any issues with blog instruction posts, trusted by over 1.5 million readers worldwide.

Latest posts by LT Digital Team (Content & Marketing) (see all)

• How to place menu items in helix joomla 5 ? - December 14, 2024
• How to reduce the size of helix 2 layout ? - December 14, 2024
• What’s J4 starter template and how to use it - December 3, 2024