How to Design an Attractive Subscribe Section for Any Kind of Website With Divi

Last Updated on September 4, 2018 by 11 Comments

How to Design an Attractive Subscribe Section for Any Kind of Website With Divi
Blog / Divi Resources / How to Design an Attractive Subscribe Section for Any Kind of Website With Divi
Play Button

One of the main reasons people create websites is to find a new way to approach their target audience. Once you take that first step and start building a website, you start wondering how exactly youโ€™ll be able to get in touch with your potential clients. One of the things that have proven to help a lot of website owners is list building. Itโ€™s all about collecting email addresses from visitors, turning them into leads (and eventually customers) with email marketing.

And with list building comes creating attractive subscribe sections on your website. You want yourย subscribe section to be eye-catching and more importantly, you want your subscribe section to convert. For this tutorial, weโ€™ve created a stunning subscribe section that will undeniably catch your visitorโ€™s attention. Weโ€™re combining a slick design with arguments on why to sign up for an email list. On top of that, weโ€™ll also share three color palettes that you can choose from while creating the design.

Letโ€™s get to it!

Subscribe To Our Youtube Channel

Preview

Before we dive into the tutorial, letโ€™s take a look at the result on different screen sizes.

subscribe section

Color Palette #1

subscribe section

  • Color #1:ย rgba(79,35,255,0.88)
  • Color #2:ย #e09900
  • Color #3:ย #4f23ff

Color Palette #2

subscribe section

  • Color #1:ย rgba(255,35,97,0.75)
  • Color #2: #e09900
  • Color #3:ย #d80e00

Color Palette #3

subscribe section

  • Color #1:ย rgba(41,17,147,0.75)
  • Color #2:ย #00ffd8
  • Color #3:ย #291193

Approach

Choose one of the color palettes above (or create your own one) and use these colors throughout the tutorial. Weโ€™ll refer to colorย #1, #2 or #3 when weโ€™re using a color in our settings. Weโ€™re also making the Subscribe Module overlap two columns and weโ€™re emphasizing the benefits of signing up for an email list.

Recreate Subscribe Section

Add a New Section

Top Divider

Open the page you want to add your subscribe section to and add a new standard section. Open the settings of your section right away and add the following top divider:

  • Divider Style: Find in List
  • Divider Color: #FFFFFF
  • Divider Height: 200px
  • Divider Flip: Vertical

subscribe section

Bottom Divider

Add the same kind of divider to the bottom of your section:

  • Divider Style: Find in List
  • Divider Color: #FFFFFF
  • Divider Height: 200px
  • Divider Flip: Vertical

subscribe section

Spacing

Open the Spacing settings next and remove all the default padding of your section by adding โ€˜0pxโ€™ to the top and bottom padding.

subscribe section

Add a New Row

Column Structure

Now that weโ€™re done with all section settings, we can add a new row. Choose the following column structure for itsubscribe section

Gradient Background

Open your row settings and continue by adding the following gradient background:

  • First Gradient Color: Color #1
  • Second Gradient Color: Color #2
  • Gradient Direction: 123deg
  • Place Gradient Above Background Image: Yes

subscribe section

Background Image

Continue by adding a background image of choice. This background image will only show through a bit. Choose โ€˜Coverโ€™ as the Background Image Size as well.

subscribe section

Colum 2 Background Color

Next, add โ€˜rgba(255,255,255,0.87)โ€™ as the Column 2 Background Color.

subscribe section

Sizing

Weโ€™re also going to reduce the space between both columns and make the row take up the entire width of the screen by applying the following Sizing settings:

  • Make This Row Fullwidth: Yes
  • Use Custom Gutter Width: Yes
  • Gutter Width: 1
  • Equalize Column Heights: Yes

subscribe section

Spacing

The last thing youโ€™ll need to do within the row settings is add some custom padding:

  • Top & Bottom Padding: 0px
  • Column 1 Top Padding: 200px
  • Column 1 Bottom Padding: 100px
  • Column 2 Top Padding: 300px (Desktop) 50px (Tablet & Phone)
  • Column 2 Bottom Padding: 100px (Tablet & Phone)
  • Column 2 Left & Right Padding: 50px

