Add Component to a Page
In Page Builder, navigate to the page you want to add the component to.
From the Components panel, drag and drop the Page Content > Hero Carousel component into a container on the page.
In the Assign content item window, hover over the data folder in the tree and then click on the + icon
Select the Hero Carousel template to create a datasource, and then type the name for the new content item WITHOUT clicking on the datasource itself. Press ENTER once you have finished typing the datasource name and then click Assign.
The new datasource will appear on the page. To add a slide to it:
click on the component to select it and display the component configuration menu on the right
from the Design tab, expand Manage items and click + Add new > HeroCarouselSlide
Enter a name for the slide and press ENTER. The page will refresh and you will see the slide appear with content placeholders in it.
If you hover over each [No text in field] a tooltip will appear with to indicate the field name. Click on [No text in field] for the title and enter a title for the slide.
Repeat this step for the Overline Text field if it is required.To add a link, click on the [No text in field] next to Link, and fill in the element options on the right.
Each slide in the carousel can either contain an image, or a video.
To add an image to the slide, click on the image placeholder and then select Add from the right-hand panel. Find and select (or upload) the image you want to use from the media library
To add a video to the slide, click on [No text in field] to the right of Video URL and enter the full URL for the video
Repeat steps 5-8 for additional slides you want to add to the component.
Configure the Component
Click on the hero carousel component to select it and display the Hero Carousel configuration options on the right
The table below outlines the configuration and advanced styling options available for the component. Apply these as appropriate.
Configuration Options | Description |
|---|---|
Design Tab | |
| Variant | Default and Narrow |
Is Contained | Tick checkbox to display hero carousel with rounded corners; Or leave unticked to display component full screen width. |
Theme | Select a theme to change the colours of the text |
Automatic transition between slides | By default, if you have more than 1 slide in the carousel, the slides will transition automatically by the number of seconds specified in the Transition Interval in Seconds field. Untick this if you don’t want the slides to auto-transition. The user will still be able to click on the carousel dots to manually transition between slides. |
Top Spacing | Adds extra spacing above the component |
Transition Interval In Sections | Applies if Automatic transition between slides is ticked. 7 seconds is the recommended transition speed. |
Bottom Spacing | Adds extra spacing below the component |
| Content Tab | |
| Content item | Click on the pencil to open the data folder and select a different datasource |
| Badge | To include Flatiron Dragados USA badge or Flatiron Dragados Canada badge. To remove the badge, click on the "..." button on top of the field and select Clear field value |
Delete Slides
To delete a content item:
- Click on the Hero Carousel component on the page to select it
- From the Hero Carousel panel on the right, expand Manage items
- Hover over the slide you want to delete and click on the 3 dots
- Select Delete
Publish the page (Publish item with all subitems)
Reorder Slides
To reorder content items:
- Click on the Hero Carousel component on the page to select it
- From the Hero Carousel panel on the right, expand Manage items
- Click and drag the slides into the order you want them to appear within the carousel
- Publish the page (Publish item with all subitems)