Divi 插件亮点:内容密集
已发表: 2017-10-08Divi Builder 包含一个博客模块,可根据全宽或网格布局中的类别显示帖子。 您是否曾经想要更多地控制您的博客布局? 您可能对名为 Content Intense 的第三方插件感兴趣。
Content Intense 是 BeSuperfly 的一个插件,它添加了新的布局和样式功能,让您的博客模块焕然一新。 它基于标准博客模块,因此包含所有熟悉的功能。
(该插件可从开发人员的网站获得。)
在这个插件亮点中,我们将看看这些功能,看看它在页面上的外观。 我也会在 Extra 中加载它(当然它也与 Divi 兼容)。
安装 Content Intense

就像任何插件一样上传和激活 Content Intense。 插件激活后,您将在仪表板的“设置”中看到一个名为“内容密集插件激活”的新菜单项。 单击此按钮并输入您的 API 密钥和电子邮件,然后保存更改。
内容密集模块

Divi Builder 中添加了一个名为 Content Intense 的新模块。

“内容”选项卡允许您显示仅帖子、仅页面或页面和帖子、要显示的数量、类别和偏移量。 显示特色图片、元数据(允许您选择分隔符)、摘录、导航和背景。 正如您将看到的,我严重过度简化了设置中的选项数量。

最独特的功能之一是将 WordPress 类别添加到页面中。 如果您选择显示页面,则在您选择其类别时会选择它们。

“设计”选项卡可让您选择 5 种布局之一、启用覆盖、调整标题文本、正文文本和元文本。 还可以调整边框、按钮、间距和动画。

Advanced 包含按钮关系功能,因此您可以指定链接的 rel 属性值。 这对于创建书签、设置指向 nofollow 的链接等非常有用。
内容密集默认设置

默认设置显示特色图像,作者的 Gravatar 与图像底部重叠。 接下来是带有悬停动画的帖子元、标题、一行、帖子摘录和阅读更多按钮。 我在该部分添加了背景以帮助它脱颖而出。

在本例中,我为元分隔符添加了一个星号,将摘录计数从 270 更改为 100,并将阅读更多按钮替换为居中文本。 它不是日期,而是显示帖子发布的时间。 我禁用了评论计数。

这个为文本后面的背景添加了一些颜色。 我还将按钮移到右侧并将摘录设置为 150。

有五种不同的布局。 到目前为止,我们看到的示例都使用了 Atlas – 3 列、垂直布局和头像。 让我们看看每个布局。 我正在使用默认设置。

这是阿尔卑斯山。 这是一个单列的水平交替布局。 文本背景与我在该部分中选择的背景颜色相匹配。 这些是带有按钮悬停效果的平面卡片。

这是喜马拉雅山,一个 3 列的垂直布局,使用帖子的特色图片作为背景。 它还使用按钮动画。 如果不进行调整,则更难看到此文本。 我们稍后会通过叠加来解决这个问题。

这是落基山脉——具有悬停效果的 3 列垂直布局。 它还将特色图像作为背景。 悬停效果显示完整摘录和阅读更多按钮。 我们将进行一些调整以使文本更具可读性。

这是安第斯山脉——一个带有头像的 1 列垂直布局。 它使用特色图像的裁剪版本,并使用小线分隔元数据和较大的线来分隔帖子。


在页面底部,您会看到导航按钮。 您可以禁用它们或添加您自己的文本。 它们采用了其他按钮的样式,因此当您为 read more 按钮设置样式时,您也为这些按钮设置了样式。 您还可以使用文本代替按钮。
示例 – 阿尔卑斯山与阿特拉斯

我使用 2 个 Content Intense 模块创建了这个博客布局。 第一个使用没有导航的 Alps 布局。 第二个模块使用 Atlas。 我已将其偏移量设置为 1,因此它不会显示与第一个模块相同的图像。 我已将字体颜色调整为 Arimo(我的最爱)。 按钮使用渐变。 在悬停时,它们变为纯色并增加字母间距。 导航按钮匹配。
示例 – 阿尔卑斯山

我是交替布局的傻瓜。 我喜欢没有任何改变的阿尔卑斯山的外观,所以我只是做了一些小的调整。 我添加了红色边框、红色覆盖层,并更改了按钮和标题颜色。 我还将字体更改为 Dosis 并使其加粗。 这显示了悬停时的叠加。

我实际上更喜欢它没有边界。 这显示了悬停按钮。
示例 – 安第斯山脉

这个例子使用了 6 个不同的 Content Intense 模块——所有这些模块都使用 Andes,并且每个模块都比前一个模块多偏移 1。 我已经为带有覆盖层的部分添加了背景。 标题字体是 Comfortaa。 最后一个模块使用导航。 我已将按钮更改为文本。

下面来看看普通的单列设计。 我还添加了一个悬停覆盖。 其他一切都是默认的。
示例 – 喜马拉雅山

这个使用喜马拉雅山,在文本后面有一个覆盖层。 我禁用了元数据,将文本更改为浅色,将按钮样式更改为白色并将按钮字体减少到 12 磅。 标题文字是苦涩的。 我包含的唯一动画是按钮悬停。 这将是一个很好的 CTA 或链接到描述您的服务的页面。
示例 – 落基山脉

我喜欢落基山的样子。 它有一个很好的阴影效果,带有悬停动画,可以显示文本和阅读更多按钮。 我可以放置一个文本覆盖,但我不想覆盖图像。 相反,我将文本更改为浅色。 我还更改了元和按钮的颜色,并将分隔符更改为破折号。

当然,叠加确实看起来不错。 我添加了一个黑色覆盖层并更改了不透明度,以便显示出一点点图像。 左上角的日期也使用了叠加层。 我将按钮更改为文本并将其移至右侧。 我喜欢卡片底部的那三个点和线。 这是一个小细节,增添了一丝视觉冲击。
示例 – 额外

Content Intense 与 Extra 配合得很好。 我只需要在使用 Andes 的地方做一些小的调整。 在我的示例中,我为文本区域放置了一个白色背景。 由于我使用了白色文本,我只是将其更改为深色。 上面的例子是落基山脉。 唯一的区别是阅读更多链接的文本颜色。
可下载的样式

动画可以通过 CSS 添加。 开发人员的网站显示了他们创建的几个动画,例如上面那个在悬停时移动文本的动画。 可以在 JSON 文件中从它们下载此样式和其他样式。
许可证和文件
从两个许可证中选择(均不允许转售):
- 标准许可:用于单个网站。 它包括 1 个用于开发项目和 1 个用于实时项目。
- 无限许可:可在无限网站中使用,供个人和客户使用。
更新是自动的。 Content Intense 可从开发人员的网站获得。
文档在开发人员的网站上得到证明。 它会引导您完成调整并在此过程中提供演示。
最后的想法
Content Intense 有一些不错的布局功能,将来会添加更多布局,所以这只是一个开始。 每个布局都可以通过模块的调整来设置样式,甚至可以使用 CSS 进一步自定义。 使用起来很直观。 如果您有兴趣给您的博客一个不同的外观,Content Intense 可能是您正在寻找的插件。
我们希望听到您的意见。 您是否尝试过 Content Intense? 在下面的评论中告诉我们您的体验。
精选图片来自 LanKoga/shutterstock.com
