Divi默认Blog模块优化列表布局
作者:小朱笔记
发布日期:2020年12月18日
摘要:Divi Blog模块默认有两种布局:网格和列表,但默认的样式都不怎么好看,利用css优化列表布局,使用blo […]

Divi Blog模块默认有两种布局:网格和列表,但默认的样式都不怎么好看,利用css优化列表布局,使用blog分类展示更美观。达到以下展示效果:

Divi默认Blog模块优化列表布局 3

优化Divi Blog模块图像在左侧,内容在右侧

第一步:将Blog模块设置布局:列表(虽然默认非常难看,但通过以下CSS就可以改变效果

第二步:设置CSS(如果你使用的是免费的Divi子主题,将代码放入style.css 文件中。否则,将代码放在Divi>主题选项>自定义CSS 代码框中。

1、图片在左侧,内容在右侧CSS,(可以根据需要调整宽度

/*add media query so changes only affect tablet and desktop*/

@media (min-width: 767px) {

/*set the image width*/

.entry-featured-image-url  {
width: 30%;
float: left;
margin-bottom: 0!important;
}

/*set the details width*/

.entry-title,
.post-meta,
.post-content {
width: 70%;
float: left;
padding-left: 30px;
}
}

2、添加以下CSS优化层次感,(可以根据需要调整

/*style the individual posts*/

.et_pb_post {
box-shadow: 0px 2px 80px 0px rgba(160,190,212,0.22);  
border-radius: 6px;
padding: 30px;
margin-bottom: 20px;
}

3、优化图片尺寸比例。就是在上面的第一个代码段中添加“ padding-top:30%”。复制下面的代码粘贴上去就可以了,(可以根据需要调整

/*blog image aspect ratio square 1:1*/

.entry-featured-image-url {
  padding-top: 30%;
  display: block;
}

.entry-featured-image-url img {
  position: absolute;
  height: 100%;
  width: 100%;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  object-fit: cover;
}

把这三段css添加后,效果就出来了。

如果想把图片放右侧,自行修改css。

相关文章

官方正版Divi主题和EXTRA主题插件终身授权出售

小朱笔记出售正版的Divi主题(本站使用主题)以及配套插件的终身授权。永久可以升级,而且不限网站数量。 关于主题和插件,你可以自行去Divi官网了解详细功能和官方价格。本站出售的授权为官方终身LIFETIME ACCESS。 正版授权,可在线升级,官方正版中文,绝非盗版、汉化版和破解版。 官方正版5套: Divi主题...

Divi设置和自定义博客翻数字页码

默认的Divi文章分类太难看了,不利于翻页查找文章,可以通过CSS或插件设置数字翻页,这样就比较美观,数字翻页效果如下: 一、将Divi Blog分页文本链接更改为按钮 1、默认设置Blog分页 2、将Divi Blog分页文本链接更改为按钮。设置CSS(如果你使用的是免费的Divi子主题,将代码放入style.css...

Divi builder设计弹出式窗口演示

使用Divi builder建站,设计Divi的弹出窗口,需要使用到一个弹出插件:Popups for Divi(免费):演示网站:https://www.zhudc.com/demo/popup-id 1、任意窗口都可以设计弹出,2、支持页面,整站弹出,无限制,3、支持按钮或链接触发弹出窗口,等等。 操作教程非常教程:...

评论

7 评论

  1. 吱吱

    老哥,效果是出来了,不管标题还是什么,直接点不开,是什么问题,求教

    回复
    • 小朱笔记

      可能是设置问题吧,好好检查吧

      回复
  2. 吱吱

    老哥,你这效果真心不错,可惜给了代码我也搞不出

    回复
    • 小朱笔记

      老哥,不是吧,写了教程的,博客布局设置:列表。然后直接复制三个CSS代码粘贴:将代码放在Divi>主题选项>自定义CSS代码框中。

      回复
      • 吱吱

        还没睡呐老哥,博客布局在哪里,没找到啊

        回复
        • 小朱笔记

          刚购买学习使用DIVI是吧,哪就先熟悉DIVI吧。在DIVI>主题生成器中,DIY博客排版。

          回复
          • 吱吱

            好的好的,多谢老哥了,我先研究研究哈

递交一条评论

邮箱地址不会被公开。 必填项已用*标注

此站点使用Akismet来减少垃圾评论。了解我们如何处理您的评论数据

欢迎来到我的博客!

好记性不如烂笔头

为什么要写博客?

记性不好。

本站所有内容都是我在工作中所遇到的问题,通过搜索引擎查到资料,有自己原创经验分享,有收集来的,记录并分享,方便自己以后查阅。

主要:建站资料,网络推广,服务器,软件分享,办公软件操作,阿里巴巴国际站,国外社交平台,各类工具等等。

我的收藏,希望对你有帮助。

收藏本站(Ctrl+d)加入收藏

%d 博主赞过: