Dynamic Content: Dynamic Pages

Dynamic Content: Dynamic Pages

Dynamic Pages enable the rapid creation and updating of multiple pages using internal or external content collections, significantly speeding up the process.

A Dynamic Page links to a collection and generates multiple pages with unique content but a consistent design. You can create a new Dynamic Page, convert an existing page, or use a predefined Dynamic Page available on the platform.

Dynamic pages that are automatically connected to an Internal Collection with default content through Pages and Popups are available.

Note

• If you change the collection, page widgets will stay connected to field names/labels that exist in both collections. Any fields that don't exist in the new collection will disconnect and must be reconnected. See the section in this article, Change Collections.
• Dynamic pages cannot be password protected pages.
• Dynamic pages are not able to be membership pages
• Site comments are not supported on Dynamic Pages.

The ideal use case for Dynamic Pages is building a website that contains multiple pages with the same structure, but different content. For example:

• Real Estate listings
• Team pages
• Recipe pages
• Landing pages

Warning

If you convert a Dynamic Page to a regular page, all connected widgets will disconnect, requiring you to reconnect them if you convert it back into a Dynamic Page.

How Do Dyanmic Pages Work?

Dynamic Pages work by using the same design to dynamically generate multiple pages using data in a collection. The result is a unique page of content for each row in the dataset.

Create Dynamic Pages



It is important to note that page, row, and data limits are determined by collection type.

By default, a dynamic page is not directly navigable or discoverable on the site. When you are ready to make them available for site visitors, the records need to be added to the site's navigation or a Collection Display Widget must be added to a page.

Step 1: Establish a Dynamic Page

There are 2 options when establishing a dynamic page. You can create a new page or convert an existing page.

Note

• Dynamic Pages appear on in the Pages Panel with a collection icon to indicate it is a Dynamic Page. To see the name of the collection the page is connected to, hover over the icon.
• While you can create or connect a collection when setting up a Dynamic Page, it’s recommended to have a collection prepared in advance. This is unless you plan to use one of the pre-configured Dynamic Pages, which come with a ready-to-go internal collection.
• Dynamic Pages do NOT appear in the site navigation, and thus are hidden by default.

Create a New Page

To create a New Dynamic Page:

1. In the side panel, click Pages, and then click + Add Page.
2. Click Dynamic Pages, select one of the dynamic page options. If you do not have a collection, there is an option to Create Collection (selecting this option will cancel the page creation).
3. Type a Page Name.
4. Select the collection you want to connect to from the drop down.
5. Click + Add Page.

Convert an Existing Page

To Convert an existing page:

1. In the side panel, click Pages, click the Page Settings () icon next to the page you want to convert, and click Convert to Dynamic Page.
2. Select the collection from the drop down. If you do not have a collection, there is an option to Create Collection (selecting this option will cancel converting the page).
3. Click Done.

Step 2: Design the Page and Connect the Data

Once the page is designed, it's time to connect the widgets and elements.

To connect to a widget or canvas element*:

1. Right-click on the widget or element you want to connect, and select Connect to Data.
2. Select the desired data using the drop down (only relevant data options are shown).
3. Select Done.

The Connected Data icon appears on the widget or element indicating that it is connected.

*Section backgrounds can be connected.

*The canvas elements that can be connected are:

• Classic Editor: row and column backgrounds.
• Editor 2.0: section backgrounds.

Note

When connecting the background of a Row or Column (in the classic version of the editor only), there may be up to three collection options:

