Collection Details pages serve as templates for displaying individual items from your collections, ensuring that each item is presented consistently across your site. This is particularly useful for individual blog posts, portfolio entries, and more.

Creating a Collection Details Page

To create a Collection Index Page in SP Page Builder, follow these steps:

1. Navigate to SP Page Builder.

2. Go to Pages > Click + Add > Select New Dynamic Content Page.

3. Hover over the desired Collection.

4. From the submenu, select Details Page to create a Details page for that collection.

Note: A slug (URL) will be automatically generated for each dynamic page, which can be accessed from the Pages List.

Basics of Dynamic Content Addons

SP Page Builder provides three key Dynamic Content Addons to retrieve data dynamically from a collection:

1. Collection Addon – Displays a list of items from a selected collection.
2. Dynamic Image Addon – Maps image fields dynamically.
3. Dynamic Text Addon – Maps text, links, and other non-image fields dynamically.

For Collection Details Pages:

• Unlike Collection Index Pages, you are not required to place Dynamic Text and Dynamic Image addons inside a Collection addon when designing a Details Page.
• You can freely design your page and map fields directly.
• The Collection Addon is only needed when displaying multi-reference fields or lists within a details page (e.g., related blog posts, sessions, similar products, etc.).

Design the Collection Details Page

The Collection Details Page allows you to create a layout that dynamically adapts to each collection item. Unlike static pages, these pages automatically display data based on the selected collection entry, ensuring efficiency and consistency across your site.

Add Elements

• Drag and drop the necessary addons onto the page to structure your layout.
• Use Dynamic Text and Dynamic Image addons to pull data dynamically from the collection.
• Use other SP Page Builder addons for static content, such as headings, buttons, and design elements.

Bind Dynamic Addons to Collection Fields

Connect each Dynamic Text Addon and Dynamic Image Addon to their respective collection fields.

Example: 

• Connect a Dynamic Image Addon to the Featured Image field of a blog post.
• Connect a Dynamic Text Addon to display the Blog Title and Author Name.

Customize the Layout

• Adjust the layout, styling, and structure to ensure that each details page appears polished and professional.
• Apply spacing, colors, and typography to match your site's design aesthetics.
  

Dynamic Content Display

Each Collection Details Page dynamically pulls in content from the selected collection item, ensuring that each page is unique. This allows you to create one template that automatically applies to all items in the collection without manual duplication.

In the next section, learn about Collection References and how they link related content items.

Add Dynamic SEO

SP Page Builder allows you to optimize the SEO of your Collection Details Pages by setting up dynamic titles and meta descriptions. By using dynamic variables, you can automatically generate SEO metadata that is unique for each item in a collection, improving search engine rankings and social media sharing.

Access SEO Settings

To configure dynamic SEO settings:

1. Navigate to Page Settings in SP Page Builder editor.
2. Click on the SEO tab.
3. Define patterns for SEO titles and meta descriptions using variables.

Variables

Variables enable a dynamic population of SEO data based on the content of each collection item. You can combine static text with variables to write your SEO data.

Example: "Learn from {{Speaker Name}}, a renowned {{Speaker Designation}}, as they share insights on {{Topic Name}}."

Similarly, you can dynamically set the Open Graph title, and description using variables.

Setting Dynamic Open Graph Image

1. Choose Image Source as a Dynamic Content Variable.
2. Select the relevant variable, such as {{Speaker Image}}.