School website service training and support

Divider

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.

Add a component to a page

  • Select Divider Component from the Insert New Component list.

Select divider component

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.

Example of the default divider layout
Image: Example of the default divider layout

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.

Default divider options

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.

Example of the solid background divider layout
Image: Example of the solid background divider layout

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.

Divider with solid background options

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.

Example of the divider with image left or right layout
Image: Example of the divider with image left or right layout

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.

Divider with image options

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.

Example of the divider with menus and links layout
Image: Example of the divider with menus and links layout

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.

Divider with menu and links options

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.

Example of the divider with image background layout
Image: Example of the divider with image background layout

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.

Divider with image background options

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.

Example of the divider with image box layout
Image: Example of the divider with image box layout

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.

Divider with image box options

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.

.

Related content

School website service training and support

General enquiries

  • address 105 Phillip Street
    Parramatta NSW 2150

    telephone -

    email -

    Get directions

CallGet directionsMail

We would like to pay our respects and acknowledge the traditional custodians of the land and also pay respect to Elders both past and present.

Copyright for this website is owned by the State of New South Wales through the Department of Education. For more information go to http://www.dec.nsw.gov.au/footer/copyright.