Accordion

To setup the accordion:

  1. Create a "Folder" or "Container" page under the page that you want to use the accordion on.
  2. Then create your accordion items by adding pages under the folder created in step 1 and selecting the "Accordion Item" page type.
  3. Fill in all the fields and hit save.
  4. In the widget settings, select the folder page that you created in step 1. All the Accordion items you created under this folder should now populate the widget.

Notes:

  • Accordion items are ordered by the same order they are in the content tree.
  • The folder/container you create doesn't have to be under the page you use the accordion on. Eg. If you use an accordion for multiple news articles, you might create a folder/container under News named "News Accordion", then you can add/copy the accordion widget to multiple article pages and point it to that folder to share the same content and maintain it from a single location.
  • The "Accordion Title" field is what's used in the accordion. The "Name" field is what shows up in the CMS content tree.

Ad exercitation ipsum commodo. Voluptate do mollit ad deserunt laborum incididunt dolore do incididunt Lorem aliquip ad ea. Mollit veniam dolor nostrud labore est in cillum. Aute incididunt mollit amet nulla tempor voluptate reprehenderit sint do.

Ex id ipsum culpa officia. Ut exercitation et in cupidatat anim veniam id sunt aliquip. Adipisicing sunt cillum elit. Deserunt duis excepteur aute adipisicing proident exercitation nisi veniam minim velit laborum in qui cillum. Esse adipisicing reprehenderit fugiat esse dolore reprehenderit consectetur qui. Est nostrud qui qui sint dolore pariatur voluptate minim magna et dolor voluptate do amet commodo. Incididunt eiusmod ut Lorem culpa nostrud ex ex mollit elit ad quis quis dolore pariatur officia.

Ex fugiat ullamco exercitation anim exercitation exercitation. Cillum velit amet cupidatat amet do aliqua labore ullamco. Occaecat exercitation eiusmod in eu duis ullamco aute anim qui est mollit minim ex. Ex esse est proident ut proident velit nisi adipisicing mollit incididunt deserunt. Aute pariatur nisi in amet sunt esse irure mollit eu occaecat ex in.

Accordion Content

Accordion Content

CTA Buttons

Add the CTA Button widget to the page and open up the widget settings to edit the button properties. You can add up to three buttons with a single widget and each button can be individually styled through the settings. You can also set the button alignment or make the buttons full width if required. The link options are:

  • Url (enter in a URL manually. If the URL is external, you must make sure you include "http://" or "https://" to the start of it)
  • Document (select a page on the site. If thelink is internal,this is the recommended option over Url because it will keep track of the page regardless of whether it moves location or changes URL)
  • Media File (Select item from the media library)

Notes:

  • Make sure that you add "tel:" for phone numbers and "emailto:" for emails to the start of the button link ("url" option) if needed.

CTA Slider

How to setup:

  1. Ensure that the parent widget section field "Section width" is set to "Full", and "Gutters" is set to "None", otherwise the slides will not animate to the edge of the screen.
  2. Create a folder under the page where your CTA Slider is, then create your slides by using the page type "CTA Slide".
  3. Open up the widget settings and point "CTA Slides Folder" field to the folder you just created.
  4. Adjust the quote colours if needed.
Notes:
  • Leave the "Button Text" field empty to remove the button.
  • The folder/container you create doesn't have to be under the page you use the slider on. Eg. If you use the slider for multiple news articles, you might create a folder/container under News named "News CTA Slider", then you can add/copy the CTA Slider widget to multiple article pages and point it to that folder to share the same content and maintain it from a single location.
Button
CTA Slide 1 Image

CTA Slide 2

Ad exercitation ipsum commodo. Voluptate do mollit ad deserunt laborum incididunt dolore do incididunt Lorem aliquip ad ea. Mollit veniam dolor nostrud labore est in cillum. Aute incididunt mollit amet nulla tempor voluptate reprehenderit sint do.

Button
CTA Slide 2 Image

CTA Slide 3

Ex id ipsum culpa officia. Ut exercitation et in cupidatat anim veniam id sunt aliquip. Adipisicing sunt cillum elit. Deserunt duis excepteur aute adipisicing proident exercitation nisi veniam minim velit laborum in qui cillum. Esse adipisicing reprehenderit fugiat esse dolore reprehenderit consectetur qui. Est nostrud qui qui sint dolore pariatur voluptate minim magna et dolor voluptate do amet commodo. Incididunt eiusmod ut Lorem culpa nostrud ex ex mollit elit ad quis quis dolore pariatur officia.

Button
CTA Slide 3 Image
/

Icon Block

Allows the editor to create a block of content with an icon on the left.

/

To setup: simply drop the widget on the page and select an image from within the widget settings. You can then add content through the rich text editor next to the icon as normal.

Note

  • The widget assumes that there is padding around the image icon, so there is no padding set between the icon and text. 
  • To perfectly centre align the icon with the content, it is also recommended you remove any bottom padding from the text at the bottom of the richtext setting by selecting or highlighting that text, then select "No Bottom Padding" from the "Paragraph Styles" dropdown.

Info Panel