• A column/field that has a single image (an image field must exist). The multi-square icon () indicates the option is a field/column in the connected collection.
• A column/field that has a collection of images for a background slider (only available for Internal or Airtable collections; an image collection field must exist).
• The entire collection. This option turns the background into a slider that displays an image from each record or row in the collection (this option isn't typically selected; the collection must have an image field/column). When using this option, the background slider will be the same on all records. The multi-image icon indicates the option is for an entire collection.

Additional options may appear as well if the site has business images and/or a native store store.

Inline Binding

Inline binding is the ability to use Dynamic for a specific word or words within supported widgets. The connected text can be designed and linked just like regular text.

Note

The Content Library design overrides the text editor design for connected text.

To use inline binding for text widgets:

1. Type {{{ in the text editor to trigger the Connect Data pop up.
2. Select the label you want connected.
3. Click Save.

While editing, the label appears in the editor within curly brackets (for example,  {{label}}  ). The connected text displays after closing the editor. You can also display the connected text by clicking the Connected Data icon.

Note

Only users with Connected Data in their account see the Connected Data icon, but all users see the label in curly brackets while editing.

Alternatively, you can type the label directly into the text editor surrounded by two curly brackets to connect the text using inline binding. For example,  {{content_library.global}} .

Inline Binding for the Accordion Widget

To use inline binding for the Accordion widget:

1. Add an accordion widget to the desired page.
2. Open the widget's content tab.
3. Select any accordion item.
4. In the description field text box, click the Data Binding button () in the top left of the toolbar.
5. From the connected data popup choose any field you want to connect.

• The chosen field will be added to the description field as an inline binding item - this indicates you can add static text to the description as well and combine it with the dynamic data.

Note

Only the description currently supports inline binding. All other fields (title, image, and button) are static. If not needed, the image and button fields can be hidden.

List Type Widgets

List type widgets (noted below) can only display a full collection rather than data in a single row, with the exception of the image collection field type. The following widgets can be connected to an image collection field type: Photo Gallery, List, Accordion, Tabs, Media Slider. 

List type widgets:

• List
• Photo Gallery
• Media Slider
• Tabs
• Accordion
• Table (display only, direct linking is not available)

Connect SEO Fields and The Header HTML

To connect SEO settings and the header HTML:

• In the side panel, click Pages, then click the settings () icon for the desired dynamic page.
• Click Edit Page SEO.
• Click the Connect Data () icon for the desired field.

Tip

Continue to scroll to reach the Header HTML field.

• Select the desired data using the drop down (only relevant data options are shown).
• Click Done.

Disconnect Data

To disconnect a widget:

• Right-click the widget, and click Change connection.
• In the menu, select None.

For widgets that have content editing menus, if you are already in the widget content editor, you can hover on the blue icon in the top-right corner and click Disconnect.

Disconnecting a widget reverts the text and its style to the previously used style.

To disconnect SEO settings and the header HTML:

• In the side panel, click Pages, then click the settings icon for the desired dynamic page.
• Click Edit Page SEO.
• Click the Connect Data icon for the desired field.

Tip

Continue to scroll to reach the Header HTML field.

• Click into the drop down list and select None.
• Click Done.

Change Collections

In Dynamic Page Settings you can change the collection. When you do this, page widgets will stay connected to field names/labels that exist in both collections. Widgets connected to filed names/labels that don't exist in the new collection, will disconnect.

For example, if you have a collection with fields named name, address and phone and you change to a collection with fields named address and phone, the widgets connected to address and phone will remain connected and display the data from the new collection, while the widget connected to name will be disconnected because it does not exist in the new collection.

To change collections:

1. In the side panel, click Pages, then click the settings () icon for the dynamic page.
2. Click Replace Collection.
3. Click into the drop down list and select the desired collection.

Warning

Page widgets will stay connected to field names/labels that exist in both collections. Any fields that don't exist in the new collection will disconnect and must be reconnected.

Dynamic Page Settings

Dynamic page settings are similar to those of regular pages, with the following differences:

• Additional options:
• Replace Collection.
• Refresh Data. Refreshes the collection's data.
• Go to collection.
• Unavailable options:
• Set as Home Page. Dynamic pages are not able to be set as a homepage.
• Set Page Access. Dynamic pages are not able to be password protected or membership pages.

Dynamic Pages on Multi-Language Sites



The following is important information related to using dynamic pages on multi-language sites:

• Dynamic Pages on multi-language sites are managed from the primary language.
• Creating a dynamic page or converting a regular page to dynamic is only available form the primary language.
• Converting a dynamic page to a regular page from the primary language converts all pages to regular pages on all languages.
• Converting a dynamic page to a regular page from a language other than the primary one only affects the specific language page.

The following are some best practices:

1. Add a dynamic page or convert a page to dynamic on the primary language. After connecting all the widgets, add that page to the other languages by clicking Translate in the settings menu, or by going to the other languages and clicking Translate Another Page on each one.
2. This will add the dynamic page to the other languages, but it will remain connected to the same collection. Click the settings icon and select Replace Collection. This allows you to replace the connected collection but keep all the fields connected.