WordPress divi主题

如何使用 Divi 创建漂亮且引人入胜的动态博客帖子英雄版块

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

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

每次发布新的更新时,您的设计可能性都会增加。 例如,结合动态内容和悬停选项可以带来惊人的结果。 为了证明这一点,我们将向您展示如何仅使用 Divi 的内置选项创建 3 个令人惊叹的动态博客文章英雄部分。 我们将逐步指导您完成每个示例,这些示例也会激发您创建自己的变体。

google广告开户

让我们开始吧!

预览

在深入学习本教程之前,让我们看一下我们将创建的所有三个示例的最终结果。

示例 #1

博客文章英雄部分

示例 #2

博客文章英雄部分

示例#3

博客文章英雄部分

添加新博客文章

帖子详情

首先,首先创建一个新的博客文章。 添加标题、选择的类别和特色图片。 完成后,启用 Divi Builder。

博客文章英雄部分

分页设置

在切换到 Visual Builder 之前,更改新博客文章右上角的 Divi 页面设置。

WordPress divi主题
  • 页面布局:全角
  • 帖子标题:隐藏

博客文章英雄部分

切换到 Visual Builder

是时候切换到 Visual Builder 开始创建不同的示例了!

博客文章英雄部分

创建模块

添加新部分 + 一列行

在我们分别深入研究每个示例之前,我们将从创建包含动态内容的文本模块开始。 在所有三个示例中,我们将使用这些预制模块来完成设计。 添加新部分后,使用以下列结构向其中添加新行:

博客文章英雄部分

帖子标题文本模块

选择帖子标题动态内容

我们需要的第一个动态模块将包含帖子标题。 添加一个新的文本模块并在动态内容列表中选择帖子标题。

博客文章英雄部分

文字设置

然后,转到文本设置并进行一些更改。

  • 文字字体:Lato
  • 文字字体粗细:粗体
  • 文字颜色:#000000
  • 文字大小:58px(桌面)、45px(平板电脑)、35px(手机)
  • 文本行高:1em
  • 文本方向:中心

博客文章英雄部分

间距

也更改间距值。

fiverr建站WordPress程序员
  • 下边距:50px
  • 上边距:10px
  • 底部填充:10px

博客文章英雄部分

发布日期文本模块

选择发布日期动态内容

我们需要的第二个模块是一个包含发布日期的文本模块。 继续添加一个并在动态内容列表中选择发布日期。

博客文章英雄部分

博客文章英雄部分

文字设置

接下来更改此模块的文本设置。

独立站选品工具
  • 文字字体粗细:轻
  • 文字颜色:#000000
  • 文字大小:30px(桌面)、20px(平板电脑)、16px(手机)
  • 文字字母间距:14px
  • 文本方向:中心

博客文章英雄部分

间距

也添加一些底部边距。

博客文章英雄部分

帖子类别文本模块

选择类别动态内容

我们将添加的最后一个模块是一个包含帖子类别动态内容的文本模块。

博客文章英雄部分

高质量外链购买

文字设置

转到文本设置并更改文本方向。

博客文章英雄部分

链接文本设置

然后,对链接文本设置进行一些修改。

  • 链接字体粗细:超粗体
  • 链接字体样式:大写
  • 链接文本颜色:#000000
  • 链接文字大小:15px
  • 链接字母间距:5px

博客文章英雄部分

间距

接下来添加底部填充。

JasperAI 10000字免费额度试用

博客文章英雄部分

边界

并以微妙的底部边框结束。

  • 底部边框宽度:1px
  • 底部边框颜色:#000000

博客文章英雄部分

创建示例 #1

添加新部分

间距

让我们开始创建第一个示例! 在您创建的上一个部分的正下方,继续添加一个新部分。 打开其设置并删除所有默认的自定义填充。

  • 顶部填充:0px
  • 底部填充:0px

博客文章英雄部分

WordPress备份工具updrafplus

添加新行

立柱结构

继续添加具有以下列结构的新行:

博客文章英雄部分

浆纱

打开这一行的尺寸设置并改变周围的东西。

  • 使这一行全宽:是
  • 使用自定义装订线宽度:是
  • 天沟宽度:1
  • 均衡柱高:是

博客文章英雄部分

间距

接下来添加一些自定义间距值。

  • 顶部填充:0px
  • 底部填充:0px
  • 第 2 列顶部填充:130 像素
  • 第 2 列底部填充:130 像素
  • 第 2 列左填充:50 像素
  • 第 2 列右填充:50 像素

博客文章英雄部分

将图像模块添加到第 1 列

选择特色图片动态内容

继续将图像模块添加到第一列。 无需上传图片,而是将模块链接到动态特色图片。

博客文章英雄部分

边框默认

我们还在悬停时添加了右边框。 为此,首先选择以下默认边框宽度:

博客文章英雄部分

边框悬停

并在悬停时添加以下设置:

  • 右边框宽度:24px
  • 右边框颜色:#FFFFFF

博客文章英雄部分

盒子阴影默认

盒子阴影也是如此,应用以下默认盒子阴影设置:

  • 盒子阴影垂直位置:0px
  • 盒子阴影模糊强度:0px
  • 盒子阴影传播强度:80px
  • 阴影颜色:rgba(255,255,255,0)

博客文章英雄部分

盒子阴影悬停

