How to Build a Product Launch Page With Elementor (For Free) | Cheema Developers Blog
Attempting to construct a touchdown web page on WordPress in your product launch however undecided the place to start out? By no means worry! It’s straightforward to construct a product launch web page with Elementor. And on this information, I’m going to point out you precisely how.
I’ll present you a step-by-step information going from a very clean canvas to a completed touchdown web page. Better of all, I’ll do it utilizing solely free plugins. If that seems like your type of tutorial, be part of me and let’s get began.
Why do you have to construct a product launch web page with Elementor?
Elementor is a superb software to construct a product launch web page for just a few causes:
First, it’s a drag and drag visual page builder, which suggests you’ll be able to design sophisticated pages without having to know any code. You too can design your pages in the identical view that your guests will see, which is useful to visualise how the completely different parts in your web page work collectively.
Past that, Elementor is a superb choice as a result of:
Mainly, whilst you nonetheless will want some design imaginative and prescient and a common data of the elements that go into a landing page, Elementor can deal with the remaining and take away the problem of needing to know code from the equation.
What you’ll be constructing on this information
Earlier than leaping into the precise information, I need to present you a fast take a look at our remaining outcome after we construct a product launch web page with Elementor:
You may all the time enhance on the ultimate design with extra parts and styling (I’m not nice in the case of shade palettes, for instance). However that’s only a primary take a look at what you are able to do with Elementor in properly beneath an hour of labor.
Let’s get began!
Step 0: Set up the plugins
Earlier than you begin to construct a product launch web page with Elementor, your first step is to truly, properly, set up the free model of Elementor. Whereas the Professional model does supply a number of useful options and pre-built Elementor Pro templates, I’m going to make use of the free model for this publish as a result of I need to make this information as accessible as potential.
As for the theme, I’m going to make use of the free version of our Hestia theme. You should utilize whichever theme you favor, although. Simply make sure that it’s one that enables a full-width template!
Step 1: Choose the precise template in your launch web page
Templates assist you to change the essential “canvas” that you simply construct your product launch web page with.
For instance, most WordPress pages embody a sidebar. That’s good for normal pages…however not for a product launch web page.
You need your touchdown web page to be the one factor grabbing folks’s consideration.
There are two methods you’ll be able to go about this:
- Full-width template – you’ll be able to construct a very full-width touchdown web page, however your regular WordPress header and footer are nonetheless energetic.
- Clean canvas – you construct your web page from absolute zero. Not even your WordPress header seems.
Each strategies are a viable route to construct a product launch web page with Elementor, however I want simply utilizing a full-width template in order that the navigation structure feels extra cohesive throughout your entire web site.
That’s what I’ll be utilizing for this information.
To pick out your personal template, go to Pages → Add New and select from the drop-down within the Web page Attributes field:
In case your theme doesn’t supply a full-width template, you’ll be able to both use the clean Elementor Canvas template or select a special theme. We have now an inventory of themes that work well with Elementor.
When you select your template, click on Save Draft to use the brand new template (it’s vital that you simply do that earlier than you begin enhancing). Then, hit the massive Edit With Elementor button.
You need to see the clean canvas from which you’ll construct your launch web page:
Step 2: Select your start line
Okay, I’m going to point out you tips on how to construct a product launch web page utilizing Elementor from the bottom up. However you undoubtedly don’t have to start out from a clean canvas.
Should you’d moderately use one among Elementor’s professionally designed templates, you’ll be able to entry them by clicking the Folder icon within the very backside left and deciding on Templates Library:
Lots of the templates require Elementor Pro, however you’ll be able to nonetheless discover loads which can be accessible within the free model:
Along with benefiting from skilled design, these templates also can prevent a ton of time.
Should you see one that you simply like, I undoubtedly advocate utilizing it. In any other case, let’s forge forward with our clean canvas.
Step 3: Constructing your launch web page construction
Earlier than you get began, it helps to know the place you’re going. That’s, you need to have a primary concept for the construction of your launch web page earlier than you begin dragging over Elementor parts.
For instance, right here’s Karol’s tough sketch of what a primary launch web page appears to be like like:
Should you take a look at the sketch, you’ll see that there are roughly 4 sections:
- Important headline part
- The “Characteristic record” part
- About part
- Electronic mail opt-in part
Elementor enables you to create particular person Sections you can add your parts to. For this instance launch web page, we’ll use 4 completely different sections for every of the weather above.
A fast tour of the Elementor interface
Earlier than I begin diving into the touchdown web page instance, I feel will probably be useful to present you a fast tour of the particular Elementor interface.
The interface is comprised of two core parts:
- Sidebar – that is the place you’ll add new parts and edit current ones
- Visible preview – that is the place you’ll be able to preview your remaining design precisely as your finish customers will see it
“Parts” are principally design blocks. For instance, a button is one ingredient. A picture is one other. And so forth.
To truly construct a product launch web page with Elementor, the essential course of goes like this.
You drag over a component from the sidebar:
Then, you customise the ingredient in the identical sidebar interface:
Discover that the sidebar now has three completely different tabs:
- Content material – a very powerful tab – the place you customise the essential content material and performance of the ingredient.
- Model – that is the place you’ll be able to change colours and typography
- Superior – that is the place you’ll be able to add customized margins and padding, in addition to different superior settings. Customized margins are particularly useful for altering your parts’ positioning.
Alright, now that you realize the fundamentals, let’s construct a product launch web page with Elementor!
Constructing the headline part
To create the headline part, first click on on Add New Part:
Then, choose your column setup. I’ll use this two-column choice for this instance, however your selection relies on your required design:
Let’s make the bigger proper column a picture and use textual content within the left column.
So as to add a picture to the precise column, simply drag over the Picture ingredient:
Then, choose your picture within the sidebar interface:
So as to add textual content to the left column, you should utilize a mixture of the Heading and Textual content Editor choices:
To vary the alignment and positioning of your parts, you’ll be able to all the time go to the Superior tab and manually change margins and padding:
I used customized prime margins for each headings within the instance.
If it matches your objectives, you may as well add a button by dragging over the Button ingredient:
And that winds up our primary heading part!
Creating the function record part
Subsequent on our record, we have to create a function record part that tells folks the important thing options of our product.
Fortunately, Elementor consists of a component that’s completely excellent for this.
To make use of it, let’s first create a 3 column part to accommodate our three options:
From there, we are able to use the Icon Field ingredient beneath the Basic Parts part:
Put an icon field in every column. Then, all you could do is customise the textual content and icon for every function:
And that wraps up our function record! Simple peasy.
The Picture Field ingredient can also be one other good choice for this part for those who’d like to make use of your personal photos as an alternative of icons.
Creating the “About” part
Subsequent up, let’s construct our “About” part. This one is fairly versatile so far as design goes.
Should you’re undecided the place to start out, a very good choice is an offset two-column design:
On the left facet, let’s put a picture by dragging over the Picture ingredient. Then, we are able to use Heading and Textual content Editor parts to jot down some primary about textual content:
And we’re virtually completed with our launch web page!
Creating the e-mail opt-in part
Constructing an e-mail opt-in part is somewhat difficult with the free model of Elementor as a result of it doesn’t embody a devoted kind ingredient. If you buy the Professional model, you’ll be able to create all kinds of kinds simply by dragging over the Kind ingredient.
However to create an opt-in kind with the free model of Elementor, we’ll must get artistic with a third-party plugin. I’ll use the free OptinEngine plugin for this information, however you should utilize any plugin that allows you to insert opt-in kinds with a shortcode.
First, you’ll must create a kind within the OptinEngine interface:
Then, create a brand new part in Elementor and add the Shortcode ingredient:
Paste the shortcode in your OptinEngine kind into the field:
You received’t see your kind in Elementor’s interface fairly but. However when you publish your web page, you will note the shape on the front-end.
And that’s just about it for our primary product launch web page!
Placing all of it collectively
Ultimately, right here’s one other take a look at our remaining product:
Once more, the colours might definitely be enhanced (I’m not truly knowledgeable designer!). However all in all, we have been in a position to construct a product launch web page with Elementor with out a single line of code.
And that’s fairly superior!
If you wish to make it your major web page, all you could do is set up a static homepage.
Bear in mind, to create a precise duplicate of the instance touchdown web page, all you want is:
I hope you loved the tutorial and please let me know when you’ve got any questions!
5 Important Tricks to Velocity Up
Your WordPress Website
Scale back your loading time by even 50-80%
simply by following easy ideas.
#Construct #Product #Launch #Web page #Elementor #Free