2024 年如何制作电子商务网站（简单指南）

您想将陷入困境的实体店转变为在线业务吗？在线业务可以吸引更广泛的受众并提高销售额。如今，许多用户希望在线扩展传统业务或在数字市场上开展新业务。本指南提供了创建成功的电子商务网站的分步方法，以促进销售并增强客户互动。我们将介绍如何使用 Divi 和 WooCommerce 在几分钟内生成完整的在线商店、如何设计它以适合您的品牌等等。

为什么需要建立电子商务网站？

出于多种原因，建立电子商务网站在当今的商业世界中变得至关重要，尤其是随着购物习惯转向网上。以下是构建一个如此重要的一些关键原因：

• 扩大覆盖范围：电子商务网站可以让您的企业接触到本地以外的客户。您可以随时随地向人们销售产品——24/7，没有物理界限。
• 为客户提供便利：人们喜欢网上购物的便捷性。无论客户使用手机、平板电脑还是电脑，都可以在方便的时候购物。通过电子商务网站，您可以使购买过程变得顺畅且方便。
• 成本效益：运营电子商务网站比运营实体店更具成本效益。您可以减少管理费用，例如租金、水电费，在某些情况下还包括员工费用。
• 数据和分析：电子商务网站提供丰富的数据，可以帮助您更好地了解客户。您可以跟踪他们的购物习惯，了解哪些产品效果最好，并使用该数据来改进营销策略和客户体验。

如您所知，让我们开始构建创建电子商务网站的原因！

如何通过 7 个步骤构建电子商务网站

当您遵循正确的步骤并使用适当的工具时，使用 WordPress 创建您自己的电子商务网站就会变得非常简单。无论是新手还是经验丰富的开发人员，您都可以轻松推出具有视觉吸引力的在线商店。操作方法如下：

1. 获取域名和 WordPress 托管

在构建网站之前，您需要准备好一些必需品 - 您的域名、托管服务和 WordPress 设置。

如果您仍在寻找托管提供商，SiteGround 通过管理所有这些方面提供了便捷的解决方案。

领域

您的域名（或域名）是您网站的网址（例如，elegantthemes.com），选择一个能够反映您的品牌且易于记住的域名至关重要。理想情况下，您的域名应该让访问者了解您的电子商务业务。

选择域名后，搜索可靠的域名注册商进行注册。 Namecheap 是一个不错的选择，或者如果您选择它们​​进行托管，也可以直接通过 SiteGround 获得折扣域名。

访问 NameCheap

如果您拥有一个域，则可以通过更新名称服务器轻松将其连接到您的托管提供商。

WordPress 托管

您的网站需要一个可靠的在线家园，托管就可以发挥作用。由于我们将使用 WordPress，因此选择高质量的 WordPress 托管提供商非常重要。一个好的主机将使您的网站管理变得简单，同时确保其在速度和安全性方面表现良好。

SiteGround 提供 WordPress 托管计划，起价为每月 3.99 美元，提供经济实惠的选择。使用 SiteGround 设置 WordPress 托管非常简单。

观看下面的视频，了解如何设置您的域名和托管。

安装 WordPress

许多 WordPress 托管提供商（例如 SiteGround）在设置过程中提供一键式 WordPress 安装。

如果此选项不可用，只需前往托管提供商的仪表板即可。选择 WordPress 安装程序并按照提供的步骤进行操作。安装完成后，您将收到一封包含登录详细信息的确认电子邮件。要访问您的站点，请转至yourwebsite.com/wp-admin并使用您在安装过程中创建的凭据登录。

2.安装Divi主题

使用 Divi 构建您的电子商务网站从未如此简单。这个多功能主题使您能够创建视觉上令人惊叹且完全可定制的网站，而无需任何编码经验。 Divi 以其强大的设计功能而闻名，并提供针对不同类型的电子商务网站量身定制的各种预制布局。

Divi 连接了电子商务网站的所有点：

