Download 5 Vibrant Background Styles for Your Divi Blog Posts

October 24, 2018

We’re here with another free Divi download! This time, we’re giving you a taste of 5 different vibrant background styles that you can use for blog posts on your website. You can easily combine these background styles on the same website to give a different look and feel to the various blog posts you publish. On top of offering you all these vibrant background styles for free, we’re also going to guide you through creating the blog post template which you can reuse for any blog post you create and publish on your website.

Let’s get to it!


Let’s start off by taking a look at the 5 different outcomes and the view on different screen sizes.

download-5-vibrant-background-styles-for-your-divi-blog-posts Theme Builder Layout

Download The Vibrant Background Styles for FREE

To lay your hands on the vibrant background styles, you will first need to download them using the button below. To gain access to the download you will need to subscribe to our Divi Daily email list by using the form below. As a new subscriber, you will receive even more Divi goodness and a free Divi Layout pack every Monday! If you’re already on the list, simply enter your email address below and click download. You will not be “resubscribed” or receive extra emails.

You have successfully subscribed. Please check your email address to confirm your subscription and get access to free weekly Divi layout packs!

Color Palettes

For each one of the background styles, you can find a color palette below. We’ll refer to the color number throughout the tutorial so pick the background style and palette you want to create and go from there.

Palette #1

download-5-vibrant-background-styles-for-your-divi-blog-posts-1 Theme Builder Layout

  • Color #1: #886DFC
  • Color #2: #7C56BD
  • Color #3: #372C66

Palette #2

download-5-vibrant-background-styles-for-your-divi-blog-posts-2 Theme Builder Layout

  • Color #1: #42bcb2
  • Color #2: #9CFEF0
  • Color #3: #a8baf7

Palette #3

download-5-vibrant-background-styles-for-your-divi-blog-posts-3 Theme Builder Layout

  • Color #1: #96b2ff
  • Color #2: #d999ff
  • Color #3: #357ff4

Palette #4

download-5-vibrant-background-styles-for-your-divi-blog-posts-4 Theme Builder Layout

  • Color #1: #B981FF
  • Color #2: #24EEFA
  • Color #3: #be7bf2

Palette #5

download-5-vibrant-background-styles-for-your-divi-blog-posts-5 Theme Builder Layout

  • Color #1: #e02b20
  • Color #2: #f6ff56
  • Color #3: #db241e

Create New Post

Add Details & Enable Divi Builder

Let’s start from the beginning! Add a new page to your WordPress website, add your page title, upload a featured image and enable the Divi Builder.

download-5-vibrant-background-styles-for-your-divi-blog-posts-6 Theme Builder Layout

Divi Page Settings

Before switching over to Visual Builder, make some changes to the Divi Page Settings box at the top right of the page you’re on. This will ensure you’re entirely working with Divi to create the blog post layout. If you plan on reusing the template on your website, you’ll have to remember to modify these settings every time you create a new blog post.

  • Page Layout: Fullwidth
  • Post Title: Hide

download-5-vibrant-background-styles-for-your-divi-blog-posts-7 Theme Builder Layout

Switch Over to Visual Builder

You can now switch over to Visual Builder.

download-5-vibrant-background-styles-for-your-divi-blog-posts-8 Theme Builder Layout

Once you do, three options will appear on your screen. Click on the blue button to start building from scratch.

download-5-vibrant-background-styles-for-your-divi-blog-posts-9 Theme Builder Layout

Create Blog Post Design

Add Section #1

Background Image

Let’s start creating the template! Start off with an empty section at the top. Open the section settings, go to the background settings and upload a background style of choice. You can find all 5 variations by going to the downloaded folder > Hero.

  • Background Image Size: Cover
  • Background Image Position: Top Center

download-5-vibrant-background-styles-for-your-divi-blog-posts-10 Theme Builder Layout


To allow the background image to show up completely, play around with the top padding of the section.

  • Top Padding: 660px

download-5-vibrant-background-styles-for-your-divi-blog-posts-11 Theme Builder Layout

Add Section #2


Right below the section you’ve just added, go ahead and add another one. Open the settings, go to the spacing settings and remove all the default custom padding.

  • Top Padding: 0px
  • Bottom Padding: 0px

