Skip to main content
  • Home
  • Tutorials
  • Using Slots with the Super Template (formerly Super Theme)

Using Slots with the Super Template (formerly Super Theme)

Create Custom Page Layouts Using Slots

The Super Template (formerly the Super Theme) lets you create custom templates from the CleanSlate admin. It does this using “slots.” Each page has ten available slots, each of which can accept a component. To assign a component to a slot, select the component from the dropdown menu associated with each slot. When you navigate to your page, you will see the component in your pae 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 Featurettes 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.
If custom, name of partial If you have a custom component, type it’s path here e.g. components/my-partial.
Is main Check if you want this component to be the <main> section of your site (as opposed to <section>.
Slot alignment Select whether you want the content to content to align to the left, middle, or right (currenly only works with the hero component).
Slot Featurettes Style If you are using a featurettes component, select the style of featurette.
Slot Limit If you are using a featurettes component, define how many to display.
Slot 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. Else the content of the last instance will override those before it.
Slot Loop By If using a featurettes component, define the order by which the featurettes should be listed.
Slot Loop Labels Match If using a featuerttes component, set the criteria that determines whether or not to display each labeled page in the featurette.
Slot Loop Order If using a featurettes component, define whether the featurettes items are listed in ascending or descending order.
Slot Scope Define whether the component’s content displays only on the current page, or for each instance the component is used throughout the site.
Show if hidden If using a featuettes component, define whether the content being pulled in displays even if the page it originates from is set to “hidden” in its page properties.

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, and that they are different.

Note: Even if you are using different versions of the same component (A vs. B, for example), you need to make sure they have different instance numbers. If you don’t, the content in the last component of the same type will overwrite the content in the prior components of the same type. This is because their editable regions are the named the same. We do this to allow for the user to swap out different versions of the same component without losing the content inside.

Rearranging Components

Sometimes you change your mind about where a component should appear on your page. No problem. Just swap them out in the page’s custom data. If you do rearrange components, however, just make sure to update ALL of the component properties. For example, if your component was instance 1 in its original slot, make sure you update the settings of the new slot to reflect these properties.

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.

Just put your new partial in the views/components directory of your theme. You can then type the name of this new partial in the “Custom pattern” data field associated with the slot in which the pattern should appear (this is found in your page’s properties under the Data tab). If there is already a component selected in the “Slot” dropdown menu above, your new pattern will display on your page instead of the selected component.

If you are creating a custom component from scratch, you should insert this code somewhere in your component:

<r:set_var name="componentIsUsed" value="1" />

This will let our standard templates know that you are using a custom component, and therefore not to use the default component for each template.