几乎每一个WordPress外贸营销型网站都会使用到blog博客列表模块,

因为通过撰写优质产品博客软文,

能够帮助提升WordPress网站的谷歌SEO排名

我们WP花园在帮助外贸企业客户开发WordPress营销型网站的时候,

往往都会在首页的底部加上一个博客列表模块。

通过定期更新图文并茂的博客内容,

最新的文章将会展示在网站首页,

让网站访客每次登陆网站的时候,

都能看到新的内容。

WP花园一直使用WordPress中著名的divi正版主题为客户提供优质的外贸网站建站服务,所以在这篇教程中,我们将会教大家如何在网站的首页或者其他页面添加divi博客列表模块。

这个是非常重要的一个divi模块,

赶紧做好笔记,

开始上课!

在使用Divi主题模块之前,你需要购买正版的Divi主题,这里是我们WP花园的Divi主题70%折扣购买通道。

什么是blog博客列表模块

每一个公司网站都会有一个版块叫做‘公司新闻’或者‘新闻博客’,

这个版块对应的是WordPress后台中posts 文章中的内容,

在文章栏目中发布的所有文章,

都会以列表的形式展现在‘公司新闻’页面中。

什么是blog博客列表模块

有些时候,

我们想要在首页的某个部分展示6篇最新的博客文章,

让网站访客流量。

如果使用divi主题的blog模块,

能够非常轻松实现这个需求:

什么是blog博客列表模块

你可以设置博客展示的数量(3篇或者6篇),

展示样式,

展示的字段(作者、日期、摘要)等等内容,

非常灵活。

如何在divi中添加博客模块

在使用blog博客模块之前,

首先确保你的 WordPress网站中已经发布了至少6篇带有封面图的博客文章,

如果不懂如何在WordPress中发布文章posts,

WP花园上有一篇教程详细介绍了在WordPress中发布文章的方式。

当你已经发布了6篇以上的文章之后,

打开任何一个页面page编辑界面,

激活divi可视化编辑机制:

如何在divi中添加博客模块

在你创建好section版块和row行之后,

你在添加模块的界面里,

就能看到一个叫做blog博客的模块了,

将它加入到你的页面中:

如何在divi中添加博客模块

刚添加完博客模块后,

你会发现这个博客列表页居然是以全宽的样式展示,

有点太呆了,

不是我们想要的。

如何在divi中添加博客模块

我们希望用3列的形式展示这些博客文章,

所以点击design设计里面的layout布局,

从fullwidth全宽改成grid格子样式:

如何在divi中添加博客模块

这样就是我们想要的样子了!

divi博客模块一共有3个栏目:

  • Content 内容
  • Design 设计
  • Advanced 高级

divi博客模块一共有3个栏目

其中content内容和design设计比较常用,我们重点介绍这两个板块的设置。

Divi博客模块content内容栏目

如果你选中content 内容板块,你会看到他有5个子版块

  • Content 内容(和版块名字一样,纠结)
  • Elements 元素
  • Link 链接
  • Background 背景设置
  • Admin label 管理员标签

Divi博客模块content内容栏目

我们看一下,每一个子板块中有什么具体的内容~

Content内容版块

这个子版块是你刚打开blog博客模块中默认看到的版块界面。

Divi博客模块content内容栏目

  • Post type 展示类型:可以选择展示博客、页面、项目、产品等等内容,默认选择博客
  • Post count 展示数目:这个最常用到,一般是3个或者6个
  • Included categories 包含分类:可限制只展示某些特定分类下的文章,不勾选的话默认展示所有分类的文章
  • Data format 日期类型,默认不修改
  • Content length 文章长度:选择show excerpt 显示摘要就好
  • Use Post Excerpts 使用自定义摘要:选择YES激活开启
  • Excerpt Length 摘要长度:使用默认值 270
  • Post Offset Number 文章偏移量:使用默认值0

在这个版块中,

基本上只用改一下文章展示数量就好了,

其余的属性设置,

自己可以尝试修改一下。

我们来看看elements元素版块有什么内容~

Element元素版块

这个版块就比较有意思,它允许你设置展示博客的那些字段元素。

Divi博客模块content内容栏目

