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

Button (text):

  • Text: <p style=”font-size:26px;”><strong><span class=’et-pb-icon’ style=”font-size:20px;”> &#xe004;</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

Image:

  • Max-width: 450px
  • Desktop
    • Margin-top – Desktop: -77px
    • Margin-bottom – Desktop: -50px
  • Mobile
    • Margin-bottom: 0px
    • Padding-top: 50px
    • Margin-top: 0px

Section:

  • 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

Row:

  • 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

Column 1:

  • Custom CSS: margin: auto;