2024 年如何制作响应式网站（无需编码）

您的网站在移动设备上表现不佳吗？糟糕的布局或缓慢的加载时间可能会导致用户在与您的内容互动之前就离开您的网站。在当今移动优先的世界中，响应式网站不再只是一种选择，而是一种必需品。

无论您是重新开始还是改进现有网站，响应式网站对于覆盖更广泛的受众并提高跨所有设备的参与度至关重要。响应式网站不仅看起来很专业，而且可以在各种尺寸的屏幕上无缝运行。

使用 Divi，您无需任何编码即可轻松构建响应式网站。本指南提供了使用 Divi 创建响应式网站的分步方法，以便您可以增强用户体验、适应所有设备并提高参与度。

立即开始使用 Divi 进行构建

什么是响应式设计？以及为什么它很重要

响应式设计是一种网页设计方法，可自动调整网站的布局、图像和内容以适应不同的屏幕尺寸和设备。无论是在台式机、平板电脑还是智能手机上查看，响应式网站都能确保用户无需缩放、滚动或调整大小即可享受最佳体验。

随着移动流量在网络中占据主导地位，响应式设计在 2024 年至关重要。响应式网站可以帮助您覆盖更广泛的受众，同时在所有设备上提供无缝的用户体验。谷歌还在搜索结果中优先考虑适合移动设备的网站，因此采用响应式设计可以提高您的可见度并防止您失去宝贵的流量。

响应式设计的常见挑战

• 跨设备的布局不一致：在不同的屏幕尺寸上保持具有视觉吸引力的设计可能具有挑战性。
• 设备断点的手动编码：传统的响应式设计通常需要手动编码媒体查询，这可能既耗时又复杂，尤其是对于那些没有编码技能的人来说。
• 性能问题：未优化的图像和媒体可能会减慢加载时间，尤其是在移动设备上，从而使用户感到沮丧并增加跳出率。
• 跨设备测试：确保网站在所有设备上看起来都很棒需要持续测试和调整，如果没有合适的工具，这可能会很困难。

有了 Divi，您可以轻松应对这些挑战。 Divi 提供预制布局、响应式编辑和实时预览，因此您无需编码或大量测试即可设计美观、适合移动设备的网站。

使用 Divi 构建您的响应式网站

为什么使用 Divi 构建您的响应式网站

Divi 是可用于构建响应式网站的最强大的工具之一。以下是 Divi 成为网页设计师首选的原因：

专为 WordPress 打造

WordPress 是最流行的网站建设平台之一，这是有充分理由的。在创建响应式网站时，WordPress 是一个理想的选择，因为它的灵活性、易用性以及专为响应式设计设计的庞大主题和插件生态系统。

然而，要真正释放 WordPress 响应式设计的全部潜力，您需要正确的主题和工具，这就是 Divi 的用武之地。虽然 WordPress 提供了基础，但 Divi 通过简化响应式设计流程并为您提供支持，将您的网站提升到一个新的水平轻松灵活地创建令人惊叹的、适合移动设备的网站。

无需编码

Divi 的拖放构建器使您无需任何编码即可设计专业的响应式网站。只需将元素拖到页面上并以可视方式对其进行自定义，即可让初学者和经验丰富的设计师轻松创建适合移动设备的网站。

开始使用 Divi

预制响应模板

Divi 提供数千种预制布局和响应式模板，使您可以使用已针对移动设备优化的设计开始构建网站。这些模板可帮助您节省时间和精力，无需从头开始构建布局。

强大的响应式设计工具

这就是 Divi 作为 2024 年响应式设计一体化解决方案脱颖而出的原因：

• 响应式编辑：直接在 Divi Builder 中自定义网站在不同设备（台式机、平板电脑、移动设备）上的外观。定制布局、图像和内容，在所有屏幕上提供无缝的用户体验。
• 响应式预览：无需离开构建器即可在各种屏幕尺寸上预览网站的设计。进行实时调整，确保您的网站在任何地方都看起来很棒。
• 自定义 CSS 输入：使用媒体查询为特定断点添加自定义 CSS。这允许在不同设备上对您的设计进行高级控制和精确细化。
• 全局元素和样式：在整个网站上应用全局设置以保持一致性，同时为不同设备自定义特定元素以保持连贯而灵活的设计。
• 流体网格和列结构：使用 Divi 的流体网格系统创建可自动调整以适应不同屏幕尺寸的布局，确保您的内容保持视觉吸引力和结构良好。
• 可调整字体和版式：为各种设备自定义字体和版式设置，以保持所有屏幕尺寸的可读性和视觉层次结构。
• 内置媒体查询： Divi 包含可以使用媒体查询进行微调的预设断点。此功能可以精确控制您的网站如何适应各种屏幕尺寸。

