WordPress divi主题

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

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

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

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

google广告开户

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

让我们开始吧!

抢先看

这是我们将在本教程中构建的设计的预览。

文本和图像的 divi 反射

文本和图像的 divi 反射

文本和图像的 divi 反射

文本和图像的 divi 反射

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

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

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

WordPress divi主题

让我们来看看教程好吗?

订阅我们的 Youtube 频道

你需要什么开始

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

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

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

在 Divi 中创建反射设计的基本思想涉及三个步骤:

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

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

如何创建图像反射

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

文本和图像的 divi 反射

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

fiverr建站WordPress程序员

文本和图像的 divi 反射

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

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

文本和图像的 divi 反射

创建镜像

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

独立站选品工具

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

不透明度:40%
变换比例 X 轴:-100%

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

文本和图像的 divi 反射

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

高质量外链购买

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

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

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

文本和图像的 divi 反射

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

文本和图像的 divi 反射

JasperAI 10000字免费额度试用

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

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

宽度:100%
高度:50%

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

position: absolute !important;
top: 50%;

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

WordPress备份工具updrafplus

文本和图像的 divi 反射

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

文本和图像的 divi 反射

添加背景颜色

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

为此,请打开行设置并更新以下内容:

背景颜色:#000000
宽度:100%:
最大宽度:100%;
自定义填充:0px 顶部,0px 底部

文本和图像的 divi 反射

现在让我们看看结果。

文本和图像的 divi 反射

将文本添加到文本模块叠加层

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

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

内容:《影像反射》
文字文字颜色:#ffffff
文字文字大小:30px
文字方向:居中

文本和图像的 divi 反射

最终设计

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

文本和图像的 divi 反射

在 Divi 中创建文本反射

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

这是如何做到的。

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

文本和图像的 divi 反射

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

文本和图像的 divi 反射

然后更新设计设置如下:

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

文本和图像的 divi 反射

更新行设置

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

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

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

文本和图像的 divi 反射

这是到目前为止的设计。

文本和图像的 divi 反射

创建反射文本行

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

复制该行并更新以下内容:

变换比例 Y 轴:-100%

文本和图像的 divi 反射

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

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

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

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

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

然后更新设置如下:

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

宽度:100%
高度:100%

文本和图像的 divi 反射

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

position: absolute !important;
top: 0;

文本和图像的 divi 反射

就是这样!

最后结果

查看最终结果。

文本和图像的 divi 反射

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

文本和图像的 divi 反射

最后的想法

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

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

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

干杯!

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