WordPress divi主题

如何在 Divi 中将文本环绕在图像周围(3 种方式)

by | May 12, 2022 | Divi主题使用教程 | 0 comments

5分钟生成10篇英文软文article forge软件试用

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

google广告开户

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

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

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

抢先看

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

Divi 在图像周围环绕文字

让我们开始吧!

订阅我们的 Youtube 频道

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

要掌握本教程中的设计,您首先需要使用下面的按钮下载它。 要访问下载,您需要使用下面的表格订阅我们的 Divi Daily 电子邮件列表。 作为新订阅者,您将在每周一收到更多 Divi 福利和免费的 Divi Layout 包! 如果您已经在列表中,只需在下面输入您的电子邮件地址,然后单击下载。 您不会被“重新订阅”或收到额外的电子邮件。

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

WordPress divi主题

让我们来看看教程好吗?

你需要什么开始

要开始,您只需要 Divi 和一些图像。

  • 迪维 – 确保 Divi 主题已安装并处于活动状态。 我们将使用前端的 Divi Builder(可视化构建器)从头开始创建我们的设计。
  • 图片 – 此外,请确保至少有一张 400 x 250 像素的图像用于教程。

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

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

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

这是如何做到的。

创建具有单列行的常规部分,然后将文本模块添加到该行。

Divi 在图像周围环绕文字

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

Divi 在图像周围环绕文字

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

fiverr建站WordPress程序员

Divi 在图像周围环绕文字

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

Divi 在图像周围环绕文字

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

Divi 在图像周围环绕文字

独立站选品工具

当然,如果你给图像一个右对齐,图像将向右浮动,允许文本环绕图像。

Divi 在图像周围环绕文字

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

Divi 在图像周围环绕文字

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

高质量外链购买

Divi 在图像周围环绕文字

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

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

Divi 在图像周围环绕文字

现在文本将环绕块引用。

Divi 在图像周围环绕文字

JasperAI 10000字免费额度试用

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

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

这是如何做到的。

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

Divi 在图像周围环绕文字

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

WordPress备份工具updrafplus

Divi 在图像周围环绕文字

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

float:left;

Divi 在图像周围环绕文字

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

自定义边距:顶部 2%,底部 2%,右侧 2%

Divi 在图像周围环绕文字

这是结果。

Divi 在图像周围环绕文字

Divi 在图像周围环绕文字

Divi 在图像周围环绕文字

而且,如果要将图像浮动到右侧,请打开图像模块设置并将 css 替换为以下内容:

float:right;

Divi 在图像周围环绕文字

并将边距间距更新为以下内容:

自定义保证金:顶部 2%,底部 2$,剩余 2%

Divi 在图像周围环绕文字

这是结果。

Divi 在图像周围环绕文字

在多列上使用此设计

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

Divi 在图像周围环绕文字

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

最大宽度:33.33%(桌面)、100%(手机)

Divi 在图像周围环绕文字

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

就是这样。 这是结果。

Divi 在图像周围环绕文字

Divi 在图像周围环绕文字

Divi 在图像周围环绕文字

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

Divi 在图像周围环绕文字

在此示例中,我将向您展示如何将两列文本包裹在居中的图像模块周围。 这使您可以创建独特的杂志或报纸样式布局。 但是,由于没有“float:center”css 属性,我们需要对布局进行一些创意才能使该设计正常工作。

这是如何做到的。

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

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

然后更新设计设置如下:

最大宽度:400 像素(桌面),100%(平板电脑)
模块对齐:中心
自定义填充:顶部 2%,底部 2%,左侧 2%,右侧 2%

Divi 在图像周围环绕文字

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

自定义填充:0px 底部

Divi 在图像周围环绕文字

创建两列文本行

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

Divi 在图像周围环绕文字

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

Divi 在图像周围环绕文字

然后复制文本模块并将其粘贴到第 2 列以获得第二列文本。

Divi 在图像周围环绕文字

使用浮动分隔线创建空白空间

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

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

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

显示分隔线:否
宽度:200 像素
高度:250 像素

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

Divi 在图像周围环绕文字

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

Divi 在图像周围环绕文字

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

Divi 在图像周围环绕文字

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

float: right;

Divi 在图像周围环绕文字

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

float: left;

Divi 在图像周围环绕文字

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

现在我们需要做的就是降低第一行的图像,使其适合我们用分隔线创建的空间。

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

自定义边距:-250px 底部(桌面),20px(平板电脑)

这是迄今为止的结果。

Divi 在图像周围环绕文字

为部分添加标题

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

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

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

然后更新文本设置如下:

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

Divi 在图像周围环绕文字

对齐文本以实现更清晰的文本环绕设计

在图像周围环绕文本时,特别是如果文本像这样居中,使用对齐周围文本总是一个好主意。 在这种情况下,我们需要做的就是将文本方向更改为 证明合法 对于包含我们的包装文本内容的两个文本模块。

Divi 在图像周围环绕文字

最后结果

这是最终结果。

Divi 在图像周围环绕文字

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

Divi 在图像周围环绕文字

Divi 在图像周围环绕文字

最后的想法

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

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

干杯!

5分钟生成10篇英文软文article forge软件试用
tiktok
WordPress divi主题