如何使用插件或者自定义页面创建一个WordPress着陆页

着陆页可以通过鼓励访问者采取所需的行动来提高您的WordPress网站的转化率,例如订阅新闻通讯、购买产品或注册网站。虽然着陆页的平均转化率为9.7%,但添加图片或社交等元素可能会进一步提高转化率。因此,创建一个好的目标网页对于促进您的业务至关重要。在本文中,我们将向您展示如何在WordPress中创建着陆页并讨论何时使用的三种简单有

landing-page-designs-1024x546.jpgo_

着陆页可以通过鼓励访问者采取所需的行动来提高您的WordPress网站的转化率,例如订阅新闻通讯、购买产品或注册网站。

虽然着陆页的平均转化率为9.7%,但添加图片或社交等元素可能会进一步提高转化率。因此,创建一个好的目标网页对于促进您的业务至关重要。

在本文中,我们将向您展示如何在WordPress中创建着陆页并讨论何时使用的三种简单有效的方法。

  • 使用插件创建WordPress着陆页
    • 1. 安装插件
    • 2. 添加一个新的着陆页
    • 3. 选择和自定义着陆页模板
    • 4. 与第三方工具集成
    • 5. 发布您的WordPress着陆页
  • 使用WordPress主题创建着陆页
    • 1. 添加新页面
    • 2. 将着陆页设置为静态主页
    • 3. 使用WordPress编辑器自定义着陆页
    • 4. 点击发布
  • 手动创建着陆页
    • 1. 创建一个子主题
    • 2. 修改style.css文件
    • 3. 创建functions.php文件
    • 4. 激活子主题
    • 5. 建立一个新的自定义页面
    • 6. 使用CSS自定义着陆页
  • 何时使用着陆页

着陆页是指为营销目的而设计的网页,例如介绍新产品。它可以是链接到网站或其一部分的独立页面。

幸运的是,WordPress网站提供了广泛的功能,可以轻松地为您的企业构建网站和着陆页。

创建着陆页的最佳方法之一是使用插件。使用这种方法,即使是初学者也可以创建一个专业且引人注目的着陆页,因为许多WordPress插件都提供了拖放构建器和预制模板。

根据我们的专家的选择,以下是可用的最佳WordPress着陆页插件列表:

  • Elementor?– 一个强大的构建器插件,具有令人惊叹的动画效果。
  • Divi?–最好的WordPress页面构建器之一,具有直观的可视化编辑器。
  • Beaver Builder – 一个直观的着陆页构建器插件,适用于大多数WordPress主题。
  • SeedProd?–最好的WordPress插件之一,具有许多设计模板选项、用户友好的界面和拖放页面构建器。

在本教程中,我们将使用SeedProd插件为您的WordPress网站创建一个高转化率的着陆页。

首先,您需要登录您的WordPress仪表盘,转到插件->?安装插件,然后使用搜索框找到SeedProd插件。然后,在您的WordPress网站上安装并激活该插件。

The-plugins-menu-on-your-WordPress-dashboard-1-1024x418.webp.jpgo_

SeedProd是一个免费增值插件——您可以从每年39.50美元起购买它的高级版本。要进行设置,您需要输入SeedProd帐户中的许可证密钥。

激活插件后,您将被重定向到SeedProd着陆页仪表盘。在页面顶部,将有四个着陆页选项。

SeedProd-dashboard-in-WordPress-that-offers-various-types-of-landing-pages-including-the-coming-soon-page-1-1024x423.webp.jpgo_

要添加新的着陆页,请单击底部的Create New Landing Page

The-SeedProd-dashboard-with-the-Create-New-Landing-Page-button-highlighted-1-1024x422.webp.jpgo_

添加新的着陆页后,您需要为其选择一个设计模板。SeedProd提供了许多适用于不同类型活动的着陆页模板。

或者,通过单击空白模板从头开始创建着陆页。

The-pre-made-template-options-in-SeedProd-1-1024x450.webp.jpgo_

选择模板后,输入页面名称和URL。

提示:在页面URL中使用焦点关键字来提高您在搜索引擎上的可见性并为您的WordPress网站获得更多流量。

The-page-details-information-where-you-need-to-enter-your-page-name-and-its-URL-1-1024x474.webp.jpgo_

完成详细信息编辑后,选择保存并开始编辑页面以自定义您的第一个着陆页。

使用左侧的区块菜单,您可以添加或编辑文本、图像和视频等各种元素。为此,只需单击所需的元素。

