如何使用 Elementor 和 PowerPack 创建登陆页面

WordPress 让每个人都可以轻松建立自己的在线形象，无论是博客、商业网站还是复杂的 ERP。 WordPress 主题和插件使用户可以轻松构建自己的网站，而无需担心聘请专家。 Page Builder 插件在改变使用 WordPress 构建网站的方式方面发挥了至关重要的作用。 Elementor 就是这样一种流行的页面构建器插件。

如果您是一名网页设计师，并且希望将您的设计变为现实而不必担心代码，您可以使用 Elementor。 但是，如果您是开发人员呢？ 好吧，如果您是开发人员，您也可以使用 Elementor，因为它具有对开发人员友好的功能和易于扩展的 API。

在这篇文章中，您将了解有关 Elementor 的更多信息，以及如何将其与 Elementor 插件一起使用以快速构建网站、登录页面、弹出窗口。

什么是元素？

Elementor 是一个流行的 WordPress 页面构建器插件。 Elementor 提供称为小部件的即用型内容块以及基本结构元素，如部分和列。

您可以将这些小部件拖放到 WordPress 网站的任何页面上，并根据需要构建自定义布局。

Elementor Pro 附带 60 多个小部件和大量预设计模板，您可以使用它们来设计任何页面。

元素的特点

Elementor 具有大量特性和功能，可以使您的网站开发更加舒适和快捷。 让我们看看 Elementor 值得拥有的所有令人印象深刻的功能。

快速和容易使用

Elementor 针对性能进行了优化。 即使您是新手用户，您也会发现它在 Elementor 中非常易于使用和导航。 您永远不会觉得 Elementor 将您拖回到您的设计过程中，只会让您快速轻松地完成工作。

虽然 Elementor 速度很快，但当您使用 Cloudways Elementor 托管时，您可以从 Elementor 中获得更多收益。 CW 关乎性能，并提供对服务器运行方式的超级控制。 在安全方面， Cloudways提供真正可靠和安全的服务器，由其主动安全实践管理，以确保您的服务器安全无虞。 Cloudways 附带的功能数量在当今行业中很难找到。

预先设计的页面模板

使用 Elementor，您可以获得大量预先设计的模板，只需单击一下即可创建网页。 几乎每个网页类别都有模板，如登录页面、关于页面等，可以使网站设计过程更快。

如果您在 Elementor 库中找不到好的模板，那么您可以查看第三方 Elementor 模板。 凭借蓬勃发展的设计师和开发人员社区，将 Elementor 提升到一个新的水平很容易。

加载了小部件

免费版和专业版 Elementor 都带有加载功能的小部件。 从简单的内容小部件（如标题、文本编辑器、按钮）到高级小部件（如帖子网格、登录表单、WooCommerce、社交共享），您可以使用 Elementor 获得许多功能。

如果您希望在小部件方面拥有更多功能，您可以尝试第三方 Elementor 插件。 我们建议使用 PowerPack for Elementor。 它是 Elementor 的领先插件，由流行的 PowerPack Beaver Builder 插件背后的同一团队构建。

元素弹出生成器

弹出窗口构建器是 Elementor 构建器的最新成员之一。 弹出窗口构建器功能消除了在您的网站上使用第三方弹出窗口构建器插件的需要。 您可以使用 Elementor 设计具有高级定位规则和功能的令人印象深刻的弹出窗口。

您可以创建登录表单、全屏垫、折扣弹出窗口，以及使用弹出窗口构建器功能无法创建的内容。

全局设置

构建网站时，保持一致的颜色设置、排版等很重要。您可以预先自定义颜色、字体甚至颜色选择器，以使用 Elementor 中的全局设置简化您的设计过程。

构建主题部分，如页眉、页脚、档案等。

使用 Elementor，您的设计不仅限于页面的内容区域。 您可以创建自定义页眉、页脚、侧边栏和网站的几乎每个部分，而不必担心编写代码。 所有这些都可以使用 Elementor Pro 中的主题生成器功能轻松创建。

动态内容

