Usually, every layout pack that comes out on our blog includes a blog layout, which helps you get your blog ready in no time. But, have you ever wanted to see how to build one of those blog pages yourself? In this article, we’ll use one of those blog layouts to see how to build a blog page with Divi’s blog module. We’ll go step-by-step through every setting.

Let’s get started!

Blog Page Preview

First, let’s look at what we’re building.

Preview Desktop

Preview Desktop

Preview Mobile

Preview Mobile

Creating a New Blog Page

Create New Page

First, we’ll create our page. In the WordPress dashboard, select Pages > Add New.

Create New Page

Give the page a title that makes sense to you. I’m using the name of the page from the layout pack, which is Acai Blog Page. Select any page attributes you want in the right sidebar. I’m leaving the attributes at their defaults.

  • Page Title: Acai Blog Page

Create New Page

Switch Over to Divi Builder

Next, it’s time to switch to the Divi Builder. Click the purple button in the center of the page: Use Divi Builder. This will redirect you to the front end with the Divi Builder active, so we can start building the page.

Switch Over to Divi Builder

Add Hero with Blog Page Title

Style the Hero Section

We’ll start with the first section. Open the section’s settings.

Style the Hero Section

Scroll down to Background and change the color to #f9f3fd. Enter Blog as the Admin Label. Close the Section’s settings.

  • Background: #f9f3fd
  • Admin Label: Blog

Style the Hero Section

Create the Blog Page Title

Next, we’ll add a Row for the title. Select the green icon and choose the single-column Row.

Create the Blog Page Title

Next, add a Text module to the Row. If the modal doesn’t open when you add the Row, select the Gray plus icon and search for Text.

Create the Blog Page Title

Style the Blog Title Text Module

Open the Text module settings and select Heading 1. Add the title Our Blog.

  • Font: Heading 1
  • Text: Our Blog

Style the Blog Title Text Module

Next, go to the Design tab and set the Alignment to Center. For H1 Heading Text, choose Cormorant Infant for the Font and make it Bold.

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

Style the Blog Title Text Module

Set the Color to #442854, the Size to 130px (this is for the Desktop, we’ll change the tablet and phone in a minute), and set the Line Hight to 0.8em.

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

Style the Blog Title Text Module

Hover over the Heading Text Size options and select the screen icon. Choose the Tablet icon and set the Size to 60px.

  • Tablet Text Size: 60px

Style the Blog Title Text Module

Lastly, select the Phone icon and set the Size to 40px.

  • Phone: 40px

Style the Blog Title Text Module

Create the Blog Page Latest Post and CTA

Our hero section includes the latest post and an email optin. Add a new Row under our first Row and select the Column design with 2/3 on the left and 1/3 on the right.

Create the Blog Page Latest Post and CTA

Open the Row settings by clicking the gear.

Create the Blog Page Latest Post and CTA

Select the Design tab, scroll down to Spacing, and add 0px to the Bottom Padding. Close the settings.

  • Bottom Padding: 0px

Create the Blog Page Latest Post and CTA

Add and Style the Featured Blog Post Module

Next, we’ll add a Blog module. This will contain our latest post. Click the gray plus icon in the left column of our new Row and add the Blog module.

Add and Style the Featured Blog Post Module

Content

Under Content, enter 1 for the Post Count.

  • Post Count: 1

Add and Style the Featured Blog Post Module

Elements

Scroll down to Elements and uncheck Author and Pagination. We’ll leave the rest at their defaults.

  • Show Author: No
  • Show Pagination: No

Add and Style the Featured Blog Post Module

Layout

Next, select the Design tab and choose Fullwidth for the Layout and disable the Featured Image Overlay.

  • Layout: Fullwidth
  • Featured Image Overlay: Off

Add and Style the Featured Blog Post Module

Title Text

Scroll down to Title Text. Select H2 and choose Cormorant Infant. Select Bold and change the color to #442854.

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

Add and Style the Featured Blog Post Module

Set the Desktop Font Size to 30px, the Tablet to 20px, and the Phone to 18px. Change the Line Height to 1.1em.

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

Add and Style the Featured Blog Post Module

Body Text

Next, scroll to Body Text. Choose Cabin for the font, change the color to #442854, and change the Line Height to 1.8em.

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

Add and Style the Featured Blog Post Module

Meta Text

Next, scroll to Meta Text. Change the font to Cormorant Infant, set the Weight to Regular, remove the TT styling, and set the color to #442854. For the Size, set the Desktop to 16px, Tablet to 15px, and Phone to 14px. Change the Line Height to 1.8em.

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

Add and Style the Featured Blog Post Module

Spacing

Next, scroll down to Spacing and change the Top Margin to 0vw.

  • Top Margin: 0vw

Add and Style the Featured Blog Post Module

Box Shadow

Finally, scroll to Box Shadow and disable it.

  • Box Shadow: Disable

Add and Style the Featured Blog Post Module

Add and Style the Blog Email Text Module

Now, we’ll move on to the right column and create the email CTA. First, add a Text module to the right column. Click the gray plus icon and search for Text.

Add and Style the Blog Email Text Module

Content