download-5-vibrant-background-styles-for-your-divi-blog-posts-12 Theme Builder Layout

Add New Row

Column Structure

Continue by adding a new row to the section using the following column structure:

download-5-vibrant-background-styles-for-your-divi-blog-posts-13 Theme Builder Layout


Remove all the default padding at the bottom of the section next.

  • Bottom Padding: 0px

download-5-vibrant-background-styles-for-your-divi-blog-posts-14 Theme Builder Layout

Add Post Title Module


Time to start adding modules! In this row, we’ll only need a Post Title Module. After you’ve added one, choose the elements you want to show up.

download-5-vibrant-background-styles-for-your-divi-blog-posts-15 Theme Builder Layout

Title Text Settings

Then, go to the title text settings and make some changes.

  • Title Font: Abril Fatface
  • Title Text Alignment: Center
  • Title Text Size: 73px (Desktop), 50px (Tablet), 40px (Phone)

download-5-vibrant-background-styles-for-your-divi-blog-posts-16 Theme Builder Layout

Meta Text Settings

The meta text settings need to be modified as well.

  • Meta Text Alignment: Center
  • Meta Text Color: Color #1 (Find in Palette)
  • Meta Text Size: 18px
  • Meta Line Height: 3em

download-5-vibrant-background-styles-for-your-divi-blog-posts-17 Theme Builder Layout

Add Section #3

Background Image

The last section on this page will contain the blog post content and CTA. Start off by uploading your background style of choice. You can find the variations by going to the downloaded folder > Body. Once you upload the background image, make some changes to the background settings.

  • Background Image Size: Actual Size
  • Background Image Position: Top Center
  • Background Image Repeat: Space

download-5-vibrant-background-styles-for-your-divi-blog-posts-18 Theme Builder Layout


Remove all the default top padding of this section to get rid of all the whitespace between this section and the previous one.

  • Top Padding: 0px

download-5-vibrant-background-styles-for-your-divi-blog-posts-19 Theme Builder Layout

Add Row #1

Column Structure

Continue by adding a new row to the section using the following column structure:

download-5-vibrant-background-styles-for-your-divi-blog-posts-20 Theme Builder Layout

Background Color

Add a slightly transparent background color to the row next.

  • Background Color: rgba(255,255,255,0.86)

download-5-vibrant-background-styles-for-your-divi-blog-posts-21 Theme Builder Layout


Remove the default custom padding here as well.

  • Top Padding: 0px
  • Bottom Padding: 0px

download-5-vibrant-background-styles-for-your-divi-blog-posts-22 Theme Builder Layout

Add Text Module

Add Content

Proceed by adding a Text Module to the row you’ve added. Here, you can add all of the blog post content you want and use the different text styles to get the desired outcome. In the print screen below, we are using headings and paragraphs.

download-5-vibrant-background-styles-for-your-divi-blog-posts-23 Theme Builder Layout

Text Settings

Go to the text settings and make some changes there.

  • Text Size: 21px (Desktop), 18px (Tablet), 15px (Phone)
  • Text Line Height: 2em

download-5-vibrant-background-styles-for-your-divi-blog-posts-24 Theme Builder Layout

Heading Settings

The heading text settings need to be modified as well.

  • Heading Font: Abril Fatface
  • Heading Text Size: 46px (Desktop), 40px (Tablet), 30px (Phone)
  • Heading Line Height: 1.5em

download-5-vibrant-background-styles-for-your-divi-blog-posts-25 Theme Builder Layout


Add some custom padding values next.

  • Top Padding: 80px
  • Bottom Padding: 80px
  • Left Padding: 80px (Desktop), 40px (Tablet), 30px (Phone)
  • Right Padding: 80px (Desktop), 40px (Tablet), 30px (Phone)

download-5-vibrant-background-styles-for-your-divi-blog-posts-26 Theme Builder Layout

Box Shadow

To finish off, add a subtle box shadow to the Text Module. This will bring some depth to the blog post template.

  • Box Shadow Blur Strength: 80px
  • Box Shadow Spread Strength: -14px

download-5-vibrant-background-styles-for-your-divi-blog-posts-27 Theme Builder Layout

Add Row #2