借助 Elementor Pro 中的动态内容功能，您可以显示来自 WordPress 自定义字段、ACF、工具集、Pod、MetaBox 或任何其他自定义字段插件的动态数据/内容。 您可以使用自定义字段中的数据，并在站点的任何部分使用 Elementor 小部件显示它们。 您可以在此处了解有关动态内容的更多信息。

精简版和专业版

虽然 Elementor 有很多东西可以提供，但用户没有必要支付巨额费用才能访问它。 实际上，Elementor 有两个版本，Lite 和 Pro。 您可以在 lite 版本本身中访问 Elementor 的许多功能。 两个版本都有自己的功能。 这是 Elementor Lite 和 Pro 的详细比较，可以帮助您做出决定。

用于 Elementor 的 PowerPack

Elementor 绝对是整个包。 以最小的学习角度开始设计网页所需的唯一工具。

有时您在使用 Elementor 时可能会感到有些受限。 为此，诸如PowerPack Elementor附加组件之类的编码良好的第三方附加组件可以派上用场。 该插件是同类插件中最好的插件之一，它提供了出色且令人印象深刻的小部件，并为用户提供了大量自定义选项。

目前，PowerPack 专业版中有 50 多个小部件，并且团队不断添加新的小部件，使其成为 Elementor 插件中的绝佳选择。

PowerPack 由专业的 WordPress 开发人员和设计师团队构建，并考虑到性能。 该插件编码良好并定期更新，以兼容最新版本的 Elementor 和 WordPress

让我们看看如何结合使用 Elementor 和 PowerPack 插件来创建出色的网页。

创建登陆页面

在本教程中，您将学习如何使用 Elementor 和 PowerPack Elementor 插件创建快速登录页面。 Elementor 入门很容易，这一切都归功于用户友好的界面。

请确保您的站点上同时安装了 Elementor 和 PowerPack。 您可以从以下链接获取免费版本：

1. 元素
2. Elementor 的 PowerPack Lite

使用 Elementor 创建页面

登录到您的 WordPress 管理仪表板，然后单击Pages下的Add New选项。 现在为您的页面指定一个标题/名称，然后单击“使用 Elementor 编辑”按钮。

在本教程中，我们将为比萨店创建一个登录页面，因此我们将相应地命名我们的页面。 我们的最终结果应该是这样的：

让我们从第一部分开始。 在我们这样做之前，通过单击编辑器左下角的小设置图标将布局更改为Elementor Canvas 。

第 1 步：英雄部分

英雄部分包括背景图片、两个标题小部件和一个 CTA 按钮。

首先，单击加号图标并从选项中添加单列结构。 现在转到部分设置并启用拉伸部分选项，然后从高级选项卡将底部和顶部填充设置为250 。

现在，您可以从样式选项卡 > 背景类型 > 经典中选择所需的背景图像，然后从媒体显示中选择图像。

我们已经准备好了背景。 现在让我们将标题和按钮添加到我们的英雄部分。

将双标题小部件拖放到页面上并分别更改文本。 现在，确保您相应地划分第一个和第二个标题，以更加强调价格，如下图所示。 改变标题的两个部分的排版。

您还可以进行许多其他更改，使您的英雄称号成为您想要的方式。

进行更改后，将另一个标题小部件拖放到双标题下方，并根据需要更改文本和排版设置，这里我将文本大小更改为90 ，字体更改为Elsie ，字体粗细更改为600 。

现在我们将添加 CTA 按钮。

将 Elementor Button 小部件拖放到 Heading 小部件正下方的部分。 现在我们将开始更改按钮的设置。

以下是我对按钮所做的更改：

• 将文本更改为立即订购！
• 按钮居中对齐。
• 添加了CTA 链接
• 将排版更改为 Elise； 24;600 分别用于字体、大小和粗细。
• 将背景颜色更改为红色（ #ff0000 ），将字体颜色更改为白色（ #ff0000 ）。
• 加入填充18,40，18，40为上，右，下，左分别。

进行更改后，这就是英雄部分的样子。

第 2 步：关于部分

现在我们将处理关于部分，继续并通过单击“+”图标向页面添加两列结构。

现在我们的目标是创建一个与此类似的布局，因此我们将向左列添加标题小部件、文本编辑器小部件和推荐小部件。 在右侧的列中，我们将添加一个 Heading 小部件、Text 小部件和 Button 小部件。

