您想在 WordPress 中创建自定义页面吗?
自定义页面允许您使用与网站其他部分不同的布局。许多 WordPress 网站的销售页面、登陆页面、网络研讨会页面等都使用自定义页面布局。
在本文中,我们将向您展示如何在 WordPress 中轻松创建自定义页面。

为什么在 WordPress 中创建自定义页面?
每次创建新页面时,您的WordPress 主题都会使用模板文件控制该页面的外观。
此 page.php 模板会影响您在 WordPress 中创建的所有单个页面。但是,您可能不想每次都使用相同的设计。
与常规页面相比,着陆页通常具有不同的内容,例如大型英雄图片或号召性用语 (CTA)。这意味着它们通常看起来与网站的其他部分完全不同。
然而,尝试使用标准页面模板创建独特的设计可能需要花费大量时间。您还受到 page.php 模板的限制,可能无法创建您想要的确切设计。这可能会导致很难获得好的结果。例如,如果您正在构建销售页面,那么由于页面设计不佳,您可能不会获得很多转化。
话虽如此,让我们看看如何在 WordPress 中创建具有您想要的精确设计、布局和内容的自定义页面。只需使用下面的快速链接即可直接跳至您要使用的方法。
- 方法 1. 如何使用块编辑器在 WordPress 中创建自定义页面(无需插件)
- 方法 2. 如何使用全站点编辑器创建自定义页面(仅限基于块的主题)
- 方法 3. 使用 SeedProd 在 WordPress 中创建自定义页面(推荐)
- 方法 4. 使用 Thrive Architect 在 WordPress 中创建自定义页面
方法 1.如何使用块编辑器在 WordPress 中创建自定义页面(无需插件)
块编辑器使您可以使用您已经熟悉的工具轻松设计自己的模板。
如果您打算在多个页面上重复使用相同的设计,那么这是一个不错的选择,因为您可以简单地应用相同的模板。如果您想创建完全独特的设计,那么另一种选择是正常创建页面,然后使用全站点编辑器编辑其布局,我们将在方法 2 中介绍。
请注意,这些方法仅适用于 基于块的主题 ,例如 ThemeIsle Hestia Pro 或 Twenty Twenty-Three。如果您没有基于块的主题,那么我们建议您使用页面构建器。
首先,只需打开任何页面或帖子即可。然后,选择右侧菜单中的“页面”选项卡,然后单击“模板”旁边的文本。

您看到的选项可能会有所不同,具体取决于您的 WordPress 主题,但文本通常会显示“页面”、“默认模板”或类似内容。
在出现的弹出窗口中,单击“添加模板”图标。

在出现的弹出窗口中,输入模板的名称,然后单击“创建”。
该名称仅供您参考,因此您可以使用任何您想要的名称。

这将启动模板编辑器,其工作方式与WordPress 内容编辑器类似。
要将块添加到自定义页面设计中,只需单击蓝色的“+”按钮即可。然后您可以拖放来添加块。

您可以使用熟悉的 WordPress 帖子编辑工具将内容添加到块或更改其格式。例如,您可以在“标题”块中键入文本、应用粗体格式或将文本从 H2 更改为 H3。
您还可以使用模式创建自定义页面。模式是经常一起使用的块的集合,例如事件列表、带有标题的图像或定价表。
您看到的模式将根据您的 WordPress 主题而有所不同,但您可以通过单击“模式”选项卡来查看可用的模式。

您可以将块图案拖放到布局上,也可以单击该图案将其添加到模板的底部。如果您对模板的外观感到满意,请单击“发布”按钮,然后单击“保存”。
您现在可以将此模板应用到任何页面。只需在编辑器中打开页面,然后单击“模板”旁边的文本即可。
在出现的弹出窗口中,选择您刚刚创建的模板。

完成后,您可以向页面添加内容,就像任何其他 WordPress 页面一样。
方法 2.如何使用全站点编辑器创建自定义页面(仅限基于块的主题)
如果您使用基于块的主题,那么您还可以使用全站点编辑器创建自定义页面。这允许您更改单个页面的布局,而无需创建自定义模板。
考虑到这一点,如果您想创建一个完全独特的设计,并且不会在任何其他页面上重复使用,那么这是一个不错的选择。
首先,只需像往常一样通过转到页面» 添加新页面来创建页面。然后,您可以输入标题、添加类别和标签、上传精选图像,以及进行任何其他您想要的更改。
当您对基本页面感到满意时,保存更改,然后转到外观» 编辑器。