To Setup:

  • Ensure that the widget section that contains the info panel widget is full width, one column and has no gutters.
  • Add the widget to the page, then select which layout you wish to use from the widget settings.
  • Select an image and image alt text.
  • Enter in content for the panel. You can also add a button through the widget settings if needed.

Notes:

  • Image height scales to the content in the panel. On mobile, the image will stack on top of the content and have a fixed height of 375px.

Info Panel (Alternative)

A similar layout to the info panel can be achieved through a combination of the rich text widget, the rich text block widget and the section configurations. This method Is more complicated but gives the content editor more control over the width of the columns. You should ensure that the "Full height" is applied to the rich text block widget.

Notes:

  • The image will not be cropped and can set the height of the panel. If you want it to be cropped and have the height managed by the size of the content in the richtext block, then you must apply the "Cover Image" setting to the image through the "Paragraph Styles" dropdown in the rich text editor. If you can't get the correct toolbar to appear for the image: you need to click the image, click the right arrow on your keyboard, then click ctrl-a to select the image for the toolbar to appear. Unfortunately this is just a quirk of the editor.

Media Slider

To Setup:

  • Create a folder or container page under the page you intend to setup the slider.
  • Create slides by adding adding pages to the folder and selecting the "Media Slide" page type.
  • Select an image or insert an iframe snippet to be used for the video (to not set both options or the video will override the image). You can select a video thumbnail image to overlay the video (optional). This thumbnail will also be used in the thumbnail navigation under the slider.
  • Create some content in the richtext editor to display under the image/video (optional).
  • Drop the Media Slider widget onto the page, open up the widget settings and select the folder you created in step 1.

Notes:

  • With the slide content, be mindful of the section background you intend to set on the slider. For example, this media slider sits on a navy background, so the content editor would need to set the content text to white on each slide page in order for it to display correctly. This can be confusing on the slide page due to the fact that the background and text colour in the content field is white, so the text is invisible.
Image 1

ASEAN market overview (00:01:32)

Learn more about ASEAN’s market and economy size, key facts and stats, and growing industries for your next exporting opportunities.

Image 2
Image 3
Image 4
Image 5
Video Thumbnail

ASEAN market overview (00:01:32)

Learn more about ASEAN’s market and economy size, key facts and stats, and growing industries for your next exporting opportunities.

Image 1
Image 2
Image 3
Image 4
Image 5
Video Thumbnail

Page Repeater

The page repeater is used to display multiple pages in a list the user can use to navigate to. You can use the widget configuration settings to select the pages, change the layout and add a button to the top right corner of the widget (eg. You might want a "View More" button above the tiles).

Notes:

  1. The column options only apply to the simple, square-tile and slider layout options.
  2. The "date descending" ordering option is used when selected pages such as news articles that have a date field. If this field is blank or does not exist, it will fall back to the pages published date.
  3. The "tree order" ordering option is used to order the tiles by their placement in the content tree of the CMS. Be mindful that selecting pages from different areas of the site with different parent pages may have undesired results.

Option: Tiles (w/Study-Tile)

Study icon

Study in Queensland

Queensland is a place that nurtures talent, builds innovation and launches global careers. When you start studying in Queensland, you can go anywhere.

Learn More open_in_new
Study icon

Study in Queensland

For entrepreneurs and companies seeking to establish themselves in a progressive, multicultural, resilient and stable state – Queensland is the smart choice.

Learn More open_in_new

Option: Tiles (Square-Tile)

How We Help

Our Board

Our Global Network

Our Management

Responsive video

The responsive video widget is used to display a Youtube or Vimeo video responsively so that it work and maintains a 16:9 ratio on all devices. You can also use it to enable auto play and add an overlay thumbnail that the user has to click before the video plays.

Note: To add a video, make sure you only add the ID of the video. You can get the ID from the URL of the video. Example (ID in bold):
https://www.youtube.com/watch?v=-0y_JwvGIfc
https://player.vimeo.com/video/556037026

Video Thumbnail

Rich Text

The Rich Text widget is used to add a rich text zone to the page. You can learn how to use some of the custom editor options in the documentation here.

Rich Text Block

The Rich Text Block is a rich text zone with additional layout and styling options available to the content editor. 

Test

Block with image added

Block with multiple options selected

Smaller padding option with two buttons added and content centre aligned. The full height option is also selected, which will make this block stretch to be the same height as it's sibling when used in a multiple column section.

Block with split layout selected

Additional Content can go over here

Split Panel

The Split Panel widget is used the same way as the Info Panel widget, except it has the added option to include an iframe in it's content panel.

Video Banner

The video banner widget is used the same way a regular page banner is used, except the content editor is able to set a video as the background.

Region Map

The region map widget is used to display the QLD region. The content editor must point the widget to the correct location for the region profiles data.

Image Map
FNQBHighlight NorthQLDGreyHighlight
Location Icon
Location Icon
Location Highlighted Icon
Location Icon
Location Icon
Location Icon
Location Icon
Location Icon

Timeline

May - Jun 2023

  • Awards application open

Jul - Aug 2023

  • Judging takes place
  • Finalists announced

Oct - Nov 2023

  • Queensland Awards Gala
  • Australian Export Awards Dinner