如何使用 WordPress 和 Elementor 2020 制作电子商务网站

已发表: 2022-07-10

在本教程中，我将教您如何使用可以完全自定义的 WordPress 和 Elementor 2020 制作电子商务网站。

WordPress 是最常用的 CMS 平台，用于构建所有类型的网站，包括电子商务网站。 此外，您将学习使用 Elementor 页面构建器来创建令人惊叹的网页，这是目前 WordPress 排名第一和最受欢迎的页面构建器。 WordPress 控制着超过 1/3 的互联网。 大多数大型电子商务公司，如 Sony、Bata、eBay 等，都在使用 if 来开发和维护他们的网站。使用 WordPress 最好的部分是你不需要学习任何类型的编码语言或任何其他语言制作您的网站的技术术语。 这是一个简单的拖放平台，它提供了许多内置模板和布局，有助于创建一个有吸引力的用户友好型网站。 此外，我将提供预制模板，您可以轻松导入这些模板，并在几分钟内启动并运行您的电子商务网站。

只需完成整个教程，您就可以准备好在没有任何外部帮助的情况下启动并运行自己的网站。 本教程帮助许多人创建了他们的网站，并让他们的企业在这个残酷的电子商务行业的竞争中获得优势。 因此，请阅读这个简单且不言自明的教程，并获得一项对您的一生都有帮助的技能。 整个过程以循序渐进的方式进行教学，并提供了所有信息图形和图片表示，以使其尽可能易于理解。

因此，让我们开始使用 WordPress 和 Elementor 2020 制作电子商务网站

电子商务网站简介

上图是典型电子商务网站的主页或登录页面的示例。 登陆页面对于电子商务网站的转化和销售非常重要。 因此，登陆页面应该很有吸引力，包含横幅和销售通知、降价通知或新到货通知，尤其是对于电子商务网站。 要获得转化，您需要在着陆页上强调最畅销的产品，并提供与这些产品的轻松链接。 您可以在登录页面上显示您的产品类别并提供指向它们的链接。

在顶部，我们有一个标题，其中包含我们的位置、电话号码、我们在左侧和右侧的联系号码，我们有 Facebook、Twitter、YouTube 等社交媒体页面图标。在下面，我们有一家商店链接到我们网站的产品购物页面的按钮。 此外，我们有一个帐户按钮，单击哪些用户可以进入他们自己的个人仪表板来访问和管理他们的信息和购买。 我们的标题本身也有我们业务的标志。 在中间，我们有指向我们页面的链接，即。 主页、关于我们、商店、我的帐户和联系我们。

之后，您将拥有所有产品和横幅，将在本教程中学习如何创建，以非常吸引人的方式展示。 之后，我们还有一个时事通讯部分，用户可以在其中订阅您的网站，而不是关于产品、优惠、优惠券等的通知和邮件。下面是我们的页脚，提供关于我们的信息和一个电子邮件订阅按钮。

正如您在图片中看到的，商店页面列出了我们网站上的所有可用产品，用户可以在其中通过单击查看任何产品。 在侧边栏，我们有一个价格过滤器、类别列表、评论和我们产品的视频广告。 在每个产品下方，还有评论表和相关产品。 接下来，我们有关于我们的页面，显示您的业务描述和有关您的团队的信息。 然后我们有一个联系页面，用户可以使用联系表格与我们联系。接下来我们有一个我的帐户仪表板，它将为每个客户提供一个个人仪表板，其中包含他们的个人、购买和付款信息。

如图所示，您可以在购买商品后看到购物车页面，您可以在其中更改购买详细信息、查看总金额并继续付款。 然后访问者可以通过填写运输详细信息并支付购买费用来结账。 我们将在本教程中逐步学习创建所有这些页面，以便您的网站完全准备好开展业务。

获取托管并安装 WordPress 和 Elementor

  • 名称英雄域名购买

制作网站需要做的第一件事是为您的网站获取域名和托管服务。 您需要选择好的托管，因为您的整个网站将基于您的托管站点并得到支持，因此您需要根据可靠性、技术支持、空间、证券、设计、SEO 机会等标准检查和比较各种托管。

市场上有几家托管服务提供商，其中大多数都有不同的产品。 我已经尝试了很多，最终我的所有网站都选择了 NameHero。 我个人使用它并将其与其他 22 个主机进行比较，发现它们是最好的。 正如您在图片中看到的，它们有 4 个不同的选项，我推荐电子商务网站的 Plus Cloud 选项。 您可以使用我的链接获得折扣。 www.namehero.com/darrelwilson

订购计划后，您将可以选择您的域名，即您的网站名称。 你可以选择任何你想要的名字。 您可以根据需要选择您的域，例如 .net、.biz 等。下一步也是最后一步是填写有关帐户和付款详细信息的信息。 强烈建议在插件复选框中获取 ID 保护，因为它可以保护您免受垃圾邮件发送者的侵害。 通过单击下一页并进入付款流程完成购买。

  • 安装 WordPress

要在您的主机上安装 WordPress，请转到您的主机页面上的“客户区”，单击“云虚拟主机”。 接下来，您将拥有我的产品和服务，您将在其中看到带有您的域名的 Plus Cloud 包，单击它旁边的“活动”按钮，如图所示。 接下来在左侧，您将看到“转到 cpanel”按钮并单击它。 如图所示，在下一页上，向下滚动到软件类别，然后单击“Softaculous 的 WordPress 管理器”。

这将打开一个 WordPress 安装程序，单击立即安装按钮。 将打开一个设置页面，其中包含版本、您的域名和目录，如图所示。 请删除写在目录下的任何内容。 也在协议上选择“https：/”。 在站点设置中，您可以更改站点名称和描述。 我们以后也可以这样做。 输入您的管理员详细信息，例如用户名、密码和电子邮件，这将是您的 WordPress 登录详细信息。 在下一页上，向下滚动模板，因为我们不使用这些模板，然后单击“安装”。 单击下一页上给出的管理 URL 链接，您的新 WordPress 就制作完成并在互联网上运行。 您现在位于 WordPress 仪表板上，如图所示，您可以在其中编辑您的网站。

  • WordPress 常规设置

