Site icon Hip-Hop Website Design and Development

How to Build a Blog Page with Divi’s Blog Module

Pixeldust WordPress Developer

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 Mobile

Creating a New Blog Page

Create New Page

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

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.

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.

Add Hero with Blog Page Title

Style the Hero Section

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

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

Create the Blog Page Title

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

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.

Style the Blog Title Text Module

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

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.

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.

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

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

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.

Open the Row settings by clicking the gear.

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

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.

Content

Under Content, enter 1 for the Post Count.

Elements

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

Layout

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

Title Text

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

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

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.

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.

Spacing

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

Box Shadow

Finally, scroll to Box Shadow and disable it.

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.

Content

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

Heading Text

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

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

Spacing

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

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.

Content

First, delete the Title and Body text.

Scroll down to Email Account and add your Service Provider.

Next, scroll to Background and unselect the Background Color.

Fields

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

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

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

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.

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

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.

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.

Blog Listing Row Settings

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

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.

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.

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.

Elements

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

Background

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

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.

Title Text

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

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

Body Text

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

Set the Line Height to 1.8em.

Meta Text

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

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

Pagination Text

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

Spacing

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

Border

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

Box Shadow

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

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 a New Section

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

Style the CTA Section

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

Background

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

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

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

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

Add a New CTA Row

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

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.

Title Text Module

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

Style the Title Text

Add your title and change the font to Heading 3.

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.

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

Spacing

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

Address Text Module

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

Style the Address Text Module

Address Text

Add your address as Paragraph text.

Paragraph Text

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

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.

Add the Social Media Follow Module

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

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.

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

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.

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.

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.

Blog Page Preview

Here are our results.

Preview Desktop

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.

The post How to Build a Blog Page with Divi’s Blog Module appeared first on Elegant Themes Blog.