How to Use the Long Form Storybuilder Plugin for WordPress

Share this article

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.

Basic Setup

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.

image_1

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.
image_2

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.

image_3

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.

image_4

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.

image_5

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.

image_6

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.

image_7

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.

image_9

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.

image_8
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.

image_10

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.

image_11

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.

image_12

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.

image_13

Conclusion

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.

Ahmad AwaisAhmad Awais
View Author

Ahmad Awais is a Full Stack WordPress Developer, WP Core Contributor, Front-end Fanatic and a Designer by night. He loves to read and write about WordPress. Apart from that, he creates optimized but advanced workflows to produce cool pieces of Open Source software.

ChrisBlanding page pluginlanding pageslfsLFS pluginLong Form StorybuilderWordPressWordPress landing pages
Share this article
Read Next
Get the freshest news and resources for developers, designers and digital creators in your inbox each week