Content styles How to use text formats to apply predefined styles to various elements of page content across the website.


heading 1 format Bold becomes large red  text used as a description.

For all Page Titles use a single heading1 format - this will create small grey text in upper-case at 16px in size, then to create larger coloured text at 28px in size, simply bold the text you want to style in colour - no need to use a line break.

For all page titles, the grey text should describe the main topic of the page, with the coloured text used as a descriptive sentence, ending with a full-stop and should be kept to 2 or 3 lines at most. There should only ever be a single heading1 on any page for good SEO practice.


Project profiles use bold text first then small grey uppercase text

For Project Profiles, simply enter the project's title first, set as bold, then enter the location or other relevant data for the smaller uppercase text in grey, as per the example shown, then set as a heading1 format.


heading 2 bold italics

Text that is formatted as heading2 will always appear in coloured uppercase text at 22px in size. Bold and italics can also be used in heading2 copy.


heading 3 bold

Text that is formatted as heading3 will always appear in coloured uppercase text at 16px in size. You can use bold in heading3 copy, but do not use italics in a subheading.


Heading 3 italics is used for lead-in paragraphs or for emphasising specific content from the copy.

Italicised copy in a heading3 format will be styled as normal sentence case at 24px in size. Use this for the first paragraph in a page of content, or for call-out copy used to highlight certain parts of the article.


To create a hyperlink, select the text you want to use as the link, then click the chain icon to create a link to other pages in the website or to an external website by pasting its URL. You can also link to documents or other files by uploading a file or selecting from other files already uploaded. When creating external links or links to files, always select "Open in a new window". Special styles will apply to PDF links which should be part of an unordered bullet list. 

To create an email link:

mailto:person@domain.com.au

External links should always begin with:

http:// 

  • unordered list item 
  • unordered list item bold
  • unordered list item italics

Unordered lists will appear as a standard list with bullets. Bold and italics can be used as required without affecting the style of the list.


  1. Ordered list item
  2. Ordered list item bold
  3. Ordered list item italics

Ordered lists will appear as a numerical list unless used in a Project Profile, whereupon they will take on a tabular format.


  • Left Column Bold right column plain
    line break in a list item
  • Left Column Bold right column plain
  • list sub-item
    line break in a list sub-item
  • list sub-item italics 
    line break in a list sub-item
  • Left Column Bold  right column plain
  • list sub-item

When changed to a numerical list, the above bullet list becomes...

  1. left column bold right column plain
  2. line break in a list item
  3. left column bold right column plain
  4. list sub-item
  5. line break in a list sub-item
  6. list sub-item italics
  7. line break in a list sub-item
  8. left column bold right column plain
  9. list sub-item

Ordered lists in a Project Profile will be changed to a tabular layout. Create the data for each project using a standard unordered list, bold the text you want pulled into the left column and any text not bold will be pulled into the right column.

 

Once your bullet list is complete, simply select all items in the list and convert into a numerical list to convert it to a two column table.

For sub-items in the list, hit enter to create a new list item. To create text highlighted in black, select the text and set it to italics. This can be used to create subheadings within the list, useful for creating awards titles or other special mentions.

To edit the list or to fix issues that may arise, change the list back to a bullet list to make your edits, then change back to a numerical list.


Adding a banner slideshow to a page.


Adding a banner image to a page, blog post or a project.


This is a caption below the image and a Lightbox is enabled on this photo.

This example shows images with and without a caption. The second image has a Lightbox feature enabled, so that the image is enlarged when clicked.

Captions are added by entering text in the space below the image.


 This is an overlay caption.

This is an overlay caption.

This overlay caption shows only when hovered over.

This example shows images with an overlay caption. The second image has a Lightbox feature enabled, so that the image is enlarged when clicked, and the overlay only shows when a mouse hovers over it.

Captions are added by entering text into the overlay space on the image.


Shown here is a Gallery block set to Slideshow mode. Settings applied to this gallery are: 

  • Automatic transition between slides
  • 7 second delay between transitions
  • Show Next and Previous controls
  • Automatically crop images
  • Hide Thumbnails
  • Hide Title and Descriptions

Add this block by choosing an insert point in the content, then either uploading images into the gallery or connect it to a pre-existing gallery.


Shown here is a Gallery block set to Slideshow mode. Settings applied to this gallery are:

  • No automatic transition between slides
  • No delay between transitions
  • Hide Next and Previous controls
  • Automatically crop images
  • Show Thumbnails
  • Hide Titles and Descriptions

Add this block by choosing an insert point in the content, then either uploading images into the gallery or connect it to a pre-existing gallery.


Shown here is a Gallery block set to Grid mode. Settings applied to this gallery are:

  • 4:3 Aspect Ratio
  • Automatically crop images
  • 3 thumbnails per row
  • 10px padding around images
  • Lightbox enabled

Add this block by choosing an insert point in the content, then either uploading images into the gallery or connect it to a pre-existing gallery.


This is a testimonial, quote or information that can be attributed to a person or other source.
— Source or reference
line-break bold italics

A quote block is useful when including testimonials from people or for referencing a brief piece of information that can be attributed to a source.

The first field is for the quote or other text content, the second, smaller field is for the source or reference. You can use some basic HTML tags to affect the text -  wrap the text with an opening and closing tag.

For bold text, use these tags:

<b>this is bold</b>

For italic text, use these tags:

<i>this is italics</i>

For a line-break, use this tag:

</br>

Shown here is a Blog summary block set to Carousel mode. Summary blocks work like Gallery blocks but can be connected to either a blog or a pre-existing gallery.

The settings for this example are:

  • asdasd

Shown here is a Blog summary block set to List mode. Summary blocks work like Gallery blocks but can be connected to either a blog or a pre-existing gallery.

The settings for this example are:

  • asdasd

Shown here is a Blog summary block set to Grid mode. Summary blocks work like Gallery blocks but can be connected to either a blog or a pre-existing gallery.

The settings for this example are:

  • asdasd

Small, medium and large Buttons can be used for calls-to-action or as direct links to specific pages in the website or to external URLs.

It is good practise to include a call-to-action on most pages so that it encourages users to proceed towards a goal, such as making an enquiry or reading the latest articles posted to a blog. 


Below this text is a spacer block:

 

Below this text is a horizontal rule:


Spacer blocks and horizontal rules are useful for laying out content on a page or project profile.

Spacer blocks allow an empty area to be inserted between rows or columns of text or other content blocks. 

Horizontal rules are useful for delineating various sections of content, but are also useful for splitting content so that it can be re-arranged on the page. They are most useful if you need to split apart paragraphs so that they can be arranged into vertical columns - 'slice' the content by inserting a rule between two paragraphs, then click-and-drag the block to its new position - pay close attention to the grey insert lines as you drag the content around the page, as this will determine where and how the Layout Engine will place the content blocks.