清徐网站设计：与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
  • 按钮字体重量：粗体
  • 按钮字体样式：大写




相关推荐
分享： 1 2 3

关键词

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

热门分享

最新文章

随机推荐

最新案例

寒枫总监

来电咨询

18868949445

微信咨询

寒枫总监
TOP