在您设计您的网站之前，让我们学习更改您在 WordPress 仪表板上的设置。 在您的 WordPress 仪表板上，您会在页面左侧看到几个选项卡，如图所示。 其中最重要的一项是“设置”选项卡，您可以在其中找到一般的 WordPress 设置。 您应该将永久链接从“日期和名称”更改为“发布名称”，以使您的网站地址更易于理解。 这对您的 SEO 也非常重要。 WordPress 仪表板上的另一个选项卡是“用户”，您可以在其中自定义个人资料和 WordPress 仪表板的外观。 单击“保存更改”以更新它。

要在注销后再次登录 WordPress，您需要在地址栏中输入您的 URL，然后输入“/wp-admin”，这将带您进入 WordPress 登录页面，您可以在其中输入您的用户名和密码进行登录。

创建页面和菜单

您现在已经创建了一个功能性网站，它还不是一个完整的网站。 现在您需要将页面添加到您的网站。 在您的 WordPress 仪表板上，单击“页面”选项卡并选择“添加新”选项。 您也可以通过单击页面顶部的“添加新”按钮来执行此操作。 执行此操作时，仪表板将打开一个页面编辑器，如下图所示，您可以在其中创建新页面。 在这里，您可以放置​​页面的名称并设计页面的布局。 单击“发布”按钮并创建您的网页。 在本教程中，我们将创建每个网站都需要的基本页面，例如主页、关于我们和联系方式。 目前，我们不会进入稍后会做的页面内容。 您可以通过单击 WordPress 仪表板中页面名称下方的视图来查看这些页面。

创建单独的页面后，您需要创建一个菜单，以便能够在这些页面中导航。 使用 WordPress 创建菜单非常容易。 只需导航到您的仪表板，找到“外观”选项卡，然后单击“菜单”。 这将打开一个菜单编辑器，您可以在其中创建和命名菜单，如下图所示。 创建菜单后，您可以将网站的不同页面分配给菜单。 您始终可以重新分配菜单项的年表，并且可以通过拖放将一个项目放在另一个项目下方来制作下拉菜单。

现在您应该做的是单击左上角的“自定义”，如图所示，然后转到“主页设置”并将您的主页更改为“静态页面”并选择您的主页作为静态页面，您必须从下拉列表中选择。 您这样做是为了让每次有人访问您的网站时，总是会被定向到您的主页。 直接访问您的关于我们、联系页面或您的最新帖子等其他页面对观众来说没有意义。

下载元素

现在我们需要购买我们的页面构建器 Elementor pro，我们将使用它来构建我们电子商务网站的网页。 您可以使用我的链接购买它。www.darrelwilson.com/elementor。在他们的页面上，您可以查看各种可用的包。 我们不能使用免费版本，因为我们需要主题构建器和 Woocommerce 构建器服务。 一旦你购买了你的包，它就会打开你的账户，如图所示，你必须点击“下载插件”，然后下载一个 zip。

接下来，您需要将其上传到您的 WordPress 网站。 转到 WordPress 上的仪表板，单击左侧工具栏上的“插件”，单击“添加新”，您的添加插件将打开，如图所示。 单击“上传插件”并选择您的 Elementor zip 文件并安装它。 单击“激活插件”，您的 WordPress 工具栏上将创建一个新的“Elementor”按钮。 去那里并单击“连接并激活”。

安装 WordPress 主题

现在让我们在我们的网站上安装一个 WordPress 主题。 WordPress 提供了大量预先设计的主题供您选择，用于您网站的外观。 在 WordPress 仪表板的“外观”选项卡中，您将找到“主题”按钮，您可以从中安装主题。 您可以从可用选项中选择任何主题。 出于本教程的目的，我们将使用您可以在流行菜单中找到的 Astra 主题。 单击主题名称下方的“激活”。 '使用这个主题最好的部分是它包含了网站运行所需的所有基本设置和功能，并且它与 Elementor 页面构建器非常兼容。

使用 Elementor 编辑页面

现在让我们学习如何使用 Elementor 编辑我们的页面。 转到您的 WordPress 网站的主页，然后单击顶部黑色行上的“编辑页面”，这将打开页面编辑器。 首先让我们更改右侧的页面设置，如图所示。 将内容布局更改为“全宽度拉伸”，然后选择“禁用标题”，因为我们希望该设置用于我们的主页。

现在单击“使用 Elementor 编辑”以打开 Elementor 编辑器，如图所示。 让我们在这里有一个 Elementor 编辑器的快速教程。 要向页面添加新部分，请单击加号按钮并选择所需的列模式。 要添加元素，请单击左侧工具栏上的 9 个点，这将为您提供如图所示的元素列表。 您可以在页面上拖放任何您想要的元素并对其进行编辑。

单击页面上的任何模块后，其编辑工具栏将显示在左侧。 在图像中，我们正在编辑标题，因此出现了包含 3 个选项卡的“编辑标题”。 第一个是内容，它为元素的内容提供了各种选项。 第二个是样式，您可以在其中设计元素的样式，例如颜色、大小、字体等。 第三个是高级，您可以在其中放置动画和其他东西。 同样，您可以在标题下方以相同的方式添加、编辑和设置文本框的样式。

您可以添加一个按钮并提供指向任何其他网站的链接，点击该按钮即可打开。 您可以将设置更改为“打开新窗口”，这样用户就不会离开我们的网站。 您还可以从图标库中为您的按钮选择一个图标。 如图所示，所有这些都将在左侧的“编辑按钮”工具栏中。