• 它使您能够使用可视化的拖放界面轻松设计和定制您的在线商店，无需编码。
• Divi 提供 211 个预先设计的布局和 30 个专门针对电子商务的布局包，使您可以轻松创建产品页面、结账页面等。
• Divi 的 WooCommerce 模块允许您显示、过滤和自定义您的产品。此外，您可以使用拖放模块创建独特的产品页面布局，显示产品详细信息、评论、图像等。
• 您可以访问 Divi 扩展市场来集成多个支付网关，例如 PayPal 和 Stripe。

下载并安装 Divi

您可以从 Elegant Themes 购买 Divi，年度许可证价格为89 美元，终身许可证价格为249 美元。购买后，请按照以下步骤下载主题并将其安装在您的 WordPress 网站上：

1. 导航到外观 > 主题。
2. 单击“添加新主题”，然后单击“上传主题” 。
3. 选择您下载的 Divi .zip 文件并单击立即安装。
4. 安装后，单击激活将 Divi 设置为活动主题。

观看下面的视频了解更多信息。

设置完成后，您就可以开始构建了。如果您想在深入了解之前了解更多信息，请查看我们有关使用 Divi Builder 的教程。

开始使用 Divi

3. 建立您的电子商务网站

在 WordPress 上安装 Divi 主题后，您可以构建您的电子商务网站。无需担心 — Divi Quick Sites 可以自动创建您的商店，因此您无需从头开始！

启动入职向导

在 WordPress 中激活 Divi 主题后，您将可以访问 Divi 的入门向导，该向导将引导您完成设置过程。只需单击按钮即可登录并激活您的 Divi 许可证。

登录后，您将到达 Divi 主仪表板。在这里，您可以管理您的站点、访问文档、获取支持并开始使用 Divi Quick Sites 构建新站点。首先，只需从 Divi 仪表板单击“生成新站点”即可。

使用 Divi AI 获取快速站点

使用电子商务入门网站（或使用 AI）生成您的网站

接下来，您可以选择使用预制的入门网站或 Divi 的 AI 网站构建器来构建新的电子商务网站。 Divi 提供了一个令人惊叹的在线商店入门网站模板，因此单击“选择网站模板”即可开始。

在屏幕上，您将看到几个入门网站模板。选择在线商店起始站点。如果您担心模板与您品牌的颜色、字体或图像不相符，请不要担心；这些可以稍后定制。

Divi Quick Sites 将提示您提供有关新网站和要包含的页面的详细信息。

1. 在表格中填写您的网站名称、口号和徽标。
2. 上传您的徽标以将其自动添加到您的网站（如果有）。
3. 从入门站点中选择所需的页面，并根据需要添加自定义页面以启动该过程。
4. 准备就绪后，单击“生成并发布我的网站”按钮。

注意：选择商店页面将自动安装 WooCommerce 和在线商店的预构建页面（商店、产品模板、结帐等）。由于您正在构建电子商务网站，因此包含用于启用产品列表和交易的商店页面至关重要。

输入您的网站详细信息后，Divi Quick Sites 将使用您的输入在两分钟内生成网站。它将自动创建所有必要的元素，包括页面、模板、样式和导航菜单。

一旦您的网站准备就绪，将会出现一个确认页面，其中包含消息“您的网站已准备就绪！”

您还将看到创建的所有页面和主题模板的列表，以及教程和文档的链接，以帮助您开始自定义新网站。

开始使用 Divi

4.检查您的新网站

在我们继续其余过程之前，您可以查看您的实时网站以探索全新的在线商店设计。

以下是您网站上将自动生成的所有页面和模板，包括 WooCommerce 页面和模板。

网站页面

WooCommerce 商店、产品、购物车和结帐页面模板

开始使用 Divi

5. 配置 WooCommerce 并添加产品

由于 WooCommerce 已经安装在 Divi Quick Sites 网站生成过程中，因此我们可以使用 WooCommerce 设置向导来简化该过程。

