乌兰察布高端网站建设:使用Divi的新高级设计设置构建的免费库包

两天前我们乌兰察布高端网站建设介绍Divi 2.4,这是Divi历史上最大的升级,也是我们最受欢迎的WordPress主题的一次飞跃。在这个更新中有许多很棒的特性需要探索,所以很难在发布的文章中描述它们,这就是为什么我们决定做一个为期两周的信息博客文章,旨在教你如何充分利用Divi 2.4和它的新选项。在本系列的第2部分中,我们乌兰察布高端网站建设将探索一些可以使用高级设置的创造性方法,以及如何将保存的项导入/导出到Divi库中。我们甚至还提供了一个Divi库包,它包含了这个帖子中的所有元素,这样您就可以在您自己的站点上使用它们了!

Divi图书馆如何在建设网站的几个小时内

如果您还没有浏览过Divi2.4,您可能会问自己:“等等,Divi库是什么?”简单地说,这是一个新的地方,您可以保存使用DiviBuilder构建的各个模块、行、部分甚至整个布局。一旦将项保存到库中,就可以从构建器内部快速访问它。这些库项目就像您的新网页设计工具包中的工具,可以在您的网站上创建新页面或为您的客户创建新网站时使用。

如果您在更新之前是Divi用户,那么您可能熟悉Divi的“保存布局”功能,它过去和现在仍然是一个令人惊叹的特性,但是有了节省布局的零碎部分的功能,页面构建速度就会快得多。

现在各节、行和模块有了自己的一组高级设计设置,乌兰察布高端网站建设可以花费更多的时间配置页面上的元素。这也会使高度定制的元素一次又一次地构建。但是感谢Divi库,您可以将这些复杂的部分保存到库中,然后可以在另一个页面上使用,甚至可以在另一个网站上使用。

Divi2.4高级设计设置初探

乌兰察布高端网站建设尽管每个元素的高级设计设置在每个项目的基础上都是独特的,但是有许多设置是他们共享的,并且您应该熟悉这些设置。这不仅会加速事情的发展,而且更重要的是,当你知道什么是可能的时候,它会让你在梦想你的网站设计时变得更有创造力。

自定义填充和边距

通过添加自定义填充或边距,给模块的内容多一点喘息空间。您可以为模块的顶部、右侧、左侧和/或底部定义填充/边距。

乌兰察布高端网站建设

海关边界

在模块周围添加边框就像选择边框的重量、样式和颜色一样简单。

design-settings-border

自定义按钮

除了站点范围内的按钮设置外,还可以在每个模块的基础上定义自定义按钮设置。

design-settings-buttons

背景颜色/图像

现在,乌兰察布高端网站建设可以向各个模块添加背景。结合自定义填充,您可以创建一些真正有创意的模块。

design-settings-bg

文本选项

如果模块包含文本元素,您将在“高级设置”中找到各种类型的字体设置,如字体、颜色、样式、大小、行高和字母间距。

design-settings-type

这些只是最基本的!下面我将介绍一些有更多独特设置的模块,以向您展示如何使您的网站真正独特。

创建一个推荐信滑翔机

testimonial-slider

这实际上是一个全宽度滑块模块,它利用了新的自定义填充滑块选项。在滑块模块的高级设置中,可以定义任何滑块的顶部和底部填充。为了实现这种影响,我使用了幻灯片标题作为推荐信内容,属性的幻灯片正文内容,并减少了滑块填充相当多,因为证明滑块的高度通常比普通的页眉滑块短。减少填充的另一个原因是,这样您就可以在滑块周围添加更多的元素,如下面的屏幕截图中的空白。

testimonial-slider2

给你的定价表一个新的外观

pricing-table-module

Divi的“定价表”模块可能会为最先进的设置带来胜利。配置表可能需要一段时间,使这个模块成为您可以使用Divi Library的完美示例。上面的定价表模块是Divi的定价表的一个很好的现代样式,而拆分的背景色只是向您展示您可以将这个模块导入到您自己的页面中,并将它添加到任何支持白色文本的背景色上。

乌兰察布高端网站建设在这里编辑了相当多的内容,但要点是我删除了默认边框,将所有文本定制为白色,将按钮修改为白色,并使表的背景颜色具有透明度。您还可以看到,我已经给特色定价表一个更不透明的背景与模块的特色表设计设置。