现在，我们可以通过单击 Elementor 上的文件夹图标来使用预制模板和块，而不是单独设计每个元素。 从库中，您可以选择整个页面或特定部分或块。 根据您的需要，可以使用所有类别的块。 对于登录页面，从英雄类别中选择任何块。 我在示例中选择了未来之声。

建立主页

现在让我们使用这个块创建一个类似于我们在介绍部分中看到的主页的页面。 首先让我们将背景更改为整个部分。 要编辑整个部分，请单击该部分顶部的六个点，如图所示。 现在您将看到“编辑部分”工具栏，您可以在其中使用样式选项卡来更改背景。 这是您可以在电子商务网站中使用的免费演示图像的链接。 接下来在 Elementor 中上传这些图片，然后选择图片作为背景。 如果背景看起来很暗，您可以更改背景叠加层。

现在您可以像我们之前所做的那样编辑块的元素。 更改文本、颜色、字体、地形等。您可以通过单击元素右上角的蓝色按钮来使用副本。您可以在文本框之间添加分隔线，并使用“编辑分隔线”按您喜欢的方式设置样式。 现在根据我们的设计编辑按钮，例如添加或减少填充以更改其周围的空间。 我们稍后会将此按钮链接到我们的商店页面，您也可以为其添加图标。 当您将鼠标悬停在“编辑按钮”工具栏下时，您可以更改样式和动画，如图所示。

接下来通过向下滚动元素工具栏来放置 Pro Elements 部分的动画标题。 如图所示，您可以使用“编辑动画标题”工具栏更改标题样式、形状、颜色、地形等。 您可以检查所有元素和样式，并按照您想要的方式进行设计。 找到完美的设计需要大量的试验和错误。 单击“更新”按钮将这些更改应用到您的网站。

接下来在登陆页面上，我们必须创建链接到各种类别的部分，如女性部分、男性部分和新品。 添加一个新的 3 列部分，在其中添加标题、文本和按钮。 您可以创建一个并复制两次以节省时间和精力。 同样，您必须像我们对上述部分所做的那样编辑此部分的文本、样式、背景等。 您可以使用我提供的图像作为所有 3 个类别的背景。 在使用文本编辑器时，要结束行并转到下一行，就像我们在女性部分所做的一样，使用 <br> 如图所示。

在这里，我们在本节中没有任何模板或块，因此您必须从头开始创建每个部分并设置样式，这第一次看起来可能是一项漫长的任务，但您可以使用所有拖放和复制等技巧复制上面部分中制作的“立即购买”按钮，只需更改按钮的样式或悬停，而不是从头开始制作。 您必须在编辑工具栏中查看每个元素的所有选项，以找出最适合您口味的选项。 这将是您的艺术感的一个很好的练习。要更改列内内容的间距，请单击列左上角的编辑列图标以打开“编辑列”工具栏，您可以在其中更改内边距高级部分，如下图所示。

您可以复制行列，然后编辑其他两个类别的男士部分和新品的文本和背景，这样您就不必再次设置它们的样式。 您应该对每个部分的背景图像和文本颜色进行不同的样式设置，以便每个类别都清晰可见。 如果第一个具有深色背景图像和浅色文本，则下一个应该是相反的。 所有这些技术，当您开始设计并亲自查看这些效果时，您将学习。 使用背景覆盖强调图像上方的文本，还可以使用拖放或对齐选项调整文本的位置，使其不会覆盖背景图像中的面部。 您还可以像之前一样使用“编辑列”来更改背景图像的位置。 单击部分顶部的蓝色按钮打开“编辑部分”，您可以将部分宽度拉伸到 100%。

接下来，我们将添加图标。 为此，首先添加一个新部分并从 Elementor 工具栏插入一个图像框。 为我提供的图像选择图标图像，如图所示。 这些图标框旨在鼓励购买，以提供有吸引力的标题，例如“免费送货”，并在下面的文字中写下描述和条件。 通过从“编辑图像”工具栏中更改图像位置、大小、标题和描述以及文本的颜色等，为图像框设置样式。 设计后复制它，这样您就不必重新设计所有图标。 之后，您可以根据需要编辑每个框的文本。 在高级部分，您可以使用 Padding 添加边距，这样页面看起来不会太拥挤。

您可以为列添加边框，使其看起来很吸引人。 单击“编辑列”按钮，在“样式”类别下，您可以添加边框并设计边框。 您可以选择边框类型、宽度、位置、半径等。您可以仅在一个或多个特定边上选择边框，就像我们在这里所做的右边框一样。 检查工具栏中可用的所有设计工具并选择自己。 你自己做的越多，你就会越习惯所有的工具和功能，它对你来说会变得更快、更容易。

接下来，我们将添加“新到货”部分。 但在我们将在这些行之间添加分隔线之前，它们看起来清晰可区分。 再次添加一个新部分，从 Elementor 工具栏中添加“分隔线”，并使用“编辑分隔线”工具栏进行设计，如图所示。 在分隔线中添加一个文本“新到货”，该文本将用作下一部分的标题，因此如图所示更改大小、字体等，使其看起来更有吸引力。

创建产品

我们现在必须创建要在我们的电子商务网站上销售的产品。 产品可以是简单的或可变的，简单的产品没有任何选择，例如尺寸、颜色或款式，而可变产品有多种选择，例如衣服的尺寸或颜色。 我们将学习创建它们。

电子商务

为了创建产品，我们需要添加一个新插件。 因此，让我们转到您的 WordPress 仪表板，单击工具栏上的“插件”，然后像之前一样单击“添加新”。 从插件库中，搜索“Woocommerce”。 Woocommerce 是我个人经验中最好的电子商务插件。 单击“安装”，然后单击激活。 现在 Woocommerce 插件将打开，如图所示。 填写表格并点击“继续”。 接下来选择您的行业，在本教程中，我们将创建一个时尚和服装网站。 接下来我们有产品类型，其中有 2 个选项 - 提供物理和下载，选择两者并单击“继续”。 然后你会得到一些问题，回答它们，然后再次单击“继续”。