WooCommerce 设置向导

激活后，WooCommerce 会自动提示您开始设置向导。 WooCommerce 将在此处指导您完成商店的关键设置步骤。要开始设置向导，请导航至 WooCommerce 部分并选择主页。

设置向导将提示您输入有关商店的详细信息，例如您的地址和电子邮件。

选择最能代表您商店的行业和产品类别。

接下来，选择您计划在商店中包含的产品类型。某些选项（会员资格、预订等）需要在您的网站上安装其他插件。

注意：插件有付费版本和免费版本。探索我们推荐的会员、预订等插件，以增强您的电子商务网站。例如，Memberpress 或 Paid Memberships Pro 等工具可以帮助您构建具有多种付款选项的基于订阅的商店。此外，像 Amelia 这样的插件允许您创建一个预订网站，其中包含预约日历等功能，供访客安排预订。

设置向导将提示您有关商店的其他问题。

选择您可能需要的任何其他插件。您可以查看 Jetpack 和 MailPoet 以确定它们是否满足您的需求。但是，如果您希望收税、处理信用卡付款或管理运输，这些免费插件可能会很有用。

此时，您可以将焦点转移到 WooCommerce 中的其他设置。

WooCommerce 设置

设置电子商务商店可能具有挑战性，但 WooCommerce 简化了流程。您可以管理以下内容：

• 常规设置：货币、产品和结帐选项。
• 产品设置：商品展示和库存管理。
• 运输设置：运输方式和费用。
• 付款设置：客户付款选项。
• 帐户设置：用户注册和隐私控制。
• 电子邮件设置：存储通信首选项。
• 高级设置：商店的自定义配置。

如需进一步帮助，请参阅我们的 WooCommerce 设置指南，其中提供了导航这些基本页面的分步说明。

添加产品类别

类别使客户可以更轻松地在您的商店中找到商品。例如，如果您销售服装，您可以创建诸如手提包、椅子和桌子等类别。最好在添加产品之前进行设置。

要创建类别，请导航至仪表板中的WooCommerce > 产品，然后单击类别。它们的功能与 WordPress 帖子类别和标签类似。在将类别添加到您的商店之前，请先填写类别的所有必填字段。

如果有任何占位符类别，您可以编辑或删除它们。选择类别和标签时，请考虑最直观、最容易让客户理解的。

将产品添加到您的 WordPress 电子商务商店

您可以单独添加产品或使用 CSV 文件同时导入它们。

要单独添加产品，请导航至产品 > 添加新产品。

输入产品名称。

提供产品描述并上传产品图片。

首先，选择您要创建的产品类型。然后，确定商品的价格并根据需要调整库存水平。您还可以指定单个产品的运输详细信息。您可以在右侧边栏上为您的产品分配类别和标签。

满意后，单击“发布”。您可以根据需要向商店添加任意数量的产品。

使用 WooCommerce 管理您的产品库存，并查看我们有关在 WooCommerce 中设置运输的综合指南。

设置付款和运输

提供多样化的支付选项对于保持客户满意度至关重要。 WooCommerce 支持多种网关，例如 PayPal、Stripe 和银行转账。然而，当与 Divi 的构建器和 Woo 结帐模块结合使用时，您可以完全自定义结帐页面设计。

WooCommerce 设置允许您选择最适合您业务的付款方式。根据您的偏好，启用直接银行转帐、货到付款或支票付款等付款方式。

WooCommerce 的灵活性可确保您的运输选项经过量身定制，以满足客户的期望。以下是最终确定商店的送货详细信息所涉及的步骤：

1. 转到WooCommerce > 设置 > 运输
2. 根据地理区域定义区域
3. 为每个区域分配特定的运输方式，例如统一费率、免费送货或本地取货。

6.设计和定制您的电子商务网站

现在您的入门网站已上线，是时候将其与您的品牌保持一致了。您无需花费数小时单独调整每个元素，而是可以使用更快、更有效的方法快速有效地自定义您的网站。