Select Heading 2 and enter the text Subscribe for Deals & Recipes.

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

Add and Style the Blog Email Text Module

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

Add and Style the Blog Email Text Module

Change the Color to #442854, the Size to 32px, and the Line Height to 0.95em.

  • Color: #442854
  • Size: 32px
  • Line Height: 0.95em

Add and Style the Blog Email Text Module

Spacing

Finally, scroll down to Spacing and add 10px to the Bottom Margin. Close the Text module settings.

  • Bottom Margin: 10px

Add and Style the Blog Email Text Module

Add and Style the Blog Email Optin Module

Next, we’ll build the email form. Add an Email Optin module under the Text module in the right column.

Add and Style the Blog Email Optin Module

Content

First, delete 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.

Add and Style the Blog Email Optin Module

Next, scroll to Background and unselect the Background Color.

  • Use Background Color: no

Add and Style the Blog Email Optin Module

Fields

Go to the Design tab and change the Fields Background Color to rgba(255,255,255,0) and the Text color to #442854.

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

Add and Style the Blog Email Optin Module

Scroll down to the Font options and change the font to Cabin, the Size to 16px, and the Line Height to 1.8em.

  • Fields Font: Cabin
  • Size: 16px
  • Line Height: 1.8em

Add and Style the Blog Email Optin Module

Next, adjust the Fields Rounded Corner to 32px, the Border Width to 2px, and change the Border Color to #442854.

  • Fields Rounded Corners: 32px
  • Border Width: 2px
  • Border Color: #442854

Add and Style the Blog Email Optin Module

Button

Scroll down to Button and select Use Custom Styles for Button. Change the size to 18ps, the Button Color to white, and the Button Background Color to #442854.

  • Use Custom Styles for Button: Yes
  • Size: 18px
  • Color: #ffffff
  • Button Background: #442854

Add and Style the Blog Email Optin Module

Change the Border Radius to 50px, the font to Cormorant Infant, and make the Weight Bold.

  • Border Radius: 50px
  • Font: Cormorant Infant
  • Weight: Bold

Add and Style the Blog Email Optin Module

Lastly, let’s add some Button Margin and Padding. Enter 20px for the Top Margin, 12px for the Top and Bottom Padding, and 32px for the Left and Right Padding. Close the Email Optin settings.

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

Add and Style the Blog Email Optin Module

Add New Row for the Blog Page Blog Listing

Now, we’ll build the Blog Listing for the blog page. First, add a new single-column Row under our Hero Row.

Add New Row for the Blog Listing

Blog Listing Row Settings

Go to the Design tab and add 0px to the Top Padding. Close the Row settings.

  • Top Padding: 0px

Add New Row for the Blog Listing

Add a Blog Module to Your Row

Add a Blog module to your new Row by clicking the gray plus icon and clicking on Blog.

Add a Blog Module to Your Row

Style the Blog Feed

Let’s style the feed for the Blog page.

Blog Feed Content

Open the Blog module’s settings and enter 3 for the Post Count. The Post Count allows you to choose the number of posts that displays on the screen.

A lower number, such as 3, allows us to focus on the last few posts and keeps the page smaller. This is a good choice if you don’t post often, or you want to keep the page cleaner. Showing more posts, such as 6-9, is a good idea if you want to focus on the blog feed.

  • Post Count: 3

Style the Blog Feed

Enter 1 for the offset. This tells Divi to start at the second blog post, which keeps us from displaying the same post that’s already displayed in the featured blog post Row above this one.

  • Post Offset Number: 1

Style the Blog Feed

Elements

Scroll down to Elements. Enable the Featured Image, Date, Categories Excerpt, and Pagination. Disable the rest.

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

Style the Blog Feed

Background

Go to Background and set the Grid Tile Background Color to rgba(255,255,255,0)

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

Style the Blog Feed

Layout and Overlay

Next, go to the Design tab. Leave the Layout set to Grid. We chose the fullwidth layout for the featured blog post above this one. We’ll use the grid layout for this blog feed, which is the default option. Disable the Featured Image Overlay.

  • Layout: Grid
  • Featured Image Overlay: Off

Style the Blog Feed

Title Text

For the Title Text, select H2. Choose Cormorant Infant, set it to Bold, and enter #442854 for the Color.

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

Style the Blog Feed

Choose 20px for the Desktop Text Size. Select the Phone icon and set it to 18px. Set the Line Height to 1.1em.

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

Style the Blog Feed

Body Text

Scroll to Body Text and choose Cabin. Set the Color to #442854.

  • Font: Cabin
  • Color: #442854

Style the Blog Feed

Set the Line Height to 1.8em.

  • Line Height: 1.8em

Style the Blog Feed

Meta Text

Scroll down to Meta Text and choose Cormorant Infant. Set the Weight to Regular, Style to none, and Color to #442854.

  • Font: Cormorant Infant
  • Weight: Regular
  • Style: None
  • Color: #442854

Style the Blog Feed

Set the Desktop Size to 16px, the Tablet to 15px, and the Phone 14px. Change the Line Height to 1.8em.

  • Size: 16px Desktop, 15px Tablet, 14px Phone
  • Line Height: 1.8em