接下来，您必须为您的插件选择一个主题，选择“Astra”主题。 接下来，它将为您提供激活 Jetpack 服务的选项，这将对我们有所帮助，因此请选择“Yes Please”，这将带您进入 Jetpack 帐户页面，填写您的详细信息并创建一个帐户。 您将被重定向到您的 WordPress 仪表板，但如图所示，您的工具栏上将提供一个新的“Woocommerce”。所有这些税收设置，我们将在稍后进行。

现在让我们开始创建产品。 首先，我们将创建一个简单的女式绿色衬衫产品，如图所示。

单击工具栏上的“产品”，将打开“添加新产品”页面，如下图所示。 填写产品名称和描述。 在产品数据下方选择“简单产品”，首先我们将创建一个简单产品。 将正常价格和销售价格放在下面，您可以在下面安排，如下图所示。 在这些日期，销售价格将自动适用。

接下来单击常规下方的“库存”设置，您可以在其中放置库存可用性。 您也可以在此处允许或禁止延期交货，如果您输入“不允许”，则如果产品缺货，则不会接受订单。 设置“低库存阈值”以在库存低时得到通知。

接下来在“运输”类别中，输入产品的重量和尺寸详细信息以用于运输目的。 在“链接”产品中，您可以在用户购买原始产品后显示相关产品的“追加销售”和显示购物车中相关产品的交叉销售。 添加相关产品，您想在买家购买此特定产品时向他们展示。 在“高级”类别中，您可以给买家备注并激活评论。

如果向下滚动，则在此设置下方，您会看到图像中的“产品简短描述”。 在这里根据我们的示例产品编写完整的描述。 您也可以在此处设计描述的字体和样式。 如果您看到图像，在右侧，有一个选项“产品图像”。 点击“设置产品图片”将打开“产品图片”页面，您可以在其中选择并上传产品图片。 在“产品图片”下方是“产品图库”，您可以在其中从不同角度放置产品的其他图片，以便更好地了解查看者，如图所示。

如图所示，您在右侧工具栏上有“产品类别”。 在这里您可以对您的产品进行分类。 因此，让我们通过单击“添加新类别”来创建一个新类别。 输入名称“女性”，然后单击“发布”。 现在您可以通过单击“查看产品”按钮查看您的产品。 它将显示产品在观众点击时将如何显示给观众。 将打开一个新产品弹出窗口，您可以在其中查看产品，甚至放大图像以获得更好的视图。 您可以再次编辑您想要的任何内容。

如果您不喜欢显示页面的样式和主题，可以使用右侧工具栏上的“Astra 设置”进行更改，如图所示。 例如，如果要删除侧边栏，请单击“侧边栏”并选择“无侧边栏”。 单击“更新”以保存更改，您可以再次单击查看产品以查看更改。 所以这是一个如何创建简单产品的示例。 您可以使用相同的过程添加任意数量的产品和类别。 如果您单击产品页面上的类别按钮，它将打开该类别的新页面，其中将显示该类别的所有产品。 在这一点上，这将非常平淡，但稍后我们也会设计这个页面。

接下来让我们学习如何创建变量产品。 同样，我们必须像之前一样转到“添加新产品”页面。 这次让我们创建一个男士可变产品。 像我们之前所做的那样给出产品的标题和描述。 请记住，这不是主要描述，而是下面显示的附加小描述，主要描述将写在“产品简短描述”中。 在这里，我们要将“产品数据”更改为“可变产品”。 所有其他设置，例如库存、运输、链接产品等，都与我们之前创建的简单产品类似，因此您可以自行完成这些详细信息。

现在单击“属性”，我们将为我们的产品添加新的属性或特征。 单击“添加”即可。 接下来如图所示，我们将创建产品的新属性，例如尺寸、颜色等。首先，让我们将尺寸放入“名称”框中。 在“值”框中，先写小，然后是“|”符号（不带括号）。 如图所示，按“Shift”键 + Enter 按钮上方的键写入此符号，然后写入 Medium，再次写入相同的符号，然后写入 Large。 您可以使用该符号添加任意数量的变量，例如 S、M、L、XL 等。 选中“用于所有变体”复选框，然后单击“保存属性”。

接下来我们将添加另一个属性。 再次单击“添加”按钮，在“名称”框和“值”框中输入“颜色”，添加您想要的颜色名称，并用我们在“大小”属性中使用的符号分隔。 在这里，我们正在编写“白色|蓝色”作为两个可用选项。 再次选中“用于变体”框并单击“保存属性”。

现在，我们将这些属性应用到我们的产品中。 单击“属性”下方的“变体”，然后选择“从所有属性创建变体”，然后单击“开始”。 单击弹出窗口上的“是”以验证此选项。 如图所示，这将打开选项。 您可以看到通过组合 3 种尺寸和 2 种颜色（即小白、小蓝、中白、中蓝、大白和大蓝）添加了 6 种变化。

如图所示，单击第一个打开其编辑设置。 首先，我们必须上传这个变体的图像。 点击“上传图片”并从图库中选择图片。 接下来，您必须输入此变化的正常价格。 这是必填字段，因此即使价格相同，您也必须在此处填写。 再次，您可以添加销售价格并像我们在简单产品中那样安排它。 您可以像我们在简单产品中一样填写库存详细信息和运输详细信息。

同样，您也必须对其他变体执行相同的过程。 所以点击 Variationname，上传图片并输入价格 Small Blue 等等。 在这里，我们仅提供所需的所有变体的图像和价格，但您可以根据自己的条款将所有其他详细信息放在您的网站上。 在变体名称上方，您可以看到放置“默认表单值”的选项，您可以在其中选择当用户查看产品时哪些变体将作为默认值显示在产品框中。

