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

.et_bloom .et_bloom_optin_1 .et_bloom_form_content { background-color: #4843d2 !important; } .et_bloom .et_bloom_optin_1 .et_bloom_form_container .et_bloom_form_header { background-color: #ffffff !important; } .et_bloom .et_bloom_optin_1 .carrot_edge .et_bloom_form_content:before { border-top-color: #ffffff !important; } .et_bloom .et_bloom_optin_1 .carrot_edge.et_bloom_form_right .et_bloom_form_content:before, .et_bloom .et_bloom_optin_1 .carrot_edge.et_bloom_form_left .et_bloom_form_content:before { border-top-color: transparent !important; border-left-color: #ffffff !important; }
@media only screen and ( max-width: 767px ) {.et_bloom .et_bloom_optin_1 .carrot_edge.et_bloom_form_right .et_bloom_form_content:before, .et_bloom .et_bloom_optin_1 .carrot_edge.et_bloom_form_left .et_bloom_form_content:before { border-top-color: #ffffff !important; border-left-color: transparent !important; }
}.et_bloom .et_bloom_optin_1 .et_bloom_form_content button { background-color: #f92c8b !important; } .et_bloom .et_bloom_optin_1 .et_bloom_form_content .et_bloom_fields i { color: #f92c8b !important; } .et_bloom .et_bloom_optin_1 .et_bloom_form_content .et_bloom_custom_field_radio i:before { background: #f92c8b !important; } .et_bloom .et_bloom_optin_1 .et_bloom_border_solid { border-color: #f7f9fb !important } .et_bloom .et_bloom_optin_1 .et_bloom_form_content button { background-color: #f92c8b !important; } .et_bloom .et_bloom_optin_1 .et_bloom_form_container h2, .et_bloom .et_bloom_optin_1 .et_bloom_form_container h2 span, .et_bloom .et_bloom_optin_1 .et_bloom_form_container h2 strong { font-family: “Open Sans”, Helvetica, Arial, Lucida, sans-serif; }.et_bloom .et_bloom_optin_1 .et_bloom_form_container p, .et_bloom .et_bloom_optin_1 .et_bloom_form_container p span, .et_bloom .et_bloom_optin_1 .et_bloom_form_container p strong, .et_bloom .et_bloom_optin_1 .et_bloom_form_container form input, .et_bloom .et_bloom_optin_1 .et_bloom_form_container form button span { font-family: “Open Sans”, Helvetica, Arial, Lucida, sans-serif; } p.et_bloom_popup_input { padding-bottom: 0 !important;}

Download For Free

Download For Free

Join the Divi Newlsetter and we will email you a copy of the ultimate Divi Landing Page Layout Pack, plus tons of other amazing and free Divi resources, tips and tricks. Follow along and you will be a Divi master in no time. If you are already subscribed simply type in your email address below and click download to access the layout pack.

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

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!

The post Download 5 Vibrant Background Styles for Your Divi Blog Posts appeared first on Elegant Themes Blog.



Source link

error: Content is protected !!