WordPress divi主题

如何使用 Divi 为您的博客文章模板设计动态作者框

| 5月 7, 2022 | Divi主题使用教程 | 0 条评论

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

在您的博客文章中提及文章作者是必不可少的。 现在,使用 Divi 的主题生成器,您可以将站点范围内的动态作者框添加到您的帖子中。 您还可以使用 Divi 的内置选项设置作者框的样式,这可以带来漂亮的网页设计。 在本教程中,我们将向您展示如何在您的帖子模板中设计一个漂亮的动态作者框。 您还可以免费下载帖子模板 JSON 文件!

google广告开户

让我们开始吧。

预览

在深入学习本教程之前,让我们快速浏览一下不同屏幕尺寸的结果。

桌面

作者框

移动的

作者框

免费下载帖子模板

要使用免费的帖子模板,您首先需要使用下面的按钮下载它。 要访问下载,您需要使用下面的表格订阅我们的 Divi Daily 电子邮件列表。 作为新订阅者,您将在每周一收到更多 Divi 福利和免费的 Divi Layout 包! 如果您已经在列表中,只需在下面输入您的电子邮件地址,然后单击下载。 您不会被“重新订阅”或收到额外的电子邮件。

1. 前往 Divi Theme Builder 并添加新的帖子模板

转到 Divi 主题生成器并添加新模板

首先转到 Divi Theme Builder。 在那里,添加一个新模板。

作者框

在所有帖子上使用模板

在您的所有帖子上使用新模板。

作者框

WordPress divi主题

开始构建模板主体

并开始构建模板主体。

作者框

2.构建博客文章模板正文

部分设置

背景颜色

在模板编辑器中,您会注意到一个部分。 打开部分设置并添加背景颜色。

  • 背景颜色:#270fff

作者框

背景图片

上传您可以在本文开头下载的压缩文件夹中找到的背景图片。

作者框

添加新行

立柱结构

继续使用以下列结构向该部分添加新行:

作者框

浆纱

打开行的设置并更改大小设置中的最大宽度。

作者框

fiverr建站WordPress程序员

将帖子标题模块添加到列

元素

我们在这一行中唯一需要的模块是帖子标题模块。 我们正在元素设置中禁用帖子的特色图片。

作者框

文字设置

转到模块的设计选项卡并更改常规文本设置中的文本颜色。

作者框

标题文本设置

接下来修改标题文本设置。

独立站选品工具
  • 标题字体:Work Sans
  • 标题文字大小:7rem(桌面)、4rem(平板电脑)、2rem(手机)
  • 标题字母间距:-2px

作者框

元文本设置

连同元文本设置。

  • 元字体:Work Sans
  • 元文本大小:1rem

作者框

添加新部分

间距

在模板正文中添加一个新的常规部分,打开部分设置并删除所有默认的顶部填充。

作者框

高质量外链购买

添加新行

立柱结构

继续使用以下列结构向该部分添加新行:

作者框

浆纱

打开行设置并更改大小设置,如下所示:

  • 使用自定义装订线宽度:是
  • 天沟宽度:1
  • 均衡柱高:是
  • 最大宽度:1380px

作者框

间距

删除所有默认的顶部填充。

JasperAI 10000字免费额度试用

作者框

第 1 列设置

间距

然后,打开第 1 列设置并添加一些跨不同屏幕尺寸的自定义填充值。

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

作者框

盒子阴影

也给第一列添加一个盒子阴影。

  • 盒子阴影模糊强度:60px
  • 阴影颜色:rgba(0,0,0,0.09)

作者框

WordPress备份工具updrafplus

将帖子内容模块添加到第 1 列

文字设置

是时候开始添加模块了! 将帖子内容模块放在第 1 列并相应地更改文本设置:

  • 文字字体:Work Sans
  • 文字大小:1rem(桌面),0.9rem(平板电脑和手机)
  • 文字行高:2.3em

作者框

标题文字设置

修改不同的标题文本设置。

  • 标题字体:Work Sans
  • 标题 2 文本大小:1.6rem (H2)、1.5rem (H3)、1.4rem (H4)、1.3rem (H5)、1.2rem (H6)
  • 标题行高度:1.3em

作者框

CSS ID

通过添加 CSS ID 完成模块的设置。

  • CSS ID:博客文章内容

作者框

将代码模块添加到第 1 列

插入标题 CSS 代码

为了在不同的帖子内容元素之间添加一些空间,我们将在第 1 列添加一个代码模块并插入以下 CSS 代码行:

<style>
#blog-post-content h2, h3, h4, h5, h6 {
margin-top: 50px;
margin-bottom: 50px;
}

#blog-post-content p {
margin-top: 20px;
margin-bottom: 20px;
}
</style>

作者框

将人员模块添加到第 2 列

动态内容

在第二列中,我们唯一需要的模块是 Person Module。 我们将选择以下动态内容:

  • 姓名:帖子作者
  • 职位:作者
  • 正文:作者简介

作者框

图片动态内容

将作者的动态头像也添加到模块中。

  • 图片:作者简介图片

作者框