Product short description 等其他设置与我们之前做的 Simple Product 类似，请根据您的产品填写详细信息。 产品图片也是如此，您应该将默认变体的图片放在这里，因为这将在查看产品时首先显示给查看者。 您应该将最畅销的变体作为默认产品。 您不需要为可变产品放置产品库，因为视图将能够看到变体的不同图像。 创建一个新的“男士”类别并选择其复选框，就像我们为简单产品所做的那样。 单击发布以在网站上应用这些更改。

您现在可以单击查看产品以查看查看者将如何查看它。 如图所示，产品将打开。 由于这是一个可变产品，您将在其下拉框中获得属性列表及其值。 您可以单击这些框来查看该产品的各种变体。 当您单击它们时，您将看到您为变体设置的图像和价格。 同样，如果您不喜欢使用 Astra 设置，您也可以更改产品页面的主题。 让我们更改设置并删除侧边栏并将内容布局更改为全宽，就像我们对单个产品所做的那样以保持一致性。 您可以根据需要制作尽可能多的可变产品，但您必须像我们在此处所做的那样填写每个变体的详细信息。 因此，随着属性越多，它们的值越多，您将有更多的变化。 需要注意的一点是，产品的价格显示为一个范围，因为它将最低价格变化的价格和最昂贵的变化显示为一个范围。 所以我们现在已经学会了如何创建简单产品和可变产品。

现在让我们将这些产品添加到我们的主页。 转到您的主页，然后单击“使用 Elementor 编辑”。 向下滚动到我们创建 New Arrivals 分隔符的末尾。 在右侧的 Elementor 工具栏上，单击“搜索小部件”栏并输入产品。 选择 Product 元素并将其拖放到页面上 New Arrivals 分隔符下方的框中，您将在那里看到产品。

如图所示，在“编辑产品”工具栏中，您拥有要在此处显示的产品的列数和行数，因此并非所有产品都显示在此页面中。 您还可以使用样式类别来更改图像的列间距和行间距、对齐方式、边框。 您也可以在此处设置产品名称的标题样式，如颜色、字体、间距、地形等。评级星星也是如此，无论是填充的还是空的。 同样对于价格，您可以更改常规价格和销售价格的字体、颜色、地形等。 接下来是按钮，您可以随意设计按钮，例如背景颜色、文本颜色、边框颜色等。 使用 Elementor，使所有这些编辑变得如此简单。 您只需使用所有可用的编辑工具并使用它，所有结果都会在您的眼前。

您还可以设计“促销快闪”选项，以便在促销时显示，当产品促销时，它会在您的产品上方显示一个 Flash 横幅。 当他们访问您的主页时，使用它来吸引您的产品的客户。 所有的设计选项都与我们迄今为止所学的相似，因此您可以通过所有这些选项来成长并选择最适合您的设计。

在查询选项中，您可以选择要在此部分中显示的产品。 例如，如果您只想在此部分中显示女性产品，则在来源框中，选择“最新产品”，因为它是下拉框中的新品部分，然后单击“包含”。 然后在“包括依据”框中，写下术语并选择术语选项，这将是术语框。 如图所示，在术语框中，填写“女性”并选择“产品类别：女性”。 单击更新以在您的网站上生效。 通过这种方式，您可以在网站的任何部分创建产品展示部分。

Elementor电子商务模板

我已经为您提供了我们刚刚准备好的电子商务网站的模板，我们在此链接上免费在我的网站上准备了布局https://darrelwilson.com/product/elementor-ecommerce-template-package。 从那里下载模板 zip 文件，现在让我们学习如何在 Elementor 中导入和导出模板。 First, extract all the .json flies from the zip file. These are the templates for specific pages. Go back to your Elementor editor page and click on the folder icon next to the Add section icon on the page. This will open up the Template library and go to 'My templates' as shown in the image and click on Add templates. Here you can drag and drop those template files. Select the Homepage template and click on insert and your template will be loaded. You can edit the template according your taste but using the template, you won't have to create everything from scratch. Just remove the unwanted elements or sections and add new ones you like such as countdown, form etc. and style them the way you want.

Now let us create the other pages using our template. First, create a Menu for the rest of the pages. Woocommerce automatically adds the Shop, My Account, Cart and Checkout pages. Go the Appearance in WordPress and add these to the menu. Go to the About Us page, click on 'Edit Page, first disable the title and select Full Width in content layout. Now similar to Homepage template, insert the About Us template and edit the page as you want. You can add other pages too. Complete the website design using this process.

主题定制器

Theme customizer is where we design the structure and theme of the website and not the actual webpages. For opening the theme customizer, click on the 'Customize' button next you website button and it will open the Theme Customizer dashboard. We have used the Astra theme in this tutorial. Let us create a logo for your website, go to Header, then Site Identity and select Logo and upload your Logo. You can get a logo from www.fiverr.com. In the same way you can edit your site icon. You can design your Primary Header here too as shown in the image. You can select the layout, width, colour, etc. of the Header. Also you can design and style your menu from here.

Same way, you can design the footer. You can add upto 4 footer widgets here and customize as you want as shown in the image. Select 'Widgets' on your WordPress toolbar and you will get 4 Widgets to add to your footer. When you click on it and then click on 'Add a widget', you will get a list of widgets. You will get a widget toolbar where you can edit the contents of widget such as title, description, image and also your social media links. Once you click publish, it will appear on the footer of your webpage.

From the Woocommerce option on the toolbar, we can customize the Checkout page as in the image. You can assign 'Terms and conditions' page and 'Privacy Policy' page from the toolbar for the customers but first you'll have to first create these pages and write the details as the legal requirements. Next select the page from the drop down below their respective box. You can add new fields in the Checkout form and make them 'Required' or Optional.