subscribe section

Add Blurb Module #1 to Column 1

Add Blurb Title

Now letโ€™s start adding our modules! Weโ€™ll start with the first column by adding a Blurb Module. Once weโ€™re done modifying that Blurb Module, weโ€™ll reuse its settings for the other two as well. After you add a Blurb Module, give it a title.

subscribe section

Add Blurb Icon

Add an icon to your Blurb Module next. Weโ€™ve used the following icon for the first module:

subscribe section

Icon Settings

Change the appearance of the icon by adding the following settings:

  • Icon Color: #FFFFFF
  • Icon Placement: Top
  • Use Icon Font Size: Yes
  • Icon Font Size: 43px

subscribe section

Title Text Settings

Weโ€™re only using a blurb title. Thatโ€™s why weโ€™ll need to modify the text settings of the H4 only:

  • Title Font: Yeseva One
  • Title Text Alignment: Center
  • Title Text Color: #FFFFFF
  • Title Letter Spacing: -1px

subscribe section

Sizing

Weโ€™ll also modify the width of our Blurb Module according to the different screen sizes:

  • Content Width: 150px
  • Width: 33% (Desktop), 40% (Tablet), 60% (Phone)
  • Module Alignment: Center

subscribe section

Spacing

Lastly, add the following custom padding to your Blurb Module as well:

  • Top & Bottom Padding: 50px

subscribe section

Clone Blurb Module Twice & Modify Featured Blurb Module

Change Icon & Content

You can now go ahead and clone the Blurb Module twice. Keep all of them in the first column. For each one of the new Blurb Modules, go ahead and change the icon and title to make it match with the message you want to send out.

subscribe section

subscribe section

Add Background Color

Weโ€™re going to highlight the middle Blurb Module. To do that, weโ€™ll start by adding a white background color to it.

subscribe section

Change Icon & Title Text Color

Weโ€™ll also change the color of the icon and the H4 title to โ€˜#000000.โ€™

subscribe section

Add Rounded Corners

Next, weโ€™ll add โ€˜5pxโ€™ to each one of the corners in the Border settings.

subscribe section

Box Shadow

Last but not least, weโ€™ll add a bit of depth by using the first box shadow option.

subscribe section

Add Text Module #1 to Colum 2

Text Settings

Letโ€™s move on to the second column! The first module weโ€™ll need there is a Text Module. After youโ€™ve added your content, apply the following text settings to it:

  • Text Font: Yeseva One
  • Text Color: #000000
  • Text Size: 54px
  • Text Line Height: 1em

subscribe section

Add Text Module #2 to Column 2

Spacing

Right below that Text Module, weโ€™re going to add another Text Module for the description. After youโ€™ve added your content, add โ€™20pxโ€™ to the top margin.

subscribe section

Add Email Optin Module to Column 2

Background Color

The next module weโ€™ll need to add is an Email Optin Module. Once you add it, go ahead and change the background color to โ€˜rgba(255,255,255,0).โ€™

subscribe section

Email Account

Add your Email Account next choosing your service provider of choice.

subscribe section

Fields

Continue by opening the Field settings and disable the First Name and Last Name fields.

subscribe section

Field Settings

Weโ€™ll also modify the Field settings. Remove the rounded corners by adding โ€˜0pxโ€™ to each one of the corners. Add the first box shadow option as well.

subscribe section

subscribe section

Button Settings

Next, change the appearance of your button:

  • Button Text Color: #FFFFFF
  • Button Background Color: Color #3
  • Button Border Width: 0px
  • Button Border Radius: 0px
  • Button Font: Yeseva One
  • Show Button Icon: Yes
  • Button Icon Color: #FFFFFF
  • Button Icon Placement: Left
  • Only Show Icon on Hover for Button: No
  • Box Shadow: Select the first option

subscribe section

subscribe section

subscribe section

subscribe section

Spacing

Lastly, make the Subscribe Module overlap both columns using the following Spacing settings:

  • Top Margin: 20px (Desktop), 0px (Tablet & Phone)
  • Left Margin: -60% (Desktop & Tablet), 0px (Phone)
  • Right Margin: 60% (Desktop), 50% (Tablet), 0px (Phone)