总体而言，Divi 可以轻松确保您的网站美观并在所有设备上无缝运行。

开始使用 Divi

分步指南：如何使用 Divi 构建响应式网站

1. 获取域名和 WordPress 托管

每个网站都需要一个域名和一个托管提供商，然后才能构建响应式网站。如果您已经有，则可以跳过此步骤。

领域

您的域名是您网站的网址（例如，elegantthemes.com），因此选择一个能够代表您的品牌并且易于人们记住的域名非常重要。理想情况下，您的域名应该让您清楚地了解您的电子商务业务的内容。

一旦您决定了域名，请寻找信誉良好的域名注册商来保护它。 Namecheap 是一个受欢迎的选择，或者您也可以通过 SiteGround 等托管提供商利用折扣域名。

访问 NameCheap

如果您已经拥有域名，则可以通过更新名称服务器将其链接到您的托管提供商。

WordPress 托管

您的网站需要一个可靠的在线主页，这就是托管发挥作用的地方。由于我们将使用 WordPress，因此选择一流的 WordPress 托管提供商至关重要。可靠的主机将简化站点管理，同时确保出色的速度和安全性能。

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

开始使用 Siteground

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

2.安装并激活Divi主题

Divi 可从 Elegant Themes 购买，可选择每年89 美元的许可证或一次性终身许可证249 美元。购买后，您可以按照以下简单步骤下载主题并将其安装在您的 WordPress 网站上：

1. 转到 WordPress 仪表板中的外观 > 主题。
2. 单击“添加新主题”，然后单击“上传主题”。
3. 选择您下载的 Divi .zip 文件并单击立即安装。
4. 安装完成后，单击“激活”以使 Divi 成为您的活动主题。

观看下面的视频，了解详细的演练和其他信息。

设置完成后，您就可以开始构建网站了。如果您想在开始之前熟悉该过程，请查看我们有关使用 Divi Builder 的教程。

开始使用 Divi

3. 使用 Divi Quick Sites 生成响应式网站（只需几分钟）

在 WordPress 上安装 Divi 主题后，您就可以轻松开始构建响应式网站。使用 Divi Quick Sites，您的网站可以自动创建，因此您无需从头开始。

启动入职向导

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

登录后，您将进入 Divi 主仪表板。从这里，您可以管理您的站点、访问有用的文档、寻求支持以及使用 Divi Quick Sites 创建新站点。首先，只需单击仪表板上的“生成新站点”即可。

访问 Divi 快速网站

使用入门网站（或使用 AI）创建响应式网站

接下来，您可以使用预先设计的入门网站或 Divi 的 AI 网站构建器创建响应式网站。 Divi 提供了精美的入门模板 - 只需单击“选择网站模板”即可开始。

您会在屏幕上找到各种响应式入门网站模板。选择一款适合您需求的产品。如果模板的颜色、字体或图像与您的品牌不匹配，请不要担心 - 您可以稍后轻松自定义这些内容。

Divi Quick Sites 通过收集网站名称、口号和徽标等基本详细信息来指导您设置网站。

1. 输入您的网站名称和口号，然后上传您的徽标。
2. 如果您有徽标，请将其上传以自动添加到您的网站。
3. 从入门站点中选择您想要的页面，或者根据需要创建自定义页面。
4. 一切设置完毕后，单击“生成并发布我的网站”即可完成该过程。

注意：选择“服务”页面将安装预制模板，用于展示您的咨询产品（服务描述、定价等）。在这种情况下，可以省略商店页面，因为我们的重点是客户咨询而不是在线商店。

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

网站完成后，您将被引导至确认页面，显示“您的网站已准备就绪！”您还可以找到创建的网站页面和主题模板的列表，以及教程和文档的链接，以帮助您开始在新建立的网站上工作。

尽管 Divi Quick Sites 具有响应能力，但您可能仍然需要进行一些个人调整以完美适应您的愿景。 Divi 的视觉构建器可让您在桌面、平板电脑和移动视图之间实时切换，以准确查看您的网站在每个设备上的外观。您还可以更改预览尺寸以满足您的喜好。

4. 使用 Divi 的响应式预览检查您的设计

现在您已经选择了响应式模板，是时候针对各种设备预览它了。 Divi 的内置响应式编辑工具使这个过程变得简单。您可以直接从 Divi Builder 定制网站在台式机、平板电脑和移动设备上的外观，确保跨所有平台的无缝用户体验。

使用视图预设在热门设备上预览网站

您可以使用流行的设备预设来查看页面在不同设备上的外观。要查看这些选项，请单击初始下拉菜单。这将为您提供各种 Apple 和 Android 设备的选择。

使用可自定义的视图模式预览站点

除了默认和设备预览选项之外，您还可以为预览设置自定义宽度。 Divi 还提供点击并拖动调整大小功能，可轻松进行调整。要调整大小，请单击并从预览区域的左侧拖动。当您拖动时，尺寸字段中的宽度将自动更新。

您可以通过手动输入特定的宽度和高度尺寸来自定义响应式预览。只需单击尺寸字段并输入您想要的宽度和高度。

根据您的喜好设置尺寸后，单击“设为默认手机视图”按钮将其保存为默认预览宽度。要设置平板电脑预览的尺寸，请执行相同的过程，单击“设为默认平板电脑视图”按钮，并同时查看更改。

检查你的首屏设计

Divi 的响应式预览系统包括一个“首屏”指示器，可帮助您了解页面的顶部部分在不滚动的情况下如何向访问者显示。此功能对于将关键内容放置在设计的顶部特别有用。指示器根据您选择的设备预设进行调整。

轻松切换纵向和横向视图模式

Divi 的响应式预览系统可让您以纵向和横向方式查看您的设计。要使用此功能，请单击维度字段旁边的图标。这将切换页面方向，根据设备是垂直还是水平显示您的设计的外观。活动方向以较深的颜色突出显示。

5：为每个设备定制您的内容和设计

您的 Divi 网站已经具有响应能力，因此不需要进行广泛的定制。然而，重要的是要针对每个设备（台式机、平板电脑、手机）调整您的内容和设计，以确保它们符合您的喜好。我会首先关注文本和图像。这将提升您网站在所有设备上的外观和性能。

优化文本以提高跨设备的可读性

文本可读性对于用户体验至关重要。 Divi 提供响应式排版设置，允许您单独调整桌面、平板电脑和移动设备的字体大小、行高和字母间距。要优化文本，首先启用 Visual Builder 并单击任意文本模块。

使用响应式选项调整不同视图的不同文本属性，例如文本颜色、文本大小、字母间距和行高。我们可以从为不同视图分配文本颜色开始，然后继续处理其他属性。通过单击响应选项，您将可以为不同版本设置颜色。以下是为平板电脑版本设置文本颜色的示例。

然后，您继续调整文本大小。在为不同视图的文本大小分配值之前，您将单击其响应选项。与文本颜色一样，下面是为平板电脑视图设置文本大小值的示例。

分别对字母间距、行高和其他属性重复此操作。这种级别的控制可确保您的文本在桌面版本中突出显示，并且可进行调整以更平滑地适应较小的屏幕（例如手机）。

就像文本模块一样，您也可以通过更改不同版本的网站标题来使网站标题具有响应能力。为了更好地理解它，您可以观看下面的视频：

调整图像大小

Divi 使您能够调整图像、视频和其他媒体元素以适应各种屏幕尺寸，而不会降低质量或破坏设计。它允许您根据设备类型提供不同的图像尺寸，确保您的网站在移动设备上加载速度更快，同时在更大的屏幕上提供高分辨率图像。

在特定图像模块的设计选项卡中检查尺寸。默认情况下，您有一个强制全宽集和一个可自定义的高度可供使用。但是，您可以禁用全角设置并使用更多属性，例如图像宽度和模块对齐。

分别关注每个图像属性。在我们的例子中，我们将平板电脑版本上的最大宽度设置为 80%。模块对齐设置为中间。较小的宽度和居中的图像将占用更少的主页空间，并使图像在较小的设备上更具吸引力。

提供针对设备优化的图像可以增强视觉体验并最大限度地缩短加载时间，这对于互联网连接速度较慢的移动用户尤为重要。

