Simple Hero Sections
On this page:
Introduction
A hero section is a large content block, consisting of a background image, some text and sometimes a call to action. It is also the first thing users see on a page, thus making it perfect to convey any important information you want a user to know, right from the start.
Example Hero Sections
The Simple Hero macro allows you to create a more standout hero section. Customize it with a background color, a background image of your choice, then add a text title, subtitle and buttons to give users engagement and focus to this section.
As an added bonus, the macro integrates with Unsplash, giving you access to over 3 million free high-resolution images you can easily use as a background image.
Here you can see just a few examples of the different ways you can configure a hero section.
How to Insert the Hero Macro
To add the Simple Hero macro to a Confluence page, use the macro insert menu "+" from editor toolbar, and select the Simple Hero.
Alternatively, type '/' in the editor to trigger the macro insert suggestions and type 'scm hero'.
Configuring the Hero Macro
Once the macro is inserted, it will automatically trigger the configuration dialog, allowing you to customize the hero section.
Template Tab
The first screen you'll see in the Configuring dialog is the Template screen. This is where you'll find a collection of pre-made templates. These should give you a quick starting point for various different visuals. Selecting one of the templates will apply the settings for that template, with the results visible in the preview area in the middle.
Content Tab
To customize the content of the Hero section, like text or action buttons, navigate to the Content tab.
The content tab gives you easy access to the things you want to edit the most: the hero text and button text.
Advanced Config Tab
If you want to further customize your Hero section, navigate to the Advanced Config tab, where you can change all the available settings.
The advanced config is split into multiple groups, each of which has its own settings drawer. Click one of the fields to open a drawer and change the relevant settings.
Hero Visuals Settings
The hero visuals drawer allows you to change the visual settings of the Hero Section.
Most of the settings are pretty self-explanatory.
Setting | Description |
|---|---|
Container Height | This allows you to change the height of the Hero section. Use the size controls to make height adjustments. Note that the width is automatically the full width of the page. |
Content Alignment | Decide whether the content of your Hero section (the title, subtitle, and buttons), should be aligned left, center, or right side. You can also set as to whether they should be vertically align towards the top, bottom or middle. |
Background Image | Instead of a simple colored background, your Hero section can also have a background image. Use the Image Picker drawer (see details below) to select an image attached to any page or space, or use an image from Unsplash. |
Background Color | Use the color swatch to change the background color of the hero section. This, however, only applies if no background image is set for the hero section. |
Image Picker
The Image picker drawer allows you to select a background image to be used.
The image picker allows selecting an image from any space, as well as any page within any space thru attachments.
Alternatively, you can use the Unsplash tab to select one of over 3 million free high-resolution images.
If you want to use an image hosted elsewhere, you can also paste the url directly into the image url field within the Link tab.
You can also go to the File Upload tab to upload your image files into attachments and lets you use them later for similar purposes.
Title Text Settings
The Title Text drawer allows you to change the main text (the first line) of the Hero section.
Setting | Description |
|---|---|
Title Text | Allows setting the actual heading text. |
Color | Change the color of the text using the color swatch. |
Font size (px) | Change the size of the heading text. Use the size controls to set the font size. |
Title Styling | Select from the available basic text styles for the title text. |
Subtitle Text Settings
The Subtitle Text drawer allows you to change the second line of text (subtitle).
The settings here are the same as the Title Text above.
Note that the subtitle text is optional, and can be enabled/disabled by using the toggle switch.
Edit Buttons Settings
The Primary and Secondary button drawers allows you to add action buttons to your Hero section.
Note that the buttons are optional, and can be enabled/disabled by using the toggle switch in each drawer.
Setting | Description |
|---|---|
Primary/Secondary Text | Allows setting the actual button text. Note that you can only enter a single line of text. |
Text Color | Allows changing the color of the button text selected from the color swatch. |
Target Link | Buttons are clickable actions, and as such must point somewhere. Here you can set the target link that the button points to. This opens the Target Link Drawer (see details below). |
Background Color | Allows changing the background color of the button using the color swatch. |
Button Size | Allows changing the size of the button from small, to medium, to large, or extra large. |
Button Style | Changes the visual style of the button between a rectangle, a rectangle with rounded corners, a pill, a skewed rectangle, or a skewed pill. |
Link Selector
The Link Selector drawer allows you to pick the target that should be opened whenever the button is clicked.
The target link can be any url on the internet. Simply enter it into the link field and click apply.
Alternatively, you can select an existing Confluence Page from the page tab, or a Confluence Space from the space tab.
How to Edit or Resize the Hero Macro
To edit a Hero section in a page, hover over the hero macro, and then click on the macro handle to reveal the macro configuration toolbar. Finally, click on the edit icon on the toolbar that appears.
This will launch the Configuration dialog, with the Template tab active.
From there, you can change the configuration using the options to see above.