如何在 Divi 中设计图像和文本的反射

为图像和文本设计反射是一种经典的设计技术，可用于为网页内容增添趣味。 而且，Divi 可以直接从 Divi Builder 轻松创建这些反射，而无需使用照片编辑器。

在本教程中，我将向您展示如何在 Divi 中设计图像和文本的反射。 制作反射的关键是使用 Divi 的变换比例选项来创建元素的镜像版本。 之后，您可以添加自定义叠加层，我将向您展示如何使用文本模块。

让我们开始吧！

抢先看

这是我们将在本教程中构建的设计的先睹为快。

免费下载文本和图像反射布局

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

下载文件

免费下载

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

下载

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

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

让我们进入教程好吗？

订阅我们的 YouTube 频道

你需要什么开始

首先，您只需要 Divi。 确保 Divi 主题已安装并处于活动状态。 我们将使用前端的 Divi Builder（视觉构建器）从头开始创建我们的设计。 在本教程中，您还需要一些模拟图像（一个大约 1920 像素 x 600 像素的背景图像和另一个大约 500 像素 x 350 像素的图像）。

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

在Divi中创建图像和文本反射背后的基本思想

在 Divi 中创建反射设计背后的基本思想包括三个步骤：

1. 使用您的图像或文本创建模块
2. 复制模块并使用变换比例创建镜像图像或文本
3. 使用绝对定位分隔符或文本模块向镜像元素添加渐变叠加。

这种设计技术不限于单个模块。 您实际上可以使用此方法在 Divi 中为整行添加反射，这有助于创建独特的标题设计。 在本教程的稍后部分，我们将在文本反射设计中的一行中添加反射。 但是现在让我们从如何创建图像反射开始。

如何创建图像反射

要创建图像反射，让我们从创建一个具有一列行的新常规部分开始。

然后将图像模块添加到该行。

从媒体库上传您想要的图像到图像模块。 然后更新以下图像设置：

最大宽度：600px
模块对齐：居中
自定义边距：底部 0px

创建镜像

要创建反射效果，我们首先需要在图像正下方创建图像的镜像副本。

为此，请复制图像模块。 然后更新复制图像的设置如下：

不透明度：40%
变换缩放 X 轴：-100%

变换比例属性是神奇地垂直和水平翻转图像以创建图像的镜像版本。

这负责基本的反射设计。 但是，我们可以为底部图像添加额外的渐变叠加，以获得更逼真的反射设计。

使用文本模块添加渐变叠加

要将渐变叠加添加到底部图像，我们可以使用文本模块。 我们可以给文本模块一个绝对位置，使其位于底部图像的上方。 然后我们可以为文本模块添加渐变背景。 如果您愿意，使用文本模块（而不是分隔符）将为您提供稍后在反射图像顶部添加一些内容的奖励选项。

继续在底部图像下创建一个文本模块。

删除默认内容，使文本模块为空。

然后更新文本模块设置如下：

背景渐变左颜色：rgba(255,255,255,0)
背景渐变右颜色：#ffffff

宽度：100%
高度：50%

然后将以下自定义 CSS 添加到主元素：

position: absolute !important;
top: 50%;

文本模块的这种绝对定位覆盖了行下半部分的文本模块。

让我们看看到目前为止的设计是什么样的。

添加背景颜色

如果您不想要白色背景，您可以尝试使用其他背景颜色来创建独特的全角反射设计。

为此，请打开行设置并更新以下内容：

背景颜色：#000000
宽度：100%：
最大宽度：100%；
自定义填充：0px 顶部，0px 底部

现在让我们看看结果。

将文本添加到文本模块覆盖

请记住，由于我们使用文本模块作为底部图像的叠加层，因此我们可以根据需要添加一些内容。

为此，请打开文本模块设置并更新以下内容：

内容：“图像反射”
文字文字颜色：#ffffff
文字文字大小：30px
文字方向：居中

最终设计

这是图像反射的最终设计。

在 Divi 中创建文本反射

对于下一个示例，我们将创建一个文本反射设计。 该过程与创建图像反射的方式非常相似。 但是，对于此示例，我将为整行创建一个反射。 这将允许用于反映文本和背景图像以获得漂亮的标题设计。

这是如何做到的。

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

用“反射”一词更新内容。

然后更新设计设置如下：

文字字体：Oswald
文字字体样式：TT
文字文字颜色：#333333
文字文字大小：10vw
文本行高：.9em
文字方向：居中
自定义边距：底部 0px
自定义填充：4vw 顶部

更新行设置

现在我们的文本模块已经自定义，是时候更新行的设置了。

打开行设置并更新以下内容：

背景图片：插入背景图片
天沟宽度：1
宽度：100%
最大宽度：100%
自定义填充：0px 顶部，0px 底部

这是到目前为止的设计。

创建反射文本行

要为此设计创建反射文本，我们将反射整行，以便我们可以在反射中包含背景图像。

复制行并更新以下内容：

变换缩放 Y 轴：-100%

现在下面的行是上面行的镜像。 现在我们需要做的就是添加一个叠加层。

使用文本模块添加渐变叠加

要将渐变叠加添加到我们的底行文本反射，我们可以使用文本模块，就像我们在上面的第一个图像反射设计中所做的那样。 像以前一样，我们可以给文本模块一个绝对位置，以便它填充整行并位于具有反射文本的另一个文本模块的顶部。 然后我们可以为文本模块叠加添加渐变背景。

继续并在底行的文本模块下创建一个新的文本模块。

打开新的文本模块设置并删除内容，使文本模块为空。

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

背景渐变左颜色：#ffffff
背景渐变右颜色：rgba(255,255,255,0.13)
起始位置：38%

宽度：100%
高度：100%

然后将以下自定义 CSS 添加到主元素：

position: absolute !important;
top: 0;

就是这样！

最后结果

查看最终结果。

这是相同的设计，没有任何背景图像。

最后的想法

如果您花时间以正确的方式设计反射，反射看起来会非常酷。 值得庆幸的是，Divi 拥有实现这一目标的工具。 还有其他制作 CSS 反射的方法，但不幸的是，它们往往缺乏跨浏览器的支持。 本教程中的设计在所有浏览器上看起来都不错。

我发现反射在页眉和展示作品集的图像上看起来很棒。 而且我确信还有许多其他实现。

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

干杯!