Nowadays, people care about their health more than in the past, so diet consultants have become more popular. As a result, owning websites in this industry has become a trend. Especially, with the help of WordPress and many useful and page builder plugins, creating a landing page for your fitness consultant website is no more a difficult task.
In this tutorial, I will show you how simple it is to create your own landing page for a weight loss consultant using Elementor. And more than just the specific elements, we also explain the psychology of why certain elements were put where they were.
First, take a look at the landing page – the one that I am going to make in this post:
You can view the complete landing page here.
Let’s get started with each element and how they come together.
Above the Fold Content
Let’s start with the Above the Fold Content of the landing page:
Choose a Layout
For this example, I used Elementor’s full-width page layout so that the original site’s header menus and footer will be displayed.
The layout is a standard two-column layout. When designing layouts for clients, I started with basic Elementor building blocks and then adjusted colors, buttons, and image to fit the style guides as necessary.
You’ll also note as far as the copy on the right goes – it is very personalized.
Create Call-to-action Section
And finally, there are multiple call-to-action sections above the fold in your landing page.
One of the challenges with Elementor is aligning buttons across the same row. Elementor doesn’t have a table layout per section, so I had to use an Inner Section with 3 columns and then adjust the size by hand. Also, I made the buttons have a size of large to ensure that buttons call attention to themselves.
One last thing is that the buttons should point to other sections of the page. The reason is that when a user clicks to find a certain section, he can scroll afterward and explore the page.
This is done by giving an anchor link starting with a pound such as #success-stories.
Then, you would want to go over to the section of the landing page where it should link to. Just click the section and give the section the same ID as the pound link:
Bulleted List
The next section on your landing page is the bulleted list. This is a great section to give an overview of why people should work with you. People need a reason to go to the next step to be assured of their decision. So, give them a reason on your landing page. The Why bulleted list is a great way to give an overview of the features – and then break them down one by one later on on the landing page.
Now with this bulleted list, I used this template to create it:
You can probably see a pattern here. Many elements that you’ll need can be created using Elementor building blocks. By doing this, you can save yourself a lot of time and start with a good basic style guide. Then, changing the color of a button or heading can then be done to match the client’s existing site.
Call to Actions
Call to actions on the landing page are really easy, and luckily Elementor has some default call to actions that you can click and insert easily. You can see the Call to Action blocks including the one I would recommend:
In my example, I used a template from a premium plugin. You can see what it looks like below. However, looking back, I would have used the call to action block above (it’s really the same thing):
Testimonial Blocks
Testimonials on a landing page are very powerful and here is an example of the testimonials I added. I took them from different parts of the website:
To achieve this, I used the Testimonial block as pictured below and simply added an image to the left column.
Count (Up) Timer
The next section of the landing page is the Count up timer which you can see in the video below:
I used this block from the ‘Stats’ group in Elementor blocks and adjusted it as necessary:
I changed the example number to kg/pw and changed the Title to Men.
I was able to communicate how much weight people could potentially lose in a count-up timer that takes the user’s attention and is memorable.
Contact Form
Finally, let’s talk about the contact form on your landing page to connect with the customers.
This may look like a straightforward two-column layout. I want to mention a couple of things in the left column.
Final Thoughts
As you can see, creating a landing page when you know the copy that you will use is very easy with Elementor. Moreover, you can make use of blocks to save yourself a lot of time. While many people focus on creating fancy layouts with Elementor, if you can create a powerful copy that focuses on a client’s needs, you can create a big impact.
As a result, you can help them achieve their goal of increasing their inquiries more effectively. However, if this task seems too hard for you, and you are not sure if you have enough time or experience to create the landing page that you want with Elementor, you can always consult a good web design company, such as PDMS, which can help you in creating a good foundation for your efforts
Bonus: If you have many products or run multiple campaigns, you may need to create multiple landing pages, which is quite time-consuming. To save your time, you should use a dynamic landing page, which is easily customizable. Here is the detailed tutorial to create this kind of landing page.
Author Bio
Kosta is a WordPress developer in Sydney, his company is Head Studios – WP Development and is an expert in delivering WordPress custom websites that are fast, stable, reliable but most importantly that actually make clients do what you need them to do – and that is taking action.