设计 WooCommerce 页面

WooCommerce 为您的商店提供了一组基本页面，可以使用 Divi 轻松自定义这些页面。这些包括：

1. 商店页面，显示您的所有产品
2. 购物车页面，显示购物车的内容
3. 结帐页面，客户可以在其中完成购买
4. 用于管理用户帐户的“我的帐户”页面
5. 附加页面，例如产品类别和标签的页面

借助 Divi，您可以使用 Divi Builder 直接编辑每个页面，或使用主题生成器为这些页面创建自定义模板。

Divi 主题生成器对于为产品页面、类别页面和网站上的其他设计元素创建模板特别有用。

例如，您可以从博客下载免费的产品页面模板并将其应用到主题生成器，为您的所有产品提供一致、有吸引力的布局。或者，您可以从头开始设计产品页面模板。

如需其他支持，请参阅有关构建购物车页面、配置结帐页面以及将 Divi 与 WooCommerce 页面结合使用的指南。

开始使用 Divi

编辑 Divi 入门站点主题生成器模板

每个 Divi 入门网站都包含主题生成器模板，用于管理网站关键部分的布局，例如页眉、页脚和博客文章。设置站点后，您可以通过访问Divi > 主题生成器查看这些模板。

您可以通过选择全局页眉、自定义正文或全局页脚部分旁边的铅笔图标来修改任何入门站点的模板。对页眉或页脚所做的任何更改都将应用于所有模板。要查看实际效果，请单击默认网站模板的铅笔图标。

打开模板后，您可以使用 Visual Builder 的菜单设置更改标题的背景颜色、插入徽标以及调整字体和颜色。您还可以像在网页上一样添加、删除 Divi 模块并设置其样式。

使用模板的优点是对标题（或其他主题生成器模板）的任何调整都将自动反映在整个网站中。

自定义全局字体和颜色

个性化您的入门网站以与您的品牌保持一致非常简单。无需调整每个页面上每个元素的每种颜色或字体。该网站带有预先配置的全局颜色和字体。您可以在 Divi Builder 中编辑元素时修改这些全局设置，任何更新都将自动应用于整个站点。

要修改新入门站点主页上的全局字体和颜色，请单击前端的“启用 Visual Builder”。

单击您要自定义的模块。我们将在主页上定制一个文本模块，优先考虑全局字体。单击滚轮图标可打开选项卡进行修改。

您创建的起始站点包括预设的全局字体，可以保留这些字体或将其替换为您的品牌特定字体。您可以使用 Divi Builder 轻松自定义全局字体。导航到“设计”选项卡，滚动到“文本”部分，然后选择“字体”。

您还可以上传自己的字体或从我们的库中选择，其中包括 Google 字体。

我们可以选择优先考虑同一文本模块的全局颜色，但在我们的例子中，我们选择自定义按钮模块的全局颜色。您需要修改全局颜色设置来自定义您的品牌颜色。与全局字体一样，现有的全局颜色继承自电子商务起始站点。

单击按钮模块的滚轮图标即可开始操作。

向下滚动到按钮部分并调整按钮文本颜色。

从“已保存”选项卡切换到“全局”选项卡以查看当前的全局颜色。

要进行更改，请单击每种颜色并选择您喜欢的选项。您还可以输入自定义颜色的十六进制代码。在我们的例子中，我们将文本颜色从白色更改为黑色。

以同样的方式，根据需要修改所有颜色。要添加其他颜色，只需单击最后一个全局颜色旁边的加号图标即可。

开始使用 Divi

编辑全局预设

Divi 全局预设允许您在不同的 Divi 模块中重复使用样式。将它们视为可应用于按钮、文本模块、简介和其他元素的样式模板。通过为模块（如按钮）创建全局预设，您可以将其设置为默认样式或为站点上的各种按钮创建不同的预设。这可以确保应用您喜欢的样式时的一致性，无论是按钮、文本还是其他常用模块。 Divi Starter Sites 包含其模板中使用的所有模块的预设，因此您通常不需要创建新模块。但是，您可以轻松调整这些现有预设以符合您的品牌风格。

