长治网站设计:如何设计Divi中的图像和文本反射

2019.07.02 长治网站建设

174

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

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

  1. 用图像或文本创建模块
  2. 复制模块并使用转换缩放创建镜像图像或文本
  3. 使用绝对定位分隔符或文本模块向镜像元素添加渐变覆盖。

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

如何创建图像反射

要创建图像反射,让我们首先创建一个新的常规部分,其中包含一个列行。

长治网站设计

然后向行添加一个图像模块。

长治网站设计

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

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

长治网站设计

创建镜像

要创建反射效果,我们首先需要在图像下面创建镜像复制。

为此,复制图像模块。然后按以下方式更新重复图像的设置:

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

TransformScale属性是将图像垂直和水平地翻转以创建镜像版本的方法。

长治网站设计

这就涉及到了基本的反射设计。然而,我们可以添加一个额外的梯度覆盖到我们的底部图像,以一个更现实的反射设计。

使用文本模块添加渐变覆盖

要向底部图像添加渐变叠加,我们可以使用长治网站设计文本模块。我们可以给文本模块一个绝对的位置,以便它位于底部的图像之上。然后,我们可以添加一个梯度背景到文本模块。如果您愿意,使用文本模块(而不是分隔器)将为您提供额外的选项,即稍后在反射图像的顶部添加一些内容。

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

长治网站设计

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

长治网站设计

然后按以下方式更新文本模块设置:

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

宽度:100%
身高:50%

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

01
02
position: absolute !important;
top: 50%;

文本模块的绝对定位将文本模块覆盖在行的下半部分。

长治网站设计

让我们看看到目前为止这个设计是什么样子的。长治网站设计

长治网站设计

添加背景颜色

如果你不想要一个白色的背景,你可以尝试其他背景颜色,这创造了一个独特的全宽度反射设计。

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

背景色:#000000
宽度:100%:长治网站设计
最大宽度:100%;
自定义填充:0 px顶部,0 px底部

divi reflections for text and images

现在让我们来看看结果。

divi reflections for text and images

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

记住,因为我们使用文本模块作为底层图像的叠加,如果我们想要的话,我们可以添加一些内容。

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

内容:“图像反射”
文本颜色:#ffffff
文本大小:30 px
文本定位:中心

divi reflections for text and images

最终设计

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

divi reflections for text and images

在Divi中创建文本反射

对于下一个例子,我们将创建一个文本反射设计。这个过程非常类似于创建图像反射的方式。但是,对于这个例子,我将为整个行创建一个反射。这将允许使用同时反映文本和背景图像为一个良好的标题设计。

以下是如何做这件事。

首先,创建一个具有一列行的新规则节。然后向行添加文本模块。

长治网站设计

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

长治网站设计

然后按以下方式更新设计设置:

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

长治网站设计

更新行设置

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

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

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

长治网站设计

这是目前为止设计的样子。

长治网站设计

创建反射文本行

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

复制行并更新以下内容:

变换标度Y轴:-100%

长治网站设计

下面的行是上面行的镜像。现在我们要做的就是增加一个覆盖。

使用文本模块添加渐变覆盖

为了在我们的底部行文本反射中添加一个渐变叠加,我们可以使用文本模块,就像我们在上面的第一个图像反射设计中所做的那样。和以前一样,我们可以给文本模块一个绝对的位置,这样它就可以填充整个行,并将反射文本放在其他文本模块的顶部。然后,我们可以添加一个梯度背景到文本模块覆盖。

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

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

然后按以下方式更新设置:

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

宽度:100%
身高:100%

长治网站设计

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

01
02
position: absolute !important;
top: 0;


最新案例

寒枫总监

来电咨询

18868949445

微信咨询

寒枫总监

TOP