The-Design-tab-in-SeedProd-that-allows-you-to-customize-the-pre-made-template-using-blocks-1-1024x495.webp.jpgo_

更改背景颜色、图像和对齐方式,使您的目标网页与您的品牌相匹配。或者,选择左下角的全局设置。

联系表单区块可以与WPForms插件集成,使您能够使用其附加功能将新创建的WordPress表单更改为自定义表单着陆页。

如果要复制区块,请单击鼠标悬停时出现的文件图标。还有其他用于删除、移动和保存区块的图标来简化您的设计过程。

The-navigation-menu-to-duplicate-a-block-for-your-landing-page-in-SeedProd-1-1024x494.webp.jpgo_

由于SeedProd还与WooCommerce集成,您可以为电子商务商店创建着陆页。合并其块,例如添加到购物车按钮、产品网格和销售产品,将帮助您制作一个引人入胜的页面。

例如,您可以通过为您的在线商店添加“立即购买”按钮和特价产品来创建交互式产品着陆页。

The-WooCommerce-blocks-in-SeedProd-that-enable-you-to-create-an-interactive-landing-page-for-your-eCommerce-store-1-1024x449.webp.jpgo_

此外,SeedProd的“Sections”菜单为着陆页设计提供了许多类别选项,包括标题、Hero、号召性用语和常见问题解答。

The-sections-menu-where-you-can-find-many-design-categories-such-as-the-header-hero-and-call-to-action-for-your-landing-page-1-1024x495.webp.jpgo_

完成着陆页设计后,点击右上角的保存按钮。

许多企业使用各种工具来帮助他们获得更多客户并增加收入。

使用SeedProd,您的着陆页可以与流行的营销工具连接,以提高您的活动绩效。以下是我们对SeedProd第三方工具的主要建议:

  • MailChimp?– 最受欢迎的电子邮件营销服务之一。它提供了自动回复功能。
  • Constant Contact?– 一种电子邮件营销工具,提供数百个电子邮件模板和拖放构建器。
  • Monsterinsights – 最受欢迎的Google Analytics(分析)工具,可提供对您网站性能的洞察。
  • Zapier – 一种自动化工具,与500多项服务集成,用于从注册表单中收集电子邮件。

要将您的WordPress网站的着陆页与第三方工具连接,请单击“Connect”选项卡并选择您想要的服务。

The-Connect-tab-in-SeedProd-that-allows-you-to-integrate-your-landing-page-with-email-marketing-services-1-1024x483.webp.jpgo_

例如,将您的着陆页与电子邮件营销服务连接起来,会自动将他们在您的着陆页上输入的网站访问者的联系方式添加到您的电子邮件列表中。

编辑页面模板并设置第三方工具后,是时候发布您的WordPress着陆页了。

为此,请返回“Design”选项卡,单击Save”按钮旁边的下拉箭头,然后按“Publish” 。

The-publish-button-that-shows-up-when-youre-clicking-on-the-dropdown-arrow-next-to-the-save-button-1-1024x498.webp.jpgo_

现在,选择See Live Page按钮以查看结果。

如需进一步自定义,您可以通过“Page Settings”选项卡配置您的常规页面、SEO和分析设置。

The-page-settings-tab-where-you-can-modify-your-page-SEO-and-analytics-1-1024x496.webp.jpgo_

例如,您可以将任意数量的着陆页链接到您的自定义域名,而不是使用多个WordPress站点。为此,请单击Custom Domain菜单,然后输入您的域名。请注意,此功能仅适用于SeedProd高级版本。

除了使用插件之外,创建着陆页的另一种方法是安装WordPress主题。这样做可以让您自定义WordPress着陆页的布局和设计,而无需更改其主题。

但是,并非所有WordPress主题都提供着陆页模板。

  • Astra – 提供150多个预制模板,这些模板与WooCommerce和Elementor等流行工具完全集成。
  • Neve – 提供与Gutenberg编辑器和WooCommerce兼容的多用途主题。
  • Portum Material – 带有全角滑块、CTA用语按钮和动画功能,可让您的着陆页更具吸引力。

现在,让我们逐步了解如何在WordPress中创建带有主题的着陆页。

按照以下步骤添加新的WordPress页面:

  1. 从您的WordPress仪表盘添加新主题。
  2. 单击外观->主题->安装主题
  3. 选择并激活您的WordPress主题。在本教程中,我们将使用Neve。

