You can create a dynamic page by designing a dynamic template. The template uses the data from your records to create individual pages, one for each record.
Home > Ontraport for no-code web apps > Ontraport Dynamic CMS > Dynamic pages
Home > Ontraport Dynamic CMS > Dynamic pages
Dynamic pages
Course Instructor
- How to make a page for each custom object
- How to link each element to the database field it should pull from
- How to switch between records you’re pulling from and the new page you’re creating to preview how things are looking
- How to color-code records for quick visual reference
Comments
[Block//Author//First Name ##cap_first] [Block//Author//Last Name ##cap_first] on [Block//Date Added %F j, Y g:i a%+0d0h0m]
[Block//Comment]
Leave your comment
14-day free trial. No commitment.
Related resources
[Block//Resource Type]
[Block//Resource Description ##ellipsis(166)]
Transcript
Dynamic pages are web pages that are created using dynamic templates for their design and then filled in with data from records in one of your Ontraport objects.
In this video, I’ll show you exactly how they work by using our previous example – the veterinarian’s pet portal.
Let’s imagine we want to have a customer portal where our clients can log in and see a profile of each of their pets, with all the important information about them. Each of these pages would be a dynamic page, and they would use data from our Ontraport account to fill in a dynamic template that we might call ‘Pet Profile Page’ or something. Let me show you how we’d put this together. It’s actually really simple.
Let’s start by making a page for each pet. You’ll need to make sure you have a custom object called “Pets,” which we already have, because we built it during our custom objects lessons.
I’ve taken a moment to add a few pet records in here, so we have something nice to work with. Here we have Fluffy, Noodles, Rex and Teacup. As you can see here, Fluffy and Noodles are owned by Moira Rose, Rex is Johnny’s and Teacup is David’s.
The first step in your dynamic pages adventure is creating a template. If you haven’t turned on dynamic content yet, you’ll need to do that by going to the “Administration” section of your account, then “Advanced Features.”
Once you do that, you’ll find a new menu item under “Pages” called “Dynamic Templates.”
When you create a new template, you’re going to see a screen here that asks you what object you’re going to use this template for. Select “Pets,” since you’re making pet pages. But just know that in the future, you can select any object in your account for your other projects.
Click “Continue” and then you can either pick a template or start from scratch. You’ll be dropped into the page editor that you’re already familiar with.
You’ll design a page for your pets the same way you would if you were building pages one by one. You’ll drag some images and text, and...I’m going to skip ahead and voila. A nice-looking pet page.
You’ll notice that we didn’t actually change the default text or images! That’s because those are going to get pulled in from the pet records. Each pet record will have its own page using this template that will be filled out with the content from their records.
We’re going to make this happen by linking each element on the page that you want to be dynamic to the database field it should pull from.
When you hover over each of these elements, you’ll see this new icon here that represents the database. Click on that and you’ll see a few items.
You have two choices here because there are actually two sets of data you can pull from. One set is from the pet records that this template is based on. The other is data from the record of the contact who’s visiting this page, which really work just like merge fields you’re used to for adding someone’s name or whatever, but now you can add pictures and a lot more.
But for now, you’re going to pull from the pet records, so click on that. You'll find all the fields that can be used for this element type. Since you want to link an image right now, you’ll see all the image fields. Select the main image to put the pet’s picture here on the page.
And now the magic begins. You can see Fido’s cute face here because that image is getting pulled from Fido’s record.
You’ll also see a new menu item that says “Preview Data.” This allows you to switch between records that you’re pulling from here, so you can see what things are going to look like for each record.
So if you select Fluffy, just like that, the image gets updated to reflect that you’re now looking at the page based on Fluffy’s record. Notice that you can click back and forth between records and also open a window with the record you’re previewing in case you want to make some changes as you build things out.
Okay, now let’s continue linking up elements. You’ll link up the name, the pet type, its birthday, the breed and color. You can also drill into the pet’s related records to add the emergency contact’s name and phone number like this.
And again, you can click through these records and see that now all of these fields are getting updated dynamically from your custom object database. Very cool.
You can even make page and block background images dynamically pulled from each record by clicking on the database icons where you set those images. So, your page background is here and you can make a block background dynamic by clicking here.
This is useful, for example, in a blog design where you want a header image that reflects the post content and the post title on top of it.
All the text-type fields have another feature that’s pretty cool. When you click on the database icon here, you’ll see that there’s a second option for a color field. You’ll find any color fields that you’ve created in your pet record, and selecting one will use that color for the text that’s pulled in.
This is useful for color coding things on your site. Maybe you want to color code your pet records by pet type — maybe dogs are brown and cats are yellow or whatever — so you can have a quick visual reference for what each pet is. This will be really useful in other cases, where color coding things helps add clarity for users.
Next, I’ll talk about a little change you’ll see in the merge field tool. Normally, when you click on this, you’ll see a list of fields from the contacts object, and it’ll merge in data from the visiting contact.
But with dynamic templates, you can also merge in data from our Pet record that the page is built from, so when you click this guy, you’ll see both options to start. If you want to merge fields from the pet’s record, just click on that and you’ll see all those fields.
This is a lot like linking an element to the database that we’ve already talked about. But sometimes, it’s handy to do this with merge fields instead because you want to use data from the record as part of the text in an element instead of replacing the whole thing.
Let’s say you’ve merged in the pet’s name by linking it to a database record. But maybe you want to get cute and say “Hi, my name is Fluffy.” You’d do that by dragging a text field on here, typing out “Hi, my name is” then inserting the pet’s name merge field here. Easy.
The last thing I want to show you about dynamic pages is that the publish dialog is pretty different. Normally you’d see all the URL management stuff and you’d tell the system where to host this page.
But with dynamic pages, that’s done in the “Page Type” settings. So the first time you publish your page, you’re going to have to select which page type this template is for. I’m going to explain all about Page Types in another video, so make sure to watch that one as well. But for now, we’ll just select a page type and click publish.
Then, in the future, when you re-publish this page, you won’t see that dialog again. Instead, it’s just a dialog letting you know that when you click “Publish,” this will become the live version of the template that’s used to create published pages. That way, you can make edits and mess with your page all you like without messing with live pages that are already published. Then just publish the template when you’re ready to update everything live.
And that, my friends, is all there is to know about dynamic pages. You can do some incredible things with these features and I’ll show you all sorts of examples in the “Common Web App Features” section coming up soon.
But first, there’s a lot more to learn about Ontraport’s Dynamic CMS. So let’s talk about dynamic blocks next, which are pretty amazing.
In this video, I’ll show you exactly how they work by using our previous example – the veterinarian’s pet portal.
Let’s imagine we want to have a customer portal where our clients can log in and see a profile of each of their pets, with all the important information about them. Each of these pages would be a dynamic page, and they would use data from our Ontraport account to fill in a dynamic template that we might call ‘Pet Profile Page’ or something. Let me show you how we’d put this together. It’s actually really simple.
Let’s start by making a page for each pet. You’ll need to make sure you have a custom object called “Pets,” which we already have, because we built it during our custom objects lessons.
I’ve taken a moment to add a few pet records in here, so we have something nice to work with. Here we have Fluffy, Noodles, Rex and Teacup. As you can see here, Fluffy and Noodles are owned by Moira Rose, Rex is Johnny’s and Teacup is David’s.
The first step in your dynamic pages adventure is creating a template. If you haven’t turned on dynamic content yet, you’ll need to do that by going to the “Administration” section of your account, then “Advanced Features.”
Once you do that, you’ll find a new menu item under “Pages” called “Dynamic Templates.”
When you create a new template, you’re going to see a screen here that asks you what object you’re going to use this template for. Select “Pets,” since you’re making pet pages. But just know that in the future, you can select any object in your account for your other projects.
Click “Continue” and then you can either pick a template or start from scratch. You’ll be dropped into the page editor that you’re already familiar with.
You’ll design a page for your pets the same way you would if you were building pages one by one. You’ll drag some images and text, and...I’m going to skip ahead and voila. A nice-looking pet page.
You’ll notice that we didn’t actually change the default text or images! That’s because those are going to get pulled in from the pet records. Each pet record will have its own page using this template that will be filled out with the content from their records.
We’re going to make this happen by linking each element on the page that you want to be dynamic to the database field it should pull from.
When you hover over each of these elements, you’ll see this new icon here that represents the database. Click on that and you’ll see a few items.
You have two choices here because there are actually two sets of data you can pull from. One set is from the pet records that this template is based on. The other is data from the record of the contact who’s visiting this page, which really work just like merge fields you’re used to for adding someone’s name or whatever, but now you can add pictures and a lot more.
But for now, you’re going to pull from the pet records, so click on that. You'll find all the fields that can be used for this element type. Since you want to link an image right now, you’ll see all the image fields. Select the main image to put the pet’s picture here on the page.
And now the magic begins. You can see Fido’s cute face here because that image is getting pulled from Fido’s record.
You’ll also see a new menu item that says “Preview Data.” This allows you to switch between records that you’re pulling from here, so you can see what things are going to look like for each record.
So if you select Fluffy, just like that, the image gets updated to reflect that you’re now looking at the page based on Fluffy’s record. Notice that you can click back and forth between records and also open a window with the record you’re previewing in case you want to make some changes as you build things out.
Okay, now let’s continue linking up elements. You’ll link up the name, the pet type, its birthday, the breed and color. You can also drill into the pet’s related records to add the emergency contact’s name and phone number like this.
And again, you can click through these records and see that now all of these fields are getting updated dynamically from your custom object database. Very cool.
You can even make page and block background images dynamically pulled from each record by clicking on the database icons where you set those images. So, your page background is here and you can make a block background dynamic by clicking here.
This is useful, for example, in a blog design where you want a header image that reflects the post content and the post title on top of it.
All the text-type fields have another feature that’s pretty cool. When you click on the database icon here, you’ll see that there’s a second option for a color field. You’ll find any color fields that you’ve created in your pet record, and selecting one will use that color for the text that’s pulled in.
This is useful for color coding things on your site. Maybe you want to color code your pet records by pet type — maybe dogs are brown and cats are yellow or whatever — so you can have a quick visual reference for what each pet is. This will be really useful in other cases, where color coding things helps add clarity for users.
Next, I’ll talk about a little change you’ll see in the merge field tool. Normally, when you click on this, you’ll see a list of fields from the contacts object, and it’ll merge in data from the visiting contact.
But with dynamic templates, you can also merge in data from our Pet record that the page is built from, so when you click this guy, you’ll see both options to start. If you want to merge fields from the pet’s record, just click on that and you’ll see all those fields.
This is a lot like linking an element to the database that we’ve already talked about. But sometimes, it’s handy to do this with merge fields instead because you want to use data from the record as part of the text in an element instead of replacing the whole thing.
Let’s say you’ve merged in the pet’s name by linking it to a database record. But maybe you want to get cute and say “Hi, my name is Fluffy.” You’d do that by dragging a text field on here, typing out “Hi, my name is” then inserting the pet’s name merge field here. Easy.
The last thing I want to show you about dynamic pages is that the publish dialog is pretty different. Normally you’d see all the URL management stuff and you’d tell the system where to host this page.
But with dynamic pages, that’s done in the “Page Type” settings. So the first time you publish your page, you’re going to have to select which page type this template is for. I’m going to explain all about Page Types in another video, so make sure to watch that one as well. But for now, we’ll just select a page type and click publish.
Then, in the future, when you re-publish this page, you won’t see that dialog again. Instead, it’s just a dialog letting you know that when you click “Publish,” this will become the live version of the template that’s used to create published pages. That way, you can make edits and mess with your page all you like without messing with live pages that are already published. Then just publish the template when you’re ready to update everything live.
And that, my friends, is all there is to know about dynamic pages. You can do some incredible things with these features and I’ll show you all sorts of examples in the “Common Web App Features” section coming up soon.
But first, there’s a lot more to learn about Ontraport’s Dynamic CMS. So let’s talk about dynamic blocks next, which are pretty amazing.
Features
© Ontraport 2024
playlist_add_check
PCI DSS, Level 1
security
Privacy Shield Certified