WordPress divi主题

5 种创意 Divi Blurb 模块设计

by | May 18, 2022 | Divi主题使用教程 | 0 comments

5分钟生成10篇英文软文article forge软件试用

在这篇文章中,我们将探讨 Divi 最受欢迎的功能之一,Blurb 模块。 虽然看起来很简单,但它具有许多可定制的功能,可以使您的网站元素栩栩如生。 一般来说,Blurb 模块用于服务、福利、联系信息等,但使用 Divi,可能性是无限的。

google广告开户

让我们玩得开心!

抢先看

这是我将在本教程中创建的 5 种简介模块样式的预览。

5 种创意 Divi Blurb 模块设计

订阅我们的 Youtube 频道

WordPress divi主题

入门

首先,您需要创建一个新页面。 从您的 WordPress 仪表板中,导航到页面 > 添加新的。 然后给你的页面一个标题并部署可视化构建器。 选择“从头开始构建”选项。 一旦视觉构建器加载到页面上,您就可以开始设计了。

本教程旨在使您可以轻松地单独创建每个模糊样式设计,因此请随意跳到您想要构建的设计的帖子。 换句话说,您不必从第一个开始。

1. 带有功能列表的弹出式模糊

在第一个示例中,我们将通过在行外扩展简介以创建弹出效果来获得一些乐趣。 然后我们可以使用每个旁边的相邻列添加一些带有左对齐图标的简介作为特色列表项。

首先,创建一个具有四列结构的新部分和一行。

然后继续更新行设置,如下所示:

背景颜色:#2e3858
使这一行全宽:是
使用自定义装订线宽度:是
天沟宽度:1
均衡柱高:是
自定义边距:5vw 顶部,5vw 底部
自定义填充:0px 顶部,0px 底部

保存设置。

然后在第一列中,添加您的第一个简介模块。

fiverr建站WordPress程序员

取出内容框中的最后一句以缩短文本量。 然后选择使用图标而不是图像并选择图标(任何人都会这样做)。

然后更新以下内容:

背景颜色:#df4570
图标颜色:#ffffff
文本方向:中心
标题字体:Encode Sans Semi Condensed
标题字体样式:TT
标题字母间距:2px
自定义边距(桌面):-5vw 顶部,-5vw 底部
自定义边距(平板电脑):0px 顶部,0px 底部
自定义填充:5vw 顶部,5vw 底部,3vw 左侧,3vw 右侧
盒子阴影:见截图
盒子阴影模糊强度:80px

独立站选品工具

使用右键单击菜单选项或 cmd+c 和 cmd+v 快捷键,复制您刚刚创建的模块并将其粘贴到第 3 列。然后使用另一种明亮(但免费)的背景颜色更新新的模糊模块设置:

背景颜色:#24c4a3

现在是时候添加与我们刚刚创建的弹出式简介相邻的列表项简介了。

为此,在第 2 列中添加一个新的简介。然后取出内容框中的模拟文本,以便只保留标题文本。 然后像以前一样添加一个图标来替换您的图像。 然后更新设计设置如下:

高质量外链购买

图标颜色:#df4570
图像/图标位置:左
标题字体:Encode Sans Semi Condensed
自定义填充:20px 顶部,20px 底部,3vw 左,3vw 右

将简介复制两次,以便在列中获得三个总列表简介。 然后使用 Divi 的多选功能选择所有三个简介,然后将它们复制并粘贴到第 4 列。

您还可以使用多选来选择第 4 列中的所有三个简介,并批量编辑元素设置以将所有三个的图标颜色更改为 #24c4a3。

就是这样! 创建弹出式宣传语是一种有趣的方式,可以让您的宣传语脱颖而出,并且在旁边放置相邻的列表宣传语可以为您提供一些额外的选择,以进行更具创意的设计。

JasperAI 10000字免费额度试用

这是最终结果。

2. 带有自定义背景图像的宣传片。

WordPress备份工具updrafplus

这种宣传风格非常适合展示免费书籍等内容和促销优惠。 基本思想是将简介内容放置在模块的左侧,以便为自定义背景图像腾出空间。 让我们开始吧。

