Create a Custom Divi Hero / Header Section with Badge
Here’s a tutorial on creating a cool header section using... Read more
Here's a tutorial on creating a cool header section using the Divi Builder. In this tutorial, we create a different view for desktop and mobile. We add an image to look like a badge, make a button using the text module, and insert an Elegant Themes icon. If you like the layout, you can build it yourself by following along with the tutorial. Or you can skip to the end and download the importable Divi file for free by clicking this link.
Text:
- <h1>Stop Spammers</h1> <p style="font-size:26px;">The best FREE anti-spam plugin on WordPress entrusted by 60K sites.</p>
- Padding-left – Desktop: 8%
- Padding-left – Mobile: 25px
- Alignment – Desktop: Left
- Alignment – Mobile: Center
- Shrink header text on mobile
- Text: <p style="font-size:26px;"><strong><span class='et-pb-icon' style="font-size:20px;"> </span> Download</strong></p>
- Background: #eb4296
- Hover: #0F2540
- Padding: 15px
- Margin-left – Desktop: 8%
- Margin-left – Mobile: 0%
- Link: https://wordpress.org/plugins/stop-spammer-registrations-plugin/
- Open new tab
- Max-width: 450px
- Desktop
- Margin-top – Desktop: -77px
- Margin-bottom – Desktop: -50px
- Mobile
- Margin-bottom: 0px
- Padding-top: 50px
- Margin-top: 0px
- Desktop
- Background: Clear
- Margin-bottom: 50px
- Mobile
- Gradient 1: #0078be
- Gradient 2: rgba(255,255,255,0.1)
- Direction: 150deg
- Start and End Position: 65%
- Padding-bottom: 230px
- Margin-bottom: 50px
- Desktop
- Gradient 1: #0078be
- Gradient 2: rgba(255,255,255,0.1)
- Direction: 140deg
- Start and End Position: 60%
- Max-height: 350px
- Mobile
- Background: Clear
- Custom CSS: margin: auto;


![[5 Pack] SVG Events, Time Management, & Scheduling Mockups](https://trumani.com/wp-content/uploads/2019/03/events-time-management-scheduling_svgs_trumani-440x395.png)





Once the blog page is complete, go to the Theme Builder under the Divi/Extra menu and create a new template. Click on the pencil icon in the body section and create a custom body area. Choose the column layout that matches the layout of the blog page. Add your sidebar in one column and the Blog module in another. In the settings for the blog, enable the "Posts for current page" option. In the advanced tab, add the following classes so that the design matches the blog page: trumani-blog et_blog_grid_equal_height. That's it!


Seamless Integration