Skip to main content

Same Page Post Detail

Divi Machine offers a useful feature that allows you to display post details on the same page without reloading. When enabled, clicking a post inside an Archive Loop module will dynamically update a separate area of the page with the selected post’s details.

Post Detail on Same Page as Archive Loop

How to Set It Up​

Step 1: Insert/Edit Archive Loop Module​

Add or edit the Archive Loop module on your page and configure it as needed to display your custom posts.

Post Detail on Same Page Settings

Step 2: Enable Same Page Detail Option​

  1. In the settings of your Archive Loop module.
  2. Scroll down to the Extra Options section.
  3. Enable the toggle for Show Detail in the Same Page.

Step 3: Set the Content Wrapper Selector​

  • In the input field for Content Wrapper Selector, enter a custom class/id (e.g., .detail-page).
  • This class/id will be used to target the section that updates with the clicked post's details.

Step 4: Choose a Detail Layout​

  • Select a layout from the Divi Library that will be used to display the post content in the detail section.
note

Make sure that the layour is built like you would any Loop Layout using the dynamic Divi Machine modules. For more information on building a loop layout, please see the documentation here

Step 5: Add the Wrapper Class to the Target Section​

  1. Select the section, row, or column that should receive the post content when a user clicks a post in the loop.
  2. Go to the Advanced tab.
  3. Under CSS ID & Classes, add the same class you entered as the Content Wrapper Selector (e.g., detail-page) in the CSS Class field.
note

You can add content to the column, row, or section with the selector and it will be replaced with the post detail of the post that is being clicked.

Add Content Wrapper Selector

Step 6: Save and Exit the Visual Builder​

Click Save in the Divi Builder, exit the visual builder, and test the interaction by clicking posts in your loop.