Categories
- Amateur Hour (15)
- Archives (1)
- Bid Management System (3)
- Contests & Giveaways (1)
- Divi Tuts (14)
- Divi WooCommerce (1)
- Honest Websites (2)
- Plan Your WordPress Site (3)
- Pros and Cons (2)
- Showcase (20)
- Stop Spammers (2)
- Unfiltered (13)
Latest Posts
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;