单表控制

关于定价表模块中的高级设置,最后要注意的一点是,您可以对整个模块中的表进行自定义,但也可以在每个表的基础上定制这些表。例如,您可以给每个表自己的背景色,使每个产品真正脱颖而出。

无沟行

gutterless-row

没有排水沟的行是您可以在Divi2.4中创建的最酷的东西之一。我们将在即将发布的文章中更多地介绍新的行选项,但我想将其包括在内,以便为我们的读者创建一个Divi库包。您在这里看到的是一个两列行,它是完全宽度的,在它的列之间没有空格。下面的设置说明了这种配置。

gutterless-row-settings

咖啡图像实际上是一个列背景图像,列将始终保持完全相同的高度与Divi的新的等列高度设置。库包中还包括这一行,但图像位于左侧。将这两个结果结合在一起,形成一个很好的交替布局。

gutterless-rows

如果下载库包并将这些行放置到自己的布局中,调用操作模块将继承主题的排版和按钮样式。请继续关注Divi的所有新主题定制选项的更深入的文章。

盒式Blurb模块

boxed-blurbs

相邻的blurb模块有时会发生冲突。如果你觉得他们需要更多的分离,在他们周围添加一个边框可能是一个很好的解决方案。在Divi2.4之前,您必须使用自定义CSS来完成这个任务,但是现在您可以通过简单地使用模块边框选项来做到这一点。在添加边框时,您需要添加一些自定义填充,这样您的内容就不会崩溃到边框中。在上面的例子中,我使用了40 px填充,这在所有断点上都是一个很好的值,所以您的盒装模块在移动上看起来仍然很棒。

考虑到边界模块的相同概念,并将其添加到具有自定义填充的部分,您可以通过使用与上述模块几乎相同的模块来实现一个全新的外观。这是一个很好的例子,说明这些新的高级设置如何打开世界的设计机会。

blurb-section

透明接触形式

transparent-contact-form

新的联系人窗体设置允许您控制诸如“形成背景色”、“边框样式”、“文本颜色”和“窗体字段圆角”之类的内容。在上面的模块中,我选择了透明的背景色、白色边框和圆角。所有这些设置都是完全可自定义的。您可以选择半透明的背景颜色,选择您的边框厚度,甚至定义一个自定义圆角半径。

全屏标头

fullscreen-header

divi的全宽度头模块现在我可以做‘全屏’。这样,不管您的浏览器大小如何,它都会填充屏幕并垂直集中内容。在上面的示例中,我将Divi徽标上传到新的Logo字段,并添加了两个操作按钮调用。全宽度标头模块还使您能够添加一个“滚动”图标,如果点击,将顺利向下滚动到下一节。有11个预先制作的图标,你可以选择与能够定义它的大小和颜色。我最喜欢的另一个功能是这个模块的背景色叠加。你在这里看到的背景实际上是一个非常明亮和饱和的图像,有一个半透明的暗覆盖,帮助文本脱离繁忙的图像。

fullscreen-header-settings

将您自己的项目保存到Divi库

乌兰察布高端网站建设在DiviBuilder中创建或编辑新模块、行或部分时,您将注意到设置窗口底部有一个全新的保存按钮,名为“Save&Add to Library”。这是伴随着标准的“保存和退出”按钮在右边。当您单击“保存&退出”按钮时,您的模块设置将保存在当前页面上,并关闭设置弹出。当您单击“Save&Add to Library”时,模块仍然保存在您的页面上,但它也会添加到您的Divi库中。

add-to-library

将库项目添加到页面中

一旦将项保存到库中,就可以在向页面添加新模块、行或部分时单击“Add from Library”按钮,将其添加到Divi Builder中的任何新页中。

add-libarary-item

下载本篇文章中描述的图书馆项目

点击下面的链接下载在这篇文章中描述的项目。要将它们导入库,请导航到Tools>Import。选择导入类型列表底部的WordPress链接,您将被提示上传该文件。然后,您将可以访问这些模块,供您自己使用。上传之前,一定要解压缩文件!只能导入XML文件。

import-library





二维码