默认情况下,完整的站点编辑器显示主题的主页模板。
在左侧菜单中,单击“页面”。

您现在将看到您在 WordPress 网站上创建的所有页面。
只需找到您想要重新设计的页面并单击即可。

WordPress 现在将显示设计的预览。
要继续编辑此模板,请单击小铅笔图标。

您现在可以使用全站点编辑器工具编辑页面的布局。例如,您可以单击蓝色“+”按钮添加新块,或单击选择要自定义的任何块。
当您对所做的更改感到满意时,请单击“保存”按钮。

现在,如果您访问网站上的此页面,您将看到新的页面设计正在运行。
方法 3.使用 SeedProd 在 WordPress 中创建自定义页面(推荐)
过去,您通过编写代码来创建自定义页面,这对于初学者来说不太友好。如果您的 HTML、CSS 或 PHP 代码出现错误,则可能会导致常见的 WordPress 错误,甚至完全破坏您的网站。
考虑到这一点,我们建议使用页面构建器。
SeedProd是WordPress 最好的拖放页面构建器。它附带 180 多个模板,允许您创建自定义页面而无需编写任何代码。
如果您使用自定义页面来获得更多转化,那么 SeedProd 可以与您可能已经在使用的许多流行的第三方工具配合使用来获得转化。这包括顶级电子邮件营销服务、WooCommerce、Google Analytics等。
首先,您需要安装并激活 SeedProd。有关更多详细信息,请参阅我们有关如何安装 WordPress 插件的分步指南。
注意:还有一个免费版本的 SeedProd,允许您创建自定义页面,无论您的预算是多少。然而,在本指南中,我们将使用 SeedProd Pro,因为它有更多模板并与所有最好的电子邮件营销服务集成。
激活插件后,SeedProd 将要求您提供许可证密钥。

您可以在 SeedProd 网站上您的帐户下找到此信息。输入密钥后,单击“验证密钥”按钮。
选择自定义页面模板
完成此操作后,转到SeedProd » 登陆页面,然后单击“添加新登陆页面”按钮。

您现在可以为自定义页面选择模板。
SeedProd 的模板分为不同的营销活动类型,例如“引导”、“挤压”和“即将推出”。您可以单击屏幕顶部的选项卡来根据营销活动类型过滤模板。

如果您想从头开始,那么 SeedProd 还提供一个空白模板可供您使用。
要仔细查看任何设计,只需将鼠标悬停在该模板上,然后单击放大镜图标即可。

当您找到喜欢的设计时,单击“选择此模板”。我们在所有图像中使用“课程销售页面”模板,但您可以使用任何您想要的模板。
接下来,继续输入自定义页面的名称。SeedProd 将根据页面标题自动创建一个 URL,但您可以将此 URL 更改为您想要的任何内容。
描述性 URL 还可以帮助搜索引擎了解页面的内容,以便他们可以将其显示给正确的用户,这将改善您的WordPress SEO。
为了使您的自定义页面有最好的机会出现在相关搜索结果中,您可能需要添加 URL 中缺少的任何关键字。有关更多详细信息,请参阅我们有关如何进行关键字研究的指南。

当您对输入的信息感到满意时,请单击“保存并开始编辑页面”按钮。
设计您的自定义页面
SeedProd 现在将在其用户友好的拖放编辑器中打开您选择的模板。您将在右侧看到页面的实时预览,并在左侧看到一些块设置。

要自定义块,只需在页面编辑器中单击将其选中即可。左侧工具栏将显示该块的所有设置。
在下图中,我们正在更改“标题”块内的文本。

您可以使用左侧菜单中的设置来设置文本格式、更改其对齐方式、添加链接等。
使用 SeedProd 页面构建器编辑图像也很容易。只需单击任何“图像”块并使用设置添加替代文本、上传新图像或进行任何其他更改。

如果您想从自定义页面中删除某个块,只需单击以选择该块即可。
然后,单击迷你工具栏中的垃圾桶图标。

