Sélectionner une page

Understanding the “Posts for Current Page” Option Inside the Divi Blog Module


When we think of the Divi Blog module, we usually think of the blog page. However, Divi’s Blog module includes features that can help you build a variety of pages. Posts for Current Page is an option inside the Blog module dynamically displays posts. In this article, we’ll look closely at Posts for Current Page and see what it does and how to use it.

What is the Posts for Current Page Option?

Posts for Current Page is an option inside the Content section of the Blog module. It’s disabled by default. When enabled, a few of the options within the module change.

What is the Posts for Current Page Option

The module normally includes an option to choose the Post Type. This includes Pages, Posts, Media, and Projects. It will also include custom post types if you have any.

It also normally has an option called Included Categories. This gives you a list of your categories so you can select those you want the module to display. This includes All Categories, which will display posts from every category regardless of the category the page is for. Another option is Current Category. This displays posts from the category the user selected.

Enabling Posts for Current Page disables the Post Type and Included Categories options. This allows Divi to dynamically make the selections for you. If you use this with dynamic content, it will display posts from the category that’s selected. This is similar to Current Category, but it’s broader.

What is the Posts for Current Page Option

Posts for Current Page works great with Archive Templates in the Divi Theme Builder. It also works well for templates assigned to specific posts, such as a certain tag.

Using the Posts for Current Page Option with a Blog Template

We’ll build a simple Archive page template that demonstrates how it works. This template will include a title and two blog modules. To create the Archive Page template, go to Divi > Theme Builder in the WordPress dashboard. Select Add New Template.

Using the Posts for Current Page Option with a Blog Template

Assign to All Category Pages

A modal will open with lots of options where the template will be assigned. Under Use On, scroll down to Archive Pages and select All Category Pages. Click Create Template at the bottom of the modal. This will open the editor where we’ll create the template.

Assign to All Category Pages

Create the Category Template

Select Build Custom Body. For reference, I’m using the fonts and colors from the free Category Page Template for Divi’s Blogger Layout Pack and creating a layout from scratch. You can also use it as your template and follow along with the modules I’m adding.
Create the Category Template

Style the Section

First, open the Section’s settings by clicking on the blue gear.

Style the Section

Scroll down to Background and add the color #fbf9f4. Close the Section’s settings.

  • Background Color: #fbf9f4

Style the Section

Add a Row

Click on the green icon and add a one-column Row.

Add a Row

Create a Dynamic Title

Next, add a Text module to the Row.

Create a Dynamic Title

For the Body content, select Use Dynamic Content.

Create a Dynamic Title

This opens a list of options where you can select the dynamic content to display. Select Post Categories.

Create a Dynamic Title

Close the next set of options. We’ll use the default settings.

Create a Dynamic Title

Next, go to the Design tab. Change the Text to Vidaloka and the Color to #161616. Set the Desktop Font Size to 80px and click on the Phone icon to set the Phone Font Size to 60px. Change the Line Height to 1.15em. Close the Text module’s settings.

  • Font: Vidaloka
  • Color: #161616
  • Size: 80px, 60px
  • Line Height: 1.15em

Create a Dynamic Title

Add the First Blog Module

Next, we’ll add the first of two Blog modules. This one will show a featured post, while the others will provide a blog feed based on the page content.

Add the First Blog Module

Select Posts for Current Page

First, enable Posts for Current Content. Enter 1 for the Post Count.

  • Posts for Current Content: Yes
  • Post Count: 1

Select Posts for Current Page

Style the First Blog Module

Elements

Scroll down to Elements and disable Show Pagination. We’ll use this for the second Blog module.

Style the First Blog Module

Background

Scroll down to Background and change the color to rgba(255,255,255,0).

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

Style the First Blog Module

Title Text

Next, go to the Design tab. Change the Layout to Fullwidth. This will work as our featured post in the hero area. Disable the Overlay.

  • Layout: Fullwidth
  • Overlay: Off

Style the First Blog Module

Next, scroll to Title Text. Use Vidaloka for the Font and change the color to #161616. Change the Line Height to 1.4em.

  • Font: Vidaloka
  • Color: #161616
  • Line Height: 1.4em

Style the First Blog Module

Meta Text

Scroll down to Meta Text and change the color to #e2c29d.

Style the First Blog Module

Spacing