Next in the Woocommerce toolbar, you can customize your Product catalog as shown in the image.You can customize, how products are shown in the catalog, their design an also you can hide some of the components that you don't want show like for example Ratings by clicking on the eye icon next to its name. This will control how your products are shown on your Shop page and also on the products section anywhere on the website.

Here we are using the free version of Astra Theme customizer, but you can buy the pro version where you will get tons of different option and templates for your website. You can import entire customized websites from this service.

插件

Plugins are small apps for your website which helps creating and upgrading your website. You have to add plugins to your WordPress to help you create your website in way more efficient manner.To add a new plugin to your WordPress, go to your WordPress homepage and then click on plug-in from the Option list on the left side. It will open an 'Add plugin' page as shown in the image where different type of plugins are available to choose from. You can search for the type of plug-in that you need in the search box and you will find so many plugins to use for that specific purpose. It is like an app store on your mobile and just like your app store, you can check the usage, reviews and success of these plugins before installing. And all these plug-ins are available for free. And if you need any plugin later, you can always come back and install it here. You can add plugins for social media sites, translator and so many things. Just search for the plugin use you want, select the one you want, click on 'Install' and 'Activate'. For every plugin, a new option will be created on the toolbar from where you can add and edit elements.

Elementor 主题生成器

The Elementor theme builder allows you to create a custom Shop Page and Product Page using the page builder instead of the themes, so that these pages match the design of other pages of your website. Using Elementor page builder, you can edit any part of any page of your website unlike the themes which are preset and normally can't be edited. So now we are going to edit the Shop Page and Product Page that we created using the Woocommerce theme using Elementor theme builder and design it to match our demo website's design we saw in the beginning.

Go to your WordPress dashboard, click on 'Templates' and then select 'Theme Builder' from the list which will open the Theme Builder as shown in the image. Elementor allows us to build the theme of different parts of the site. So if want to have a different header, click on '+' icon on header. And you can select any header theme from the library and click 'Insert'. Your Header will be created and now you can edit anything in using the Edit Toolbar as we did earlier. You can the change the style of the Logo or the Menu or anything, just click on the part you want to edit and the edit toolbar will appear.

  • Custom Header

Now you can add other elements on this header one by one as we did earlier, or you can insert another one or more blocks which contains similar elements and delete the common ones. For example, here as you can see in the image, we inserted a Header Block which has a bar for contact no, info and social icons. We can delete the rest of the elements of the block as we don't need them. Again you may not find the exact design of each element in the block templates, so you can now edit and style as you want to instead of creating and editing each element from scratch. This way you can create different part of your website very quickly.

Remember we have just created a part of website but it's not applied on our website yet. So when you click 'Publish', it will ask you where you want to display this template on your website. Here we created a header, so we will display it on entire website by click 'Entire Site' on 'Include' box as shown in the image. You can put different conditions by adding Include or Exclude conditions as to where you show this template.

  • Custom Footer

Now you can do the same thing for footer as we did for the header and create a footer for your website using templates. You can edit the footer content to your pages by pasting the URL link of the page to its button using the editor as shown in the image. Here we have selected a footer block template with for columns and added link to various parts of our Shop, About, Contact Us and social media pages. You may design it anyway you want.

  • Custom Shop Page

Now let us design a custom Shop Page using the Theme Builder. Elementor has very less themes for shop page so we will design from scratch. So we will have to create each element like for the banner we will have 2 text boxes and animated heading over a background image. Edit the elements and style the section as we learned earlier. Use all the styling features such as font, colours, size, shadows, margins, paddings, etc. to make the banner section look eye catchy like here in the example as shown in the image below.

Now we need to design our product section with a filter column in the side. So add a new section, and use the 2 column structure. On the right, add 'Products' from the toolbar and design it as we did on the Homepage or you can save the Homepage Template and insert it here. On the left, insert 'Sidebar' from the Elementor elements bar and select 'Woocommerce sidebar'. Right now, we haven't created a sidebar so we will have to exit to WordPress dashboard. But first click 'Publish' and in the condition include 'Shop page' to apply it to the website.

Go to 'Appearance' on the dashboard where we have all our widgets are shown as shown in the image. On the right, we have our Woocommerce Sidebar where we can place the 'Filter Products by Price' by drag and drop. You can add other filters too. Below it we will add 'Product Category', then 'Products' and the 'Video' on our sidebar. You can edit the title, contents and other stuff like link the URL of the video here. You can add as many widgets that you want from here.

If you want to edit the style of this sidebar, you can't use the Elementor editor as these are prepared by WordPress theme customizer. So in order to customize it, you will need click on 'Customize' button WordPress. Click on 'Global', then 'colours' where you can change the colours as in the image. Here we are customizing the WordPress theme which is the Astra theme that we are using, and not just the sidebar.

  • Custom Category Page

Now we will design the category pages for our product. We are going to copy the template of page we created earlier and save to use it for all our Product Category pages. First, click on 'Edit with Elementor' on the top and select 'Product Archive' as shown in Image. Then, on the bottom left click on the button next to Update and select 'Save as a Template' as shown in the next Image. Give a name to the template like 'Main Shop Page Template' and click Save. Next select the given name and click on 'Export' and then 'Save File' to save this file to use this template on other pages or even other websites.

Now, go back to the Elementor theme builder and click on Add New. Here you have the Elementor templates but we will use the template we created, so click on 'My Templates' and click on 'Insert' next to the name of new template you created. Now we have to edit it using the tools which we have learned already. So change the Title text to 'Men's Product'. Next as this is Men's Category, you have to edit it to show only Men's Product. So click on the Product box and on the 'Query' button on the toolbar, write 'term' in the 'Include By' button and put 'Men' in the term box as we did earlier. Click on Publish and put the condition to put it only in 'Men's' in 'Products category' as you can see in the image below. You can go the website and on the Shop page, click on the Men's category on the sidebar and view the effect on the page. You will have to do the exact same process for Women's category page and any other category you want to put on your website too.

  • 定制产品页面

