Dynamic Pages: Creating Dynamic Pages

In this document, we’ll take a detailed look at dynamic pages, and discuss how to create them, how to navigate to them, how to connect widgets to collections, and more.

Preview our Heights template, using dynamic pages and widgets throughout: https://demo.wocode.com/image-mask-widget

What is a Dynamic Page, Exactly?

Before getting started, let’s discuss exactly what a dynamic page actually is. Dynamic pages only exist on the site “backend.” This means that when you create a new dynamic page (or convert an older page into a dynamic page), that page will be visible in your list of pages in the builder, but it will never be a page that you could navigate to on a published site.

By creating a dynamic page, you are essentially creating a template to display all of the data from a dataset (your Google Sheets, Airtables, etc.). Dynamic pages generate an unlimited number of published pages that will exist on the site’s “frontend” – the published site visible to site visitors. The number of public pages available is determined entirely by the rows in the spreadsheets that contain your data.

For example, in a real estate listing spreadsheet that contains house prices, addresses and descriptions, each row of that spreadsheet will generate it’s own page. While the actual dynamic page you create in the builder will only be seen in the builder backend, pages generated by the dynamic page will never be seen in the backend – they will only exist as pages on the published site. If you’ve used the Without Code builder’s blog, the dynamic pages system operates in a similar manner, creating a basic layout that is populated by data entered elsewhere.

A dynamic page will always connect to a single dataset. Within the builder, all of the elements on the page – text, images, galleries, etc. will be capable of linking to data in your spreadsheet.

Creating a New Dynamic Page

  • Creating a new dynamic page is no different than creating any other new page on your site. Click Pages in the side menu, then New Page.
  • A new window will appear with several page type options. Select Dynamic Page.
  • Right off the bat, you are given the option to link this page to a collection. If you haven’t already, create a collection to link your dynamic page to.
  • Once you’ve linked the page to a collection, almost any element on the page can by connected to data fields within the linked connection.

Convert an Existing Page to a Dynamic Page

Many users will find that it’s more effective to convert an existing page to a dynamic page. This allows you to utilize existing page layouts. This method applies all of the functionality available to existing pages, so there is no real benefit of creating a new page over converting an old page.

  • Click Pages in the side menu.
  • Click the gear icon for any page.
  • Select “Convert to Dynamic Page.”
  • Similar to the steps above, you will be presented with a dropdown list of your collections.
  • Link the page to a collection.

Connecting Widgets

Regardless of whether you’ve created a new dynamic page, or have converted an existing page to be a dynamic page, you will use widgets to pull in content from your dataset. Most widgets can be connected to collections including Text, Large Title, Images and Buttons. Let’s take a look at the dynamic page from our Heights template; the purpose of this page is to generate individual real estate listing pages so we will need elements like:

  • House title
  • Price
  • Description
  • Image gallery
  • Agent
  • Contact information

All of these elements can be linked to a collection. When the page was built, it was connected to our Airtable titled “Listings.” Note that a dynamic page can only be linked to a single collection. The spreadsheet associated with the collection should contain all the data you will need for the entire page. In the steps below, we’ll give a few examples of connecting widgets to collections. If you’d like to first have a peek at the final product, here’s the finished version of the page we’re connecting in the steps below: http://heights.sitemodify.com/single-property/Modern_Beach_House

  • Let’s begin by connecting our main house title to the correct collection field. In this particular case, we built the page structure, then converted the page to dynamic. This means we’ll be connecting existing widgets such as this one, a Large Title widget.
  • Click on the widget.
  • Click the icon that looks like 2 interlocking rings. This icon always represents a connection to a collection.
  • This will open a new window with a dropdown where you can select the correct connection field. Note that all of the connection field options are from the same collection. In this case, we will select the collection field: listing_title.

Now let’s briefly discuss a useful tool for quickly connecting text-based widgets such as the Large Title and Text widgets. Rather than clicking on the Connected Data icon (2 interlocking rings), you can simply type {{{ in the text field.Typing these characters triggers the Connected Data dialog where you can choose to connect to a collection. This process is a bit quicker when working with text-based widgets.

  • Now that we’ve connected the Large Title widget with the listing_title collection field, the title text will instantly be updated with the first listing title from our Airtable. Note in the image below that the title changed to “Modern Beach House”:
  • This data was pulled from our Airtable:
  • This process can be repeated for all text widgets. Next, we’ll connect the image gallery.
  • Click on the Gallery widget.
  • Click the gear icon.
  • Select the “Connect to Data” option.
  • We will select the “gallery” collection field, since this is what the Airtable column that contain the images was named.
  • Now that we’ve connected the house title, price, short description, address and image gallery to the correct Listings collection fields, these elements are connected to our dataset, and pull in the data correctly:

To learn more about when to use connected widgets and when to use dynamic pages, see our Dynamic Pages – Connected Widgets vs Dynamic Pages document.

Generating Live Pages From a Dynamic Page

As mentioned previously, a dynamic page cannot be visited on a published site. However, dynamic pages use information from your datasets to generate live pages on the site frontend.

Let’s take a look at how this happens. Your dynamic page is linked to a collection. That collection is linked to a dataset such as a Google Sheet or an Airtable. The information in the dataset will populate elements on the pages generated on the site frontend. Each spreadsheet row in a dataset generates it’s own live page.

Take a look at the spreadsheet below. This is an Airtable we use in our Heights template. There are 8 rows. Each row generates it’s own live page. This spreadsheet will result in 8 live pages, since there are 8 rows.

Managing Spreadsheets

As mentioned in our Dynamic Pages – Creating and Managing Collections document, you will see that collections are always linked to datasets like Google Sheets or Airtable. These platforms use spreadsheet layouts, similar to Microsoft Excel. When you link a Google Sheet or Airtable to a collection, columns in the spreadsheet will be pulled into the collection and listed as collection fields.

There are no rules or limitations on how you build your spreadsheet. Just keep in mind that columns represent collection fields and rows result in individual live pages.

Using Page_Item_URL

You may notice that the first column in our Airtable is titled “page_item_url.” This has an important purpose. Page_item_url applies the URL name to the page that’s generated from that row. Notice that first row’s page_item_url is Modern_Luxury_Townhouse. This will result in a URL like www.yourdomain.com/Modern_Luxury_Townhouse. Use page_item_url’s to give names to your pages that make sense, and are applicable to the page content. This will contribute to good SEO practices.

How to Navigate to Generated Pages

You may be wondering how to navigate to live pages generated by dynamic pages. You can always grab the URL to a generated page and use it as a link, button, etc. However, you will likely find it easiest to use widgets such as Galleries, Lists or Sliders to navigate to generated pages. Let’s take a look at our Heights template. On the Properties page, we use a Gallery widget to display the various imaginary homes for sale.
If we open the Gallery widget options, we can connect the Link field to our dynamic page for single property listings. This way, when a site visitor clicks on any image or element in the gallery, they will be linked to the proper page generated from the dynamic page template.

A Few Final Notes

  • Dynamic pages should only be used when you intend to generate multiple pages from the dynamic page.
  • Think of dynamic pages as page layout templates, similar to the main layout in the blog.
  • Dynamic pages must be linked to a collection.
  • Dynamic pages will be noted with a dynamic pages icon in the pages menu of the builder.
  • Standard widgets like Text and Large Title can only link to collections when used on dynamic pages. While widgets such as Galleries, Lists and Sliders can be connected to collections on standard pages; only dynamic pages allow other widgets to connect to collections.