首先添加一个具有两列行结构的常规部分。 在左栏中添加一个新的简介模块。

更新 Title 文本并取出 mock 内容的最后一句以减少文本量。 然后用书籍图片(或产品图片)更新您的图片。 一本书或其他东西的图​​标也可以。

我正在使用 Travel Blog Layout Pack 中的图像资源,因此请随时通过抓取这些图像来开始设计。

提示:您还可以将模块链接 URL 添加到此模块,以使整个模块可点击,因为它可以用作促销。

接下来,为模块添加背景图像。 确保背景图像是像标题一样的图像,图像的焦点在右侧,这样您就可以将内容添加到图像的左侧,而背景会分散文本的注意力。

然后添加背景渐变作为位于内容后面并覆盖背景图像的部分叠加层,以使文本更具可读性。 要添加背景渐变更新以下内容:

背景渐变左颜色:rgba(255,255,255,0.8)
背景渐变右颜色:rgba(255,255,255,0)
渐变方向:90度
起始位置:40%
结束位置:70%
在背景图像上方放置渐变:是

然后更新以下内容:

图像框阴影:见截图
标题字体:Noto Serif
标题文字大小:26px
正文字体:Noto Sans
正文大小:16px
图片宽度:150px
内容宽度(桌面):60%
内容宽度:(智能手机):80%
自定义填充:2vw 底部,2vw 左侧,2vw 右侧

这里的关键设计技术是为图像和内容提供自定义宽度,以便稍后可以将内容定位到左侧。

现在我们需要在简介顶部添加一个盒子阴影,以创建书籍图像在模块上方延伸的印象,以获得良好的重叠效果。 为此,请更新以下内容:

盒子阴影:见截图
盒子阴影水平位置:0px
盒子阴影垂直位置:50px
阴影颜色:#ffffff

最后一步涉及将简介内容与模块左侧对齐所需的一小段自定义 CSS。 为此,请转到高级选项卡并在 Blurb Content 输入框下添加以下自定义 CSS:

margin-left: 0;

现在看看结果!

提示: 不要忘记可用的悬停选项。 尝试在悬停时为书本图像添加边框,让事情变得生动起来!

3. 使用背景渐变的圆形模糊样式

这种简单的简介样式使用背景渐变作为简介内容的圆形背景。 这是使用自定义 CSS 将整个简介模块变成圆形的有趣替代方案。

首先添加一个具有三列行结构的新常规部分。

然后在左列添加一个简介模块。

然后取出内容的最后一句话,减少文字量。 对于这个设计来说,保持文本量有点小很重要,因为你会将它安装在一个圆圈内。

然后添加背景渐变以创建圆形背景,如下所示:

背景渐变左颜色:#fa7f28
背景渐变右颜色:rgba(255,255,255,0)
渐变类型:径向
起始位置:60%
结束位置:0%
在背景图像上方放置渐变:是

然后更新其余的设计设置,如下所示:

文本方向:中心
标题字体:Oswald
标题字体样式:TT
标题字母间距:1px
正文字体:机器人
正文字体粗细:Light
正文大小:16px
宽度(平板电脑):80%
模块对齐:中心
自定义填充(桌面):顶部 20%、底部 25%、左侧 20%、右侧 20%
自定义填充(智能手机):顶部 20%、底部 25%、左侧 10%、右侧 10%

这里的关键是正确调整自定义填充,以便背景圆圈与中心的内容对齐。 您可能需要根据您拥有的内容量调整这些设置。

现在您可以将模块复制并粘贴到其余列中。

然后更新行设置,使其具有 80% 的自定义宽度和 1 的装订线宽度。

要完成设计,您可以将背景图像和渐变添加到您的部分,如下所示:

添加背景图片
背景渐变左颜色:rgba(2,0,76,0.51)
背景渐变右颜色:rgba(2,0,76,0.84)
在背景图像上方放置渐变:是

就是这样! 看看最终的设计!

