Sector standard page - content elements

This sample page is a node of the 'page' content type added to 'Section A' in the main menu. It is displayed using the 'standard page' page variant and showcases the various ways of formatting your content using the WYSIWYG editor.

WYSIWYG stands for What-You-See-Is-What-You-Get - an editor interface that allows you to view something very similar to the end result while you create your content.

This page lists the standard formatting options that are included in the Sector Starter Kit.

Basic text formats

You can make text bold, italic, strike through it, and use superscript and subscript.

Internal links

LinkIT provides a sustainable solution for internal links. You don't have to copy, or remember the URL, instead you can highlight the text to link, click on the link button, search for the content you want to link, and select the right page from the results.

External links

Just copy and paste the external link into to LinkIt URL field and confirm that it is an external link.

Anchors

HTML anchors allow you to link within a page. Set an anchor - remember to place the cursor without highlight text. You can now link to the anchor by setting #name-of-your-anchor as the URL in the LinkIT URL field.

Editing and removing links

To edit or remove links, double-click or right-click the link text.

Unordered list

  • Bullet point 1
  • Bullet point 2
  • Bullet point 3
  • Bullet point 4

Ordered list

  1. List item 1
  2. List item 2
  3. List item 3
  4. List item 4

Increase indent / Decrease indent

  • Bullet point 1
    • Bullet point 2
      • Bullet point 3
  • Bullet point 4
  1. List item 1
    1. Increase indent / Decrease indent
      1. Double Increase indent
  2. List item 3
  3. List item 4

Editor tools

Tools to improve your workflow

The WYSIWYG editor also allows you to:

  • undo (or redo) your changes,
  • use ‘Show Block’ to display the HTML block element containers as dotted lines,
  • remove unwanted formats,
  • paste as plain text1,
  • paste as word1,
  • support for Māori macrons,
  • maximise your editor window,
  • switch to HTML source view.

Media

Sector includes the media file manager, preconfigured media types and view modes. Use the 'Insert image' and 'Insert file' buttons to upload images and files and insert them into the content.

Image - Full width view mode

Snowy mountains shrouded in cloud with a blue sky background.

Use the credit or caption field to add your copyright or credit notice.

Insert image - Half width view mode

 

 

 

Snowy mountains shrouded in cloud with a blue sky background.

Use the credit or caption field to add your copyright or credit notice.

 

 

 

Dolorem pretium, adipisci volutpat necessitatibus! In tenetur ornare. Ultricies etiam dolore impedit, lobortis sequi nisi dicta morbi iusto laborum exercitationem? Iusto? Arcu nam hendrerit, donec. Quisque, montes convallis volutpat cupidatat autem maecenas pulvinar orci! Numquam molestiae elit risus, pellentesque rutrum.

 

 

 

 

 

 

 

Ullamco dignissim in saepe ipsum, pariatur veritatis est mollitia nibh, imperdiet aenean laboriosam consectetuer soluta cillum luctus? Irure pulvinar ullamcorper! Perferendis eaque eveniet hic? Necessitatibus incidunt pellentesque officia aut lorem nobis augue dignissimos eros illo molestias, quos labore saepe pulvinar.

 

 

 

 

 

 

 

File - Teaser view mode

 

 

 

sample-file.pdf (294.08 KB)
PDF
294.08 KB

Use the credit or caption field to add your copyright or credit notice.

 

 

 

File - Short teaser view mode

 

 

 

Sample file pdf
Mimetype
PDF
Filesize
294.08 KB

 

 

 

Video - Full view mode

 

 

 

 

 

 

 

Use the credit or caption field to add your copyright or credit notice.

The video shows a logo animation. No words are spoken.

Basic styles

 

 

 

 

 

 

 

You can place a block quote

 

 

 

 

 

 

 

This is a block quote

 

 

 

 

 

 

 

You can place a horizontal line

 

 

 

 

 

 

 

Headings and styles

 

 

 

 

 

 

 