Style the Blog Feed

Pagination Text

Now, let’s move to the Pagination Text. For the Font, choose Cormorant Infant, select Bold, and change the color to #442854.

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

Style the Blog Feed

Spacing

Next, we’ll go to Spacing and add 0vw Margin to the Top. This keeps our module from overlapping the previous module.

  • Top Margin: 0vw

Style the Blog Feed

Border

Scroll to Border and enter 0px for all four corners. This gives us our square shape for the card.

  • Rounded Corners: 0px

Style the Blog Feed

Box Shadow

Finally, scroll to Box Shadow and disable it. Close the Blog settings. The blog section is finished.

  • Box Shadow: None

Style the Blog Feed

Add New 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 New CTA Section

Add a New Section

Click the blue icon to add a new Regular Section at the bottom of the page.

  • Section: Regular

Add a New Section

Style the CTA Section

Open the Section’s settings by clicking on its gear icon.

Style the CTA Section

Background

Scroll to Background and choose the Image tab. Click the gray icon labeled Add Background Image.

Style the CTA Section

Choose a full-width image from your Media Library. Select Use Parallax Effect and then choose CSS for the Parallax Method.

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

Style the CTA Section

Scroll down to Admin Label and enter Footer into the field. This will help you keep track of the sections.

  • Admin Label: Footer

Style the CTA Section

Next, go to the Design tab. Scroll to Spacing and add 10vw to the Top and Bottom Padding. Close the Section settings.

  • Padding: 10vw (Top and Bottom)

Style the CTA Section

Add a New CTA Row

Click on the green plus icon and add a single-column Row for our content.

  • Row: One Column

Add a New CTA Row

Sizing

Open the Row’s settings and go to the Design tab. Under Sizing, select the Tablet icon under Max Width and enter 320px. This will automatically reflect in the Phone settings. Close the Row settings.

  • Max Width: 320px Tablet

Add a New CTA Row

Title Text Module

Our CTA is introduced with a title. To create this, add a Text module to the Row.

Title Text Module

Style the Title Text

Add your title and change the font to Heading 3.

  • Font: H3
  • Text: Health Starts Here

Style the Title Text

Heading Text

Go to the Design tab and scroll down to Heading Text. Choose center for the Alignment, select H3, choose Cormorant Infant, set it to Bold, and choose white for the Color.

  • Alignment: Center
  • Heading Text: H3
  • Font: Cormorant Infant
  • Weight: Bold
  • Color: #ffffff

Style the Title Text

Change the Desktop Size to 42px, the Tablet Size to 20px, and the Phone Size to 16px. Select 1.1em for the Line Height.

  • Size: 42px Desktop, 20px Tablet, 16px Phone
  • Line Height: 1.1em

Style the Title Text

Spacing

Finally, scroll to Spacing and add 10px to the Bottom Margin. Close the module’s settings.

  • Bottom Margin: 10px

Style the Title Text

Address Text Module

Add another Text module under the CTA Title for your physical address.

Address Text Module

Style the Address Text Module

Address Text

Add your address as Paragraph text.

  • Style: Paragraph
  • Text: your address

Style the Address Text Module

Paragraph Text

Next, go to Text in the Design tab and choose Cormorant Infant, semi bold, and set it to white.

  • Font: Cormorant Infant
  • Weight: Semi Bold
  • Color: #ffffff

Style the Address Text Module

For the Size, set the Desktop to 28px, Tablet to 20px, and Phone to 16px. Change the Line Height to 1.2em and close the module’s settings.

  • Size: 28px Desktop, 20px Tablet, 16px Phone
  • Line Height: 1.2em

Style the Address Text Module

Add the Social Media Follow Module

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

Add the Social Media Follow Module

Style The Social Media Follow Module

We’ll start with the Design tab this time. Select Center for the Module Alignment and change the Icon Color to #442854.

  • Module Alignment: Center
  • Icon Color: #442854

Style The Social Media Follow Module

Scroll to Border and add 23px for the Rounded Corners.

  • Rounded Corner: 23px

Style The Social Media Follow Module

Add and Style Your Social Networks

Now, go back to the Content tab and add all the social networks you want to include. Click the gray plus icon. To style them, select the gear.

Add and Style Your Social Networks

Open the settings for each of your Social Networks, choose the network, and add the link to your account. Set the Background Color to #f9f3fd. Close the submodule’s settings.

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

Add and Style Your Social Networks

Save the Blog Page & Exit the Visual Builder

Finally, save the page in the lower right corner and select Exit Visual Builder at the top of the page. You’re ready to view your work.

Save Page & Exit Visual Builder

Blog Page Preview

Here are our results.

Preview Desktop

Preview Desktop

Preview Mobile

Preview Mobile

Ending Thoughts

That’s our look at how to build a blog page with Divi. The Divi Builder makes it easy to create interesting layouts and there are several ways each of the modules can be used. As this tutorial explored, it’s possible to use multiple versions of the Blog module on the same page to display the blog feed in different ways.

We want to hear from you. Have you built your own blog page with Divi? Let us know about your experience in the comments.

Leave a Reply

Your email address will not be published.