The-themes-menu-of-the-WordPress-dashboard-used-to-add-a-new-theme-to-your-site-1-1024x450.webp.jpgo_

  1. 设置主题后,转到页面?->?新建页面以创建着陆页。或者,从页面顶部的+ 按钮?->页面添加新页面。

The-pages-menu-on-the-WordPress-dashboard-where-you-can-add-a-new-page-to-your-website-1024x431.webp.jpgo_

  1. 现在,您应该看到一个空白页。为您的自定义着陆页命名。
  2. 从侧边栏的模板菜单中选择Page Builder Full Width (Neve) 。

The-appearance-of-a-new-page-that-allows-you-to-select-your-template-page-on-the-sidebar-menu-1-1024x511.webp.jpgo_

之后,您需要将新页面设置为静态主页。请记住,这与您的常规主页不同——静态页面将确保访问者在点击您的网站时登陆它。

转到设置->阅读,然后从主页下拉菜单中选择您为着陆页创建的页面名称。然后,单击保存更改

The-Reading-Settings-menu-in-WordPress-that-can-be-used-to-change-your-page-into-a-static-page-1-1024x524.webp.jpgo_

保存后,通过转到外观->自定义开始自定义着陆页主题。您将找到用于编辑页面元素的选项,例如布局、标题、按钮、颜色和背景。

除了修改主题外,您还可以使用WordPress Gutenberg编辑器自定义着陆页。

请注意,此区块编辑器带有WordPress 5.0及更高版本。如果您使用旧版本的WordPress,则必须安装Gutenberg插件。

要自定义您的页面,请单击+ 框以查看所有可用区块。

在搜索框中找到要使用的区块,然后单击它以添加它。

The-location-of-the-Search-option-in-the-WordPress-Gutenberg-editor-1-1024x511.webp.jpgo_

添加区块后,您可以通过侧边栏的“区块”选项卡或单击其上方的三个垂直点对其进行编辑。

The-three-dots-above-the-block-that-access-the-editor-tools-in-the-Gutenberg-editor-1-1024x455.webp.jpgo_

例如,要将您的产品及其描述添加到您的着陆页,请使用具有两列布局的媒体和文本块。

为此,只需单击添加区块->媒体和文本->上传。从您的计算机或WordPress媒体库中选择一个图像。

The-Media-Text-block-where-you-can-add-an-image-with-a-description-1-1024x485.webp.jpgo_

此外,您可以使用社交图标区块添加指向社交媒体页面的链接。这样做有助于提高您的品牌知名度。

一旦您对结果感到满意,请使用“Preview”按钮查看您的着陆页,以确保一切正常。

最后,点击右上角的Publish按钮。

The-publish-button-that-can-be-found-at-the-top-right-corner-of-your-WordPress-page-1-1024x511.webp.jpgo_

如何在WordPress中创建着陆页的最后一种方法是使用页面模板。请注意,您需要一些编码技能才能从头开始构建自定义着陆页。

当您需要更多的设计灵活性和自定义选项时,我们建议您使用手动方法。例如,为专用域创建着陆页是完美的。

在本分步指南中,我们将向您展示如何使用现有的WordPress主题构建自定义着陆页模板。

创建子主题对于创建自定义WordPress页面模板至关重要,因为它允许您在不破坏其核心功能的情况下对其进行自定义。

对于这种方法,我们将创建一个子主题。请记住,该过程需要一些HTML、CSS和PHP知识。

首先,转到宝塔面板 ->文件。

然后,导航到网站根目录?->?wp-content?->themes,单击右上角的新建文件夹,然后为您的子主题输入名称。

The-themes-folder-in-the-file-manager-where-you-can-add-new-folder-to-create-a-child-theme-1-1024x641.webp.jpgo_

或者,通过像FileZilla这样的FTP客户端连接到您的站点,并在您的wp-content/themes目录中创建一个新文件夹。

接下来,您需要创建一个新的style.css文件,该文件将成为子主题文件夹中的新样式表。向其中添加以下代码:

此代码包含有关子主题的基本信息,包括其名称和父主题。根据您选择的父主题修改style.css文件后,单击SaveClose

下一步是将父主题和子主题的样式表排入队列。为此,请在子主题的文件夹中创建一个名为functions.php的新文件。

从打开的PHP标记开始,然后添加函数以将父主题的样式表排入队列。例如,您可以插入以下代码:

