In my previous article “Easy Landing Pages in WordPress with Long Form Storybuilder“, I highlighted some of the important facts about landing pages as one of the best outcomes of marketing research and analysis. While landing pages bring pretty impressive leads and conversions, building one is not always easy, especially if you don’t know how to code. For this purpose, I introduced you to a handy solution which is the Long Form Storybuilder (LFS) plugin for WordPress. In this article, I’ll show you how to create intuitive landing pages in just a few clicks.
Let’s get you all setup and running. At this point I’m assuming that you have somewhat of the following setup:
- A WordPress website on a local machine or a web server
- The Long Form Storybuilder plugin installed & activated
Once that’s done, go to the WordPress dashboard and add a new page via Pages > Add New. Give it a suitable title and save it. Next, allow the LFS plugin to get included in your project by clicking Enable Long Form Content checkbox in the top right metabox.
The above screenshot shows that I’ve created a page and enabled the checkbox. Now click Save Draft button again.
At this point, you’re notified with a message that the Long Format Content is enabled and you can edit this page with the Long Form Storybuilder plugin. Click Edit my Long Format Content Page button.
At this stage, the Theme Customizer opens up and there you can find two new panels added by this plugin. The new panels are
- Long Format Page Sections
- Page Options
Page Options helps to set the Primary & Secondary Colors of the landing page while the Long Format Page Sections can be used to add multiple sections of the landing page.
In my previous article, I mentioned the entire list of sections which can be added with the Long Form Storybuilder plugin. Go to Long Format Page Sections > Add a Section and choose a section for your landing page.
Now within every section there are certain settings to be configured before it becomes a part of the landing page.
Building a Landing Page
Now that I have explained the basic architecture of the Long Form Storybuilder plugin, let’s build a landing page with it.
I jumped directly to the Page Options panel and selected Black as my Primary Color and White as my Secondary Color.
Next is the exciting part of adding sections to the landing page.
Step 1: Adding a Navigation Bar
First section which I added in my landing page is the navigation bar. I named it as
My_Nav_Menu and configured its settings by adding the logo image and a menu type.
Step 2: A Header
Right after the navigation bar, the next most important component in a landing page is the introductory block for your product. This normally requires a featured image along with the center aligned heading.
You can refer to the above screenshot where I’ve added this section and named it as
My_Header_Menu. First of all, I added a featured image. Then there is the Main Heading field where you can add the name of your product.
Step 3: Section Heading
Next I added a Section Heading to the landing page. This is just a normal heading which indicates the beginning of a new section. You can check out the details in the screenshot below.
Step 4: Two Column Content
Then I added some of the features for my product in the landing page. You must have noticed that features are normally displayed in a two or three column layout. One can easily add those via Long Form Storybuilder plugin. For now, I’m adding a two-column content section.
The settings of this section are very simple all you have to do is add the text which you want to display. I have posted some dummy text both in the First and the Second Column.
Step 5: A Callout Section
In the end, I added a Callout Section which will encourage people to buy the product in question. In this case, I am asking end-users to get themselves registered. You, on the other hand, can send them to a checkout page or what not.
I have added five sections in this particular landing page. In the image displayed below you can find a button called Reorder, which you can use to change the order of your sections.
Step 6: Publishing
Once you are done click the Save & Publish button right at the top. Note one important thing that whichever section you create, you get to see a live preview of it instantly which is quite an appealing feature.
Step 7: Previewing the Result
Go the Pages. Look for the page which you’ve edited with LFS and click View Page to view your landing page. So, here is the result of my landing page which I just created.
You can repeat these sections, add more sections, and reorder them as per your desire. I am sure, in no more than 5 – 10 minutes you’ll be building cool landing pages with this plugin. You can use PicJumbo to find free high resolution images with CC0 license.
Building a landing page has become pretty easy and simple with the Long Form Storybuilder plugin. Now you can roll out a new landing page almost every other day. So, what are your views about this plugin? I’d love to hear from you.
Jump Start Git, 2nd Edition
Visual Studio Code: End-to-End Editing and Debugging Tools for Web Developers
Form Design Patterns