A Dynamic Article Detail page is the layout that displays the full article when clicked from the Dynamic Article Index page. The Index page lists article previews, while the Detail page shows the entire article with text, images, and related data in a consistent design.

Example:
Clicking an article title on the Index page opens the Detail page to show the full article.

Creating a Dynamic Article Details Page

To create a Dynamic Article Details Page in SP Page Builder, follow these steps:

• Navigate to SP Page Builder from your Joomla dashboard
• Go to Pages > Click + Add > Select New Article Page.
• From the submenu, select Detail Page to create an Article Detail page.
• Give your Article Detail page a name and proceed to the next step.

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

Default Article Detail Page Layout

After creating an Article Detail page, a basic layout is automatically generated for you. You can either make quick adjustments to the generated layout or fully customize the page to match your preferences.

Designing the Article Detail Page

The Article Detail Page enables you to create a layout that dynamically adapts to your Joomla article content. While designing your Article Detail page, keep the following factors in mind:

• Unlike the Article Index Page, you do not need to add a Collection addon to fetch article-related fields.
• Use other SP Page Builder addons for static content, such as headings, buttons, and design elements.
• Map your layout using Dynamic Text and Dynamic Media addons, then define the desired source fields.
• For example, to display the full article, add a Dynamic Text addon and set the Field Source to Full Text. 

Learn more about the field source items for the Dynamic Text and Dynamic Media addons.

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.

Linking an Article Detail Page to a Specific Field in the Article Index Page

After creating the Article Detail Page, you need to assign it to a field in the Article Index Page.

1. Open the Article Index Page.
2. Select the addon where you want to link the Article Detail Page. For example, select the Dynamic Text addon where you assigned the Field Source to "Title."
3. In the addon’s General Settings, scroll down to the Link section. 
4. Choose the Page tab and select the Article Detail Page you just created.
5. Hit "Save and Close" once done.