南开设计网站：divi插件突出显示是为了divi blurb扩展

2019.05.30 南开设计网站

112

南开设计网站divi的blurb模块是我在使用中看到的最流行的模块之一。这是伟大的显示图像或图标与一个标题和简短的文本在一个单一的模块。它们经常与按钮模块一起使用，以扩展其用途。如果需要更多的功能，我有时会看到图像、文本和按钮模块用于代替blurb模块。另一种选择是使用名为“第三方插件”的第三方插件。Divi Blurb扩展.

divi blurb扩展是一个blurb模块，它具有可以替代多个模块的新功能。新增的功能包括多个图标位置，新的图标形状，一个读取更多的按钮，以及在悬停时的颜色变化。

它与External和DiviBuilder插件一起工作。我使用的是DiviBlurb扩展版本1.1.0、Divi版本3.3.1和WordPress版本4.9.6。

安装Divi Blurb扩展

南开设计网站

在上传插件之前，您必须先解压缩下载文件。文件中还有另外两个文件夹：

1. divi blurb扩展(这是插件文件)

2. divi blurb扩展布局JSON(这是一个可选的布局文件，可以上传到Divi库)

上传并激活文件夹中的插件。不需要其他设置。

divi Blurb扩展模块

南开设计网站

一个名为DiviBlurbExtended的新模块被添加到DiviBuilder中。它是绿色的，所以很突出。

Content选项卡包括标题和内容文本、URL、图像和图标以及背景的熟悉的blurb设置。它为按钮添加了一个功能，包括文本和样式选项。

“设计”选项卡包括布局设置(从经典、翻盖框、易画盒、边框和图像卡中选择)、图像和图标放置(从上、右或左选择)、悬停状态、文本、标题文本、正文文本、大小、边框、框影和动画。

高级选项卡包括所有blurb元素的CSS字段。你可以访问模糊图像，标题，内容，读更多的按钮悬停。

divi Blurb扩展示例

我用DiviBlurb扩展模块替换了医生办公室布局包中的空白。我用图标的颜色和大小所做的唯一改变。默认图标大小为96像素。我把它设定为16。如果我变小，圆圈保持相同的大小，而里面的图标变小了。这将是很容易使模糊看起来接近原版。我将进行一些自定义更改，这些更改对此模块更具有排他性。

注意-它最初对前端生成器很有效，但是我不得不恢复到后端构建器，因为在我创建第一个模块之后，这个模块是不可见的。您可以将模块放置在前端生成器中，但是您必须使用后端构建器进行调整。

通过从下拉框中选择图标来更改图标的形状。从圆形、正方形或六边形中选择。这是与方型图标相同的布局。

这是六边形的图标。我已经将图标的大小更改为66，并添加了一个悬停效果，以更改图标和悬停背景的颜色。我还添加了一个框阴影和一些填充，以将文本从边框移开。

以下是南开设计网站架构布局包中的标准简介。他们使用按钮模块来链接到更多的信息。随着DiviBlurb扩展，我们可以删除额外的按钮模块。其中一个不像其他人。

我重新创建了其中一个模块，并将原件留给比较。你能看出来哪个是我的。我使用相同的字体和样式，图像等。我的只使用一个模块，所以我不必添加按钮模块。我必须在CSS中添加填充，以便在文本和按钮之间创建适当的空间。不过，我没有做的一件事是删除按钮的边距，这样我的按钮就不会像其他按钮一样与文字的左边对齐。

现在我用DiviBlurb扩展模块重新创建了所有的blurb。为此，我选择了包括动画在内的布局选项。左边使用Flipbox，右边使用Easebox。

对于翻盖盒，你可以有不同的颜色或图像的正面和背面，如果你想。对于这个，我为前面添加了一个图像。我更改了标题文本的颜色，并添加了文本效果，因此易于阅读。

在悬停时，卡会翻转以显示我设置的背景颜色。

我为卡的内部添加了一个边框效果，这可以看作是卡的旋转。

另外两个布局不是动画。左边是Borderbox，右边是Imagecard。我设计了左边的边框来匹配按钮文本。我删除了这两个图标，但您也可以样式图标。不添加CSS填充，它将图像定位在尴尬的位置。

divi blurb扩展布局

下载文件包括一个压缩的JSON文件。解压缩名为DiviBlurb的扩展布局JSON并将JSON文件导入DiviLibrary。

搜索Divi库中扩展的DiviBlurb显示了三个布局：经典、图像卡和Easebox。这些都是带有预先样式模块的完整页面。其中一些包括一些用于填充的CSS。

这是经典版面的截图。它包括发行者演示页面上的所有模块，并显示模块可以做什么。在本例中，我悬停在右上角的blurb上方。它使用悬停效果将图标背景更改为蓝色，图标更改为白色。

这一个使用了一个很好的悬停效果读更多的按钮。我特别喜欢这些图标的六边形。它在视差背景上显示模块。

这是经典版面的另一部分。顶部的一组模块包括一个视差背景。底部的模块显示了彩色背景的一个很好的例子。

Imagecard布局很有趣。它显示三张卡片之间没有空间。图标重叠图像并显示所有三个布局选项。这张卡片就像一张博客卡。对于文章、页面、服务等的链接，这将非常有效。

Easebox布局包括许多示例。顶部的剪贴画使用图标作为链接，而底部的剪贴画则使用悬停动画来显示“读更多”按钮，并更改背景和文本的颜色。

下面是Easebox布局的另一部分，它也使用悬停动画。鼠标悬停时会显示“读更多”按钮。

扩展的divi blurb

diviblurb扩展与额外的工作一样好。这是Easebox布局。

这个是Imagebox布局。不需要对样式进行任何更改以使其与External一起工作。

终结思想

南开设计网站的divi blurb扩展的工作方式与标准的divi blurb模块非常相似，但是添加了一些新功能，包括图标形状、读取更多的按钮以及一些带有动画的布局。添加的布局提供了一个很好的起点，并向您展示了模块可以做的一些事情。

如果您知道如何使用标准的blurb模块，那么使用这个模块就不会有任何困难。我发现这些设置可以直观地使用，如果您知道CSS，您可以进一步定制元素。如果您想要更多的功能为您的简介，DiviBlurb扩展是值得一看。

我们想听听你的消息。你试过Divi Blurb吗？让我们知道你在评论中是怎么想的。

 


相关推荐
分享： 1 2 3

关键词

手机网站制作手机网站建设企业网站建设做网站价格医疗网站建设营销网站建设网站建设哪家好网站制作方案企业网站制作如何制作网站江门网站优化专业网站建设网站制作公司

热门分享

最新文章

随机推荐

最新案例

寒枫总监

来电咨询

18868949445

微信咨询

寒枫总监
TOP