长治网站设计：如何设计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;


相关推荐
分享： 1 2 3

关键词

手机网站制作手机网站建设企业网站建设做网站价格医疗网站建设营销网站建设网站建设哪家好网站制作方案企业网站制作如何制作网站江门网站优化专业网站建设网站制作公司

热门分享

最新文章

随机推荐

最新案例

寒枫总监

来电咨询

18868949445

微信咨询

寒枫总监
TOP