津南小镇的网站建设：用Divi实现清洁抽象设计的8种技术

津南小镇的网站建设决定你想要你的网站遵循哪种风格是很费时的。如果你考虑了所有你可以遵循的设计风格，那就不足为奇了。您所选择的风格将代表您的网站所代表的一切，您最肯定希望它能与2018年的设计趋势相匹配。在本系列文章中，我们将探讨一些最受欢迎和最好看的文章：

1. 清洁与抽象

2. 极小

3. 扁平化

4. 大胆多姿多彩

对于每一种设计风格，我们将介绍一些Divi技术，这些技术将使实现这种设计更加容易。我们将从干净而抽象的设计风格开始。我们将分享8种技术，您可以应用到您的设计元素使用Divi的可视化生成器，然后，我们将创建两个惊人的例子从零！

我们开始吧！

一。避免彩色主体背景色

在大多数情况下，“干净”一词也意味着大量的“白色”。这并不意味着你应该在一般情况下避免使用颜色，但是在你的网站的主要结构元素(比如部分)中避免使用颜色会给访问者一个干净的印象。

二。使用微妙的行模式背景代替

为了减少您的部分的白色和干净的感觉，您不一定要关注您的部分的设置。例如，您可以使用行模式背景图像轻松地创建一个微妙而抽象的设计。它只会覆盖你的行的背景，并将留下足够的空白空间，以保持整体清洁和白色的感觉。您使用的模式背景应该包含白色背景颜色，并且该白色背景的一部分应该被图案覆盖。确保没有向边框或角落添加任何模式。这允许您的行和区段背景混合。在下面的文章中，在我们将重新创建示例的部分，您将能够保存模式图像并将其用于您自己的网页设计项目！

三。用白色模块背景色打破图案

设计层次结构divi包含(→行→列→模块)，允许您对行模式背景执行相同的操作。通过为您选择的模块使用白色背景色，您可以覆盖模块所使用的行模式背景。这与白色的部分背景颜色结合在一起，使您可以使模块和区段背景合并，同时仍然保持您正在使用的其他模块的行模式背景不变。

4。创建与字体大小的对比

使用白色区域背景颜色意味着你需要在其他地方寻找引人注目的元素。要引起注意，你可以做的一件事就是在字体大小上建立对比。例如，你的副标题和主标题之间的差距越大，你的主标题就会弹出越多。

五。用字母间距来表示优雅

就像玩字体大小一样，在不同的字体上使用额外的字母间距可以带来惊人的效果。它有助于增强您共享的内容之间的对比，而不必在您的设计中集成多色调色板。就像字体大小一样，它吸引了访问者的注意，但与大字体不同。

六。为抽象目的使用渐变CTA、分隔符和空区段

另一种平衡干净和白色的网站设计的方法是以抽象的方式使用颜色。使用渐变颜色来调用操作，分割器和空部分与区段分隔器结合在一起，将使您能够在不丢失干净和白色因素的情况下创建令人惊叹的结果。

七。用微妙的盒子阴影创造深度

结合网页设计中的渐变和抽象设计元素，一个干净的网站也需要一定的深度。不是那种“难以错过”的深度，而是帮助你把它提升到更高水平的那种微妙的深度。微妙的盒子阴影的特点是一个高模糊强度与低扩散强度和浅色框阴影颜色的结合，没有吸引太多的注意力，而是赋予你的网站上的其他设计元素。

八。负裕度重叠设计元素

我们已经提到了使用梯度设计元素，例如分隔符和空段，并与分段分隔器相结合。这些元素已经很漂亮了，但是为了帮助您的设计变得更复杂(以积极的方式)和抽象，您可以很容易地使用一个负的顶部空白来使不同的设计元素在您的章节中重叠。您还可以根据您希望它在不同屏幕大小上的外观，无论是桌面、平板电脑还是手机，修改这个负的顶部边距。

预览

现在我们已经完成了所有的Divi技术，是时候把它们付诸实践了。让我们来看看我们将在不同屏幕大小上重新创建的设计，同时记住不同的技术。

让我们开始创造！

一般步骤

增加新科

我们将创建两个不同的例子。示例相似，但设计元素不同。为了简化这个过程，我们将首先完成一般步骤，一旦这些步骤完成，我们将分别关注每一个示例。首先使用Divi的VisualBuilder打开一个新页面，然后添加一个新的标准部分。默认情况下，这个部分包含一个白色的背景色，这就是我们要保留它的方法。

增加新行

柱结构

接下来，向包含一列的节中添加一行。

背景图像

正如其中一种技术所提到的，您可以通过为您的行使用模式背景来轻松地增强白色部分背景。继续保存下面的图像，上传并与以下背景图像设置一起使用：

· 背景图像大小：FIT

· 背景图像位置：中心

· 背景图像重复：不重复

上浆

打开下一步的尺寸设置并启用“让这个行满宽”选项。

添加文本模块#1

背景色

现在，让我们开始添加模块！我们将从一个副标题开始，正如技术2中所提到的，我们将使用白色背景色来打破这个模块的模式。

文本设置

下一步打开文本设置并应用以下更改：

· 文本字体权重：粗体

