Learn how Ontraport’s dynamic lists HTML tags give you enhanced flexibility as you craft sophisticated page designs.
Home > Ontraport for no-code web apps > Ontraport Dynamic CMS > Dynamic lists with HTML
Home > Ontraport Dynamic CMS > Dynamic lists with HTML
Dynamic lists with HTML
Course Instructor
- The HTML list tag components
- How to create dynamic designs with HTML, CSS and JavaScript
- How to achieve dynamic list tag use cases like product tabs and image galleries
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
In this video, I'll cover the Dynamic List HTML tag which allows you to create unlimited dynamic content designs with custom code. Using this information you can create any page design using dynamic content. In this video we'll cover the dynamic list HTML HTML tag, adding attributes to your tag and using HTML, CSS and JavaScript to create custom dynamic designs. Let's jump in. First, let's talk about what the HTML list tag can do. The dynamic list HTML tag allows you to create lists of dynamic content using HTML and CSS to customize your design and then use simple JavaScript to add more functionality to your lists. When you use custom code on your dynamic content, you have complete control over every aspect of its design and functionality which means that you can create unique and highly tailored solutions.
For example, if you're creating a pricing page, you can create separate tabs for each product. Or if you're showing off your stellar photography skills, you can create a custom image gallery.
Use the dynamic list HTML tag to wrap the content that you want to repeat on your list.
You've always been able to add custom code to your pages but the dynamic list HTML tag makes it possible to make your custom code dynamic.
It's like adding a custom code version of dynamic blocks which means that you're not just limited to the drag and drop builders functionalities when creating dynamic content.
You can use merge fields inside of your tags to pull in content from your records and you can mix merge fields with static content to customize the information you want to repeat.
For example, if you're creating an employee directory, you'll merge in the employee information while keeping static placeholders such as name and cell phone number.
Now let's talk about adding attributes to your tag. The dynamic list attributes let you customize which records you want to display on your list and how you want to display them. Think of attributes as the conditions and sort order options that you can personalize on your dynamic blocks.
Only the source attribute is required for this tag. To make a list of contact information, use contacts as a source. If you want to list blog information, use blogs as a source. Adding attributes to an HTML list tag is like giving instructions on the specific records you want to see in your list. Create separate to do lists with low, medium, and high priority items and also categorize those to do's by personal and work. Attributes are essential to get specific about the records you want to display on your custom dynamic list. As I mentioned before, the only required attribute is the source of your dynamic list.
Use the sort order attribute to make your data display alphabetically or by dates. You could also use roll up fields to push your popular content up to the top.
One attribute you can use is include if, which allows you to choose which records you want to show. For example, show all of the products whose internal name starts with digital download or show all of the employees with the title manager.
Use and and or operators to use multiple attributes.
Remember that these attributes are just the settings for dynamic blocks translated into HTML.
Last, let's go over how to use HTML and CSS to customize your design and JavaScript to add more functionality to your lists.
HTML is a backbone of a web page. HTML provides a structure and defines the content of a web page such as text, images, links, forms and more. Use HTML to create the basic structure and content of your dynamic list.
HTML tags include an opening tag, content and a closing tag. The opening tag contains the name of the HTML element enclosed in angled brackets.
The closing tag is similar to the opening tag, but it includes a forward slash before the element name. The content is the text or multimedia content the tag defines.
For example, this is a heading, and this is a paragraph. CSS or cascading style sheets customizes the styling and presentation.
It controls the visual appearance of the HTML elements including layout, colors, fonts, spacing and more. Use CSS to control the appearance and layout of your HTML elements. There's no limit of the CSS you can use on your dynamic lists. For example, you can make your dynamic lists mobile responsive by adjusting the style based on your visitors device screen size. Or if your dynamic list contains buttons, customize your buttons background size, text, border, and border radius.
Plus, add hover effects, round corners and box shadows.
JavaScript is a versatile and widely used programming language primarily used for web development.
JavaScript is event driven which means that it responds to user actions or events such as clicks, mouse movements and keyboard inputs and then executes code accordingly.
It makes it ideal for creating responsive and interactive unlimited use cases create extraordinary experiences for your website visitors.
If you'd like to learn more about web development, check out w three schools or your favorite coding resource.
Watch the rest of the dynamic content lessons to learn more about custom objects and dynamic blocks, which are the drag and drop version of dynamic lists.
For example, if you're creating a pricing page, you can create separate tabs for each product. Or if you're showing off your stellar photography skills, you can create a custom image gallery.
Use the dynamic list HTML tag to wrap the content that you want to repeat on your list.
You've always been able to add custom code to your pages but the dynamic list HTML tag makes it possible to make your custom code dynamic.
It's like adding a custom code version of dynamic blocks which means that you're not just limited to the drag and drop builders functionalities when creating dynamic content.
You can use merge fields inside of your tags to pull in content from your records and you can mix merge fields with static content to customize the information you want to repeat.
For example, if you're creating an employee directory, you'll merge in the employee information while keeping static placeholders such as name and cell phone number.
Now let's talk about adding attributes to your tag. The dynamic list attributes let you customize which records you want to display on your list and how you want to display them. Think of attributes as the conditions and sort order options that you can personalize on your dynamic blocks.
Only the source attribute is required for this tag. To make a list of contact information, use contacts as a source. If you want to list blog information, use blogs as a source. Adding attributes to an HTML list tag is like giving instructions on the specific records you want to see in your list. Create separate to do lists with low, medium, and high priority items and also categorize those to do's by personal and work. Attributes are essential to get specific about the records you want to display on your custom dynamic list. As I mentioned before, the only required attribute is the source of your dynamic list.
Use the sort order attribute to make your data display alphabetically or by dates. You could also use roll up fields to push your popular content up to the top.
One attribute you can use is include if, which allows you to choose which records you want to show. For example, show all of the products whose internal name starts with digital download or show all of the employees with the title manager.
Use and and or operators to use multiple attributes.
Remember that these attributes are just the settings for dynamic blocks translated into HTML.
Last, let's go over how to use HTML and CSS to customize your design and JavaScript to add more functionality to your lists.
HTML is a backbone of a web page. HTML provides a structure and defines the content of a web page such as text, images, links, forms and more. Use HTML to create the basic structure and content of your dynamic list.
HTML tags include an opening tag, content and a closing tag. The opening tag contains the name of the HTML element enclosed in angled brackets.
The closing tag is similar to the opening tag, but it includes a forward slash before the element name. The content is the text or multimedia content the tag defines.
For example, this is a heading, and this is a paragraph. CSS or cascading style sheets customizes the styling and presentation.
It controls the visual appearance of the HTML elements including layout, colors, fonts, spacing and more. Use CSS to control the appearance and layout of your HTML elements. There's no limit of the CSS you can use on your dynamic lists. For example, you can make your dynamic lists mobile responsive by adjusting the style based on your visitors device screen size. Or if your dynamic list contains buttons, customize your buttons background size, text, border, and border radius.
Plus, add hover effects, round corners and box shadows.
JavaScript is a versatile and widely used programming language primarily used for web development.
JavaScript is event driven which means that it responds to user actions or events such as clicks, mouse movements and keyboard inputs and then executes code accordingly.
It makes it ideal for creating responsive and interactive unlimited use cases create extraordinary experiences for your website visitors.
If you'd like to learn more about web development, check out w three schools or your favorite coding resource.
Watch the rest of the dynamic content lessons to learn more about custom objects and dynamic blocks, which are the drag and drop version of dynamic lists.
Features
© Ontraport 2024
playlist_add_check
PCI DSS, Level 1
security
Privacy Shield Certified