现在我们将使用相同的技术自定义我们的产品页面。 如果您现在单击任何产品，它将以我们在创建产品时看到的默认主题显示产品页面。 再次，转到 Elementortheme 构建器并通过单击旁边的 + 图标添加一个新的 Single Product 主题。 您可以使用此处提供的模板，但我们将为本教程从头开始构建一个。 因此，首先添加一个 2 部分部分并单击元素选项卡。 在这里，您可以看到专门为产品制作的所有元素，如图所示，我们在构建页面时看不到这些元素。

首先添加一个类似于产品分类的面包屑。 现在您可以使用工具栏编辑面包屑的样式，如颜色、大小、填充等，如图所示。 在右侧，从侧边栏中添加“产品标题”元素，并像之前一样使用工具栏设计其样式。 接下来让我们以相同的方式添加产品图像。 单击产品图像元素并使用工具栏编辑其样式。 接下来类似地添加简短描述。 您可以在标题和描述之间添加分隔线。 接下来我们要放产品类别。 为此，选择“产品元”元素并将其放在描述和样式下。 接下来在其下方添加“价格”元素，您也可以再次更改其样式。 接下来在价格下方放置一个“添加到购物车”按钮。 由于它是可变产品，它会自动提供变体选项。 接下来，您可以添加社交图标和评论表单、附加信息等您想要的元素。 在您的产品页面上添加和设计您想要的元素后，单击“发布”。 在显示页面的条件中，包括“所有产品”，以使该模板对您创建的所有产品生效。 如果需要，您可以为不同的产品类别创建不同的主题，您只需更改条件以将其仅包含在该特定类别中。 当我们将其应用于所有产品时，我们所有的产品页面都将更新为此模板。

  • 自定义结帐和购物车页面

现在我们将设计定制的结帐和购物车页面。 结帐和购物车页面不使用主题构建器，因此我们将使用 Elementor 对其进行编辑。 转到购物车页面，然后单击使用 Elementor 编辑。 就像任何其他页面一样，您可以使用 Elementor 元素以您想要的方式对其进行编辑和设置样式。 您现在可以自己编辑文本、图标、优惠券按钮等并设置字体、颜色、地形等样式。 但是使用 Elementor 无法编辑实际主题的部分，例如此处的标题 Cart。 要编辑它，您必须在 WordPress 本身中对其进行编辑，因此单击“编辑页面”并在右下角，选择禁用部分下的“禁用标题”复选框，如图所示，就像我们之前在设计wordpress 的主题。

您可以编辑和设计结帐页面并以相同的方式使用。 同样，您可以设计客户的“我的帐户”页面，因为该页面的默认主题不是很好看。 您可以使用 Elementor 对其进行编辑。 而且我之前还提供了一个链接，其中我还将所有这些页面的模板的 zip 文件放在其中，供您快速设计。

Woocommerce 设置

您现在已经学会了如何使用 Elementor 和 Theme Builder 创建页面，并且您的网站建设已经完成。 现在我们必须了解 Woocommerce 设置以使该网站运行。 转到 WordPress 仪表板，单击 Woocommerce 并选择“设置”，这将打开 Woocommerce 的常规设置选项卡，如图所示。

  • 通用设置

在这里，您可以输入您的地址并选择您要销售的国家/地区、启用税收、启用优惠券代码。 选中所有这些框以启用它们。 在此之下，您可以根据您所在的国家/地区更改您的货币。

  • 产品标签

下一个选项卡是设置顶行的产品选项卡，您会在其中找到许多设置，其中大部分设置非常具体，我们不会使用，除了评论部分，您可以在其中启用产品评论和星级评分，如图所示，您还可以在评论中向真实买家显示经过验证的用户标签。 您还可以输入产品的运输详细信息，例如重量、尺寸等。

  • 税收选项卡

接下来在税收选项卡中，您可以在其中启用或禁用自动税收计算。 根据您所在的国家和业务，税收计算可能非常复杂，因此自动计算可能不适合您。 但是，您可以选择根据购物车项目为不同的送货地址设置税费。 我已经提供了 www.taxjar.com 的链接，您可以在其中获得免费和付费服务来帮助您计算税款。 您还可以选择在各个点显示含税或不含税的价格，例如在商店中，您应该显示不含税的价格，在购物车和结帐中，通常应该是含税的。

  • 运输标签

下一个标签是“运输”。 首先单击“添加运输区域”，添加区域名称，区域的特定区域，并在各种运输方式下设置您的运费，如图所示。 在这里，我们使用了统一费率方法，其中我们设置了 5 美元的统一费率，另一种是免费送货方式。 单击下面的编辑按钮以添加最低订单金额或优惠券要求的条件。 在这里，我们选择了最低 50 美元的订单要求。 您可以为每个区域添加多个区域和多种运输方式和费率。 对于您的任何区域未涵盖的位置，您也有一个默认值，我们没有给出任何具体的费率。 所以在这里，我们默认为这些区域设置了 10 美元的默认费率。

  • 帐户和隐私选项卡

“帐户和隐私”选项卡，您可以在其中选择在购买前创建客户帐户的选项，或允许他们先在没有帐户的情况下购买，然后在结帐时创建帐户，以及创建其他各种选项用户名，密码等帐户，您可以自行检查，因为它们非常不言自明。 您也可以在此处添加法律要求的隐私政策。 您还可以选择在个人数据保留下删除用户个人数据的时间。

  • 电子邮件选项卡

