如何在 Divi 中在图像周围环绕文本（3 种方式）

在图像周围环绕文本是一种常见的设计技术，最常见于杂志和报纸等印刷媒体。 但是您也可以在网络上找到它，尤其是博客文章。 在图像周围环绕文本实际上是 WordPress 的一个非常标准的部分，涉及在 WYSIWYG 编辑器上进行简单的对齐调整。 唯一的问题是很难使用默认的 WordPress 编辑器自定义页面的样式。 这就是 Divi 可以提供帮助的地方！

在本教程中，我将向您展示 3 种使用 Divi 在图像周围环绕文本的方法。 这将允许您使用 Divi 的强大功能创建经典的打印样式布局，以帮助您进行设计。 以下是我们将要介绍的内容：

1. 如何使用 WYSIWYG 编辑器在文本模块内将文本环绕图像（和块引用）
2. 如何通过在 Divi 中的文本模块旁边浮动图像模块来环绕图像
3. 如何在居中的图像周围环绕文本以获得独特的两列布局

尽管本教程将专注于图像，但您实际上可以使用相同的过程在 Divi 中的任何模块周围环绕文本。

抢先看

这是我们今天将要构建的主要设计的先睹为快。

让我们开始吧！

订阅我们的 YouTube 频道

免费下载环绕图像布局的环绕文本

要亲身体验本教程中的设计，您首先需要使用下面的按钮下载它。 要访问下载，您需要使用下面的表格订阅我们的 Divi Daily 电子邮件列表。 作为新订户，您每周一将收到更多的 Divi 善良和免费的 Divi 布局包！ 如果您已经在列表中，只需在下面输入您的电子邮件地址，然后单击下载。 您不会被“重新订阅”或收到额外的电子邮件。

下载文件

免费下载

加入 Divi 时事通讯，我们将通过电子邮件向您发送一份最终的 Divi 登陆页面布局包，以及大量其他令人惊叹的免费 Divi 资源、提示和技巧。 跟随，您将很快成为 Divi 大师。 如果您已经订阅，只需在下面输入您的电子邮件地址，然后单击下载即可访问布局包。

下载

您已成功订阅。 请检查您的电子邮件地址以确认您的订阅并获得免费的每周 Divi 布局包！

要将布局导入您的页面，只需提取 zip 文件并将 json 文件拖到 Divi Builder 中。

让我们进入教程好吗？

你需要什么开始

首先，您只需要 Divi 和一些图像。

• Divi – 确保 Divi 主题已安装并处于活动状态。 我们将使用前端的 Divi Builder（视觉构建器）从头开始创建我们的设计。
• 图片– 另外，请确保至少有一张 400 像素 x 250 像素的图片用于本教程。

准备好后，转到 WordPress 仪表板并导航到页面 > 添加新内容。 为您的新页面命名并在前端部署 Divi Builder。 选择“从头开始构建”选项。 现在你准备好了！

如何使用 WYSIWYG 编辑器在文本模块内围绕图像和块引用环绕文本

WordPress 使用默认的 WordPress (WYSIWYG) 编辑器可以轻松地在图像周围环绕文本。 由于 Divi 的文本模块内置了相同的 WordPress WYSIWYG 编辑器，我们可以使用 WordPress 用户一直使用的相同方法将文本环绕在图像周围。

这是如何做到的。

创建一个具有一列行的常规部分，然后向该行添加一个文本模块。

使用您的副本更新文本模块的内容。 现在我正在使用几段 lorem ipsum。

现在，如果您还没有，请选择内容编辑器上的可视化选项卡。 然后确保单击要添加图像的内容区域的顶部，然后单击添加媒体按钮。

在媒体库弹出窗口中，选择要使用的图像。 在附件显示设置下，为对齐选项选择左对齐或右对齐。 对于此示例，我想将图像定位在左侧。

WordPress 将向您的图像添加一个类（称为“alignleft”），它将使图像向左浮动。 添加的 float 属性将允许文本环绕图像。 WordPress 还将使用边距在图像周围添加一个缓冲区，以在图像和周围文本之间创建很小的间距。

而且，当然，如果您将图像右对齐，图像将向右浮动，从而允许文本环绕图像。

您还可以使用类似的技术在文本模块中的块引用周围环绕文本。 为此，请使用内容编辑器创建一个块引用。

然后使用块引用的内置文本模块设置来设置块引用的样式。

然后返回内容编辑器并切换到文本选项卡。 然后向 blockquote 标签添加一些内联样式，以在 blockquote 周围创建一些间距并将其浮动到左侧。 您的 blockquote html 应该是这样的。

<blockquote style="margin: 0 15px 15px 0; float:left;">This is a <br> blockquote</blockquote>

现在文本将环绕块引用。

如何通过在 Divi 中的文本模块旁边浮动图像模块来环绕图像

要在图像模块周围环绕文本，我们可以将整个图像模块浮动到文本模块旁边。 这可能是使用上述 WordPress 编辑器的首选方法，因为它允许您使用 Divi 构建器设置完全控制图像的样式，而不是向图像标签添加内联样式或外部 css。