悬停背景颜色

然后,在悬停时添加白色背景颜色。

  • 背景颜色:#ffffff

作者框

标题文本设置

转到模块的设计选项卡并相应地更改 H3 文本设置:

  • 标题标题级别:H3
  • 标题字体:Work Sans
  • 标题文字大小:1.1rem

作者框

正文文本设置

也修改正文设置。

  • 正文字体:Work Sans
  • 正文大小:0.9rem
  • 车身线高:2em

作者框

位置文本设置

然后,更改位置字体文本设置。

  • 位置字体:Work Sans
  • 位置文字大小:0.9rem

作者框

默认尺寸

在尺寸设置中修改高度。

  • 高度:160px(桌面),自动(平板电脑和手机)

作者框

悬停大小

并在悬停时将高度恢复为自动。

作者框

间距

接下来,我们使用自定义填充在模块周围添加一些空间。

  • 上边距:50px
  • 底部填充:50px
  • 左填充:50px
  • 右内边距:50px

作者框

默认边框

我们也将使用边框。

  • 左边框宽度:0px(桌面),4px(平板电脑和手机)
  • 左边框颜色:#270fff

作者框

悬停边框

修改悬停时的边框宽度。

作者框

默认框阴影

然后,添加一个盒子阴影。

  • 盒子阴影模糊强度:60px
  • 阴影颜色:rgba(0,0,0,0)(桌面),rgba(0,0,0,0.11)(平板电脑和手机)

作者框

悬停框阴影

更改悬停时的阴影颜色。

  • 阴影颜色:rgba(0,0,0,0.11)

作者框

默认过滤器

继续,我们将改变不透明度。

  • 不透明度:41%(台式机)、100%(平板电脑和手机)

作者框

悬停过滤器

悬停时将不透明度恢复到 100%。

作者框

主要元素 CSS

为了添加您在这篇文章的预览中注意到的粘性效果,我们将在模块的主要元素中添加几行自定义 CSS。

position: sticky;
position: -webkit-sticky;
top: 50px !important;

作者框

会员图片 CSS

我们通过向模块的成员图像添加一行 CSS 代码来确保作者个人资料图片左对齐。

text-align: left;

作者框

默认可见性

要在桌面上隐藏模块的内容,我们将更改高级选项卡中的溢出。

  • 水平溢出:隐藏
  • 垂直溢出:隐藏

作者框

悬停可见性

我们将通过将溢出更改为可见来使内容出现在悬停上。

  • 水平溢出:可见
  • 垂直溢出:可见

作者框

添加新部分

在您的设计中添加另一个部分。

作者框

添加新行

立柱结构

继续使用以下列结构向该部分添加新行:

作者框

浆纱

打开行设置并相应地更改大小设置:

  • 使用自定义装订线宽度:是
  • 天沟宽度:1
  • 均衡柱高:是
  • 最大宽度:1380px

作者框

将评论模块添加到列

字段设置

我们在这一行中唯一需要的模块是评论模块。 更改字段设置如下:

  • 字段背景颜色:#ffffff
  • 字段顶部填充:20px
  • 字段底部填充:20px
  • 字段字体:Work Sans
  • 字段文本大小:1rem

作者框

评论计数文本设置

修改评论计数文本设置。

  • 评论计数标题级别:H2
  • 评论数字体:Work Sans
  • 评论数文字大小:1.5rem

作者框

表单标题文本设置

然后,更改表单标题文本设置。

  • 表格标题标题级别:H3
  • 表格标题字体:Work Sans
  • 表格标题文字大小:1.2rem

作者框

元文本设置

修改元文本设置。

  • 元字体:Work Sans
  • 元文本大小:1rem

作者框

评论文字设置

我们也在更改评论文本设置。

  • 评论字体:Work Sans
  • 评论文字大小:1rem
  • 评论行高度:2.3em

作者框

按钮设置

通过设置按钮的样式来完成模块的设置。

  • 为按钮使用自定义样式:是
  • 按钮文字大小:1rem
  • 按钮文字颜色:#ffffff
  • 按钮背景颜色:#270fff
  • 按钮边框宽度:0px
  • 按钮边框半径:0px

作者框

作者框

3.保存主题生成器更改并查看结果

完成模板后,请确保保存所有更改,退出主题生成器并查看帖子的结果!

作者框

作者框

预览

现在我们已经完成了所有步骤,让我们最终看看不同屏幕尺寸的结果。

桌面

作者框

移动的

作者框

最后的想法

在这篇文章中,我们向您展示了如何使用 Divi 的内置选项、动态功能和主题生成器设计一个漂亮的动态作者框。 结合这三件事,现在比以往任何时候都更容易自定义您的博客帖子模板并以创造性的方式归功于帖子作者。 您还可以免费下载 JSON 文件! 如果您有任何问题或建议,请随时在下面的评论部分发表评论。

如果您渴望了解有关 Divi 的更多信息并获得更多 Divi 免费赠品,请确保订阅我们的电子邮件通讯和 YouTube 频道,这样您将永远是第一批了解并从这些免费内容中受益的人之一。

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