上海高级网站设计:如何使用文本作为Divi中的抽象设计元素

2019.05.28 关键词:

上海高级网站设计使用文本作为一个抽象的设计元素可以是一个伟大的方式给你的网站一个独特的外观,而不必创建自定义的图形或图像。你可以使用文本严格抽象的审美吸引力,或者你可以让他们作为一个创造性和微妙的信息给你的观众。

今天,我将向您展示如何使用Divi的文本模块将您想要的任何文本内容作为抽象设计元素添加到您的网站上。我将包括几个例子,希望能对你未来的项目有所启发。

我们开始吧。

偷窥

这里是我们将在本教程中创建的设计的一瞥。

上海高级网站设计

如何使用大文本作为标题背景

使用大文本创建一个独特的背景是一个很好的方法,以调味一个简单的背景颜色和添加一个纹理元素。这是怎么做的。

首先,创建一个具有一列行的规则节。

然后添加您的第一个文本模块,它将包括您的页面的标题。

上海高级网站设计

在“文本模块”设置中,将要添加的任何文本添加到“内容”字段。在这个例子中,我将使用“创造性”这个词。因为我想拆分这个单词,所以我将使用Content字段的Text选项卡,并添加一些带有中断标记的html。

在内容字段…的Text选项卡下添加以下html

01

<p>cre<br>ati</br>ve</p>

接下来更新“设计”选项卡选项…

文本字体:Oswald
文本大小:400 px(桌面)和200 px(平板电脑)
文本颜色:RGBA(12,113,195,0.11)
文本线高度:0.5em

文本行的高度实际上是我们完成文本重叠的地方。这种重叠结合了半透明的文字色彩,增添了一种清凉的效果.但是,如果你希望文本不重叠,只需增加线的高度。

还可以向文本中添加文本阴影,以创建可放置在节中任何位置的文本的副本。你甚至可以给它不同的颜色。

文本阴影水平长度:1.72em
文本阴影垂直长度:-0.81em
文本阴影颜色:RGBA(244,0,204,0.08)

保存设置。

以下是我们到目前为止的情况。

现在,我们需要添加文本模块来保存实际的标题文本。只需在用于背景文本的文本模块下添加一个文本模块即可。然后按以下方式更新设置:

内容:

01

02

<h1>Creative Header<br />Design</h1>

Nulla quis lorem ut libero malesuada feugiat. Sed porttitor lectus nibh.

文本字体:打开Sans
文本大小:20 px

标题字体:Oswald
标题文本大小:80 px(桌面)和42 px(平板电脑)
标题文本颜色:#555555

自定义页边距:-370 px top(桌面)和-240 px(平板电脑)
定制填充:20%左(桌面)和0%(平板电脑)

负的上边框用于将标题文本垂直地居中于背景文本。我也调整了移动的保证金和填充。

由于负的保证金值使我们的保证金增加了370 px,所以我们需要通过向行添加底部填充来增加一些空间。转到行设置并更新以下内容:

自定义填充(桌面):0 px顶部,300 px底部
定制填充(平板电脑):0 px顶部,150 px底部

0 px顶部填充拉出内容,以便您有更多的空间以上的折叠。300 px底部填充为文本模块的-370 px顶部空白添加了填充空间。

保存你的设置。

现在你完了。看看结果。

请随时调整设置,以创建您自己的自定义设计。例如,我向该部分添加了背景梯度,其内容如下:

颜色:RGBA(244,0,204,0.82)和RGBA(12,113,195,0.86)
梯度方向:90德克

然后,我将标题文本改为白色,创建了一个独特的设计,背景文本添加了一个漂亮的彩色纹理。

你总是可以旋转你的文本,以创造更独特的背景。您所需要做的就是添加一个简短的CSS片段。

上海高级网站设计要添加CSS,请转到文本模块设置,并在“高级”选项卡下的“主元素”框中输入以下自定义CSS代码。

01

transform: rotate(90deg)

此CSS将文本模块内容设置为从其原始位置旋转90度。结果是垂直文本。

但是你可以根据不同的设计来调整你想要的程度。

这是结果。

如何使用文本作为唯一的图像覆盖

使用文本作为图像叠加是一个很好的方式来添加一些额外的风格到您的图像。

为了完成这个设计,让我们使用我们的一个预先制作的布局。创建一个新页面,部署可视化构建器,并将“时装登陆页”布局添加到您的页面中。

然后删除主标题部分下面的“关于我们”部分之外的所有部分。

现在,我们将在右边列的图像下面添加一个文本模块。

在Content字段中,添加字母“Via”。

然后按以下方式更新“设计”选项卡设置:

文本字体:源SANS Pro
文本字体重量:沉重
文本大小:320 px(桌面)和290 px(平板电脑)
文字颜色:白色(#ffffff)
文字间距:-5 px

文本颜色应与部分背景颜色相同,以隐藏文本的底部部分,而不是重叠图像。

现在,我们需要添加一些自定义边距,以将文本定位到图像上。

自定义填充:-80 px顶部,80 px底部,-70 px左

文本覆盖完成。现在,我们需要更新部分内容的其余部分的设计,以给它一个更完美的外观。

通过删除框阴影更新右边列中的图像模块。

接下来,使用以下内容更新左侧列顶部文本模块的设置:

内容:

01

<h2>Create your own<br />text style.</h2>

标题2字体:源SANS Pro
标题2文字颜色:#4a4d91

删除刚才更新的文本模块下的分隔模块。

然后用符合设计的字体更新左边列中的最后一个文本模块。

文本字体:源SANS Pro
文本颜色:RGBA(74,77,145,0.73)

现在我们需要改变我们的第二列梯度背景的颜色。为此,编辑行设置并将背景渐变颜色更改为:

第2栏背景梯度:#4a4d91和#181a3d

现在的颜色文本和梯度匹配,并提供了一个良好的对比,我们的文本覆盖。

如果需要,您可以在底部添加一个区段分隔符,它将覆盖您的部分内容的底部,并给人以文本浮动的印象。

若要创建区段分隔符,请转到“设计”选项卡下的区段设置。选择要编辑底部分隔符。然后更新以下内容:

分隔风格:见截图
除法器颜色:RGBA(74,77,145,0.16)
分压器高度:332 px
分页排列:在部分内容的顶部

自定义填充:200 px底部

这里的诀窍是将分隔器的排列设置在部分内容的顶部,这样它就覆盖了坐在图像顶部的文本。

这是最后的结果。

最后思想

上海高级网站设计与数百种字体和设计组合在Divi,您有一个伟大的设计资源添加抽象文本元素在您的网站。与图像不同的是,您可以在Divi构建器中轻松地更改文本和设计,而无需使用照片编辑器。但是请记住,您需要确保并调整移动设备的文本大小和间距,以确保设计具有响应性。

那就去试试吧。添加一个新的抽象文本设计到您的下一个项目。

我期待着在评论中听到你的意见。

干杯!

 


关键词
最新推荐
联系电话 400-6065-301

微信咨询 寒总监