与编辑全局字体和颜色一样，首先从前端单击“启用 Visual Builder”。

如前所述，每个 Divi 入门站点都有自己的预设。例如，要修改入门站点上的现有按钮预设，请单击模块标题下预设部分旁边的下拉箭头。在我们的例子中，我们正在修改电子商务入门网站的交易部分中的一个按钮。

接下来，找到模块预设，例如我们案例中的“Online Store Tertiary Light”。将鼠标悬停在预设上以显示其菜单，然后单击铅笔图标进行编辑。

修改 Divi 预设时，模块的标题会从紫色变为灰色，表示正在进行设计调整。

请随意应用您喜欢的任何设计修改，然后通过选择绿色复选标记来保存模块。在本例中，我们将按钮的颜色从橙色更改为黑色。

底部会弹出一个确认对话框，询问您是否要继续更改预设。单击“是”保存您的调整。

模块的标题将恢复为紫色。最后按一次绿色保存按钮即可完成预设。

开始使用 Divi

7. 通过插件和集成增强您的电子商务网站

专注于电子邮件注册和社交媒体共享可以帮助您的电子商务网站吸引更多流量并增加销售额。 Divi 提供内置优化工具，并可与流行的 WordPress 社交媒体和电子邮件注册插件顺利配合。这里有一些工具可以帮助您开始。

电子邮件营销

增加电子邮件列表对于与受众保持联系并向他们通报电子商务商店的更新至关重要。 Elegant Themes 的 Bloom 插件是一个出色的工具，用于设计引人注目的电子邮件选择加入表单。安装插件后，您可以自定义表单以匹配您网站的风格和要求。 Bloom 还与多个电子邮件营销平台集成，使您能够有效管理列表并实现自动化通信。

绽放

社会的

您可以使用 Elegant Themes 的 Monarch 插件轻松地将社交共享按钮添加到您的网站。激活后，设置 Monarch 将这些按钮放置在页眉、页脚或帖子内的显着位置。这会鼓励访问者分享您的内容，从而增加您的电子商务网站在社交媒体上的存在。

获得君主

Divi 市场中的产品

Divi 提供了一个充满活力的插件、扩展程序和子主题市场，专门设计用于增强您的 Divi 支持的电子商务网站。您可以购买这些并将它们集成到您的网站中。

例如，Divi 的轮播是一种流行的扩展展示，以视觉上吸引人的方式展示最畅销或特价的产品。它非常适合吸引人们对特定商品的关注并促进销售。您可以在市场上以3.19 美元的价格购买。要对其进行测试，您可以查看其屏幕截图和现场演示。

参观迪维市场

基本 WordPress 插件

每个 WordPress 网站都可以从某些基本插件中受益匪浅。以下是一些强烈推荐的可用于 WordPress 的插件示例：

• SEO 插件（如排名数学）
• 备份插件（如 UpdraftPlus）
• 图像优化插件（如 EWWW Image Optimizer）
• 速度优化插件（如 WP Rocket）
• 安全插件（如 Solid Security 或 Sucuri）
• 社交媒体插件
• 营销插件

结论

到 2024 年，推出一个成功的电子商务网站需要的不仅仅是功能；还需要更多的功能。它旨在为您的客户创造无缝、引人入胜的体验。 Divi 使您能够打造一个视觉上迷人、用户友好的商店，在体现您的品牌形象的同时提供顶级的性能。通过集成智能插件并利用 Divi 中强大的自定义选项，您的网站将不仅仅是一个店面。

想建立您的第一个电子商务网站吗？开始使用 Divi 并促进您的电子商务业务。您可以探索我们精选的插件和工具表，这些插件和工具可能对您的电子商务网站有价值。