· 文本字体样式：大写

· 文本颜色：#000000

· 文本大小：18 px

· 文字间距：29 px(平板电脑)，25 px(平板电脑)，18 px(电话)

· 文本定位：中心

间距

为了在模式的开头和文本模块之间创建一些空间，我们将在文本模块的顶部添加“100 px”。

添加文本模块#2

文本设置

在前面的文本模块下面，继续添加一个包含您想要显示的标题的新文本模块。打开模块的文本设置，并进行以下更改：

· 文本字体重量：超粗体

· 文本颜色：#000000

· 文本大小：200 px(桌面)，130 px(平板电脑)，100 px(电话)

· 文字间距：-6PX

· 文本行高：1em

添加按钮模块

按钮对齐

我们行中的第三个也是最后一个模块是Button模块。添加副本后，转到对齐设置并使用中间按钮对齐。

按钮设置

若要津南小镇的网站建设更改按钮的外观，请打开按钮设置并应用以下修改：

· 为按钮使用自定义样式：是

· 按钮文本大小：16 px

· 按钮文本颜色：#FFFFFF

· 渐变颜色#1：#fd 5056

· 梯度颜色#2：#bd3cb5

· 梯度方向：153度

· 按钮边框宽度：0 px

· 按钮边框半径：54 px

· 字体重量：超粗体

· 字体样式：大写

间距

给你的按钮足够的填充是创建一个可读的和有吸引力的CTA的一个重要部分。打开按钮的间距设置，并应用以下自定义边距和填充：

· 上下边距：100 px

· 顶部和底部填充物：15便士

· 左右填充物：40 px

盒影

最后但并非最不重要的一点是，我们将创建深度(如技术7中提到的)，以创建一个吸引人的设计：

· 盒影模糊强度：80 px

· 盒影扩展强度：-7 px

· 框影颜色：RGBA(0，0，0，0.34)

示例1：其他步骤

增加新行

柱结构

现在我们已经完成了一般步骤，让我们单独创建两个不同的示例。对于第一个示例，首先使用以下列结构向同一节添加一个新行：

上浆

打开您的行的设置，并允许您的行模块使用以下大小设置占用屏幕的整个宽度：

· 全宽行：是的

· 使用自定义水槽宽度：是

· 排水沟宽度：1

添加除法器模块

添加和隐藏分割器

在您的行中添加一个Divider模块，并在Content选项卡的可见性设置中禁用‘ShowDivider’选项。

梯度背景

我们将使用渐变背景作为除法器：

· 渐变颜色#1：#fd 5056

· 梯度颜色#2：#bd3cb5

· 梯度方向：168度

间距

为了使分隔模块与上一行和它的模块重叠，我们将使用‘-400 px’作为上边距。

不透明度

为了使上一行的标题文本模块仍然显示出来，我们将把过滤器设置中的不透明度调整为“43%”。

盒影

最后但并非最不重要的一点是，我们将应用一个微妙的盒子阴影来增强我们设计的深度：

· 盒影模糊强度：80 px

· 盒影扩展强度：3 px

· 框影颜色：RGBA(0，0，0，0.49)

示例2：其他步骤

更改文本模块#1的间距

对于第二个示例，我们需要对现有模块进行一些修改，从第一个文本模块开始。打开其间距设置并添加以下自定义页边距：

· 底限：150 px(电话)

更改文本模块#2的间距

下一步打开第二个文本模块，并使用以下间距设置：

· 底限：150 px(平板电脑和手机)

更改按钮文本颜色

然后，打开Button模块并将其文本颜色更改为‘#bd3cb5’。

删除按钮梯度背景

接下来继续删除按钮模块的渐变背景。

添加按钮背景色

然后添加白色背景色。

增加新科

梯度背景

一旦您完成了对现有模块的修改，就可以继续在现有模块下面添加一个新部分。打开节的设置，并对其使用以下渐变背景：

· 渐变颜色#1：#fd 5056

· 梯度颜色#2：#bd3cb5

· 梯度方向：165度

顶部分配器

继续在区段中添加顶部分隔符：

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

· 分隔颜色：#ffffff

底分配器

对底部分隔器使用相同的设置。

间距

对于新的部分，您最不需要做的事情是修改其间距设置：

· 最高保证金：-460 px

· 底限：100 px

· 顶部和底部填充物：0 px

增加新行

柱结构

现在，为了确保我们的部分显示在所有屏幕大小上，我们将在其中添加一行，其中包含一个不可见的分区模块。首先添加行：

添加除法器模块

隐藏分配器

添加您的分区模块下一步，并确保您禁用‘显示分区’选项内的可见性设置，你就完成了！

预览

现在我们已经完成了所有的步骤，让我们最后看看不同屏幕大小上的结果。

最后思想

在这篇文章中，我们向您展示了津南小镇的网站建设一些关于如何实现一个干净而抽象的网站风格的伟大技巧。这是该系列的第一篇文章，介绍如何使用Divi最好的内置选项来实现漂亮的设计风格。在下一个系列中，我们将分享如何实现更令人惊叹的设计风格的技术。如果您有任何问题或建议，请确保您在下面留下评论部分！