How to Build a Blog Page In Divi

Rifat Divi Tutorials Feb 25, 2022

Typically, each theme pack contains a blog layout, which enables you to quickly get your blog up and running. However, have you ever wished to know how one of those blog pages is constructed? In this post, we'll utilize one of those blog layouts to demonstrate how to use Divi's blog module to create a blog page. We'll walk you through each setting step by step.

Let us begin!

Design Preview

Creating A Page

First, go to Pages > Add New and create a new page.

Therefore provide a title for the page that sounds plausible to you. I'm using the page name Acai Blog Page from the layout pack. In the right sidebar, select any page properties you desire. I'm keeping the attributes alone.

Create Amazing Websites

With the best free page builder Elementor

Start Now
  • Page Title: Acai Blog Page

Move to Divi Builder

Following that, you'll want to switch to the Divi Builder. Utilize Divi Builder by clicking the purple button in the page's center. This will take you to the front end, where the Divi Builder will be active, ready for us to begin building the page.

Hero Section With Title

Style Hero Section

We'll begin with the first section. Open the options for the section.

Do some changes in the section settings.

  • Background: #f9f3fd
  • Admin Label: Blog

Blog Page Title

Following that, we'll create a Row for the title. Select the Row with the green signal with a single column.

Then add a text module.

Style The Text Module

Open the text setting and make the following changes for the H1 heading.

  • Font: Heading 1
  • Text: Our Blog

Now move to the design tab and make these changes below.

  • Text Alignment: Center
  • Heading Text: H1
  • Font: Cormorant Infant
  • Weight: Bold

Also change the font color, size and height.

  • Color: #442854
  • Desktop Text Size: 130px
  • Line Height: 0.8em

Now change the heading text size.

  • Tablet Text Size: 60px

Now change the phone icon size.

  • Phone: 40px

Create the Latest Blog Post and CTA

Our hero area features the most recent post and an opt-in email form. Create a new Row beneath our first Row and choose the Column design with two-thirds on the left and one-third on the right.

Open row setting and change spacing from the design tab.

  • Bottom Padding: 0px

Featured Blog Post Module

Following that, we'll provide a Blog module. This section will contain our most recent content. Add the Blog module by clicking the gray addition icon in the left column of our new Row.

Under Content settings, input 1 for the Post Count block.

  • Post Count: 1

Elements

On the content tab, move down to the elements section and uncheck author and pagination.

  • Show Author: No
  • Show Pagination: No

Layout

On the Design tab, change the layout and overlay settings.

  • Layout: Fullwidth
  • Featured Image Overlay: Off

Title Text

Now change the title text according to the following settings.

  • Heading Level: H2
  • Font: Cormorant Infant
  • Weight: Bold
  • Color: #442854

Also, change the font size.

  • Size: 30px Desktop, 20px Tablet, 18px Phone
  • Title Line Height: 1.1em

Body Text

For the body text settings, change the following.

  • Font: Cabin
  • Color: #442854
  • Line Height: 1.8em

Meta Text

Also, bring some changes to meta text.

  • Font: Cormorant Infant
  • Weight: Regular
  • Style: None
  • Color: #442854
  • Size: Desktop 16px, Tablet 15px, Phone 14px
  • Line Height: 1.8em

Spacing

Now add some spacing.

  • Top Margin: 0vw

Box Shadow

Lastly, disable the box-shadow.

  • Box Shadow: Disable

Blog Email Text Module

We're now going to move to the right column and develop the email CTA. To begin, insert a Text module into the right column. Select the gray + icon and type Text.

Content

Select Heading 2 and enter some appealing text.

  • Font: H2
  • Text: Subscribe for Deals & Recipes

Heading Text

For the Heading Text, select Center Alignment, choose H2, select Cormorant Infant, and set it to Bold.

  • Text Alignment: Center
  • Heading Text: H2
  • Font: Cormorant Infant
  • Weight: Bold
  • Color: #442854
  • Size: 32px
  • Line Height: 0.95em

Spacing

Lastly, add some bottom margin to the item.

  • Bottom Margin: 10px

Blog Email Optin Module

Now add an email option module to the right column.

Content

Remove the title and body text.

  • Title: None
  • Body Text: None
Add and Style the Blog Email Optin Module

Scroll down to Email Account and add your Service Provider.

Next, scroll to Background and unselect it.

  • Use Background Color: no

Fields

Go to the Design tab and change the Fields Background Color.

  • Background Color: rgba(255,255,255,0)
  • Fields Text Color: #442854

Scroll down to the Font options and make the following changes.

  • Fields Font: Cabin
  • Size: 16px
  • Line Height: 1.8em
  • Fields Rounded Corners: 32px
  • Border Width: 2px
  • Border Color: #442854

Button

Scroll down to Button and select Use Custom Styles for Button.

  • Use Custom Styles for Button: Yes
  • Size: 18px
  • Color: #ffffff
  • Button Background: #442854
  • Border Radius: 50px
  • Font: Cormorant Infant
  • Weight: Bold

let’s add some Button Margin and Padding.

  • Button Top Margin: 20px
  • Top, Bottom Padding: 12px
  • Left, Right Padding: 32px

Add New Row for Blog Listing

Let's add a single column row under the hero section.