通过上面的图片,我们可以看到,

可以选择编辑的WordPress博客字段有:

  • Show featured image 显示封面图特色图片
  • Show read more button 显示阅读更多按钮
  • Show author 显示作者
  • Show Date 显示日期
  • Show categories 显示目录
  • Show comment count 显示评论数目
  • Show Excerpt 显示摘要 (如果这里不激活,在上面的内容content选择显示摘要也不会显示摘要的,这一点要注意一下)
  • Show Pagination 显示分页

我们选择显示封面图、更多按钮和摘要,

其中对应的关系如下:

Divi博客模块content内容栏目

Link链接模块

这个链接模块比较少用,建议不要修改:

background背景设置模块

和divi其他模块一样,博客模块也允许你设置‘整个模块’的背景色,

这里非常简单,自己操作一下就好:

Admin label管理员标签

就是单纯给这个模块起个名字,方便在框架视图中查看:

从这里进入框架视图:

WordPress的Divi主题博客Blog列表模块配置使用教程(超级详细)

给模块命名是个好习惯:

WordPress的Divi主题博客Blog列表模块配置使用教程(超级详细)

Design 设计版块

这个版块是设计师们最常用到的版块,其中layout布局在上面的文章中已经提到了怎么修改。

WordPress的Divi主题博客Blog列表模块配置使用教程(超级详细)

其他版块设置起来也非常简单,涉及到很多细节,

我们在这篇文章中就不一一展开讨论,

这里简单罗列出能够让网页设计师编辑的版块。

  • Layout 布局设置:可以设置博客列表模块为全宽fullwidth或者栅格模式
  • Overlay 图片蒙版:可以选择开启图片在鼠标悬浮的时候,启动一个蒙版,默认关闭
  • Image 图片设置:可以设置图片的内边距、外边距和线框阴影等等属性
  • Text 文本设置:设置文本的对其模式、添加阴影特效
  • Title text 标题文本设置:设置博客标题的字体大小、粗细、颜色、对其模式等等
  • Body text 段落文本设置:也就是摘要文案的字体大小、粗细、颜色等设置
  • Meta text 博客属性文本设置:日期、作者、评论数等内容的字体样式设置
  • Read More Text 按钮字体设置:就是让你编辑按钮的字体样式和按钮背景色等等
  • Pagination Text 分页字体设置:如果你选择展示分页按钮,这里可以设置分页的字体
  • Sizing 模块高度宽度设置:允许你设置整个博客列表模块的高度和宽度
  • Spacing 间距设置:允许你设置文章之间的间距
  • Border 边框设置:允许你设置文章模块的边框粗细和颜色
  • Filters 图片美化:允许你直接修改文章图片的色彩和对比度等等(高手才用)
  • Transform 模块变形:编辑每个博客模块的形状(很少用)
  • Animation 动画效果:设置模块加载时候的效果,建议新手多尝试一下

Advanced 高级设置

这个部分是给有一定CSS和HTML的网页设计师使用的栏目,

一般新手很少会使用这个版块。

在这个高级设置版块中,有以下选项可以编辑:

  • CSS ID & CLASS 设置元素的 css 和ID
  • Custom Css 给这个模块撰写自定义的css内容
  • Visibility 可见度设置 选择让模块在手机、平板、和电脑端展示
  • Transitions 变化设置 动态效果的延续时间的设置
  • Position 位置设置
  • Scroll effects 滚动效果设置 有多种特效可供选择

WP花园结语

如果你想使用本文中的Divi模块,可以从这里购买Divi正版主题,享受70%的折扣。

一个博客列表模块,就有那么多设置选项,

可见WordPress的divi主题强大之处!

我们WP花园在使用正版divi主题帮助客户搭建外贸WordPress营销型网站的时候,

会结合客户的产品特性,撰写大量优质的产品软文

帮助外贸企业网站提升谷歌SEO的排名。

所以,

学习好如何使用divi主题的blog模块对提升网站流量至关重要!

关于divi主题的使用问题,

欢迎和我们交流!

Google广告官方大中华地区官方合作谷歌广告开户 送WordPress网站

预充30000元广告(15%服务费),立刻送您WordPress外贸独立站!

WordPress客服二维码