Adding custom <head> elements
Web pages have a <head> element that can contain the following child elements:
<link>鈥擯rovides links to external resources, such as CSS files.<meta>鈥擯rovides the page's metadata, such as character set, keywords, and viewport settings.<script>鈥擯rovides behavior, such as displaying a message after the page loads.<style>鈥擯rovides styling, such as fonts, colors, and spacing.
You can create customized child <head> elements, and add them to published assets based on various criteria. Examples include the following:
- If the asset's URL contains the word
evening-edition, add a CSS file that gives a softer color scheme. - If the asset's content type is Gallery, add a JavaScript file that includes zoom in and zoom out behavior.
Caution
Adding incorrect <head> elements can cause your site to malfunction. Ensure you test your custom <head> elements before actually deploying them to a live site.
To add custom head elements to assets:
- Create and debug the custom
<head>elements you want to add. - Click > Admin > Sites & Settings.
- In the Sites widget, select site to which you want to add the custom
<head>elements. - Click , located to the left of , and type
Custom Scripts and Styles. - Click .
- In the Internal Name field, enter a name for this customization.
- Toggle on Disabled to disable this custom head element from use, but not delete the custom header.
- Toggle on Disabled in Preview to disable the custom head element from rendering in the asset preview.
- From the Request Matcher list, select Path Request Matcher.
- Using the HTTP Methods, URL Pattern, and Content Types fields, design criteria that the asset must match to receive the custom
<head>elements. For example, the following criteria match articles whose URLs containevening-edition.
Filter for adding a style or scripting customization - If an asset matches the filter you designed in step 8, and you do not want to add any additional
<head>elements, toggle on Stop Processing. - Configure
<head>elements added to the web page by doing the following:
- Under Elements, click .
- Select one of the available child elements.
- In the subsequent form, enter an Internal Name, and complete the form as necessary.
- Repeat steps a鈥揷 to configure more
<head>elements satisfying this rule.
- Repeat steps 5鈥�10 to design additional rules for adding custom
<head>elements. - Click Save.
See also:
Previous Topic
Configuring a theme's swatch
Next Topic
Using a different version of a theme