WordPress首页图文N格样式导航模块

效果演示

使用步骤

1. 将下列代码放至模块自定义区域

WordPress后台 >> 外观 >> 小工具 >> 自定义HTML

注意里面的链接和图片地址换成你的

<!-- 首页N格区块html代码 开始 -->
<div id="home-row-qukuai" class="  home_row home_row_1  module-qukuai  " style="background-color:;"> 
   <div class="wrapper">
        <div class="home-row-left content-area "> 
            <div class="sort b2-radius" style="margin-top:-100px ;">    
                <ul class="sort-config"> 
                    <li>
<div class="sort-config-item">
<img class="sort-config-icon" src="https://huliku.com/images/logo.svg"  />
<a href="https://huliku.com" target="_blank"><p class="sort-config-title">数字指南手册
<span class="go" style="background-color: #ff6000;">GO<i class="b2font b2-arrow-right-s-line"></i></span>
</p> </a>
<span class="sort-config-desc">高效工作学习生活手册</span>
</div></li> <li>
<div class="sort-config-item">
<img class="sort-config-icon" src="https://huliku.com/images/search.svg"  />
<a href="https://search.guidebook.top" target="_blank"><p class="sort-config-title">搜索指南
<span class="go" style="background-color: #5de000;">GO<i class="b2font b2-arrow-right-s-line"></i></span>
</p> </a>
<span class="sort-config-desc">聚合搜索引擎</span>
</div></li> <li>
<div class="sort-config-item">
<img class="sort-config-icon" src="https://huliku.com/images/danghui.svg"  />
<a href="https://huliku.com" target="_blank"><p class="sort-config-title">公文写作
<span class="go" style="background-color: #ff6000;">GO<i class="b2font b2-arrow-right-s-line"></i></span>
</p> </a>
<span class="sort-config-desc">写作素材收集</span>
</div></li> <li>
<div class="sort-config-item">
<img class="sort-config-icon" src="https://huliku.com/images/news.svg"  />
<a href="https://huliku.com/hotnews/" target="_blank"><p class="sort-config-title">今日资讯
<span class="go" style="background-color: #ff6000;">GO<i class="b2font b2-arrow-right-s-line"></i></span>
</p> </a>
<span class="sort-config-desc">每日新闻速递</span>
</div></li> <li>
<div class="sort-config-item">
<img class="sort-config-icon" src="https://huliku.com/images/hezuoanli.svg"  />
<a href="/requests" target="_blank"><p class="sort-config-title">项目库
<span class="go" style="background-color: #ff6000;">GO<i class="b2font b2-arrow-right-s-line"></i></span>
</p> </a>
<span class="sort-config-desc">优秀项目列表</span>
</div></li>                 </ul> 
<div class="sort-blocks"> 
                    <div class="bt-body"> 
                        <div class="containerrr"> 
                            <div class="onecad-quk-carousel"> 
                                <div class="itemss"> 
                                    <a class="card_ZQsT- b2-radius" href="https://huliku.com/337/" target="_blank">
                            <img src="https://huliku.com/images/shetuwang.png">
                          
                            
                        </a><a class="card_ZQsT- b2-radius" href="http://huliku.com" target="_blank">
                            <img src="https://huliku.com/images/wxgzh1.png">
                           
                        </a>
 
<a class="card_ZQsT- b2-radius" href="https://huliku.com" target="_blank">
                            <img src="https://huliku.com/images/101.jpg">
                           </a> 
         </div> 
                            </div> 
                        </div> 
                    </div> 
                    <div class="srot-mine b2-radius"> 
                      <div class="wwads-cn wwads-horizontal" data-id="147" style="width:376px; height:180px;flex-wrap:nowrap;margin-top:0px;background-color:azure;padding:0px;"></div>
                        
                    </div> 
                </div> 
                            </div>
        </div>
    </div>
</div>
<!-- 首页N格区块html代码结束 -->

2. 将下列代码放至 WordPress 主题额外CSS中

WordPress后台 >> zibll主题设置 >> 全局&功能 >> 自定义代码 >> 自定义CSS样式

都白嫖我就设置个评论可见啦~

!

也想出现在这里？ 联系我们吧