这是如何做到的。

用一列行创建一个新的常规部分。 然后将图像模块添加到具有您选择的图像的行。 我使用的图像来自 Charity Layout Pack，大小为 400 像素 x 250 像素。

然后在图像模块下添加一个带有一些模拟文本内容的文本模块。

现在两个模块都已就位，我们需要将图像浮动到文本模块的左侧。 为此，请打开图像模块设置并将以下自定义 CSS 添加到主元素：

float:left;

然后更新图像的自定义边距以创建我们需要的文本环绕图像的缓冲区：

自定义保证金：顶部 2%，底部 2%，右侧 2%

这是结果。

而且，如果您想将图像向右浮动，请打开图像模块设置并将 css 替换为以下内容：

float:right;

并将边距更新为以下内容：

自定义保证金：顶部 2%，底部 2$，左侧 2%

这是结果。

在多列上使用此设计

您还可以在多列中使用此设置来创建用于展示您的服务的文字环绕设计。 为此，请将行的列布局更改为两列。

然后给图像一个最大宽度百分比值，以便它响应不同的浏览器宽度。

最大宽度：33.33%（桌面），100%（手机）

从第一列复制图像和文本模块并将它们粘贴到第 2 列中。然后根据需要更新内容和图像。

就是这样。 这是结果。

如何在居中的图像或模块周围环绕文本以获得独特的两列布局

在此示例中，我将向您展示如何将两列文本环绕在居中的图像模块周围。 这允许您创建独特的杂志或报纸样式布局。 但是，由于没有“float:center”css 属性，我们需要在布局上有点创意才能让这个设计工作。

这是如何做到的。

使用居中图像创建顶行内容

首先，创建一个具有一列行的新常规部分。 然后将图像模块添加到您的行。 上传一张 400 像素 x 250 像素的图片。 此设计的尺寸必须准确。

然后更新设计设置如下：

最大宽度：400px（桌面），100%（平板）
模块对齐：居中
自定义填充：顶部 2%，底部 2%，左侧 2%，右侧 2%

然后保存您的设置并打开行设置。 取出行的底部填充。

自定义填充：底部 0px

创建两列文本行

在包含图像的行下，创建一个具有两列布局的新行。

在第 1 列中，添加一个带有一些模拟内容的文本模块。

然后复制文本模块并将其粘贴到第二列的第二列文本中。

用浮动分隔线创造空白空间

为了创建图像所需的空间，我们可以使用分隔模块。 在左列，我们将创建一个图像大小一半的分隔模块并将其浮动到右侧，这样我们的文本模块将环绕分隔线。 然后在右列中，我们将创建另一个图像大小的一半的分隔符并将其浮动到左侧。

为此，请创建一个分隔模块并将其直接放在第 1 列中的文本模块上方。

然后更新分隔模块设置如下：

显示分隔线：否
宽度：200px
高度：250px

确保高度与您之前创建的图像高度相同，并且宽度恰好是图像宽度的一半。

对于移动设备，我们希望禁用平板电脑和手机上的分隔线。 为此，请更新可见性设置以禁用平板电脑和手机显示屏。

现在我们的第一个分隔符已创建，复制分隔符模块并将其粘贴到第 2 列中的文本模块上方。

接下来，我们需要浮动我们的分隔线。 为此，请打开第 1 列中分隔符的设置，并将以下自定义 CSS 添加到主元素：

float: right;

然后，打开第 2 列中分隔器模块的设置，并将以下自定义 CSS 添加到主元素：

float: left;

使用自定义边距将图像移动到位

现在我们需要做的就是把我们的图像放在第一行，以便它适合我们用分隔线创建的空间。

打开图像模块设置并添加以下自定义边距：

自定义边距：-250px 底部（桌面），20px（平板电脑）

这是到目前为止的结果。

为章节添加标题

最后一步是可选的，但如果您想为该部分添加标题，请创建一个文本模块并将其放置在图像上方。

然后在文本模块中添加以下内容：

<h2>Learn more about how to give</h2>

然后按如下方式更新文本设置：

背景颜色：#000000
标题 2 字体：Playfair Display
标题 2 文本对齐：居中
标题 2 文字颜色：#ffffff
标题 2 行高：2em

对齐文本以获得更清晰的文本换行设计

在图像周围环绕文本时，尤其是当文本像这样居中时，使用对齐周围文本总是一个好主意。 在这种情况下，我们需要做的就是更改文本方向以证明包含我们的环绕文本内容的两个文本模块的对齐。

最后结果

这是最终结果。

这是在平板电脑和手机显示屏上。

最后的想法

知道如何有效地在图像周围环绕文本可以真正使您的内容看起来专业且易于阅读。 这个概念非常简单。 您需要做的就是将图像向右或向左浮动，然后在图像周围使用自定义间距作为缓冲区。 我喜欢的是你可以浮动任何模块（不仅仅是图像）来环绕 Divi 中的任何类型的内容。 我希望这能给你下一个项目的灵感。

我期待在评论中收到您的来信。

干杯!