河东设计网站:如何使用Divi中的空部分创建唯一的设计元素

2019.05.30 河东设计网站

123

每周,我们为您提供新的和免费的Divi布局包,您可以使用您的下一个项目。对于其中一个布局包,我们也共享一个用例,它将帮助您将您的网站提升到下一个级别。

本周,河东设计网站作为我们正在进行的Divi设计计划的一部分,我们将向您展示如何使用Divi中的空部分来创建独特的设计元素。我们将在珠宝商布局包登陆页面。但是,您可以在使用Divi的VisualBuilder创建的任何布局包或网站上添加这些空部分。

我们开始吧!

预览

在开始本教程之前,让我们先来看看我们将要创建的设计元素:

河东设计网站

进场

· 我们使用空部分来创建唯一的设计元素,而不必更改其他部分的设置

· 我们给我们的区段分隔符的颜色与上一节和下一节的部分背景颜色相同,在本例中是白色的。

· 我们正在重用调色板中的颜色作为新部分的背景色

· 我们正在为顶部和底部组合不同的分割器,以创建不同的设计

· 没有模块,一个部分将无法正确显示在桌面上,也不会出现在平板电脑和电话上。

· 这就是为什么我们不是让它空着,而是制造一个空部分的错觉

· 添加一个带有不可见字符的文本模块将完成此任务

· 我们的新部分将是独立的,这意味着我们也可以在不影响上一节或下一节的情况下使用保证金。

· 您可以将此设计应用于您正在处理的任何页面或布局包。

· 我们将在本教程中重新创建的四个示例非常适合珠宝商布局包

· 但是,您可以使用其他分区分配器,并尝试使用其他布局包。

一般步骤

增加新的标准部分

在我们单独处理每一个示例之前,我们先回顾一下一般步骤。这意味着在开始一个示例之前,您需要完成以下步骤。每个示例的一般步骤是相同的。首先,使用Divi的珠宝商布局包。作为例子,我们使用了登陆页面。

向区段添加背景色

然后,添加#f2e3de作为本节的背景色。

增加一列行

下一列添加一行。

添加不可见字符的文本模块

最后添加一个带有不可见字符的文本模块。正如在这篇文章中所提到的,我们不能把一个部分完全空着。这样做将导致该部分消失在平板电脑和手机上。这就是为什么我们宁愿欺骗这一节,让它认为有内容使用一个无形的角色。您可以通过按住ALT按钮并使用Numpad键入0160来添加不可见字符。或者,您可以简单地在引号之间克隆以下字符:‘。

创建第1节

将左右边距添加到区段

现在,让我们开始创建第一个示例,向部分添加以下自定义边距:

· 最高利润:200 px(桌面),100 px(平板电脑),50 px(电话)

· 底限:200 px(桌面)、100 px(平板电脑)、50 px(电话)

添加圆角

打开下一个边框设置,将‘100 px’添加到左上角和右上角。

添加底部除法器

最后,在您的部分中添加以下底部分隔符:

· 分隔器样式:在列表中找到

· 分光镜颜色:白色

· 分隔高度:180 px(桌面),150 px(平板电脑),120 px(电话)

· 水平重复:8倍(桌面),5倍(平板电脑),4倍(手机)

创建第2节

拆行垫

要创建第二个示例吗?从删除所有行填充开始,在顶部和底部填充中添加‘0px’。

增加顶部分隔器

河东设计网站继续在区段中添加顶部分隔符:

· 分隔器样式:在列表中找到

· 分光镜颜色:白色

添加底部除法器

在底部也使用相同的分隔符:

· 分隔器样式:在列表中找到

· 分光镜颜色:白色

克隆人科

你可以克隆这个部分,最多可以复制你想要的次数。要实现与示例中所示的结果相同的结果,请复制该部分,然后再复制它!

创建第3节

增加顶部分隔器

第三个示例使用以下顶部分隔符:

· 分隔器样式:在列表中找到

· 分光镜颜色:白色

· 分隔高度:40 px(桌面),30 px(平板电脑),20 px(电话)

添加底部除法器

添加到顶部分隔器后,切换到底部分隔器并应用以下设置:

· 分隔器样式:在列表中找到

· 分光镜颜色:白色

· 分隔高度:140 px

· 分压器水平重复:6倍(桌面),5倍(平板电脑),4倍(手机)

创建第4节

增加顶部分隔器

对于行中的最后一个示例,选择以下顶部分隔符:

· 分隔器样式:在列表中找到

· 分光镜颜色:白色

添加底部除法器

与下面的底部分隔器一起使用:

· 分隔器样式:在列表中找到

· 分光镜颜色:白色

在行中增加额外的填充物

如果要增加设计的高度,还可以将“40 px”添加到行的顶部和底部。

附加:背景图像+梯度叠加

向剖面添加渐变背景

您可以通过添加背景图像和渐变叠加到您的区段,使每个空白部分都是唯一的。梯度背景和背景图像将填补您的设计,并给予它一个更先进的效果。首先,将渐变背景添加到节中:

· 第一颜色:#f2e3de

· 第二颜色:RGBA(255,255,255,0)

· 梯度型:线性

· 梯度方向:130度

· 起始位置:25%

将背景图像添加到区段

然后,添加一个背景图像(上传Divi的珠宝商布局包后,您可以在媒体库中找到它)以及以下设置:

· 背景图像位置:顶部中心

· 背景图像混合:覆盖

预览

现在我们已经完成了所有步骤,让我们来最后看看结果:

最后思想

河东设计网站在这个用例博客文章中,我们已经向您展示了如何使用空部分来创建独特的设计元素。我们将这些设计元素添加到珠宝商布局包登陆页面。但是,您可以将这些空部分添加到任何您想要的设计和布局包中。如果您有任何问题,请确保您在下面的评论部分留下评论!

 


最新案例

寒枫总监

来电咨询

18868949445

微信咨询

寒枫总监

TOP