90
新的Divi选项提供了大量的可能性。模块、行和列,比以往任何时候都更加赋予彼此在通往令人惊叹和用户友好的网页设计的道路上的力量。它所能做的事情之一就是创建出色的编辑风格部分。这正是我们在这篇文章中展示给你的:5种不同的编辑风格版面,你可以在不同的网站中使用。最棒的部分?POST仅通过对每个模块、行和列使用正确的设置来完成。
清徐高端网站建设让我们看一下我们将向您展示如何创建的五个示例。
移动式
让我们从创建第一个编辑器样式布局开始。
添加一个新页面,启用DiviBuilder并切换到VisualBuilder。一旦您在VisualBuilder中,添加一个标准部分。
在标准部分中,我们需要一个三列行。
打开行设置并向其添加以下渐变背景:
· 第一颜色:#636363
· 第二颜色:RGBA(255,255,255,0)
· 梯度类型:径向
· 径向:中心
· 起始位置:0%
· 期末职位:47%
我们还需要将‘#d8d8d8’设置为列2的背景色。
继续到“设计”选项卡,并为“尺寸”子类别使用以下设置:
· 使用自定义宽度:是
· 定制宽度:100%
· 使用自定义水槽宽度:是
· 排水沟宽度:1
打开间隔子类别,将‘50 px’添加到第二列的上、右、下和左填充。
将图像添加到行的第一列,并对其使用以下梯度背景:
· 第一颜色:RGBA(255,255,255,0)
· 第二颜色:#086191
· 梯度型:线性
· 梯度方向:107德克
· 起始位置:60%
· 结束位置:60%
转到“设计”选项卡,使用“左图像对齐”并启用“始终以移动为中心的图像”选项。
然后,打开间隔子类别,并使用以下边距和填充设置:
· 最高利润率:100 px(桌面),0 px(平板电脑和手机)
· 顶部填充物:20 px
· 底垫:20 px
接下来,向行的第二列添加一个文本模块。转到“设计”选项卡,为文本子类别使用以下设置:
· 文本字体大小:12 px
· 文本颜色:#000000
· 文本定位:中心
打开“大小”子类别,使用“84%”的宽度并选择中心模块对齐。
最后,将‘50 px’添加到顶部和底部的边距。
向第三列中添加另一个图像模块,并使用以下梯度背景:
· 第一颜色:#a 36100
· 第二颜色:RGBA(255,255,255,0)
· 梯度型:线性
· 梯度方向:73度g
· 起始位置:40%
· 最后职位:40%
转到“设计”选项卡,选择“左图像对齐”并启用“始终以移动为中心的图像”选项。
最后,添加以下自定义边距和填充:
· 最高利润率:300 px(桌面),0 px(平板电脑和手机)
· 顶部填充物:20 px
· 底垫:20 px
让我们再看看桌面上的结果:
首先,增加一个新的标准部分。
然后,向它添加一个两列行。
打开行设置并添加“#edeed”作为第2列的背景色。
转到“设计”选项卡,对“尺寸”子类别进行以下更改:
· 使用自定义宽度:是
· 定制宽度:100%
· 使用自定义水槽宽度:是
· 排水沟宽度:1
将图像模块添加到第一列,使用左图像对齐并启用“始终以移动为中心的图像”选项。
打开间隔子类别并使用以下设置:
· 最高利润率:100 px(桌面),0 px(平板电脑和手机)
· 顶部填充:0 px
· 底部填充物:0 px
然后,将文本模块添加到第二列,并将下列设置应用于文本子类别:
· 文本字体:Lato
· 文本字体大小:12 px
· 文本颜色:#000000
· 文本线高度:2.2em
· 文本定位:中心
打开“大小”子类别并应用“75%”的宽度。
最后,确保以下设置适用于间隔子类别:
· 最高利润率:120 px(桌面),-80(平板电脑和手机)
· 左侧边缘:-240 px(桌面)、80(平板电脑)、45(电话)
· 上、右、下、左填充物:50 px(桌面和平板电脑),20 px(电话)
完成后,您将注意到桌面上的以下设计:
在移动平台上:
再次添加一个新的标准部分。
打开行设置并使用‘#e8e8e8’作为第1列背景色。
第二列所需的梯度背景如下:
· 第一颜色:#e8e8e8
· 第二颜色:RGBA(255,255,255,0)
· 第2列梯度类型:线性
· 第2栏梯度方向:147度
· 第2栏起始位置:25%
· 第2栏末端位置:9%
打开“大小”子类别并使用以下设置:
· 使用自定义宽度:是
· 定制宽度:100%
· 使用自定义水槽宽度:是
· 排水沟宽度:1
最后,将‘70 px’添加到第一列的顶部和底部填充。
清徐高端网站建设将图像模块添加到第一列,使用左图像对齐并启用“始终以移动为中心的图像”选项。
打开间隔子类别并将‘-300 px’添加到左侧边缘
将文本模块添加到第二列,并使用‘#3d3d3d’作为背景颜色。
转到“设计”选项卡,为文本子类别使用以下设置:
· 文本字体:Lato
· 文本字体大小:12 px
· 文本颜色:#FFFFFF
· 文本线高度:2.2em
· 文本定位:中心
打开“大小”子类别,使用“75%”作为宽度。
最后,对间隔子类别使用以下设置:
· 最高利润率:130 px(桌面),-200(平板电脑和手机)
· 左边沿:-180 px(桌面)、80(平板电脑)、50(电话)
· 上、右、下、左填充物:50 px(桌面和平板电脑),20 px(电话)
首先,在您正在处理的页面中添加一个标准部分。
然后,向它添加一个两列行。
上浆
打开“大小”子类别并进行以下更改:
· 使用自定义宽度:是
· 定制宽度:60%
· 使用自定义水槽宽度:是
· 排水沟宽度:1
将图像模块添加到第一列,使用正确的图像对齐,并启用“始终以移动为中心的图像”选项。
转到图像模块的大小子类别,使用‘89%’的宽度并选择正确的模块对齐方式。
转到“高级”选项卡,禁用电话和平板电脑上的图像模块。我们将为正在使用的3个图像模块执行此操作。您可以自己决定要在平板电脑和电话上显示哪一个,在我们的例子中,这将是右上角的图像。
添加另一个图像模块,使用正确的图像对齐,并启用“始终以移动为中心的图像”选项。
向下滚动并使用以下边框:
· 使用边框:是
· 边框颜色:#FFFFFF
· 边框宽度:5 px
· 边框风格:实心
最后,转到“高级”选项卡,在电话和平板电脑上禁用图像模块。
将下一个图像模块添加到第二列,使用左图像对齐并启用“始终以移动为中心的图像”选项。
向下滚动,打开边框子类别,并应用下列设置:
· 使用边框:是
· 边框颜色:#FFFFFF
· 边框宽度:4PX
· 边框风格:实心
将最后一个图像模块添加到第二列,使用左图像对齐并启用“始终以移动为中心的图像”选项。
然后,打开大小调整子类别,使用‘89%’的宽度并选择左模块对齐。
在电话和平板电脑上禁用此图像模块。
完成前一行后,继续添加另一行。这一次,行只需要一个列。
转到行设置的“设计”选项卡,启用“使用自定义宽度”选项,并使用“581px”作为自定义宽度。
向新行添加一个文本模块,并选择“RGBA(255,255,255,0.92)”作为背景色。
移至“设计”选项卡,并将下列设置应用于文本子类别:
· 文本字体:Lato
· 文本字体大小:12 px
· 文本颜色:#000000
· 文本线高度:2.2em
· 文本定位:中心
然后,打开“尺寸”子类别,将“75%”添加到宽度中,并选择“中心模块对齐”。
最后,将下列设置应用于间隔子类别:
· 最高利润率:-580 px(桌面),-200(平板电脑和手机)
· 左边沿:-180 px(桌面)、80(平板电脑)、50(电话)
· 上、右、下、左填充物:50 px
结果
一旦完成,您将能够在桌面上看到结果
首先,向页面添加一个全宽度部分。
在该全宽部分中,添加一个全宽度图像模块。
就在上一节的下方,添加另一节。这一次,该部分必须是标准的,而不是全宽度。
在新的标准部分中添加三列行。
打开行设置并将下列背景色分配给列:
· 第1栏:#eaeaea
· 第2栏:非洲区域局(12,113,195,0.17)
· 第3栏:非洲区域局(131,233,0.09)
转到“设计”选项卡,对“大小”子类别进行以下更改:
· 全宽行:是的
· 使用自定义水槽宽度:是
· 排水沟宽度:1
然后打开间隔子类别,将‘-60 px’添加到每列的上边距,将‘50 px’添加到每列的底部填充。
继续向第一列添加一个文本模块,并使用“RGBA(255,255,255,0.89)”作为其背景色。
转到“设计”选项卡,将下列设置应用于文本子类别:
· 文本字体:Lato
· 文本字体大小:12 px
· 文本颜色:#000000
· 文本线高度:2.2em
· 文本定位:中心
打开边界子类别并使用下列设置:
· 使用边框:是
· 边框颜色:#FFFFFF
· 边框宽度:17 px
· 边框风格:实心
然后,使用“75%”的宽度,并在“尺寸”子类别中选择“中心模块对齐”。
最后,打开间隔子类别并应用以下设置:
· 最高利润率:-300 px(桌面),0 px(平板电脑和手机)
· 上、右、下、左填充物:50 px(桌面和平板电脑),20 px(电话)
继续复制文本模块两次。然后,将每个克隆放在剩下的两个列中。
我们必须将放置在第二列中的文本模块的顶部空间更改为‘-220 px’。
第三列中文本模块的计数相同,但值为‘-140 px’。
在这篇文章中,清徐高端网站建设向您展示了一些美丽而有趣的编辑风格部分布局,您可以使用整个您自己的网站。这些例子显示了Divi的选择是多么灵活,你可以获得多大的创造性。如果您有任何问题或建议,请确保在下面的评论部分留下评论!
最新文章
2019.07.11
清徐网站设计:PHP和Java-下一个项目你应该使用哪一个?
2019.07.03
清徐网站设计:与Divi一起创造美丽的模糊背景
2019.07.03
清徐建站:如何将垂直滑块元素添加到Divi的滑块模块中
2019.07.03
清徐建站:如何处理电子商务或会员网站上的失败付款
2019.07.03
清徐网站制作:为网络专业人员创建业务计划的简单指南
2019.07.03
清徐网站建设:可视化表和图表插件的概述和评述
2019.05.27
清徐高端网站制作:divi插件突出显示:divi客户端安全
2019.05.27
清徐企业网站设计:为每个网站的建设重点设计3个重要领域
2019.05.27
清徐站点建设:如何用Divi重新创建颜色过滤器、效果和混合模式示例(第2部分)
2019.05.27
清徐企业网站制作:如何使用CSS偶数和奇数规则在WordPress中创建连接表
随机推荐
2019.07.03
清徐网站建设:可视化表和图表插件的概述和评述
2019.05.25
清徐网站开发:如何判断网站使用的是哪个WordPress主题
2019.05.27
清徐高端网站制作:divi插件突出显示:divi客户端安全
2019.07.03
清徐建站:如何处理电子商务或会员网站上的失败付款
2019.05.25
清徐站点建设:最佳求职网站的共同点(以及重新创建它们所需的工具)
2019.05.27
清徐企业网站制作:如何使用CSS偶数和奇数规则在WordPress中创建连接表
2019.05.25
清徐高端网站设计:为每个网站的建设重点设计3个重要领域
2019.05.27
清徐企业网站设计:为每个网站的建设重点设计3个重要领域
2019.07.03
清徐建站:如何将垂直滑块元素添加到Divi的滑块模块中
2019.05.25
清徐做网站:如何使用Divi的新设计选项创建章节