Note for adding internal links
When adding internal links to pages on your website, be sure to add .html at the end of the link.
Example: /content/doe/sws/websitetraining/how-to-guides/components/hero-banner.html
Use this guide to add or edit the divider component.
The divider component provides a variety of layouts that you can use to split up content on the home page or landing pages. It's a great way to promote or highlight other pages on your website. You can also link to external websites with some of the layouts.
Templates
This component is available on the following page types:
- Home page
- Content landing
- Event landing
- News landing
Before you start
Navigate to the home page or landing page where you want to add or edit a divider component and you are ready to begin.
Note: This component isn't available on normal content pages.
- Select Divider Component from the Insert New Component list.
Available layouts
The component has the following layout options, usually available in full width (stretching the full width of the page) and container width options (covering just the content container in the middle of the page).
The select style option is how you switch between each layout.
Divider default
The default divider is available in full width or container width options and has a border above and below the box. The description has a character limit of 350.
Options
- Select width: Choose between container width and full width.
- Title: Enter the title for the component.
- Description: Enter the description for the component. You can use up to 350 characters.
Divider solid background
The solid background divider is available in full width or container width options and has solid background colour. The description has a character limit of 350. You can also link to another page.
Options
- Select width: Choose between container width and full width.
- Title: Enter the title for the component.
- Description: Enter the description for the component. You can use up to 350 characters.
- Button link path: Choose a link to a page on your website that will be shown as read more. Or you can enter a link to an external website with the full https:// address. External links will also show an external link icon.
Divider with image (left or right)
The divider with image allows you to have an image with text. The image can be aligned left or right. The background is the normal page colour. The description has a character limit of 350.
Options
- Select width: Choose between container width and full width.
- Title: Enter the title for the component.
- Description: Enter the description for the component. You can use up to 350 characters.
- Image: You can drag and drop the image into the component or click on the link browse your computer for the required image. Alternatively if you already have the image in assets, choose Search through assets.
- Alt text: The alternate text for the image. This is used by screen readers.
- Select image alignment: Choose if you want the image to be aligned left or right.
Divider with menus and links
The divider with menus and links allows you to have a heading with description text up to 350 characters, a main link and a number of supplementary links. This version is available in full width and container width versions and has a solid colour background.
You can have a maximum of 3 menu links.
Options
- Select width: Choose between container width and full width.
- Title: Enter the title for the component.
- Description: Enter the description for the component. You can use up to 350 characters.
- Menu links: You can choose three menu links. This should typically be pages related to the one you've selected for the button link. Give them a link label (which is the title) and then browse for the link on your website. You can also add an external website here by using the full https:// link. Use the reorder icon to arrange the links. To remove a link, click the trash-bin icon.
- Button link path: Choose a link to a page on your website that will be shown as read more. Or you can enter a link to an external website with the full https:// address. External links will also show an external link icon.
Divider with image background
The divider with image background features an image background in either full width or container width versions along with a text box with solid background in front of the image. The description has a character limit of 350.
Options
- Select width: Choose between container width and full width.
- Title: Enter the title for the component.
- Description: Enter the description for the component. You can use up to 350 characters.
- Image: You can drag and drop the image into the component or click on the link browse your computer for the required image. Alternatively if you already have the image in assets, choose search through assets.
- Alt text: The alternate text for the image. This is used by screen readers.
Divider with image box
The divider with image box allows an offset text box to be position against an image box which has either left or right alignment. The description has a character limit of 350.
Options
- Select width: Choose between container width and full width.
- Title: Enter the title for the component.
- Description: Enter the description for the component. You can use up to 350 characters.
- Image: You can drag and drop the image into the component or click on the link browse your computer for the required image. Alternatively if you already have the image in assets, choose search through assets.
- Alt text: The alternate text for the image. This is used by screen readers.
- Select image alignment: Choose if you want the image to be aligned left or right.
- Button link path: Choose a link to a page on your website that will be shown as read more. Or you can enter a link to an external website with the full https:// address. External links will also show an external link icon.