此外，我们还有“电子邮件”选项卡，其中设置了您将从网站接收并发送给客户的所有自动电子邮件，例如新订单或取消订单。 您可以在此处编辑在所有此类情况下您将收到或发送给客户的电子邮件格式。 您可以为此添加插件以接收质量更好的电子邮件。 转到插件并安装“Kadence Woocommerce 电子邮件设计师”，然后。 使用此插件，您可以使用其自定义样式设计电子邮件内容、页眉、页脚、文本等，这些样式可在此处通过转到 Woocommerce 侧边栏中的插件进行编辑，如图所示。

  • 付款

现在我们将转到“付款”选项卡，我们可以在其中选择允许客户使用的付款方式。 有许多选项可供选择，但我们将在此处通过单击启用按钮启用“条纹”和“贝宝”，如下图所示。

  1. 贝宝

现在让我们先设置 PayPal 的付款设置，所以点击“设置”打开 PayPal 设置页面，您可以在其中输入付款框的标题、描述和您的 PayPal 电子邮件帐户，然后点击“保存更改” ' 将您的网站与 PayPal 集成。 如果您没有 PayPal，您可以通过访问他们的网站并免费注册来创建一个。 如图所示，您只需使用将放入 PayPal 邮箱的电子邮件地址进行注册。 它是可用的最流行的付款方式之一。

  1. 条纹

接下来，我们将使用条纹设置付款。 所以点击它旁边的“管理”按钮。 与 PayPal 设置方法相同，首先为支付框设置标题、描述。 接下来，您将拥有测试可发布密钥和测试密钥。 您可以访问 www.stripe.com 并在那里创建一个免费帐户，只需要有一个银行帐户即可创建一个帐户。 创建免费服务后，您可以将您的条带帐户集成到您的网站。 为此，在登录您的条带帐户后，单击“开发人员”并选择“API 密钥”，如图所示。 将您网站上出现的可发布密钥复制到可发布密钥框中，并将密钥复制到密钥框中。 点击“保存更改”，现在您的网站已准备好以极低的交易费用接受来自世界各地的信用卡付款。 在这里我们这样做了，我们仍然在我们的条带帐户和 Woocommerce 设置页面上启用了查看测试数据按钮，我们已经选中了“启用测试模式”框，但是当您准备好使用您的支付系统时，禁用它.

您现在可以通过下订单和购买东西来测试您的网站，还可以通过付款来检查一切是否正常。在我的帐户页面上，客户将拥有自己的个人仪表板，他们可以在其中检查、编辑或取消他们的订单，编辑他们的送货和账单地址，设置他们的付款方式和他们的帐户详细信息。 他们所有过去的订单视图也显示在他们的订单列表中以及他们的状态。

针对移动设备进行优化

移动优化意味着使网站看起来对移动设备用户友好。 移动优化在当今的场景中非常重要，因为 a) 很多人使用移动设备上网，b) 根据新的 Google 算法，如果您的网站没有经过移动优化，那么他们会降低您的排名，这对您来说可能是灾难性的网站流量和搜索引擎优化。

使用 Elementor 编辑器进行移动优化非常简单。 让我们再次回到 Elementor 仪表板。 在工具栏的底部，您将找到“响应模式”按钮，单击该按钮将打开一个下拉列表，其中显示 3 个选项，即。 台式机、平板电脑和移动设备。 到目前为止，我们一直在根据桌面浏览器的外观设计我们的网站。 现在单击“平板电脑”以预览它在平板电脑浏览器上的外观。 同样，您也可以检查它是否为“移动”模式。 如果网页看起来有问题或没有视觉吸引力，您可以编辑该网页。

如图所示，第一个标题对于平板模式来说太大了，而“50% OFF”太小了，所以你必须调整它。 检查页面的所有元素，看看是否需要重新设计。 当您单击更新时，所有这些更改都将适用于平板电脑模式。同样适用于移动模式。 调整标题文本的大小、按钮、横幅和标题的对齐方式。

如果您认为这对他们不重要，您可以禁用移动或平板电脑版本上您需要的一些部分。 为此，选择要隐藏的部分，转到“编辑部分”工具栏上的高级类别，单击“响应”，在可见性下，您可以选择在桌面、平板电脑或移动版本上隐藏该部分，如图所示图像。您可以对其他部分或元素执行相同的操作。 您可以为平板电脑或移动模式设计所有不同的东西，例如背景图像、字体大小或任何东西。

联系表

现在让我们继续前进，学习如何创建一个“联系”页面，访问者可以在其中填写联系信息，并将其直接发送到您的电子邮件。 页面的基本设计，您可以使用 Elementor 编辑器或 Theme Customizer 自行完成。 唯一重要的是如图所示的联系表格。 因此，您在 Elementor 工具栏上搜索表单并将其拖放到该部分，您可以使用“编辑表单”工具栏编辑文本和表单设计，我认为您现在可以自己完成。 编辑表单工具栏中有许多高级设置，这里没有介绍，但您可以创建的基本表单。

优惠券

要将优惠券添加到您的网站，请单击自定义按钮旁边顶部栏上的“+ 新”，然后选择优惠券。 如图所示，WordPress 侧工具栏上的优惠券位于“营销”部分下。 在这里，您可以添加新的优惠券代码，选择折扣类型为百分比折扣、固定购物车折扣或固定产品折扣，输入折扣的金额或百分比以及优惠券的有效期。 在“使用限制”下，您可以设置最低消费、个人使用或与其他优惠券一起使用等条件，在优惠券中包含或排除产品或产品类别。 在使用限制下，您可以选择此优惠券的使用次数或限制特定产品的使用次数，并限制单个客户的使用。 单击发布以在网站上应用此优惠券并在购物车页面上通过在购买时应用优惠券代码对其进行测试。

我真的希望这些教程对读者有所帮助，现在您可以自己从头开始创建网站。 如果您需要任何帮助，可以访问我的网站和我的 Facebook 页面并发表评论。 我有大量关于网站建设和使用 Elementor 的其他资源，您可以查看这些资源。 感谢您阅读本教程，随时欢迎您的反馈和查询。