清徐网站设计:与Divi一起创造美丽的模糊背景

2019.07.03 清徐网站建设

177

进场

  • 我们在一列中添加三个不同的模块;两个图像模块和一个CTA模块
  • 第一个图像保持其初始外观。
  • 第二幅图像将变得模糊,尺寸也会增大。
  • 我们还将通过播放图像模块中包含的其他过滤器设置来增强颜色
  • CTA模块将模糊图像模块重叠并用作其背景。
  • 为了确保图像模块#2的模糊和大小增加不会超过列容器,我们将隐藏列溢出

让我们开始重新创造

增加新科

首先,在您正在处理的页面中添加一个新的常规部分。清徐网站设计

image.png

增加新行

柱结构

继续使用以下列结构添加新行:

image.png

上浆

在不添加任何模块的情况下,打开行设置并更改“设计”选项卡中的大小设置。清徐网站设计

  • 使用自定义水槽宽度:是
  • 排水沟宽度:2
  • 最大宽度:100%

blurred backgrounds

第2栏溢出

转到高级选项卡,使用一行CSS代码隐藏列2溢出。这样做将帮助我们确保没有任何东西超过列容器。一旦我们开始将图像模块转换成模糊的背景并增加其大小,这将变得特别重要。

01
overflow: hidden;

image.png

第3栏溢出

对第三列做同样的事情。清徐网站设计

01
overflow: hidden;

image.png

将文本模块#1添加到第1列

添加H2副本

开始添加模块的时间,从第一列中的文本模块开始。输入您选择的一些H2内容。清徐网站设计

image.png

H2文本设置

移到“设计”选项卡并更改h2文本设置。

  • 标题2字体:Poppin
  • 标题2文本颜色:#232323
  • 标题2文本大小:40 px

blurred backgrounds

间距

添加一些自定义上边距以及。清徐网站设计

  • 最高保证金:9vw

image.png

将除法器模块添加到第1列

能见度

列2中我们需要的第二个模块是一个分隔模块。确保启用了“ShowDivider”选项。

  • 秀师:是的

blurred backgrounds

线

移到“设计”选项卡并更改线条颜色。

  • 线条颜色:#000000

image.png

将文本模块#2添加到第1列

添加内容

继续添加另一个文本模块,其中包含您选择的一些段落内容。

image.png

文本设置

下一步更改文本设置。

  • 文本字体:Poppin
  • 字体重量:轻
  • 文本大小:17 px
  • 文本线高度:2.1em

blurred backgrounds

将按钮模块添加到第1列

添加副本

列1中我们需要的下一个也是最后一个模块是Button模块。输入您选择的副本。

image.png

按钮设置

继续到“设计”选项卡,并在按钮设置中设置按钮的样式。

  • 为按钮使用自定义样式:是
  • 按钮文本大小:20 px
  • 按钮文本颜色:#000000
  • 按钮背景颜色:#f4f4f4
  • 按钮边框宽度:0 px
  • 按钮边框半径:0px
  • 按钮字体:Poppin
  • 按钮字体重量:粗体
  • 按钮字体样式:大写




最新案例

寒枫总监

来电咨询

18868949445

微信咨询

寒枫总监

TOP