Divi 插件亮点 – Divi 博客附加功能

已发表: 2017-07-02

在 Divi 市场中找到它

Divi 博客附加功能可在 Divi 市场中获得! 这意味着它已通过我们的审查,并被发现符合我们的质量标准。 您可以在市场上访问 Divi Extended 以查看他们所有可用的产品。 从 Divi 市场购买的产品具有无限的网站使用和 30 天退款保证(就像 Divi 一样)。

在 Divi 市场购买

Divi 包含一个博客模块,以全宽或网格布局显示您的帖子。 这是一个很好的模块,可以完成工作。 如果您想要不同的布局和功能怎么办? 这可以通过 CSS 来完成,但名为 Divi Blog Extras 的第三方插件使任务变得更加容易。

Divi Blog Extras 是 Divi Extended 的第三方插件,它向 Divi Builder 添加了一个新模块,其中包含一些新功能来显示您的博客文章。 它包括六种不同的布局设计,并添加了带有加载更多按钮的 AJAX 加载功能。 滚动时加载帖子,加载速度很快。 您可以更改阅读更多和加载更多按钮的文本。

在这个插件亮点中,我们将看看 Divi Blog Extras 并了解可以使用这个插件做什么。 这些示例的图片来自 Unsplash.com。

Divi Blog Extras 安装和设置

正常上传和激活。 然后,Divi Builder 中将提供一个名为 Divi Blog Extras 的新模块。 要使用它,只需像任何模块一样将其放入一行即可。 由于选项与标准 Divi Builder 模块相同,因此使用此模块很直观。

内容设置包括熟悉的选项,并有六个布局选择、摘录长度、类别颜色、加载更多按钮文本、特色图像叠加、阅读更多按钮文本和文本颜色选项。 设计设置包括标题、元和正文以及边框样式。 Block Extended 布局添加了图像位置,Classic 添加了社交图标。 让我们仔细看看每个布局。

网格扩展

默认布局 Grid Extended 显示图像和文本交替的博客文章。 悬停时图像变亮。 类别名称放在一个框中。 在响应模式下,图像放置在顶部。

在此示例中,我添加了悬停覆盖、悬停图标、更改了阅读更多文本、将摘录限制为 100 个字符,并更改了类别文本和背景颜色。 当您将鼠标悬停在帖子的任何部分时,会显示悬停动画。

盒子扩展

Box Extended 将摘录放在与图像重叠的框中,并移除类别名称周围的框。 作者的图像被添加到元部分。 图片和文字交替出现。 这是更优雅的博客布局之一。

在此示例中,我更改了类别字体和背景颜色,将摘录长度限制为 150 个字符并将字体更改为蓝色,并更改了阅读更多按钮文本。 默认悬停使图像变亮,如上图所示。

全屏宽度

全宽将图像放在左侧,将摘录放在右侧,在最左侧添加样式日期。 每个帖子由一行分隔。 类别名称放置在元数据中。

此示例禁用日期和元信息。 文本使用自定义颜色。 我改变了阅读更多并加载更多按钮文本。 摘录限制为 200 个字符。

所有的布局都是响应式的。 下面是 Full Width 的响应式外观。 这在 2 列行中并排显示了两个模块。

块扩展

Block Extended 是一个博客网格,它在卡片底部的图像和元数据上添加类别名称。 当您将鼠标悬停在卡片的任何部分时,图像会缩放。 我喜欢这种类型的微交互,因为它显示卡片是可点击的。

Block Extended 具有三个用于显示图像的选项。 本示例将特色图像置于背景中,文本置于叠加层中。

此示例在前两个选项之间交替背景图像。

全宽背景

全宽背景以全宽显示图像的裁剪版本,并将带有元数据的摘录放置在图像的叠加层中。 摘录位置交替出现。 Meta 与摘录之间用一行分隔。

此示例在图像上使用深色叠加层来显示摘录的叠加层在悬停时不使用相同的叠加层。 在这个例子中,该部分的背景是红色的。 注意红色在悬停时显示出来。 我还添加了自己的阅读更多按钮文本和 2 像素边框。

经典的

经典布局显示带有全尺寸图像和图像下方全宽摘录的博客文章。 类别和日期位于标题上方。 标题包括一个短行分隔符,使其与图像分开。 摘录下方是作者姓名和评论数,以横杠分隔。 更细更宽的线分隔符将柱子彼此分开。

此布局具有显示社交图标的选项。 单击“加载更多”(或我标记为“查看更多文章”)会显示下一组帖子,这等于我选择显示的帖子数量。 在这个例子中,我展示了两个帖子。 加载更多加载接下来的 2 个帖子。

使用 Divi Blog Extras 创建独特的布局

多个模块可以一起使用来创建杂志布局。 这个简单的布局包括四个显示网格扩展布局的模块。 每个模块显示不同的类别。 中间的两个分别显示两个帖子。

这为各个部分创建了具有不同类别的杂志布局。 此示例显示了扩展网格如何响应。

这是相同的 Divi Builder 布局,但使用全宽背景。 在响应模式下,覆盖层几乎完全覆盖了图像。

此示例对顶部模块使用 Classic 布局,对接下来的两个模块使用 Grid Extended。 每个模块显示不同的类别,并具有自己的类别文本样式。 顶部模块不显示摘录。

这创造了一个有趣的杂志布局。 我还将行设置为显示全宽。 您可以混合和匹配布局以获得独特的设计。 我为每个模块创建了具有不同类别的布局。 在未来的更新中,该模块将具有偏移功能,因此您可以在同一类别中使用多个模块。

执照

单个站点是 15 美元。 扩展许可证是 30 美元,可以在无限站点上为您和您的客户使用。 它包括终身更新。

此插件不适用于 Extra。

  • 您可以在 Divi Extended 的网站上购买此插件。

最后的想法

Divi Blog Extras 添加了一些不错的样式和设计功能,让您的博客模块变得更加有趣。 它还增加了设置类别背景和文本样式的能力。 它使用 AJAX 进行加载并包含一个新的加载按钮。 您甚至可以将自己的文本添加到加载更多并阅读更多按钮。 这些设计中的每一个都非常适合为您的博客提供标准博客的独特外观。 如果您想要一个超越标准 Divi Builder 博客模块的博客设计,Divi Blog Extras 可能是您正在寻找的模块。

我们希望听到您的意见。 您是否尝试过 Divi Blog Extras? 在下面的评论中让我们知道您的体验。

精选图片来自 pulsar011/shutterstock.com