Download 5 Vibrant Background Styles for Your Divi Blog Posts

Last Updated on September 16, 2022 by 9 Comments

Download 5 Vibrant Background Styles for Your Divi Blog Posts
Blog / Divi Resources / Download 5 Vibrant Background Styles for Your Divi Blog Posts

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!

Preview

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

vibrant background styles

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 newsletter 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.

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

vibrant background styles

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

Palette #2

vibrant background styles

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

Palette #3

vibrant background styles

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

Palette #4

vibrant background styles

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

Palette #5

vibrant background styles

  • 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.

vibrant background styles

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

vibrant background styles

Switch Over to Visual Builder

You can now switch over to Visual Builder.

vibrant background styles

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

vibrant background styles

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

vibrant background styles

Spacing

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

  • Top Padding: 660px

vibrant background styles

Add Section #2

Spacing

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

vibrant background styles

Add New Row

Column Structure

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

vibrant background styles

Spacing

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

  • Bottom Padding: 0px

vibrant background styles

Add Post Title Module

Elements

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.

vibrant background styles

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)

vibrant background styles

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

vibrant background styles

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

vibrant background styles

Spacing

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

vibrant background styles

Add Row #1

Column Structure

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

vibrant background styles

Background Color

Add a slightly transparent background color to the row next.

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

vibrant background styles

Spacing

Remove the default custom padding here as well.

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

vibrant background styles

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.

vibrant background styles

Text Settings

Go to the text settings and make some changes there.

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

vibrant background styles

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

vibrant background styles

Spacing

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)

vibrant background styles

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

vibrant background styles

Add Row #2

Column Structure

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

vibrant background styles

Spacing

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

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

vibrant background styles

Add Email Optin Module

Add Content

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

vibrant background styles

Fields

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.

vibrant background styles

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

vibrant background styles

Layout

Then, change the layout of the module.

  • Layout: Body On Top, Form On Bottom

vibrant background styles

Text Settings

Change the text settings as well.

  • Text Orientation: Center
  • Text Color: Light

vibrant background styles

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)

vibrant background styles

Button Settings

Modify the button appearance as well.

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

vibrant background styles

Spacing

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)

vibrant background styles

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.

vibrant background styles

Preview

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

vibrant background styles

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!

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

Get a Free Augmented Reality Layout Pack for Divi

Get a Free Augmented Reality Layout Pack for Divi

Posted on March 25, 2024 in Divi Resources

Hey Divi Nation! Thanks for joining us for the next installment of our weekly Divi Design Initiative; where each week, we give away a brand new Layout Pack for Divi. This time around, the design team has created a beautiful Augmented Reality Layout Pack that’ll help you get your next Augmented...

View Full Post
Download a Free Webinar Theme Builder Pack for Divi

Download a Free Webinar Theme Builder Pack for Divi

Posted on March 22, 2024 in Divi Resources

It’s time for another freebie! This time, we’re giving you a free Theme Builder Pack for Divi. Combining these with our beloved Divi Layout Packs is a great way to build the Divi website of your dreams with ease. This week, the design team has created a beautiful Webinar Theme Builder...

View Full Post
Get a Free Modeling Agency Layout Pack for Divi

Get a Free Modeling Agency Layout Pack for Divi

Updated on March 21, 2024 in Divi Resources

Hey Divi Nation! Thanks for joining us for the next installment of our weekly Divi Design Initiative; where each week, we give away a brand new Layout Pack for Divi. This time around, the design team has created a beautiful Modeling Agency Layout Pack that’ll help you get your next Modeling...

View Full Post

9 Comments

  1. This is great. Thank you. How do I turn this into a template now?

  2. I am setting up my first blog, using WordPress and Divi. I saw your article from July 5, 2017, that seemed to offer good guidance. Is it still your most up-to-date advice? What about this current article? When I joined EG, I expected to find a Divi ready-made template suitable for my blog, but so far I have been disappointed at the available templates.

  3. Hell yes! I love it when you guys give away stuff like this…You can count on me using these backgrounds.

    It would be better if these were SVGs…

  4. Forgot to mention, also thanks for doing so many

  5. I really like these, Thank you so much Donjete 🙂

  6. Well, that’s great, but the client will have to remember to modify these settings every time they create a new blog post. That’s a tall order!

    Might be better to create a custom blog layout, no?

    • I don’t think they were created specifically for “the client” I’m sure they were created for Designers & Devs to use as inspiration so we can do it for the client! It’s impossible to create something that is suitable for “the client” ease of use, everybody’s website is different! As an idea you could create a template 🙂

  7. Awesome design ideas! would love to try!

    • Thanks, Max! Definitely try them out 🙂

Leave A Reply

Comments are reviewed and must adhere to our comments policy.

Join To Download Today