Create Custom Page Layouts Using Slots
The Super Template lets you create custom templates from the CleanSlate admin. It does this using “slots.” A page that uses the Super Template has ten available slots (in the Slots tab in the page properties), each of which can accept a component.
To use this feature, make sure the page you want to configure is using the Super Tempalte. Go into the page properties and select Super Template from the Template dropdown menu and Save your page. Then you can go back to the page properties and visit the Slots tab.
To assign a component to a slot, select the component from the first dropdown menu associated with each slot. When you navigate to your page, you will see the component in your page and you can begin editing content! Each component has some dummy content by default to show you an example of what types of content you should add to your component. Just tweak the existing content or add whatever you want!
You can put as many of the same component on a page that you want (up to 10), and rearrange components in any order you want.
Options for Each Component
Each slot has several configuration options that make the component behave differently. For example, let’s say I want to add a Page Collection component to one of my pages. This component loops through all of your site pages and looks for any page with a designated label, and displays them. By default, it displays them in the order you have them listed in CleanSlate. But let’s say you want to list them alphabetically. No problem. Just look for the “Slot X loop by” dropdown menu and select “Name.”
Below is a list of options for each slot.
| Data Field | Description |
|---|---|
| Slot X (1, 2, ... 10) | Select the name of the component you wish to display. |
| Slot Order | A number designating the order in which you want to show your component. |
| If custom, name of partial | If using a custom partial, enter the name of your custom partial here e.g.
my-custom-partial. |
| Custom Label | If the slot contains a collection component, enter the label you wish to use to pull in content dynamically to the component. |
| Edit Mode Only | Check this box if you want your component to display in Edit Mode only. This is useful for testing content before publishing. Whenever you’re ready to publish, uncheck this box. |
| Is main | Check if you want this component to be the <main> section
of your site (as opposed to <section>. |
| Alignment | Select whether you want the content to content to align to the left, middle, or right (for example, if you’re using a Hero component or an Action Hero Card component). |
| Root Page ID | If you’re using a collection component, you can enter the ID of the parent page you aim to target. This will become the starting point when CleanSlate loops through child pages to display content dynamically in your collection component. |
| Limit | If you are using a collection component, define how many items to display. |
| Randomize? | If you’re using a collection component, check this option if you wish to randomize the order in which your content appears. |
| Slot X Instance | If you are using more than one instance of the same type of component on the same page, you need to define the instance number (1, 2, 3). Instance numbers must be unique if you’re using more than one instance of the same component on your page. |
| Slot X Loop By | If using a collection component, define the order by which the featurettes should be listed (alphabetically, sort order, etc.). |
| Slot Loop Labels Match | If using a collection component, set the criteria that determines whether or not to display each labeled page in the collection (any or all). |
| Slot Loop Order | If using a collection component, define whether the collection items are listed in ascending or descending order. |
| Primary Heading | If using a
Hero component or
Action Hero component, set the top-level heading that should be used
(either <h1></h1> or <h2><h2>. |
| Gallery Loop By | If using a Gallery component, tell it whether to loop by filename or title. |
| Scope | Define whether the component’s content displays only on the current page, or for each matching instance of the component when used throughout the site. |
| Show Hidden | If using a collection component, define whether the content being pulled in displays even if the page it originates from is set to “hidden” in its page properties. |
| Remove Sidebar | If using a Backpage component, removes the sidebar. |
| Remove Subnav | If using a Backpage component, removes the subnav from the sidebar. |
| Reverse Items | Reverses the items in a Featurettes component. |
Using Multiple Instances of the Same Component
Sometimes you want to display multiple instances of the same component on the same page. In order to do this, be sure to set the Slot Instance number for each. Each instance of your component must have a different Instance Number assigned (1, 2, 3, etc.).
Rearranging Components
Sometimes you change your mind about where a component should appear on your page.
No problem. Just change the number in the Sort Order field for the component(s)
you wish to re-order. By default, each slot’s order is a multiple of 10 (the order
for slot 1 is 10, 2 is 20, etc.). This lets you easily re-order your components.
For example, if you have a component in Slot 3, but want it to appear between slots
1 and 2, change the sort order for Slot 3 to 11.
Adding Custom Components
Sometimes you start with a Super Template and realize the available components don’t do exactly what you want. No problem. You can always add custom partials to your theme. You might copy one of our shared partials and tweak it, or create something new from scratch.
Updating Older Themes
If you see any configuration options listed above that aren’t available in your theme, it likely means these options were added after your theme was created. If you want these options, you need to make sure the frontmatter in your Super Template matches the latest version of the Super Template.