wordpress插件_如何使用适用于WordPress的长格式Storybuilder插件

亦凉 2022-12-03 09:51 207阅读 0赞

wordpress插件

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.

在我以前的文章“ [使用Long Form Storybuilder在WordPress中轻松登陆页面][Easy Landing Pages in WordPress with Long Form Storybuilder] ”中，我强调了一些有关登陆页面的重要事实，这是营销研究和分析的最佳结果之一。 虽然着陆页带来了非常令人印象深刻的销售线索和转换，但是建立一个销售线索并不总是那么容易，尤其是如果您不知道如何编码的话。 为此，我向您介绍了一个方便的解决方案，该解决方案是WordPress的Long Form Storybuilder(LFS)插件。 在本文中，我将向您展示如何单击几下即可创建直观的登录页面。

## 基本设定 **(**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
    
    本地计算机或Web服务器上的WordPress网站
 *  The [Long Form Storybuilder][] plugin installed & activated
    
    已安装并激活[Long Form Storybuilder][]插件

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.

完成后，转到WordPress仪表板，然后通过**Pages> Add New**添加一个新页面。 给它一个合适的标题并保存。 接下来，通过单击右上角metabox中的**Enable Long Form Content**复选框，允许LFS插件包含在您的项目中。

![image\_1][image_1]

The above screenshot shows that I’ve created a page and enabled the checkbox. Now click **Save Draft** button again.

上面的屏幕快照显示我已经创建了一个页面并启用了该复选框。 现在，再次单击“ **保存草稿”**按钮。

![image\_2][image_2]

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.

此时，您会收到一条消息，通知您已启用“长格式内容”，并且可以使用“长格式Storybuilder”插件编辑此页面。 单击**编辑我的长格式内容页面**按钮。

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][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.

在上一篇文章中，我提到了可以通过Long Form Storybuilder插件添加的部分的完整列表。 转到**长格式页面部分>添加部分，**然后为目标网页选择一个部分。

![image\_4][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.

现在，我已经解释了Long Form Storybuilder插件的基本体系结构，让我们用它构建一个登录页面。

I jumped directly to the **Page Options** panel and selected Black as my Primary Color and White as my Secondary Color.

我直接跳到“ **页面选项”**面板，选择“黑色”作为我的主要颜色，选择“白色”作为我的次要颜色。

![image\_5][image_5]

Next is the exciting part of adding sections to the landing page.

接下来是将部分添加到目标页面的令人兴奋的部分。

### 步骤1：添加导航栏 **(**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.

我在目标网页中添加的第一部分是导航栏。 我将其命名为`My_Nav_Menu`并通过添加徽标图像和菜单类型来配置其设置。

![image\_6][image_6]

### 步骤2：标题 **(**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][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.

您可以参考上面添加了本节并将其命名为`My_Header_Menu`屏幕截图。 首先，我添加了一个特色图片。 然后是“主要标题”字段，您可以在其中添加产品名称。

### 步骤3：区段标题 **(**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][image_9]

### 步骤4：两栏内容 **(**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.

然后，我在着陆页中为我的产品添加了一些功能。 您必须已经注意到，功能通常以两列或三列布局显示。 您可以通过Long Form Storybuilder插件轻松添加这些插件。 现在，我要添加一个两列的内容部分。

![image\_8][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.

本部分的设置非常简单，只需添加要显示的文本即可。 我在第一列和第二列中都张贴了一些虚拟文本。

### 步骤5：标注部分 **(**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][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][image_11]

### 步骤6：发布 **(**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][image_12]

### 步骤7：预览结果 **(**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.

去**页面** 。 查找您使用LFS编辑的页面，然后单击“ **查看页面”**以查看您的登录页面。 因此，这是我刚创建的目标网页的结果。

![image\_13][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.

您可以重复这些部分，添加更多部分，然后根据需要对其进行重新排序。 我相信，在不到5至10分钟的时间内，您将使用此插件构建很酷的目标网页。 您可以使用[PicJumbo][]查找具有CC0许可证的免费高分辨率图像。

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.

使用Long Form Storybuilder插件，构建登录页面变得非常容易和简单。 现在，您几乎每隔一天就能推出一个新的着陆页。 那么，您对此插件有何看法？ 我希望收到您的来信。

> 翻译自: [https://www.sitepoint.com/how-to-use-the-long-form-storybuilder-plugin-for-wordpress/][https_www.sitepoint.com_how-to-use-the-long-form-storybuilder-plugin-for-wordpress]

wordpress插件

[Easy Landing Pages in WordPress with Long Form Storybuilder]: https://www.sitepoint.com/easy-landing-pages-in-wordpress-with-long-form-storybuilder/
[Long Form Storybuilder]: https://wordpress.org/plugins/press75-long-form-storybuilder/
[image_1]: /images/20221123/2cd53787d3524c02a1e5488e2e830430.png
[image_2]: /images/20221123/813a871effc2489caae78e850d71804f.png
[image_3]: /images/20221123/0ebf964252cd46cfa752f7a94b3c9241.png
[image_4]: /images/20221123/b692e16951b5411c91356daf6499c33b.png
[image_5]: /images/20221123/7f6bbc1a43a6431baf35529aeffe7aaa.png
[image_6]: /images/20221123/10e73819e87845e9bc0e1f02a55a72e9.png
[image_7]: /images/20221123/d5f6a4130d8a4289ad72bfb51a3a15e2.png
[image_9]: /images/20221123/51f5041afb33433c9d5cd0ee4e8d7e9e.png
[image_8]: /images/20221123/cc6b5a31eda14d1492f1656b843abb0c.png
[image_10]: /images/20221123/354bb864c6934f49bf5c30325353f617.png
[image_11]: /images/20221123/d0444f0225bd429abf4609fb0402f1ac.png
[image_12]: /images/20221123/666e6819c38b4c65b0617680e670e6fd.png
[image_13]: /images/20221123/1e1b3acd3059498185607203c2b94984.png
[PicJumbo]: https://picjumbo.com/
[https_www.sitepoint.com_how-to-use-the-long-form-storybuilder-plugin-for-wordpress]: https://www.sitepoint.com/how-to-use-the-long-form-storybuilder-plugin-for-wordpress/