Skip to end of metadata
Go to start of metadata

You are viewing an old version of this page. View the current version.

Compare with Current View Page History

« Previous Version 5 Next »

How and when to add a contact block into a page, including phone, email and social media details.

Contact component

The Contact component is included on the following content types: Landing page, Event, Grant, News, Profile and Publication.

Displaying it is optional, controlled by a checkbox.

It displays in the sidebar of the page on large screens and on the bottom of the page on smaller screens and mobiles.

The component includes fields for:

  • Contact us heading - default text can be edited (free text field)

  • department (free text field)

  • email address

  • postal and physical addresses

  • phone numbers

  • social media and website links.

image-20240911-072557.png

Add and edit the component

Add contact details

  1. In edit mode for a page, Find the page you'd like to add it to, scroll down to the Sidebar section and then expand the Contact section.

  2. Click Show contact details and then the button Add Contact us.

  3. The title will autofill as Contact us and you can fill in any of the other fields you require. 

  4. To show the address fields, click the Country dropdown option and choose Australia.

  5. To add multiple phone numbers, click the Add phone button for extra text fields. If you're using an 8-digit number, include the area code 03. 

  6. If you add a section and then don't need to use it, click the Remove button to the right. 

  7. To add another Contact us block, click the button Add Contact us and fill out the next round of details in this section.

Social media channels that can be added include:

  • Facebook

  • Instagram

  • LinkedIn

  • X (formerly known as Twitter)

  • YouTube channel

Website links can also be added in this section.

  1. To add social media links or a website address: 

    1. Click the Add social media link button.

    2. Choose the type from the dropdown: this will display the relevant icon in the front-end.

    3. Paste in the full URL, including the https://

    4. In the Link text field, include an @ symbol before the title of the social media account (e.g. @VicGovAu).

Front-end examples

Social media links displaying on the front-end

Social media links displaying on the front-end

  • No labels