Hi, everyone!
My name is Robert from ThemeIsle.com and in this video, you're gonna see how to build
a product launch page on WordPress.
I'll show you a step-by-step guide going from a completely blank canvas to a finished
landing page.
Best of all, I'll do it using only free resources...
If that sounds like your kind of tutorial, keep watching.
Before jumping into the actual guide, I want to show you a quick look at our final result
after we build a product launch page with Elementor.
You can always improve on the final design with more elements and styling.
But that's just a basic look at what you can do with Elementor in well under an hour
of work.
Let's get started!
Before you start to build a product launch page on WordPress, your first step is to actually
install the Elementor plugin...
While the Pro version does offer several helpful features, I'm going to use the free version
in this video.
As for the layout, I'm going to use the free version of our Hestia WordPress theme,
but you can use whichever theme you prefer, though.
Just make sure it's one that allows a full-width template!
Templates allow you to change the basic "canvas" that you build your product launch page with.
For example, most WordPress pages include a sidebar.
That's good for a regular page…but not for a product launch page.
You want your landing page to be the only thing grabbing people's attention.
There are two ways you can go about this.
With a Full-width template, you can build a completely full-width landing page, but
your normal WordPress header and footer are still active...
...and, with a Blank canvas, you build your page from absolute zero.
Not even your WordPress header and footer appears.
Both methods are a viable route to build a product launch page with Elementor, but I
prefer just using a full-width template so that the navigation structure feels more cohesive
across the entire site.
That's what I'll be using in this video.
To select your own template, go to Pages → Add New
and choose from the drop-down in the Page Attributes box...
For this WordPress Product Launch Page, I will choose the Page Builder Full-Width template
and then I'll give it a name like Product Launch for example...
Remember that you can change the permalink to something different, short and SEO friendly
like a keyword, your product name for example... and then click Save Draft to apply the new
template (it's important that you do this before
you start editing).
Then, hit the big Edit With Elementor button.
You should see the blank canvas from which you'll build your launch page.
Ok, I'm going to show you how to build a product launch page using Elementor from the ground up.
But you definitely don't have to start from a blank canvas.
If you'd rather use one of Elementor's professionally designed templates, you can
access them by clicking the Folder icon in the very bottom left and selecting Templates
Library or just simply click on the Add Template button.
Many of the templates require Elementor Pro, but you can still find plenty that are available
in the free version and you can also import templates like these in your own Elementor
library after downloading the ready-made About Our Business and Contact Us templates...
In addition to benefiting from professional design, these templates can also save you
a ton of time.
If you see one that you like, I definitely recommend using it.
Otherwise, let's forge ahead with our blank canvas.
Before you get started, it helps to know where you're going.
That is, you want to have a basic idea for the structure of your launch page before you
start dragging over Elementor elements.
For example, here's a rough sketch of what a basic launch page looks like...
If you look at the sketch, you'll see that there are roughly four sections.
The main headline section...
The "Feature list" section...
An about section... and n email opt-in section...
Elementor lets you create individual Sections that you can add your elements to.
For this example launch page, we'll use four different sections for each of the elements above.
Before I start diving into the landing page example, I think it will be helpful to give
you a quick tour of the actual Elementor interface.
The interface is comprised of two core elements:
The sidebar is where you'll add new elements and edit existing ones...
... and the visual preview which is where you can preview your final design exactly
as your end users will see it.
"Elements" are basically design blocks.
For example, a button is one element.
An image is another.
And so on...
To actually build a product launch page with Elementor, the basic process goes like this...
You drag over an element from the sidebar...
Then, you customize the element in the same sidebar interface...
Notice that the sidebar now has three different tabs.
Content...
Style... and advanced
where Content is the most important tab.
Here, you customize the basic content and function of the element...
In the Style tab, you can change colors and typography and in the
Advanced tab you can add custom margins and padding...
as well as other advanced settings.
Custom margins are especially helpful for changing your elements' positioning.
Alright, now that you know the basics, let's build a product launch page with Elementor!
To create the headline section, first click on Add New Section:
Then, select your column setup.
I'll use this two-column option for this example, but your choice depends on your desired design.
Let's make the larger right column an image and use text in the left column.
To add an image to the right column, just drag over the Image element:
Then, select your image in the sidebar interface:
To add text to the left column, you can use a combination of the Heading and Text Editor
options:
To change the alignment and positioning of your elements, you can always go to the Advanced
tab and manually change margins and padding:
I used custom top margins for both headings in the example.
If it fits your goals, you can also add a button by dragging over the Button element:
And that finishes up our basic heading section!
Next, on our list, we need to create a feature list section that tells people the key features
of our product.
Thankfully, Elementor includes an element that's absolutely perfect for this.
To use it, let's first create a three column section to house our three features:
From there, we can use the Icon Box element under the General Elements section:
Put an icon box in each column.
Then, all you need to do is customize the text and icon for each feature:
And that wraps up our feature list!
Easy peasy.
The Image Box element is also another good option for this section if you'd like to
use your own images instead of icons.
And that wraps up our feature list! Easy peasy.
Next, up, let's build our "About" section.
This one is pretty flexible as far as design goes.
If you're not sure where to start, a good option is an offset two-column design:
On the left side, let's put an image by dragging over the Image element.
Then, we can use Heading and Text Editor elements to write some basic about text.
And we're almost done with our launch page!
Building an email opt-in section is a little tricky with the free version of Elementor
because it doesn't include a dedicated form element.
If you purchase the Pro version, you can create all types of forms just by dragging over the
Form element.
But to create an opt-in form with the free version of Elementor, we'll need to get
creative with a third-party plugin.
I'll use the free OptinEngine plugin in this video, but you can use any plugin that
lets you insert opt-in forms with a shortcode.
First, you'll need to create a form in the OptinEngine interface:
Then, create a new section in Elementor and add the Shortcode element:
Paste the shortcode of your OptinEngine form into the box:
You won't see your form in Elementor's interface quite yet.
But once you publish your page, you will see the form on the front-end.
And that's pretty much it for our basic product launch page!
In the end, here's another look at our final product:
the colors could certainly be enhanced. I'm not actually a professional designer!.
But all in all, we were able to build a product launch page with Elementor without looking
at a single line of code.
And that's pretty awesome!
If you want to make it your main page, all you need to do is set up a static homepage
after publishing it...
Remember, to create an exact duplicate of the WordPress Product Launch Page in this
video, all you need is the free version of Elementor,
our free Hestia WordPress theme,
and the free OptinEngine plugin, or any other shortcode-based opt-in plugin.
Không có nhận xét nào:
Đăng nhận xét