Looking to build a high-converting Elementor landing page without paying for premium tools? In this post, we’ll walk through the process using only the free version of Elementor and an email marketing service like MailerLite.
Companion Video
Video Resources
- Here’s a copy of the book cover image if you’d like to use it and follow along
- Here’s the page template that you can import into Elementor
Why Use Elementor for Landing Pages?
Elementor makes it easy to create visually compelling landing pages, even if you don’t have design or development experience. With a simple drag-and-drop interface and complete control over layout and spacing, Elementor is one of the best free tools for WordPress for conversion-focused page design.
What We’ll Be Building
We’ll recreate a minimal but effective Elementor landing page with:
- A centered logo
- A two-column layout featuring:
- A promotional book cover image
- An email signup form
- A clean, distraction-free design with no navigation links
Step 1: Set Up Your New Page in WordPress
- Go to Pages → Add New in your WordPress dashboard.
- Title the page (e.g., “Rocket Your Career”) and save as a draft.
- Click “Edit with Elementor.”
Remove Header and Footer
To create a blank canvas:
- Click the gear icon (Page Settings) in Elementor.
- Under Page Layout, select Elementor Canvas to remove site navigation.
🎯 Pro Tip: Removing navigation helps keep users focused on the page’s single goal—signing up.
Step 2: Design the Page Layout
Add the Logo
- Add a single-column container.
- Drag the Image widget and upload your logo.
- Adjust the image height (e.g., 100px) under Style → Height.
- Add spacing: Use the Advanced tab to set the top and bottom margins (e.g. 50px).
Set Background Color
- Go to Page Settings → Style.
- Select “Classic” as the background type.
- Paste your brand’s hex color code (e.g., light yellow) into the color picker, or use the provided controls to choose a color that you like.
Step 3: Add the Two-Column Content Area
- Add a new Flexbox container with two equal-width columns.
- In the left column, drag another Image widget and upload your book cover.
Step 4: Add Headings and Text
- In the right column, add an H1 heading with your main message (e.g., “Rocket Your Career”).
- Style it to suit your website or brand. In our case:
- Font: Oswald
- Size: 3.5em
- Color: Black
- Alignment: Center
- Add a subheading (e.g., “Get the Free Guide”) and style similarly.
Step 5: Embed Your Signup Form with MailerLite
Since the free Elementor doesn’t include form widgets, we’ll use MailerLite for our form.
Create a Form in MailerLite
- Log in to MailerLite → Forms → Embedded Forms.
- Click “Create Form” and customize:
- Colors and fonts to match your page
- Button text (e.g., “I’m Ready to Launch”)
- Optionally remove the name field to boost conversion. Simple forms convert at a higher rate.
Copy and Embed the Form
- Copy the HTML embed code from MailerLite.
- In Elementor, search for and drag in the HTML widget.
- Paste the code into the widget.
⚠️ Note: If you update the form in MailerLite later (e.g., removing the name field), you must replace the embed code in Elementor.
Step 6: (Optional) Set Up a Custom Success Page
You can set a custom “Thank You” page in MailerLite to track conversions. This allows for analytics tracking and better campaign measurement.
A custom “Thank You” page can also deliver a downloadable offering immediately.
Final Tips for Your Elementor Landing Page
- Keep it focused: No navigation links—one goal.
- Use consistent branding: Fonts, colors, and spacing should match your offer and brand.
- Test your form: Make sure submissions go through and trigger any automation you’ve set up.
Conclusion
You don’t need premium tools to build a professional Elementor landing page. Combining Elementor’s free features with a solid email service like MailerLite allows you to create a clean, effective lead magnet that works.
✅ Try It Now: Use this guide to create your own Elementor landing page and start growing your email list today.
