How the widgets work

Get ready for some scrolling. This page has quite a few of the different widgets that are available for this website in it. Descriptions included when/where appropriate.

The list below includes the widgets you're most likely going to use on this website. For an explanation on how widgets should be used on any page, feel free to refer to the appropriate section in the Learning page of the Mater intranet.

This is the Accordion widget

The text you're reading is actually in a widget that's inside the accordion widget. The accordion widget comes empty by default. This allows you to add almost any kind of existing widget to an accordion.

This text widget is the Mater Editable Content widget.

Click me to learn more about this widget's setup

Centred copy

This widget is called Centred copy. The text itself isn't sentred, but the title and body copy are collectively centred on the page. The body copy—that would be these words you're currently reading—are added in the widget's Configure section. From there you can still style content like you would in most other text areas.

Stylish text!

Content panel

This widget is called a Content panel. All of the text is added/edited in the widget's Configure section. From there you can add/style text as you would elsewhere.

Content panel widgets also allow you to generate a stylised link to a web page of your liking. If you don't need a stylised link, leave the CTA Link and CTA Text fields empty.

You can choose 2 or 3 panels

The Content panel widget loads by default with 2 panels. In the Configure section you can change that to 3 panels.

This panel is using the CTA Link feature that is mentioned, but not used, in the first panel.

The Jason Show

Alert Strip

This widget is for small announcements that link somewhere.

I'm clickable!

Custom 50/50 widget

The Custom 50/50 widget may load looking empty when first added. If that happens, go to the Configure screen and make sure Widget Container is not empty. It needs to say Custom 50/50 Widget

In the Configure screen you can also add your image or video, widget title and a CTA button. The widget has a left and a right configuration. This is so you can build a page with multiple 50/50s. Always alternate between left and right when stacking these widgets.

I'm a button!

Custom 50/50 widget (Right)

The Custom 50/50 widget can also include a video. The video height will be determined by the amount of text placed in this panel.

The other difference is that this version of the widget aligns the text to the right. The first Custom 50/50 widget on this page aligns the text to the left. 

This change automgacially chenges the background colour behind the text.

Time to go!

Mater Giving Day, Wednesday 29 June, is the day that can make a big difference to the lives of many. Last year, thanks to generous supporters, Mater Giving Day raised nearly $1 million to help continue the delivery of critical and life-saving medical equipment, research, education and health care to our community. Dig deep or just give what you can. Let’s make good things happen!

This widget—Mater Editable Content—is your most basic text on a page widget. This widget's content will run the full width of the page—excluding intended white space. Content added to this widget can be styled and include embedded images if need be.

This is also the same widget used inside accordions as seen at the top of this page.

This widget is ideal for larger amounts of text. Something I'm not prepared to write for this example. But imagine paragraphs of awesome in this space.

The widget below—Specialist Search Strip—prefills the page name into the middle content field. This widget would be used on a hospital page and be used to link to the specialist summary page for that facility. For example, if this page was called Mater Private Hospital Brisbane, the widget below would say To find specialists at Mater Private Hospital Brisbane ...

Specialist Search Strip

If I wanted to link to specialists, I'd use this widget

Find out more

The Custom Editable Text widget—the widget that this text is in—is very similar to the Mater editable text widget. This widget can also be used inside accordions.

Services Panel Repeater

This widget should be used on hospital pages. The services displayed are all that have already been assigned to the hospital selected in this widget's Category name field which can be found in the widget's Configure window.

All services

The widget below is the Services Listing widget. When adding this widget, you select the Category name for the hospital you need to display the services for. The widget below is using the services listing for Mater Private Hospital Brisbane.

Facilities Panel Repeater

This widget should be used on hospital pages. The facilities displayed are all that have already been assigned to the hospital selected in this widget's Category name field which can be found in the widget's Configure window.

All Facilities


The problem with quotes found on the Internet is that they are often not true.
Abraham Lincoln  
The widget above this one is the navy version of the widget you're currently reading. It's called the Mater Quote Panel. It can include a link (like the widget above this one), but it doesn't have to (like this one).
Jason's Mum's son

You can also include quotes within text by using the Inline Quotation formatting option (see image below). That's how this quote was handled.

Inline Quotation

The widget below is a Promotional Tiles widget. You can include between 2 to 4 images which will stack accordingly on a mobile device as the widget is responsive. To use the widget, add the Mater Adlinks Repeater widget. Once added, configure the widget and select how many tiles you require.

The tiles themselves are added to the page tree (as has been done for this example). To add the tiles, create a child page named adlinks and then upload the tiles to that child page selecting the Mater - Adlink page type.

Mater Adlink page type

Once your Adlink has been created, you can populate the promotional tile with a title, summary, image and link. Only the title and image are mandatory.

Adlink properties

Promo tiles

Copy & paste from source code to create an inline CTA button !


A standard CTA button

Learn more 

 Go back

A standard CTA button

Learn more  

 Go Back