Overview video
0:00 Classes, IDs and HTML attributes in content templates
0:05 Most content template items have an Advanced area in their settings, with three fields: Classes, an ID, and HTML Attributes. They don't change the page on their own. Each one adds something to the item's HTML that you can then use.
0:21 Here's a content page built with the Content Template Editor. Every section looks the same, and the button doesn't go anywhere useful yet.
0:30 A class gives an item a label your CSS can target. With one class and a short rule in CSS Override, this section becomes a framed card, and the button gets rounded ends.
0:42 An ID gives one item a unique name. Point a button at the page's address followed by the ID, and clicking it scrolls straight to that section.
0:52 HTML attributes add extra information. Here, the button has an accessibility label for screen readers, and the heading has a data value that CSS shows as a badge.
1:04 It's all set in each item's Configure settings, with a few lines of CSS in CSS Override. The step-by-step guide on this page shows each one.
Step-by-step video
0:00 Use classes, IDs and HTML attributes in content templates
0:05 In this tutorial we'll use the three Advanced fields of a content template item: Classes, the ID, and HTML Attributes. We'll look at a page before, make the changes, and check the result. You'll need to be comfortable with a few lines of CSS.
0:21 This is our example page. The sections all look the same, and the See delivery options button just opens the home page.
0:29 This is the page's HTML for the sections, the delivery heading, and the button. There's no ID, no extra class, and no extra attribute yet.
0:39 In the admin area, go to Content Management, then Content Pages, and edit your page. Click the cog on the item you want to change. Advanced is near the bottom of the Configure window.
0:52 In Classes, type a class name. We'll use sizes-card on the sizes section. Leave out the full stop, and separate several classes with spaces.
1:01 For the delivery section, set Add id html attribute to Yes, and type the ID: delivery. An ID must be used only once on a page, with no spaces and no hash.
1:13 Now open the button. Set its Target URL to the page's full address, followed by a hash and the ID. Use the full address. On its own, hash delivery opens the home page.
1:25 Each button has its own cog. In its Classes, type pill-button.
1:30 Under HTML Attributes, click Add new Attribute, then fill in the name and the value. Here it's aria-label, which tells screen readers what the button does. Don't type quote marks or an equals sign. They're added for you.
1:44 On the delivery heading, add an attribute called data-badge, with the value Updated. Data attributes are your own named values. CSS and analytics tools can read them.
1:55 Click Save and Continue Edit, then Clear cache in the top bar.
2:01 Go to Content Management, then CSS Override. Uploading replaces the whole file, so download the current one, add your rules to the end, and upload it.
2:11 In CSS, a class starts with a full stop. This rule turns any item with the sizes-card class into a framed card.
2:20 An ID starts with a hash. This rule stops the fixed header covering the section after a jump. An attribute goes in square brackets. This one shows the data-badge value as a label.
2:32 Back on the storefront, the sizes section is now a framed card, and the button has rounded ends.
2:39 Click the button, and the page scrolls to the delivery section, with the Updated badge from its data attribute.
2:46 And here's the HTML now: the new class, the ID, the data attribute, and the accessibility label, exactly as we typed them.
2:56 That's it. Classes let you style an item, an ID lets you link straight to it, and attributes add extra information. If something doesn't show, check the spelling, save the page, and clear the cache.
No lines in the transcript match your search.