Next, go to Spacing and change the Top Margin to 0vw. This keeps the module from overlapping the title.

Style the First Blog Module

Box Shadow

Lastly, go to Box Shadow and disable it. Now, you can close this module and we’ll clone it for the second module.

Style the First Blog Module

Add the Second Blog Module

Now, duplicate the first module and open its settings. This Blog module will display the blog feed. We’ll start with its settings, add a few more, and make some changes.

Add the Second Blog Module

Content

Change the Post Count to 6 and the Post Offset Number to 1.

  • Post Count: 6
  • Post Offset: 1

Add the Second Blog Module

The Post Offset setting tells Divi the number of posts to skip. Starting with the newest post, Divi counts the number of posts and starts at the number of the offset. We need this because we’re already displaying a post in the featured Blog module.

Elements

Scroll down to Elements and enable the Read More Button and Pagination.

  • Read More Button: Yes
  • Pagination: Yes

Add the Second Blog Module

Style the Second Blog Module

Next, go to the Design tab. Since we’ve copied the module that we already styled, we’ll only need to style the elements that the module didn’t use.

Under Layout, change it to Grid.

Style the Second Blog Module

Read More Text

Scroll to the Read More Text settings. Change the Font to Vidaloka and the Style to Underlined.

  • Font: Vidaloka
  • Style: Underlined

Style the Second Blog Module

Change the Text Color to #161616, the Size to 16px, and the Line Height to 1.8em.

  • Text Color: #161616
  • Size: 16px
  • Line Height: 1.8em

Style the Second Blog Module

Pagination Text

Go to the Pagination Text and change the Font to Vidaloka and the Color to #161616.

  • Font: Vidaloka
  • Color: #161616

Style the Second Blog Module

Lastly, scroll to Border and change the Rounded Corners to 0px. Close the module and save your page template.

Style the Second Blog Module

Posts for Current Page Results

Now, when I click on a category, I’ll see an archive page with posts for that page. The Title, featured blog post, and blog feed all display the content dynamically based on the category selected. The second Blog module has an offset of 1.

Posts for Current Page Results

This is my Engineering category. I have two posts in that category.

Posts for Current Page Results

For demonstration, I’ve gone back to my first module and disabled Posts for Current Page, and set it to All Categories. I’ll also increase the size of the Meta Font so it’s easier to see.

Posts for Current Page Results

Now, the first Blog module displays the latest post in All Categories and the second Blog module displays a blog feed dynamically based on the category selected. Notice, the second module still starts at the second post in the Education category because of the offset.

Posts for Current Page Results

I’ve now reinstated Posts for Current Page for the first Blog module, and the page now only shows the content dynamically based on the category selected by the user.

Posts for Current Page Results

Another Example – Posts for Current Page Based on Tags

Let’s look at one more example. I’ve gone back to the template and assigned the dynamic title to Post Tags. When the user clicks on a tag link, the template will now display posts with that tag.

Another Example – Posts Based on Tags

I’ve set the title to dynamically show the tags for this tags archive page. No categories are selected. I’ve removed the featured post to make this easier to see.

Another Example – Posts Based on Tags

I’ve selected the archive page for the Software Engineering tag. This tag is applied to the posts in my Engineering and Data Science categories. The title displays the tag correctly. However, the posts are from all my categories. I want it to only show posts with this tag.

Another Example – Posts Based on Tags

I don’t want to show posts by their category. Instead, I want to show posts by their tags. We can’t choose categories and we can’t choose tags. Posts for Current Page is our best option. It doesn’t care what the categories are. It only cares about the dynamic relationship between the posts. Since this is a tags archive page, it will dynamically look at the tags.

Another Example – Posts Based on Tags

My Tags Archive page now only shows posts with the correct tags.

Another Example – Posts Based on Tags

And, just to demonstrate the point, it isn’t getting the dynamic tag from the title. I’ve removed the title in the example below. Divi gets the dynamic information from the tag archive page itself.

Another Example – Posts Based on Tags

Ending Thoughts

That’s our look at understanding the Posts for Current Page option inside the Divi Blog module. It’s simple to use and gives you more control over archive pages. Since it’s dynamic, this option is much broader than using categories.

We want to hear from you. Do you use Posts for Current Page inside your Divi Blog module? Let us know in the comments.



Source link

Poster le commentaire

Votre adresse e-mail ne sera pas publiée.