Blog Listing Row Settings

Go to the Design tab and adjust the padding.

  • Top Padding: 0px

Blog Module to Your Row

Add a Blog module to your new Row.

Style the Blog Feed

Blog Feed Content

Enter 3 for the Post Count in the Blog module's settings. You can customize the number of posts that appear on the screen using the Post Count option.

A lesser number, such as 3, enables us to focus on the most recent posts while keeping the page manageable. This is an excellent option if you don't update much or wish to keep the page clean. Increasing the number of posts displayed, such as 6-9, is an excellent suggestion if you want to concentrate on the blog feed.

  • Post Count: 3

Input 1 as the offset. This instructs Divi to begin with the second blog post, preventing us from displaying the identical content as the highlighted blog post Row above this one.

  • Post Offset Number: 1

Elements

Now move down to the elements and change the following.

  • Show Featured Image: Yes
  • Date: Yes
  • Categories: Yes
  • Excerpt: Yes
  • Pagination: Yes

Background

Go to Background and set the Grid Tile Background.

  • Grid Tile Background Color: rgba(255,255,255,0)

Layout and Overlay

Then on the Design tab. Maintain the Grid layout. For the featured blog article above this one, we used a full-width layout. For this blog feed, we'll utilize the grid layout, which is the default. Disable the Overlay of the Featured Image.

  • Layout: Grid
  • Featured Image Overlay: Off

Title Text

For the Title Text, select H2 and make some basic changes as follows.

  • Heading Level: H2
  • Font: Cormorant Infant
  • Weight: Bold
  • Color: #442854
  • Size: 20px Desktop, 18px Phone
  • Line Height: 1.1em

Body Text

Scroll to Body Text and choose Cabin.

  • Font: Cabin
  • Color: #442854
  • Line Height: 1.8em

Meta Text

Scroll down to Meta Text and do the adjustment below.

  • Font: Cormorant Infant
  • Weight: Regular
  • Style: None
  • Color: #442854
  • Size: 16px Desktop, 15px Tablet, 14px Phone
  • Line Height: 1.8em

Pagination Text

Now, let’s move to the Pagination Text.

  • Font: Cormorant Infant
  • Weight: Bold
  • Color: #442854

Spacing

Next, go to Spacing and add 0vw Margin to the Top.

  • Top Margin: 0vw

Border

Scroll to Border and enter 0px for all four corners.

  • Rounded Corners: 0px

Box Shadow

Finally, scroll to Box Shadow and disable it.

  • Box Shadow: None

CTA Section to the Blog Page

Next, we’ll create the CTA section of the page. This section includes a fullwidth background image in parallax, contact information, and social follow links.

Add a New Section

Click the blue icon to add a new Regular Section below the page.

  • Section: Regular

Style the CTA Section

Click the gear icon and open the Section’s settings.

Add a background image.

Choose a full-width image from your Media Library.

  • Background: Image
  • Use Parallax Effect: Yes
  • Parallax Method: CSS

Go down to the Admin label and select Footer.

  • Admin Label: Footer

Move to the design tab and add some spacing.

  • Padding: 10vw (Top and Bottom)

New CTA Row

Add a single column row to the section.

  • Row: One Column

Sizing

Navigate to the Design tab in the Row's preferences. Select the Tablet icon from the Max Width drop-down menu and enter 320px. This will be reflected automatically in the Phone's settings. Close the Row configuration.

  • Max Width: 320px Tablet

Title Text Module

Add a text module to introduce CTA.

Title Text Styling

Add your title and change the font to H3.

  • Font: H3
  • Text: Health Starts Here

Heading Text

Go to the Design tab and scroll down to Heading Text.

  • Alignment: Center
  • Heading Text: H3
  • Font: Cormorant Infant
  • Weight: Bold
  • Color: #ffffff
  • Size: 42px Desktop, 20px Tablet, 16px Phone
  • Line Height: 1.1em

Spacing

Finally, scroll to Spacing and add some bottom margin.

  • Bottom Margin: 10px

Address

To display the physical address under CTA, add a text module.

Style the Address

Address Text

Add your address as Paragraph text.

  • Style: Paragraph
  • Text: your address

Paragraph Text

Next, go to Text in the Design tab and change the following settings.

  • Font: Cormorant Infant
  • Weight: Semi Bold
  • Color: #ffffff
  • Size: 28px Desktop, 20px Tablet, 16px Phone
  • Line Height: 1.2em

Social Media Follow Module

The final module is the Social Media Follow module. Add it to the bottom of the Row.

Social Media Follow Module Styling

Go to the Design tab this time and do these changes.

  • Module Alignment: Center
  • Icon Color: #442854
  • Rounded Corner: 23px

Social Networks Icon Styling

Open the settings and add your required social media platforms and add links.

  • Social Network: your choice
  • Account Link URL: your link
  • Background Color: #f9f3fd

And we are done. Save the design and exit the visual builder.

Final Preview

Here is our final design.

Final Thoughts

That concludes our examination of how to create a blog page using Divi. The Divi Builder makes it simple to construct visually appealing layouts, and each module may be utilized in a variety of ways. As demonstrated in this article, it is possible to use many instances of the Blog module on the same page in order to display the blog feed in a variety of ways.