Column Structure

Continue by adding a new row right below the previous one using one column.

download-5-vibrant-background-styles-for-your-divi-blog-posts-28 Theme Builder Layout


Remove all the default custom padding of this row as well.

  • Top Padding: 0px
  • Bottom Padding: 0px

download-5-vibrant-background-styles-for-your-divi-blog-posts-29 Theme Builder Layout

Add Email Optin Module

Add Content

Then, add your CTA. We’re using an Email Optin Module. After you add it, modify the content.

download-5-vibrant-background-styles-for-your-divi-blog-posts-30 Theme Builder Layout


We’re only using the email address in this module so go ahead and disable the first name and last name in the fields settings.

download-5-vibrant-background-styles-for-your-divi-blog-posts-31 Theme Builder Layout

Gradient Background

Continue by adding a gradient background to the Email Optin Module.

  • Color 1: Color #2 (Find in Palette)
  • Color 2: Color #3 (Find in Palette)
  • Gradient Direction: 144deg

download-5-vibrant-background-styles-for-your-divi-blog-posts-32 Theme Builder Layout


Then, change the layout of the module.

  • Layout: Body On Top, Form On Bottom

download-5-vibrant-background-styles-for-your-divi-blog-posts-33 Theme Builder Layout

Text Settings

Change the text settings as well.

  • Text Orientation: Center
  • Text Color: Light

download-5-vibrant-background-styles-for-your-divi-blog-posts-34 Theme Builder Layout

Title Text Settings

Next, open the title text settings and make some changes.

  • Title Font: Abril Fatface
  • Title Text Size: 54px (Desktop), 40px (Tablet), 35px (Phone)

download-5-vibrant-background-styles-for-your-divi-blog-posts-35 Theme Builder Layout

Button Settings

Modify the button appearance as well.

  • Button Border Width: 0px
  • Button Border Radius: 0px
  • Font Style: Underline
  • Underline Style: Double

download-5-vibrant-background-styles-for-your-divi-blog-posts-36 Theme Builder Layout


Lastly, use different custom padding values in the spacing settings of the Email Optin Module.

  • Top Padding: 100px
  • Bottom Padding: 100px
  • Left Padding: 300px (Desktop), 50px (Tablet & Phone)
  • Right Padding: 300px (Desktop), 50px (Tablet & Phone)

download-5-vibrant-background-styles-for-your-divi-blog-posts-37 Theme Builder Layout

Save Layout in Divi Library for Reuse

The only thing left to do is save the layout in the Divi Library. That way, you can reuse it for other pages as well! You can also access blog posts as existing pages when creating a new page.

download-5-vibrant-background-styles-for-your-divi-blog-posts-38 Theme Builder Layout


Now that we’ve gone through all the steps, let’s take a final look at the outcome we’ve created.

download-5-vibrant-background-styles-for-your-divi-blog-posts Theme Builder Layout

Final Thoughts

In this post, we’ve shared some stunning and vibrant background styles with you that you can download for free. On top of that, we’ve also guided you through creating the blog post template from scratch. Feel free to use these background styles for the blog post templates you design yourself. If you have any questions or suggestions, make sure you leave a comment in the comment section below!

Share this article:

eHost-square-ad Theme Builder Layout

We’re listening.

Have something to say about this article? Share it with us on Facebook, Twitter or LinkedIn:


Related Posts

black-friday-banner-gone-wrong-advertising-in-free-plugins Theme Builder Layout

Black Friday Banner Gone Wrong: Advertising in Free Plugins

Screenshot of the Yoast Black Friday AdOn November 28, millions of people awoke to a Black Friday ad on nearly every page of their WordPress admin, courtesy of the Yoast SEO plugin. That day also coincided with the U.S. Thanksgiving holiday, so it left freelancers and...

Get ALL Your SEO, WordPress & Divi News

Join Our Daily Roundup

SEO News and More

SEO News and More

Subscribe ToThe Weekly SEO Trade News Updates

Get the latest SEO, SEM and SMM marketing intel, tips and tricks from one of the best SEO Gurus online. 

Every Tuesday morning we send out an aggregated email listing all new posts on SEO Trade News.

Excellent! Now check your email to confirm your subscription.