5分钟生成10篇英文软文article forge软件试用

尝试在 WordPress 上为您的产品发布建立登录页面,但不确定从哪里开始? 从不畏惧! 使用 Elementor 构建产品发布页面很容易。 在本指南中,我将向您展示具体方法。

google广告开户

我将向您展示从完全空白的画布到完成的登录页面的分步指南。 最重要的是,我会使用 只有免费插件. 如果这听起来像你的教程,加入我,让我们开始吧。

为什么要使用 Elementor 构建产品发布页面?

Elementor 是构建产品发布页面的绝佳工具,原因如下:

首先,它是一个拖拽式可视化页面构建器,这意味着您无需了解任何代码即可设计复杂的页面。 您还可以在访问者将看到的相同视图中设计页面,这有助于可视化页面上的不同元素如何协同工作。

除此之外,Elementor 是一个不错的选择,因为:

基本上,虽然您仍然需要一些设计远见和对登陆页面元素的一般知识, Elementor 可以处理其余部分,并消除需要从等式中了解代码的困难。

您将在本指南中构建的内容

在进入实际指南之前,我想向您展示我们在使用 Elementor 构建产品发布页面后的最终结果:

最终产品启动页面示例

您始终可以使用更多元素和样式来改进最终设计(例如,在调色板方面我不是很好). 但这只是一个基本的了解,您可以在不到一个小时的工作中使用 Elementor 做什么。

WordPress divi主题

让我们开始吧!

步骤 0:安装插件

在开始使用 Elementor 构建产品启动页面之前,您的第一步是实际安装 Elementor 的免费版本。 虽然 Pro 版本确实提供了一些有用的功能和预建的 Elementor Pro 模板, 我将在这篇文章中使用免费版本 因为我想让本指南尽可能易于访问。

至于主题,我将使用我们的 Hestia 主题的免费版本。 不过,您可以使用您喜欢的任何主题。 只要确保它是允许全宽模板的!

第 1 步:为您的启动页面选择正确的模板

模板允许您更改构建产品发布页面的基本“画布”。

例如,大多数 WordPress 页面都包含一个侧边栏。 这对常规页面有好处……但对于产品发布页面则不然。

您希望您的目标网页成为唯一能吸引人们注意力的东西。

有两种方法可以解决这个问题:

  • 全角模板 – 您可以构建一个完全全宽的登录页面,但您的正常 WordPress 页眉和页脚仍然处于活动状态。
  • 空白的画布 – 您从绝对零开始构建您的页面。 甚至您的 WordPress 标题都不会出现。

这两种方法都是使用 Elementor 构建产品发布页面的可行途径,但我更喜欢只使用全宽模板,以便导航结构在整个网站上感觉更具凝聚力。

这就是我将用于本指南的内容。

fiverr建站WordPress程序员

要选择您自己的模板,请访问 页面 → 添加新的 并从下拉菜单中选择 页面属性 盒子:

选择页面模板

如果您的主题不提供全角模板,您可以使用空白 元素帆布 模板或选择不同的主题。 我们有一个与 Elementor 配合得很好的主题列表。

选择模板后,单击 保存草稿 应用新模板(在开始编辑之前执行此操作很重要)。 然后,打大 使用 Elementor 编辑 按钮。

独立站选品工具

您应该会看到用于构建启动页面的空白画布:

使用 Elementor 构建产品发布页面 - 选择您的部分

第 2 步:选择起点

好的,我将向您展示如何使用 Elementor 构建产品发布页面 从头开始. 但是您绝对不必从空白画布开始。

如果您更愿意使用 Elementor 专业设计的模板之一,您可以通过单击 文件夹 左下角的图标并选择 模板库

高质量外链购买

Elementor 模板库

许多模板需要 Elementor Pro,但您仍然可以在免费版本中找到很多可用的模板:

元素模板

JasperAI 10000字免费额度试用

除了从专业设计中受益之外,这些模板还可以为您节省大量时间。

如果你看到你喜欢的,我绝对推荐使用它。 否则,让我们继续我们的空白画布。

第 3 步:构建启动页面结构

在你开始之前,知道你要去哪里会很有帮助。 也就是说,在开始拖动 Elementor 元素之前,您希望对启动页面的结构有一个基本的了解。

例如,这是 Karol 对基本启动页面的粗略草图:

WordPress备份工具updrafplus

如果您查看草图,您会看到大致有四个部分:

  • 主标题部分
  • “功能列表”部分
  • 关于部分
  • 电子邮件选择加入部分

Elementor 可让您创建个人 部分 你可以添加你的元素。 对于此示例启动页面,我们将为上述每个元素使用四个不同的部分。