并在悬停时改变周围的东西:

  • 盒子阴影水平位置:600px
  • 盒子阴影垂直位置:0px
  • 盒子阴影模糊强度:0px
  • 盒子阴影传播强度:80px
  • 阴影颜色:#E4BAC7

博客文章英雄部分

过渡

要创建平滑过渡,请在高级选项卡中更改过渡持续时间。

  • 转换持续时间:1200ms

博客文章英雄部分

将动态模块放在第 2 列

要完成这个示例,唯一要做的就是将我们在本教程第一部分中创建的模块放在第二列中。

博客文章英雄部分

创建示例 #2

添加新部分

顶部分隔线默认

进入下一个! 添加具有以下顶部分隔符的新部分:

  • 分隔线样式:在列表中查找
  • 分隔线颜色:#FFFFFF
  • 分隔高度:50px
  • 分隔线排列:在章节内容之上

博客文章英雄部分

顶部分隔线悬停

更改悬停时的分隔高度。

博客文章英雄部分

间距

接下来删除该部分的所有自定义填充。 这将允许行和部分在接下来的步骤之一中发生冲突。

  • 顶部填充:0px
  • 底部填充:0px

博客文章英雄部分

过渡

要创建平滑的分隔线过渡,请在高级选项卡中更改过渡持续时间。

  • 转换持续时间:500ms

博客文章英雄部分

添加新行

立柱结构

现在,继续使用以下列结构向您的部分添加一行:

博客文章英雄部分

背景颜色默认

为其添加以下背景颜色:

  • 背景颜色:#FFFFFF

博客文章英雄部分

背景颜色悬停

更改悬停时的背景颜色。

  • 背景颜色:rgba(255,255,255,0.56)

博客文章英雄部分

特色图片动态背景图片

将特色图片也上传为动态行背景图片。 完成后,更改背景图像混合。

  • 背景图像混合:屏幕

博客文章英雄部分

浆纱

通过更改大小设置,允许行占据屏幕的整个宽度。

  • 使这一行全宽:是
  • 使用自定义装订线宽度:是
  • 天沟宽度:1

博客文章英雄部分

间距

并添加一些自定义填充间距值。

  • 上边距:200px
  • 底部填充:200px
  • 左填充:100 像素(桌面)、50 像素(平板电脑)、20 像素(手机)
  • 右内边距:100 像素(桌面)、50 像素(平板电脑)、20 像素(手机)

博客文章英雄部分

过渡

最后但同样重要的是,通过更改过渡持续时间来创建平滑过渡。

  • 过渡时间:700ms

博客文章英雄部分

将动态模块放在列中

您现在可以将所有动态模块放在行的列中,第二个示例就完成了!

博客文章英雄部分

创建示例 #3

添加新部分

特色图片动态背景图片

到最后一个例子! 添加一个新部分并选择特色图像作为部分背景图像。

博客文章英雄部分

间距默认值

然后,删除该部分的所有默认自定义填充。

  • 顶部填充:0px
  • 底部填充:0px

博客文章英雄部分

间距悬停

在悬停时添加一些自定义边距以创建缩小效果。

  • 左填充:150 像素(桌面)、50 像素(平板电脑)、30 像素(手机)
  • 右内边距:150 像素(桌面)、50 像素(平板电脑)、30 像素(手机)

博客文章英雄部分

过渡

同时更改过渡持续时间。

  • 转换持续时间:500ms

博客文章英雄部分

添加新行

立柱结构

修改完部分设置后,继续添加具有以下列结构的新行:

博客文章英雄部分

背景颜色默认

添加以下背景颜色:

  • 背景颜色:#ffffff

博客文章英雄部分

背景颜色悬停

更改悬停时的背景颜色。

  • 背景颜色:rgba(255,255,255,0.46)

博客文章英雄部分

渐变背景

也添加一个径向渐变背景。

  • 颜色1:rgba(41,196,169,0)
  • 颜色2:#ffffff
  • 渐变类型:径向
  • 起始位置:29%
  • 结束位置:29%

博客文章英雄部分

浆纱

接下来更改行的大小设置。

  • 使这一行全宽:是
  • 使用自定义装订线宽度:是
  • 天沟宽度:1

博客文章英雄部分

间距

并添加一些自定义填充值。

  • 上边距:200px
  • 底部填充:200px
  • 左填充:100 像素(桌面)、50 像素(平板电脑)、20 像素(手机)
  • 右内边距:100 像素(桌面)、50 像素(平板电脑)、20 像素(手机)

博客文章英雄部分

过渡

最后但同样重要的是,更改过渡持续时间以实现平稳过渡。

  • 转换持续时间:500ms

博客文章英雄部分

将动态模块放在列中

继续并将所有预制模块放在行的列中。

博客文章英雄部分

更改所有模块的文本方向

关于这些模块,您唯一需要更改的是文本方向,您就完成了!

博客文章英雄部分

预览

现在我们已经完成了所有步骤,让我们最后看看我们创建的所有三个示例。

示例 #1

博客文章英雄部分

示例 #2

博客文章英雄部分

示例#3

博客文章英雄部分

最后的想法

在这篇文章中,我们向您展示了如何将动态内容与 Divi 的悬停选项相结合,以创建令人惊叹的博客文章英雄部分。 不可否认,这些示例将激发您创建自己的变体并个性化您发布的博客文章。 如果您有任何问题或建议,请务必在下面的评论部分发表评论!

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