This article looks at the elements that make up the homepage and how they can be customised.
All of the elements are optional, and if not set to display, content from further down the page will move up to fill the space.
Carousel
In the Home template extras, pick whether or not you want a carousel on the homepage. If you pick "No" all feature groups related to the page will appear as panels at the bottom of the page.
Pick "Yes" to enable the carousel. Content for the carousel is taken from the first feature group related to the page:
Each article in the feature group should have a "background" media type image relate to it. These background images are also displayed at the top of the page when you view the article itself.
Customising Button Text
The default "See More" text used on the carousel buttons can be customised using metadata values.
In your subsite settings will be a "Call to action text property" setting. This will have been selected when your theme was installed and shouldn't be changed:
This setting is a metadata property picked from the metadata library.:
The name of the property in your installation could be different. You can add as many values to this property as you like.
To customise the button text, relate a value from this property to the article that appears in the carousel. For example, adding this value to the article in the screenshot above:
Changes the button:
Search Banner
The search can appear in the header, or as a banner. In the article extras, pick where you'd like it to appear:
If you pick "Yes" for the banner option, you can also set the text that appears above the search bar:
If you relate a "background" media type image to the homepage, it will appear behind the search (relating more than one will cycle though the images). If you don't use a background image, a solid colour will be used (usually grey, but this can be changed using your site skin.css).
Picking "No" puts the search in the usual position in the header, as per all the other pages on the site.
Breadcrumb and Body Content
In the article extras, choose whether or not these elements are output on the page. We don't normally recommend showing them on your site homepage, but you may want to if you use the Home template in other areas of your site (as a landing page for example).
Panels
Pick the articles you'd like to use as panels in the article extras:
Articles will display their heading, summary, first related image and first related background image.
If a panel article uses the List template it will display items from the list, as described in the Home Template article.
The "See More" buttons can be customised in the same way as the carousel, described above.
Panel Colours
Panel colours can be customised in a similar way to the button text.
Rather than picking a metadata property in the subsite settings, you pick it in the Home article extras:
In this example the property has the following values, you can create whatever values you like, what they are doesn't matter:
Next, relate one of these values to an article that provides content for the panel. When that article appears on the homepage, the metadata value is output in the HTML as a CSS modifier. In this example, the value "blue" was related to the article, which becomes:
<div class="a-panel a-panel--1322 a-panel--default a-panel a-panel--blue">
<div class="a-panel__content">
</div>
</div>
You can then add CSS to your Custom CSS - Site Skins to provide styling for that new class.
Article Blocks
Related articles appear as blocks beneath the other panels.
Default articles related to the homepage display their title, first related image, and intro/summary text.
Articles using the List template display their heading, then details from the articles in the list.
How to add a Twitter Feed
Rather than add pages from your site, you can embed other content, like a Twitter feed.
Create an article using the Redirect template.
In the body text, add a script inline with your Twitter feed embed script in it:
There's no need to add any other text.
Relate this article to your homepage.
Share this page
