94 Design material website module title - B2 theme WordPress beautification

The module titles of Design Material Network are simple and generous, with clear meanings. The distinctive color distinction makes the buttons vivid and flexible. In addition to the module title, I also conveniently wrote down the hover dynamic effect, and each webmaster can choose according to their own needs.

Effect preview:

How to use?

Add the following code to the bottom of the style.css file in the theme root directory

 /*Start of imitating 94 design module title*/ /*Title*/ .post-modules-top { padding: 0 15px 20px 15px; border-bottom: 0px solid #f3f3f3; white-space: nowrap; flex-direction: row; } .post-modules-top .modules-title-box { padding: 8px 0; display: block; } .post-list .module-title { position: relative; text-align: left; font-weight: 600 ! important; font-size: 28px; } .post-list-cats { padding: 10px 16px 10px 30px; border-left: none; border-radius: 6px; background: none; width: calc(100% + 2px); margin-left: -2px; overflow: hidden; } /*Module button*/ .picked.post-load-button span { border-radius: 4px; background: #504BCC; color: #fff; padding: 10px 14px; } .post-list-cats a span:hover { background: #504BCC; color: #fff ! important; border-radius: 2px; } /*Button background color*/ .post-list-cats a::before { background: #f6f7f8; } /*Remove split lines*/ .b2_gap > li { border-bottom: none; border-right: none; } /*Load more buttons*/ .post-list .load-more button { padding: 11px 40px; width: auto; border: 1px solid #eee; background: linear-gradient(90deg,#504BCC,#7161ff); color: #fff; font-size: 14px; margin-top: 60px; border-radius: 5px; } .post-list .load-more button:hover { background: #504BCC; color: #fff; } /*Hover effect*/ .item-in { position: relative; /*margin: 0;*/ border: 1px solid #f0f0f0; box-shadow: 0 0 10px rgba(0,0,0,.05); transition: all .2s; } .item-in:hover { -webkit-box-shadow: 0 3px 6px -4px rgba(0,0,0,.12), 0 6px 16px 0 rgba(0,0,0,.08), 0 9px 28px 8px rgba(0,0,0,.05); box-shadow: 0 3px 6px -4px rgba(62, 94, 255, 0.050980392156862744), 0 6px 16px 0 rgba(62, 94, 255, 0.050980392156862744), 0 9px 28px 8px rgba(62, 94, 255, 0.050980392156862744); transform: translateY(-3px); } /*Title adjustment under dynamic effect*/ .post-info { padding: 1pc 8px; background: #fff; } /*End of imitating 94 design module title*/

Wordpress beautification of relevant styles:

94 Design Material Network Atmospheric Search Box Block - WordPress Block

Muze

• July 6, 20
• Like: zero
• Browse: 1.7k

Four Grid Guide of Youyou Tutorial Network - WordPress Block

Muze

• June 19, 20
• Like: zero
• Browse: 1k