只需开始在该部分拖放小部件并将它们更改为与上面提供的图像中的一样。 添加标题并更改相同的排版。

这是它的样子：

现在在左列的标题下方添加文本编辑器，并将排版更改为下面显示的相同。

现在我们将在文本编辑器小部件下方添加推荐轮播小部件。 添加“项目”或推荐以显示在您的网站上。 您还可以使用 PowerPack 的 Testimonials 小部件，它提供了更多的自定义功能。

完成更改后，关于部分的左列应如下所示。

现在对于右列，添加背景以向该部分添加一点对比。

现在创建我们在左列上创建的标题的副本，并将其拖放到右列上。 对文本编辑器执行相同操作，因为这将使您免于不必要的冗余并节省时间。 现在对于按钮，只需从 Hero 部分复制按钮并将其拖动并移动到 About 部分的右列。

从编辑列> 布局> 垂直对齐将右列垂直对齐到中间，您的“关于”部分已准备就绪！

这是关于部分的最终结果：

第 3 步：“了解更多”CTA 部分

我们将添加另一部分谈论比萨店。 这部分将类似于我们之前创建的部分，但结构会略有不同。

所以，我们希望我们的最终结果是这样的：

你注意到这里有什么类似的吗？

是的！ 标题、文本编辑器与我们之前创建的类似。 因此，我们不会重新设计所有小部件，而是简单地复制它们并将它们拖动到位。

我们开始做吧！

首先，添加一个新的两列结构并转到部分设置并从媒体窗口添加背景图像并添加100 的顶部填充以使面板看起来更宽敞。 此外，从设置中启用拉伸部分选项。

现在转到上一部分并复制标题、文本编辑器和按钮小部件。 您可以通过右键单击小部件并选择重复选项来简单地执行此操作。 复制后，将复制的小部件拖放到新位置。

这是该部分的样子：

现在对于右列，拖放图像小部件并从媒体库中选择图像。 根据图像大小等调整图像，完成后，这就是该部分的样子。

第 4 步：联系/订单部分

这是帮助用户下订单的 CTA 部分。 现在，这部分应该包括什么？ 让我们看看我们的目标是在这里做什么。

我们需要通过 PowerPack 创建两个标题和文本编辑器小部件、一个联系表单和价目表菜单小部件。

首先，我们知道我们必须保持标题和文本编辑器的设计和外观相同。 您可以继续从上一节复制它们并将它们放在此处。 现在用你想要的文本更改那里的文本。

您可以使用 Elementor Pro 中的表单小部件通过简单的拖放过程创建联系表单。 完成此操作后，联系表格将出现在页面上。 现在您可以对表单进行进一步的自定义。 以下是我所做的更改：

• 添加了表单字段并更改了字段大小。
• 更改了按钮的文本、大小和对齐方式。
• 添加电子邮件作为提交按钮操作并添加电子邮件详细信息。
• 调整了列间距并重新设计了文本和字段的排版和颜色
• 使联系表看起来更吸引人的其他必要更改。

如果您使用任何联系表单插件，如 Gravity Forms、WPForms、Ninja Forms 等，那么您可以使用 PowerPack 的表单样式器小部件来使用 Elementor 设置表单样式。

现在，在右栏中，我们将添加产品的价格表。 为此，我们将使用 PowerPack 的价格菜单小部件。 只需拖放它，添加细节并更改设计和布局。 这就是整个部分的样子：

立即进入赠品！

Cloudways 主办的 PowerPack 赠品

收紧！

进行所有更改后，这就是我们整个布局的样子。

现在，您也可以使用 Elementor 和 PowerPack for Elementor 为自己制作漂亮的布局。 虽然 Elementor 提供了许多功能，但 PowerPack 通过创造性的、面向功能的小部件进一步扩展了它。 工具包中有 50 多个非常有用的小部件，您可以更快地构建网站。

Elementor 和 PowerPack 可以为您节省时间、精力并帮助您扩大网页设计业务。 不仅如此，这两种产品都得到了 WordPress 专家团队的支持，因此您可以完全放心。