带有 Elementor 的 WooCommerce 页面
已发表: 2021-11-23WordPress 以其惊人的功能来构建您的网站，尤其是 WooCommerce 网上商店，让我们的生活更轻松。 没有什么比使用 Elementor 设计 WooCommerce 页面更容易的了，因为您根本不需要处理代码。
但您可能仍然想知道，为什么是 Elementor？ 好吧，那是因为它是在 WooCommerce 中设计在线购物网站的完美工具，即使是非技术人员也能做到。 Elementor 通过带您体验压倒性的网站建设体验，使之成为可能。
那么，您准备好使用 Elementor 设计 WooCommerce 页面了吗？ 让我们通过精确的步骤指导您如何使用 Elementor 页面构建器轻松获取动态 WooCommerce 页面。
让我们开始吧！
Elementor 与 WooCommerce 兼容吗？ 为什么选择它？
对于一个成功的 WooCommerce 网站，网页设计非常重要。 它需要相当吸引人的网站界面和整齐的功能，才能将客户的注意力吸引到您的业务中。
WordPress 已经是一个很棒的平台，您可以在其中轻松设计网站。 但是 Elementor 让在几分钟内构建宏伟的网站变得更加容易。 该插件非常强大，并配备了有助于为您的网站添加特性和功能的小部件。
但是，Elementor 与 WordPress 兼容吗？ 是的。 事实上，Elementor 与 WordPress 以及其中的所有内容都高度兼容。 使用 Elementor 设计 WooCommerce 页面既简单又灵活，即使对于初学者来说也是小菜一碟。
仅仅因为无论编码知识如何，任何人都可以使用 Elementor 设计网站，因此它是您使用的最佳工具。 毫不奇怪，今天有超过 500 万人使用 Elementor 创建自己的网站。
那么，准备好主播了吗？ 让我指导您使用下面的 Elementor 构建和自定义 WooCommerce 页面的正确方法。
使用 Elementor 创建 WooCommerce 页面
正如我们所说，使用 Elementor 制作您的 WooCommerce 页面并不是一项艰巨的任务。 使用 WordPress，一切都变得简单，这项任务的整个过程也是如此。 所以，我们是这样做的——
首先，您需要做好准备，例如安装WordPress所需的插件-
- 您的 WordPress 网站
- Elementor Page Builder（免费和专业版）
- WooCommerce（免费）
- 元素包精简版（免费）
在您完成初始设置（如购买域和托管）、在您的网站上配置 WordPress、安装插件 Elementor、WooCommerce、Element Pack Lite 等之后。这可能需要一段时间来配置运行您的网站所需的一切。
特别是，设置 WooCommerce 需要几分钟，您需要填写各种信息，包括付款信息、运输、个人联系方式等。
返回仪表板后，配置完成，您可以使用 Elementor 制作 WooCommerce 页面。
请注意，Elementor 和 WooCommerce 都有大量小部件可以将 WooCommerce 功能添加到您的网站。 但是，这些还不足以完全沉浸在 WooCommerce 或网页设计的正确功能中。
这就是为什么我们需要像 Element Pack Lite 这样的辅助插件来丰富网站的设计和功能。 现在，让我们继续设计阶段。
使用 Elementor 轻松自定义 WooCommerce 页面
由于 Elementor 页面构建器允许您导入现成的模板，因此使用模板非常容易，然后只需在页面内调用它并开始自定义它们。 此外，Elementor 已经为 WooCommerce 提供了 10 多个简单的小部件，用于创建商店页面的基础。
但是，一旦您获取了所有必要的插件，包括 Element Pack Pro，您将获得足够多的小部件来覆盖您的 WooCommerce 网站的整个领域。 因此，在设计您的网页时没有感到压抑的余地。
但在此之前，请确保插件是最新的，除非它们无法正常运行。
第 1 步：让我们创建一个 WooCommerce 页面模板
对于初学者，请从您的 WordPress 网站转到模板制作部分。 只需转到仪表板>模板>添加新
点击“添加新”按钮将显示一个弹出窗口，您需要在其中制作模板。 这里有几个选项，您必须选择一个读取为“单一产品”的选项。 当我们要为产品创建一个 WooCommerce 页面时，这就是我们想要的设置。
另外，请确保您已安装 Elementor Pro。 否则，这些选项将不可见。
只需在旁边添加一个模板名称即可轻松识别模板以供将来使用。
然后点击“创建模板”按钮并开始将元素放入页面中，以便使用 Elementor 创建下一个 WooCommerce 页面。
第 2 步：插入页面模板
现在您已准备好创建您的 WooCommerce 页面模板，您可以通过两种方式来完成它，要么从头开始，要么采用现成的模板并对其进行自定义。
这两个选项之间没有太大区别，只是完成模板所需的时间。 为了方便使用，我们先添加一个现成的模板。
只需单击元素包模板库图标即可在页面编辑器中打开该库。
您所要做的就是浏览模板库并选择适合您商店主题的页面设计。 找到一个后，只需将鼠标悬停在模板上，然后单击“插入”按钮。
请注意，您还可以使用 Elementor Pro 中的 WooCommerce 页面模板。 自定义模板后，它将是一个独特的设计，与模板本身不同。
第 3 步：添加和自定义功能
在您开始将小部件倒入模板页面之前，了解您的客户将享受的功能非常重要。 您始终可以寻找新内容或自定义当前布局以进行进一步改进。
Elementor 提供了许多小部件，可以为您的 WooCommerce 网站增添更多趣味。 使用这些小部件，您可以轻松地设计您的 WooCommerce 页面并制作一个完整的网站。
让我们先看看可用的小部件 -
- 产品名称
- 描述
- 添加到购物车
- 产品价格
- 图片
- 评分
- 产品数量
- 元
- 面包屑
- 相关产品
- 库存和缺货产品
这是使用上面列表中的元素的自定义 WooCommerce 产品页面。
保持产品页面设计最小化是一个很好的策略，以便让您的访问者更多地关注产品。 无论如何，您现在可以区分这些功能并知道如何设计您的页面。
第 4 步：WooCommerce 页面的购物车按钮
在您的 WooCommerce 网站上拥有足够多的活动 CTA 按钮是吸引访问者并赢得潜在客户的好方法。 CTA 不仅可以吸引客户，还可以使您的网站看起来对访问者有吸引力。
使用 Elementor 在您的 WooCommerce 页面上添加 CTA 或“添加到购物车”按钮非常容易。 但是，Elementor 中有两种类型的“添加到购物车”按钮，一种是静态的，一种是动态的。
使用静态是向页面添加 CTA 的最快方法，但它缺少样式控件。 我们建议使用 Element Pack 的 WooCommerce 小部件“WC- 添加到购物车”的动态 CTA 按钮。
在这里，您可以自定义购物车按钮，使其与您的产品形成鲜明对比。 您可以随时自定义按钮的颜色、背景、边框、填充、对齐方式、标签、图标、大小等。
您所要做的就是根据用户的视线高度匹配按钮高度。 请记住，按钮位置非常重要，因为它会影响用户购买产品的决定。
第 5 步：使用 Elementor 配置 WooCommerce 产品存档页面
到目前为止，您已经完成了 WooCommerce 上的单个产品页面。 现在，您需要构建一个产品存档页面来批量展示您的产品并帮助您的访问者轻松导航。
让我们现在为自己做一个。 就像以前一样，转到您的 WordPress 仪表板并进入“模板”菜单，然后单击“添加新”。
这一次，向下滚动并选择模板的“产品存档”选项，该模板带有一个名称以便以后识别它。
现在完成它点击创建模板按钮。 等待 Elementor 编辑器页面出现。
当您看到空白页面时，您可以开始为存档页面使用另一个现成的模板，或者从头开始制作自己的模板。 Elementor 有大量的小部件来形成存档页面的点点滴滴。
但是，您可以跳过头脑风暴过程并使用 Element Pack Pro 插件中的小部件。 它具有一些 WooCommerce 功能，可以组合界面的多个部分以形成完整的图像。
看看下面的列表——
- 投资组合轮播
- 设备滑块
- 自定义轮播
- WooCommerce 滑块
- WooCommerce 产品
- WooCommerce 轮播
- WooCommerce 类别
利用这些小部件，您可以使用 Elementor 为产品存档开发令人惊叹的 WooCommerce 页面。
这只是一个很小的例子。 你可以做的事情更多，只有天空才是极限。
第 6 步：使用 Element Pack Pro 自定义页面设计
到目前为止，您一直在使用 Elementor 构建 WooCommerce 页面，但您没有对设计进行任何重大更改。 Elementor 本身就是用于自定义界面的出色工具，但它仍然缺乏复杂的设计控件。
但不要为此烦恼，您有 Element Pack Pro 可以为您完成未完成的工作。 该工具以其拥有的每个功能（超过 200 个功能）的自定义控件而闻名。 因此，您可以在一个地方拥有动画标题、动画画廊、产品轮播、网格、滑块、部分模糊、包装链接和更多惊人的功能。
例如，让我们展示如何定制我们的 WooCommerce 轮播以适合您的口味。
第 7 步：使用 Elementor 发布 WooCommerce 页面
现在一切准备就绪，我们制作了单个产品页面，存档页面，并完成了页面设计的准备，是时候将页面放入直播网站了。
保存模板后，您只需转到仪表板，进入要放置产品或存档的页面，然后在那里调用模板。 简单易行。 您甚至不必复制页面，因为您可以随时使用已保存的模板。
这就是您使用模板使用 Elementor 构建令人惊叹的 WooCommerce 页面的方式。
在几分钟内设计复杂的 WooCommerce 页面时放松
当您确切知道自己在做什么时，使用 Elementor 设计 WooCommerce 页面会更轻松、更有趣。 作为对初学者友好的软件，Elementor 使您无需任何第三方就可以快速掌握基础知识。
就这样！
对于与本文相关的任何问题，请使用评论部分，或者您可以使用 LiveChat 选项直接与我们交谈。 谢谢你熬夜。
注意安全。