开始使用 Divi

不要忘记压缩图像文件

虽然动态调整大小有助于提高响应速度，但您还应该压缩图像以减小文件大小而不影响质量。这对于提高网站性能至关重要，尤其是在移动设备上。

Divi 与 Imagify 等插件集成，在上传到 WordPress 媒体库时自动压缩图像。或者，您可以使用 TinyPNG 等工具手动压缩图像，然后再将其上传到您的网站。有关更多信息，请查看我们的最佳图像优化插件列表。

6：（可选）：实施自定义 CSS 以实现高级响应能力

虽然 Divi 提供了广泛的内置工具来使您的网站具有响应能力，但有时您可能希望更好地控制网站在不同设备上的外观。这就是自定义 CSS 和媒体查询发挥作用的地方。 Divi 提供了多个位置来添加自定义 CSS，而无需深入挖掘网站文件。您可以将自定义 CSS 应用于单个元素或整个网站的全局元素。每个 Divi 模块（如文本、图像或按钮模块）都有一个“自定义 CSS”选项卡，您可以在其中添加仅适用于该特定模块的 CSS。

将自定义 CSS 添加到响应式设计断点

Divi 使在各种断点处添加自定义 CSS 变得容易。在我们的例子中，我们将给出可用于号召性用语模块的自定义 CSS 框的可视化示例。移至该元素并选择平板电脑图标以查看 CSS 输入框的三个主要响应式设计断点。此操作将显示三个响应式设计视图的选项卡。

使用选项卡将样式应用到每个视图并调整不同设备显示（桌面、平板电脑和手机）的 CSS。

例如，如果您希望促销描述在平板电脑和手机上跨越模块的整个宽度，但不在桌面上，请选择促销描述输入框下的平板电脑选项卡并添加 display: block;

当您选择平板电脑选项卡时，Divi Builder 视图模式将切换到平板电脑视图模式（宽度为 768 像素），以提供设计外观的实时预览。

7.测试你的响应式网站

使用 Divi 实施响应式设计后，在不同设备上预览和测试您的网站对于确保一切外观和功能完美至关重要。 Divi 提供内置工具，允许您跨多种屏幕尺寸查看您的设计，并且还有外部工具（例如 Google Chrome 中的 Inspect Tool），可以跨真实设备和浏览器提供更深入的测试。

利用 Divi 的响应式预览

您可以从 Visual Builder 中的任何模块、列、行或部分访问 Divi 响应式预览系统。例如，要在文本模块中使用它，请单击该模块，转到“设计”选项卡，然后滚动到标题字体设置。将鼠标悬停在标题字体选项上可查看响应式视图菜单，然后单击平板电脑或手机图标切换到相应的视图。

使用 Chrome 的 Inspect 工具进行响应式测试

Divi 的响应式预览模式可以让您深入了解您的设计如何适应，而 Chrome 的检查工具则可以在各种屏幕尺寸上提供更详细的网站视图。以下是访问它的方法：

1. 在 Google Chrome 中打开您的网站。
2. 右键单击页面上的任意位置并选择“检查”，或使用快捷键 Ctrl+Shift+I (Windows) 或 Cmd+Option+I (Mac)。
3. 单击“检查”工具栏中的移动设备图标可切换到响应式视图。
4. 使用下拉菜单从预配置的设备选项中进行选择，例如 iPhone X、iPad Pro 或 Android 设备。

要在更多设备上进行测试，您可以使用此工具等外部工具来检查您的网站在不同设备和浏览器上的行为。这些测试将确保您的设计完全响应，无论屏幕尺寸或设备如何。

使用 Divi 简化响应式网页设计

在 2024 年创建响应式网站对于确保所有设备上的无缝用户体验至关重要。借助 Divi 等工具，设计一个在台式机、平板电脑和手机上看起来很棒的网站变得比以往任何时候都更容易。 Divi 通过响应式模板、自定义选项和用于微调网站外观和功能的内置工具简化了流程。

通过优先考虑响应能力和可用性，您可以确保您的网站满足当今多样化网络受众的需求。

准备好创建您的第一个响应式网站了吗？从 Divi 开始，增强您的在线形象。查看我们精选的插件和工具，帮助您构建完全响应式网站，在所有设备上提供无缝体验。

开始使用 Divi