subscribe section

Add Social Media Follow Module to Colum 2

Add as Many Social Networks as Wanted

Last but not least, weโ€™ll add a Social Media Follow Module. Go ahead and add the social networks youโ€™d wish to appear.

subscribe section

Rounded Corners

Once youโ€™ve added all the social networks, add โ€™50pxโ€™ to each one of the corners in the Border settings.

subscribe section

Spacing

Weโ€™ll also push down the module by adding โ€™50pxโ€™ to the top margin.

subscribe section

Change Background Color of Each Social Network Individually

Last but not least, change the background color of each one of the social networks individually to โ€˜#000000.โ€™

subscribe section

Preview

Now that weโ€™ve gone through all the steps, letโ€™s take a final look at the result on different screen sizes.

subscribe section

Final Thoughts

Subscribe sections are an important part of your website. They help you build email lists, enable email marketing and turn leads into visitors in just a matter of time. In this post, weโ€™ve shown you how to create a stunning subscribe section thatโ€™ll match any type of website out there. Weโ€™ve combined using a gorgeous design with putting the signup advantages out there. If you have any questions or suggestions, make sure you leave a comment in the comment section below!

Divi Marketplace

Are You A Divi User? Find Out How To Get More From Divi! ๐Ÿ‘‡

Browse hundreds of modules and thousands of layouts.

Visit Marketplace
Divi Marketplace
Divi Cloud

Find Out How To Improve Your Divi Workflow ๐Ÿ‘‡

Learn about the new way to manage your Divi assets.

Get Divi Cloud
Divi Cloud
Divi Hosting

Want To Speed Up Your Divi Website? Find Out How ๐Ÿ‘‡

Get fast WordPress hosting optimized for Divi.

Speed Up Divi
Divi Hosting
Premade Layouts

Check Out These Related Posts

New Starter Site For Stylists (Quick Install)

New Starter Site For Stylists (Quick Install)

Posted on October 7, 2024 in Divi Resources

Divi empowers you to build the best websites possible, and now, Divi Quick Sites takes website creation to a whole new level. This revolutionary tool lets anyone, regardless of skill level, generate a complete website in under two minutes! Divi Quick Sites provides everything you need to launch...

View Full Post
How To Dock Your Panels In Divi 5 (Public Alpha)

How To Dock Your Panels In Divi 5 (Public Alpha)

Posted on October 5, 2024 in Divi Resources

One of the most exciting new features in the Divi 5 Visual Builder is the ability to dock your settings panels. This feature offers enhanced control over your workspace to reduce modal clutter and enable seamless multitasking. allowing you to dock multiple settings panels to either side of the...

View Full Post

11 Comments

  1. I love how it looks! The detailed explanation is great too! I’m having trouble finding a background picture that is blurred or faded enough. I’ve tried multiple types of pictures and they all take over the left side of the section. Any thoughts on finding a picture similar to the one you used in your design? It looks like a girl reading a book.

  2. Great resource, thanks for sharing!

  3. Sounds like a great opportunity for some A/B testing by looking at the various colors, fonts and wording that you can use. Thanks for the detailed explanation.

  4. Thanks, ET for continued inspiration and design tips and tutorials. Much appreciated.

  5. Simple and elegant – thanks.

  6. My comment is actually about the post!

    I always enjoy the creative outside the box stuff. Keep up the great work!

  7. What is happening with ET help and support area? Is it just me, or is live chat linked to some random email address? Hard to find my tickets and I have an unanswered question in support for over a week now???

    I don’t know where else to post this since I can’t contact ET any other way.

    • Hi Reuel,

      We are using a new system for support. If it doesn’t work for you, that probably means you are using some sort of browser tracker blocker or ad blocker. Without being able to track you, we can’t identify you or communicate with you via our website, so in these cases we prompt you to send us an email instead.

  8. No teaser video this week???

    • One less thing for you to whine about

      • Not really, it sounds like he’s whining about not getting the teaser video this week too, lol!

Leave A Reply

Comments are reviewed and must adhere to our comments policy.

Join To Download Today