The editor configuration allows you to add HTML block styles and classes as well as inline styles. The Sector StarterKIT default configuration includes:

 

 

 

 

 

 

 

Heading 1

 

 

 

 

 

 

 

Heading 2

 

 

 

 

 

 

 

Heading 3

 

 

 

 

 

 

 

Heading 4

 

 

 

 

 

 

 

Normal text

 

 

 

 

 

 

 

A body copy paragraph. Start your paragraphs with a topic sentence and end with a conclusion or a bridge to the next paragraph.

 

 

 

 

 

 

 

Leading text

 

 

 

 

 

 

 

The opening paragraph on every page should contain a concise introduction to the contents of the page. This way your reader can instantly gain an understanding of what the page is about and decide whether they want to read the page or not.

 

 

 

 

 

 

 

Inline style

 

 

 

 

 

 

 

Highlight text

 

 

 

 

 

 

 

Templates

 

 

 

 

 

 

 

WYSIWYG templates allow content editors to add advanced design elements to their pages without the need to code. Select a template from the drop-down and insert it. For more information see the Sector WYSIWYG templates docs on sector.org.nz.

 

 

 

 

 

 

 

Block quote - Full. Text align left with cite

 

 

 

 

 

 

 

Sector block quotes via templates allow you to easily add attribute citation.

 

 

 

 

 

 

 

Block quote - Half. Featured. Float right

 

 

 

 

 

 

 

Block quotes can be used to emphasise excerpts of text.

 

 

 

 

 

 

 

Dolorem pretium, adipisci volutpat necessitatibus! In tenetur ornare. Ultricies etiam dolore impedit, lobortis sequi nisi dicta morbi iusto laborum exercitationem? Iusto? Arcu nam hendrerit, donec. Quisque, montes convallis volutpat cupidatat autem maecenas pulvinar orci! Numquam molestiae elit risus, pellentesque rutrum.

 

 

 

 

 

 

 

Dolorem pretium, adipisci volutpat necessitatibus! In tenetur ornare. Ultricies etiam dolore impedit, lobortis sequi nisi dicta morbi iusto laborum exercitationem? Iusto? Arcu nam hendrerit, donec. Quisque, montes convallis volutpat cupidatat autem maecenas pulvinar orci! Numquam molestiae elit risus, pellentesque rutrum.

 

 

 

 

 

 

 

Grid - 2 x 1

 

 

 

 

 

 

 

Layout your content in a 2 column grid.
Layout your content in a 2 column grid.

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

List - Definition

 

 

 

 

 

 

 

Definition list title
Here is a definition list description
Tip
Add the class dl-horizontal to the
element via source to create a horizontal list. A horizontal list makes terms and descriptions line up side-by-side.

Note - Default

 

 

 

 

 

 

 

Callout note title

Use a callout note to draw attention to important content on the page.

 

 

 

 

 

 

 

Table - with header cells in the first column only

 

 

 

 

 

 

 

Captions provide information that can help users find, navigate, and understand tables.
Date 12 February 24 March 14 April
Event Waltz with Strauss The Obelisks The What
Venue Main Hall West Wing Main Hall

 

 

 

 

 

 

 

Table - with header cells in the top row and first column

 

 

 

 

 

 

 

Captions provide information that can help users find, navigate, and understand tables.
  Monday Tuesday Wednesday Thursday Friday
09:00 - 11:00 Closed Open Open Closed Closed
11:00 - 13:00 Open Open Closed Closed Closed
13:00 - 15:00 Open Open Open Closed Closed
15:00 - 17:00 Closed Closed Closed Open Open

 

 

 

 

 

 

 

Table - with header cells in the top row only

 

 

 

 

 

 

 

Captions provide information that can help users find, navigate, and understand tables.
Date Event Venue
12 February Waltz with Strauss Main Hall

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

1) known issue - currently not working on Chrome

 

 

 

 

 

 

 

Back to top