您现在有一个新的正常运行的子主题,它将在您的父主题之后加载。

您的子主题现在可以使用了,所以转到您的 WordPress 管理区域并单击外观->主题->启用。

The-WordPress-themes-menu-where-you-can-find-your-child-theme-and-activate-it-1-1024x457.webp.jpgo_

激活新主题后,您可以为您的着陆页构建一个具有独特布局的自定义WordPress页面模板。

首先在您的子主题文件夹中创建一个名为landing-page.php的新文件,并向其中添加以下代码:

根据需要更改模板名称。然后,单击保存并关闭

如果您在WordPress网站上编辑或添加页面,您将看到新的自定义模板可供从侧边栏的菜单中选择。但是,它仍然是空白的,因为我们还没有添加任何内容。

The-template-option-in-WordPress-that-will-display-your-custom-page-1-1024x408.webp.jpgo_

创建着陆页模板后,是时候对其进行自定义了。

首先,复制以get_header()开头的现有代码;父主题的page.php文件中的一行——它将位于public_html?->?wp-content?->?Themes?->?yourtheme。将其粘贴到您的landing-page.php文件并保存更改。这是您的代码应如下所示:

您可以编辑页面模板并向其添加代码,方法是转到外观->?主题文件编辑器

The-theme-file-editor-that-allows-you-to-modify-your-child-theme-code-including-theme-functions-and-custom-page-1-1024x456.webp.jpgo_

由于大多数着陆页通常没有侧边栏和页脚以最大程度地减少干扰,因此请通过删除以下两行来删除它们:

要向着陆页添加更多内容,请使用WordPress编辑器。此外,您可以通过带有Gutenberg Forms插件的区块编辑器免费构建自定义表单着陆页。

为了帮助您的目标网页在竞争中脱颖而出,请通过您的style.css文件或导航至外观->自定义添加更多功能。

The-Customize-page-in-WordPress-that-has-the-Additional-CSS-option-to-edit-your-landing-pages-components-1-1024x492.webp.jpgo_

使用额外的CSS,您可以修改样式表。这包括更改其背景和侧边栏颜色以及修改其字体类型。

要更改背景颜色,请添加以下代码:

这将根据十六进制代码添加浅绿色背景色,如下图所示:

The-landing-page-that-uses-additional-CSS-to-change-its-background-color-1024x490.webp.jpgo_

同时,要更改着陆页的字体类型、大小和颜色,请插入以下代码:

请注意,此代码仅更改您的正文,如下图所示:

The-landing-page-that-uses-additional-CSS-to-change-its-font-type-size-and-color-1-1024x488.webp.jpgo_

或者,如果您想更改标题,请添加以下代码片段:

为了让您更好地了解着陆页如何帮助您的业务,请查看它们的四个用例:

  • 通讯注册。电子邮件通讯将帮助您与客户建立联系。您可以使用专用的表单着陆页来强制访问者加入您的邮件列表。用简短的文案写一个清晰醒目的标题,以吸引更多访问者。
  • 活动注册。专用表单着陆页是宣传即将举行的活动(例如网络研讨会、社区聚会或会议)的好方法。使您的着陆页表格清晰易懂,以推动门票销售和注册。您还可以添加倒数计时器来营造紧迫感。
  • 即将推出的页面。如果您有新的网站、产品或服务,创建即将推出的着陆页将有助于建立品牌兴奋度并吸引潜在客户。使用明确的号召性用语并提供社交媒体链接将优化您即将推出的页面。
  • 反馈。添加一个在线表单,为您的网站访问者提供价值,以换取他们的建议和反馈。促销代码是访客输入的常见奖励。

例如,查看Food for Others的订阅通讯着陆页,该页面具有简单干净的布局和清晰的标题。凭借其无干扰的着陆页,网站访问者可以轻松专注于内容。

The-landing-page-of-the-Food-for-Others-site-that-features-a-simple-design-with-a-contact-form-1-1024x592.webp.jpgo_ 提示:发布着陆页后,使用WordPress A/B测试对其进行分析并优化您的转化率。它将帮助您找出最适合您的广告系列的文案和设计。

着陆页是WordPress网站的基本元素,可提高其转化率和客户参与度。在WordPress中创建着陆页有三种主要方法。

如果您是初学者,请使用插件或主题来创建WordPress着陆页。借助插件和主题提供的许多功能,您将能够像专家一样自定义和优化您的着陆页。