要向您的设计添加新块,只需在左侧菜单中找到一个块,然后将其拖到编辑器中即可。
然后,您可以单击以选择该块并在左侧菜单中进行任何更改。

SeedProd 还附带“部分”,它们是行和块模板,可以帮助您快速创建自定义页面。例如,如果您正在设计Google 广告着陆页,那么您可以使用 SeedProd 的现成英雄、号召性用语或功能部分。
要查看所有可用部分,只需单击“部分”选项卡即可。

要仔细查看某个部分,请将鼠标悬停在该部分上,然后单击放大镜图标。
当您找到要添加到设计中的部分时,只需将鼠标移到其上,然后单击小“+”图标即可。

这会将该部分添加到页面底部。您可以使用拖放操作来移动设计中的部分和块。
如果您犯了错误或改变了主意,请不要担心。您可以通过单击左侧工具栏底部的“撤消”按钮来撤消上次更改。
在这里,您还可以找到重做按钮、修订历史记录、布局导航和全局设置。

这些额外的按钮可以让您轻松地在 WordPress 中创建自定义页面。
在工具栏的底部,您还会发现一个移动预览按钮,可让您查看自定义页面的 移动版本。

这可以帮助您设计一个在移动设备上看起来与在计算机上一样好的自定义页面。
当您对自定义页面感到满意时,可以通过单击“保存”旁边的下拉箭头,然后选择“发布”选项来发布它。

您的自定义页面现在将在您的WordPress 博客上上线。
如果您想随时编辑自定义页面,只需转到WordPress 仪表板中的SeedProd » 登陆页面即可。然后,您可以找到要更改的页面并单击其“编辑”链接。

这将在 SeedProd 的编辑器中打开设计,供您进行更改。
方法 4. 使用 Thrive Architect 在 WordPress 中创建自定义页面
您还可以使用Thrive Architect创建自定义页面。Thrive Architect 是另一个流行的 WordPress 拖放页面构建器。
它配备了 300 多个专业设计的模板,旨在帮助您获得更多转化。

首先,您需要安装并激活Thrive Architect插件。有关更多详细信息,请参阅我们有关如何安装 WordPress 插件的分步指南。
激活后,转到WordPress 管理仪表板中的页面 » 添加新内容以创建自定义页面。然后,单击“启动 Thrive Architect”按钮。

接下来,您可以选择是创建普通页面还是预构建的登陆页面。
我们建议您点击“预建登陆页面”,因为它可以让您访问所有 Thrive 登陆页面模板。这些模板是完全可定制的,因此您可以对其进行微调以适合您的 WordPress 网站。

当您找到您喜欢的一组时,只需单击即可选择它。
在下图中,我们选择“智能着陆页面集”。

在下一个屏幕上,您需要从集合中选择一个特定的模板。
单击模板来选择模板,然后点击“应用模板”按钮。

这将在 Thrive Architect 编辑器中打开模板。从这里,您可以轻松自定义页面模板以匹配您的博客、网站或在线商店。
例如,您可以通过单击“标题”然后输入您自己的自定义消息来更改“标题”。

您现在将在左侧菜单中看到所有自定义选项。在这里,您可以更改排版、字体大小、颜色、格式等。
在左侧面板中,您还可以调整自定义页面的其他设置,例如布局、背景样式、边框、动画和滚动行为等。

与 SeedProd 的块类似,Thrive Architect 附带许多可以添加到自定义页面的预构建元素。
要向页面添加新元素,请单击屏幕右侧的“添加元素 (+)”按钮。

您现在可以从图像、按钮、潜在客户生成表单、定价表、倒计时器等元素中进行选择。
要添加元素,只需将其从右侧菜单拖放到页面上即可。

同样,您可以通过单击添加到页面的任何新元素来对其进行编辑。
如果您对页面的外观感到满意,请单击“保存工作”按钮旁边的箭头 (^) 按钮。然后,单击“保存并返回帖子编辑器”选项。

然后,您可以将该页面保存为草稿,或将其发布,以便它显示在您的WordPress 网站上。
发布自定义页面后,您可以访问您的网站以查看其运行情况。

我们希望本文能帮助您了解如何在 WordPress 中创建自定义页面。您可能还想查看我们关于如何增加博客流量的指南,以及我们专家精选的WordPress 最佳联系表单插件。