Elementor 界面快速浏览

在开始深入了解登录页面示例之前,我认为让您快速浏览一下实际的 Elementor 界面会很有帮助。

该界面由两个核心元素组成:

  • 侧边栏 – 这是您添加新元素和编辑现有元素的地方
  • 视觉预览 – 在这里您可以预览您的最终设计,就像您的最终用户看到的一样

“元素”基本上是设计块。 例如,按钮是一个元素。 一个图像是另一个。 等等。

要使用 Elementor 实际构建产品发布页面,基本过程如下所示。

您从侧边栏中拖过一个元素:

如何使用elementor接口

然后,您在同一侧边栏界面中自定义元素:

如何编辑elementor元素

请注意,侧边栏现在具有三个不同的选项卡:

  • 内容 – 最重要的选项卡 – 您可以在其中自定义元素的基本内容和功能。
  • 风格 – 在这里您可以更改颜色和排版
  • 先进的 – 在这里您可以添加自定义边距和填充,以及其他高级设置。 自定义边距对于更改元素的定位特别有用。

好的,现在您已经了解了基础知识,让我们使用 Elementor 构建一个产品发布页面!

构建标题部分

要创建标题部分,首先单击 添加新部分:

添加新部分

然后,选择您的列设置。 我将在此示例中使用此两列选项,但您的选择取决于您想要的设计:

选择列结构

让我们将较大的右列设为图像并在左列中使用文本。

要将图像添加到右列,只需将 图片 元素:

添加图像元素

然后,在侧边栏界面中选择您的图像:

图像元素示例

要将文本添加到左列,您可以使用 标题文本编辑器 选项:

文本和标题元素

要更改元素的对齐和定位,您可以随时转到 先进的 选项卡并手动更改边距和填充:

编辑边距

我在示例中为两个标题使用了自定义上边距。

如果它符合您的目标,您还可以通过拖动 按钮 元素:

使用 Elementor 添加一个按钮

这完成了我们的基本标题部分!

创建功能列表部分

接下来在我们的列表中,我们需要创建一个功能列表部分,告诉人们我们产品的主要功能。

值得庆幸的是,Elementor 包含一个绝对完美的元素。

要使用它,让我们首先创建一个三列部分来容纳我们的三个功能:

选择三列结构

从那里,我们可以使用 图标框 下的元素 一般元素 部分:

添加图标框元素

在每一列中放置一个图标框。 然后,您需要做的就是为每个功能自定义文本和图标:

编辑图标框元素

这就是我们的功能列表! 十分简单。

图像框 如果您想使用自己的图像而不是图标,元素也是本节的另一个不错的选择。

创建“关于”部分

接下来,让我们构建“关于”部分。 就设计而言,这个非常灵活。

如果您不确定从哪里开始,一个不错的选择是偏移两列设计:

在 Elementor 中选择两列结构

在左侧,让我们通过拖动来放置图像 图片 元素。 然后,我们可以使用 标题 文本编辑器 写一些关于文本的基本元素:

创建关于我的部分

我们几乎完成了我们的启动页面!

创建电子邮件选择加入部分

使用 Elementor 的免费版本构建电子邮件选择加入部分有点棘手,因为它不包含专用的表单元素。 如果您购买 Pro 版本,您只需拖动表单元素即可创建所有类型的表单.

但是要使用免费版本的 Elementor 创建选择加入表单,我们需要使用第三方插件来发挥创意。 我会用免费的 光引擎 本指南的插件,但您可以使用任何允许您插入带有简码的选择加入表单的插件。

首先,您需要在 OptinEngine 界面中创建一个表单:

使用 optinengine 构建 optin 表单

然后,在 Elementor 中创建一个新部分并添加 短代码 元素:

添加简码元素

将您的 OptinEngine 表单的简码粘贴到框中:

从 optinengine 粘贴短代码

您还不会在 Elementor 的界面中看到您的表单。 但是一旦你发布了你的页面,你就会在前端看到表单。

这就是我们基本的产品发布页面的内容!

把它们放在一起

最后,再来看看我们的最终产品:

最终产品启动页面示例

同样,颜色当然可以增强(我实际上不是专业设计师!)。 但总而言之,我们能够使用 Elementor 构建产品发布页面 不看一行代码.

这太棒了!

如果你想让它成为你的主页,你需要做的就是设置一个静态主页。

请记住,要创建示例登录页面的精确副本,您只需要:

希望您喜欢本教程,如果您有任何问题,请告诉我!

免费指南

加快速度的 5 个基本技巧
您的 WordPress 网站

将加载时间缩短 50-80%
只需遵循简单的提示。

5分钟生成10篇英文软文article forge软件试用
tiktok