如果您已经熟悉HTML、PHP和CSS,那么从头开始构建着陆页是一个更好的解决方案,因为它提供了更大的灵活性。

无论您选择什么选项,请使用引人注目的标题、简单的设计和明确的号召性用语来创建高转化率的目标网页。

本文内容来源于公开网络,出于传递信息之目的整理发布。原文版权归原作者所有,若涉及侵权请先提供版权后联系我们删除

(0)
WP之家WP之家
上一篇 2025年3月13日 下午5:01
下一篇 2025年3月13日 下午5:02

相关推荐

  • 如何快速更改(或重置)WordPress密码

    如果您需要更改WordPress密码,但您又无法访问您的网站,很多时候您会慌乱无度。通常,当有人忘记了他们的WordPress密码,他们无法访问他们的电子邮件以重置标准密码,或者他们的WordPress站点没有正确发送电子邮件时,就会发生这种情况。在这篇文章中,我们将向您介绍如何针对您

    2025年3月13日
  • 如何为WordPress网站添加Web推送通知

    推送通知可让您向用户发送消息,即使他们没有访问您的网站。这有助于您将用户带回您的网站,增加流量并赚取更多收入。在本教程中,我们介绍何将网络推送通知添加到您的WordPress站点。推送通知是简短的、可点击的通知消息,在用户的桌面或移动设备上显示为弹出窗口。它们出现在桌面顶部或移动设备的通知区域中。最好的事情是即使用户的浏览器没有打开它们也

    2025年3月13日
  • 如何重新生成WordPress缩略图

    当您更改WordPress主题时,您现有的图像可能大小不合适。WordPress的解决方案?重新生成缩略图。这意味着在WordPress核心设置中重置图像尺寸。它也可以通过使用插件快速完成。在这篇文章中,我们将深入研究WordPress重新生成缩略图

    2025年3月13日
  • Microsoft 365/Office 365 SMTP设置 :如何连接电子邮件客户端或WordPress站点

    正在搜索Microsoft365SMTP设置,也称为Office365SMTP设置?Microsoft365,以前称为Office365,是Microsoft的一项订阅服务,可让您访问一系列功能,包括电子邮件托管。通过Microsoft365的SMTP详细信息,您可以配置您的电子邮件客户端或WordPress网站以使用您的Microsoft365帐户发送电子邮件。如果

    2025年3月13日
  • 如何使用myCred为WordPress中添加奖励系统

    积分系统可以奖励那些经常与你的内容互动或从你的网上商店购买物品的忠诚客户。它们是游戏化和忠诚度计划的最佳选择。然而,WordPress并不支持这一功能。因此,你可能想知道myCredWordPress插件是否是实施奖励计划的一个可行的解决方案。在今天的文章中,我们将回顾myCred插件,并解释你如何使用它来在WordPress中创建一个奖励系统。myCred是一个免费的插件,使你能够

    2025年3月13日
  • 禁用Gutenberg古腾堡区块编辑器的5种方法

    在几年前发布了WordPress5.0版本之后,Gutenberg区块编辑器彻底改变了内容编辑体验。它的创建是为了使没有编码和Web开发背景的用户在WordPress上的内容创建过程更加平易近人和方便。编辑器使用区块引入了一个独特的界面,使创建媒体丰富的文章和页面更容易和用户友好。话虽如此,一个故事总是有两个方面,这也不例外。虽然Gutenberg区块编辑器有一些很棒的好处和

    2025年3月13日
  • 使用WordPress创建目录网站的分步图文教程

    您可能听说过一些最受欢迎的目录网站。eBay、Yahoo、Facebook、Bing、Foursquare和Yelp只是列出产品和服务供我们浏览的众多网站中的一部分。您可以轻松地创建一个目录网站来列出几乎所有内容。事实上,你可以找到房地产、本地企业、汽车的例子。你命名它,你可以列出它。什么是目录网站?目录网站是列出您可以浏览的产品和服务的网站。在WordPress中创建一个:选

    2025年3月13日
  • 如何更改GoDaddy域名服务器

    GoDaddy拥有超过1700万客户,是最受欢迎的域名注册商之一。GoDaddy还获得ICANN认证,管理着多达4000万个域名。当您将域指向服务器主机时,您有两个选项,第一个是使用Godaddy的域名管理A记录,第二个是使用第三方DNS解析服务商指向。第二个选项要求您更改名称服务器。如

    2025年3月13日