对于额外的空间,您始终可以将简介图标的大小减小到 50 像素,以防止圆圈在较小的浏览器宽度上发生碰撞。 进行调整时,不要忘记利用 Divi 的多选功能一次对所有模块进行批量编辑。

奖金提示: 使用自定义 CSS 使整个 Blurb 模块成为一个圆圈

如果您希望将整个模块变成一个圆圈(而不是使用背景渐变),请将渐变替换为常规背景颜色,并在 Blurb 模块设置的高级选项卡下添加此自定义 CSS:

在主元素框中:

height: 300px;
width: 300px;
border-radius: 100%;
border: 5px solid #ffffff;
padding: 5% !important;
display: flex;

在“模糊内容”框中:

margin: auto;

此自定义 CSS 覆盖了简介模块设置中的填充设置,因此如果您想重新控制这些设置,您可能需要删除该代码段。 此外,这个 css 使用 flex 将简介内容在圆圈内居中。 这将派上用场。

如果应用于所有三个模块,它将看起来像这样。

4.带边框和框阴影的框架模糊

我最喜欢的 Divi 设计功能之一是盒子阴影。 在我们之前创建重叠效果的宣传宣传设计中,我们已经对盒子阴影进行了创造性的使用。 但是您也可以使用盒子阴影作为一种创造性的方式来使用破碎的网格设计来构建您的内容。 在此设计中,我将向您展示如何以独特的方式组合边框和框阴影。

首先,添加一个具有三列行结构的新常规部分。 然后将简介模块添加到第一列。

将图像添加到简介中。 然后通过如下更新设计设置为模糊图像提供边框和框阴影:

图片顶部边框宽度:8px
图片顶部边框颜色:#2f3854
图片左边框宽度:8px
图片左边框颜色:#2f3854

图像框阴影:见截图
盒子阴影水平位置:-20px
盒子阴影垂直位置:-30px
阴影颜色:#f89da9

然后更新 Title 和 Body 的字体和间距,如下所示:

标题字体:Yeseva One
正文字体:蒙特塞拉特
自定义边距:50px 底部
自定义填充:2vw 底部

最后,给你的简介模块一个自定义边框和盒子阴影来平衡框架设计,如下所示:

右边框宽度:15px
右边框颜色:#2f3854
底部边框宽度:15px
底部边框颜色:#2f3854

图像框阴影:见截图
盒子阴影水平位置:20px
盒子阴影垂直位置:35px
阴影颜色:#dddddd

现在复制并粘贴第 2 列和第 3 列中的模块并更新简介图像以完成设计。

这是最终结果。

5. 将 Blurbs 样式化为曲线列表

下一个设计是使用简介创建列表的有趣方式。 使用一些自定义边距,您可以弯曲您的简介列表项以环绕页面上的元素。 在此示例中,我将弯曲列表以环绕大宣传图标的右侧。 你可以得到一点创意

首先,添加一个具有两列行结构的新常规部分。

在添加任何简介模块之前,请通过如下更新行设置来为您的行提供自定义宽度和装订线宽度:

自定义宽度:700px
天沟宽度:2

现在让我们通过在左栏中添加简介模块来创建大的简介图标。 然后取出标题文字和内容。 然后选择灯泡图标。 现在只有图标应该可见。 接下来,更新图标的颜色和大小,如下所示:

图标颜色:#96a6bd
图标字体大小(桌面):400px
图标字体大小(智能手机):200px

在右栏中,添加一个新的简介模块。 这将是构成我们列表的五个总摘要中的第一个。 然后打开模块设置,取出内容,只留下标题文字。 然后选择简介的右箭头图标。

接下来更新设计设置,如下所示:

背景颜色:#bb7860
图标颜色:#ffffff
图像/图标位置:左
使用图标字体大小:是
图标字体大小:30px
标题字体:Raleway
标题文字颜色:#ffffff
标题文字大小:20px
标题行高:1.5em
自定义边距:底部 5%
自定义填充:顶部 3%,左侧 10%,右侧 2%

将模块复制四次,直到在右栏中总共堆叠五个简介。

然后给第二个简介…

5分钟生成10篇英文软文article forge软件试用
tiktok
WordPress divi主题