WYSIWYG stands for What-You-See-Is-What-You-Get and implies a user interface that allows the user to view something very similar to the end result while the document is being created.
In general WYSIWYG implies the ability to directly manipulate the layout of a document without coding in HTML. Sector uses the CK WYSIWYG Editor for easy WYSIWYG editing, but also allows advanced editing via WYSIWYG templates and code for advanced Content Administrators.
This page lists your content elements per editing category.
Styles via the WYSIWYG
The WYSIWYG includes ...
Headings
- use sentence case for headings
- use headings consistently to create a clear hierarchy
Heading 1 - rendered as <h2>
Heading 2 - rendered as <h3>
Heading 3 - rendered as <h4>
Heading 4 - rendered as <h5>
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 text elements WYSIWYG
rendered as bold text
rendered as italicised text
You can use superscript and subscript.
Bulleted list
- here is a bulleted list
- vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor
- vestibulum id ligula porta felis euismod semper
- integer posuere erat a ante venenatis dapibus posuere velit aliquet
Numbered list
- here is a numbered list
- vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor
- vestibulum id ligula porta felis euismod semper
- integer posuere erat a ante venenatis dapibus posuere velit aliquet
Legal list (using decrease and increase indent)
- here is a legal list
- Donec sed odio dui
- Donec sed odio dui
- Praesent commodo cursus magna, vel scelerisque nisl consectetur et
- Donec sed odio dui
- Donec sed odio dui
- Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Vestibulum id ligula porta felis euismod semper. Sed posuere consectetur est at lobortis.
Hr
The hr tag defines a thematic break in a page (e.g. a shift of topic).
The hr element is used to separate content (or define a change) in a page.
Blockquote default
Quotes are used to emphasise excerpts of text. Since users almost never read but scan we need to provide them with some focus anchors to fix their attention to the most important parts of our content.
Tools to improve your workflow
The WYSIWYG editor also allows you to
- undo (or redo) your changes,
- remove unwanted formats,
- use special character and Māori macrons,
- copy form word,
- copy as plain text,
- use ‘Show Block’ top displays the HTML block element containers as dotted lines,
- maximise you editor,
- link to content via Linkit, an easy interface for internal and external reffernces,
- switch to HTML source view.
Adding media via the media browser
Sector incudes the media file manager, preconfigured file types and WYSIWYG view modes. Use the 'Add media' to upload you images, documents, or embed video and audio from the web. Add your meta data and submit it to the WYSIWYG.
Image - Full. Default caption (via media browser)
The Eastern Rockhopper penguin breeds on subantarctic islands in the New Zealand region.
Credit: Lisle Gwynn
The referenced media source is missing and needs to be re-embedded.
Image - Full no crop. Default caption.(via media browser)
Snapper fish (Pagrus auratus) and Spotty wrasse fish (Notolabrus celidotus) amongst stalked kelp seaweed (Ecklonia radiata). NZ. Photo by Rob Suisted, Nature's Pic Images, Wellington, NEW ZEALAND. Photo copyright to Rob Suisted - All rights reserved. www.naturespic.com.
The referenced media source is missing and needs to be re-embedded.
Image - Half. Default caption.(via media browser)
The referenced media source is missing and needs to be re-embedded.
The Eastern Rockhopper penguin breeds on subantarctic islands in the New Zealand region.
Credit: Lisle Gwynn
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.
Image - Half Portrait. Default caption.(via media browser)
The referenced media source is missing and needs to be re-embedded.
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.
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.
Video (via media browser)
Credit or caption
Members of Forest & Bird Youth from around New Zealand comment on what they learned at the AGM and conference in Wellington, as well as their ideas on how they would like to see Forest & Bird grow and change in the future.
The referenced media source is missing and needs to be re-embedded.
Document (via media browser)
The referenced media source is missing and needs to be re-embedded.
Advanced editing via WYSIWYG templates
List - Has long lines (advanced editing via templates)
- Item 1
- Item 2
- Item 3
List - Description list (advanced editing via templates)
- Description lists
- A description list is perfect for defining terms.
- Euismod
- Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.
- Donec id elit non mi porta gravida at eget metus.
- Malesuada porta
- Etiam porta sem malesuada magna mollis euismod.
Blockquote - Full. Text align left with cite (advanced editing via templates)
The content of a blockquote element must include block-level elements such as headings, lists, or paragraphs. They can also have an optional attribute cite.
Blockquote - Half. Float left (advanced editing via templates)
"Quotes are used to emphasise excerpts of text."
A body copy paragraph. Penatibus montes bibendum repudiandae sit malesuada sem assumenda. Aliquet nostrud pellentesque, at autem praesentium inventore phasellus malesuada tempor numquam elementum! Excepturi, ipsam aliqua gravida? Justo vestibulum sunt numquam, quidem viverra! Lorem incididunt. Tempus hic ante ante? Quae, quaerat temporibus nunc! Magna! Eligendi sollicitudin explicabo. Pariatur quibusdam montes ultricies magni quia.
A body copy paragraph. Penatibus montes bibendum repudiandae sit malesuada sem assumenda. Aliquet nostrud pellentesque, at autem praesentium inventore phasellus malesuada tempor numquam elementum! Excepturi, ipsam aliqua gravida? Justo vestibulum sunt numquam, quidem viverra! Lorem incididunt. Tempus hic ante ante? Quae, quaerat temporibus nunc! Magna! Eligendi sollicitudin explicabo. Pariatur quibusdam montes ultricies magni quia.
Blockquote - Half. Float right (advanced editing via templates)
"Quotes are used to emphasise excerpts of text."
A body copy paragraph. Penatibus montes bibendum repudiandae sit malesuada sem assumenda. Aliquet nostrud pellentesque, at autem praesentium inventore phasellus malesuada tempor numquam elementum! Excepturi, ipsam aliqua gravida? Justo vestibulum sunt numquam, quidem viverra! Lorem incididunt. Tempus hic ante ante? Quae, quaerat temporibus nunc! Magna! Eligendi sollicitudin explicabo. Pariatur quibusdam montes ultricies magni quia.
A body copy paragraph. Penatibus montes bibendum repudiandae sit malesuada sem assumenda. Aliquet nostrud pellentesque, at autem praesentium inventore phasellus malesuada tempor numquam elementum! Excepturi, ipsam aliqua gravida? Justo vestibulum sunt numquam, quidem viverra! Lorem incididunt. Tempus hic ante ante? Quae, quaerat temporibus nunc! Magna! Eligendi sollicitudin explicabo. Pariatur quibusdam montes ultricies magni quia.
Note (advanced editing via templates)
A body copy paragraph. Penatibus montes bibendum repudiandae sit malesuada sem assumenda. Aliquet nostrud pellentesque, at autem praesentium .
Callout note title
Use a callout note to draw attention to important content on the page.
For other styles add extra classes. e.g: class="note note--primary”. Or: note--success, note--info, note--warning, note--danger.
Callout note title (warning)
Callout sample using class="note note--warning".
Definition list (advanced editing via templates)
- 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.
Grid - 2x (advanced editing via templates)
Layout your content in a 2 column grid.
Layout your content in a 2 column grid.
Table - with header cells in the top row only (advanced editing via templates)
| Date | Event | Venue |
|---|---|---|
| 12 February | Waltz with Strauss | Main Hall |
Table - with header cells in the first column only (advanced editing via templates)
| 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 (advanced editing via templates)
| 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 |
Advanced editing via classes
Inline text elements advanced editing via classes
We inherit Bootstrap classes from the Bootstrap framework. The following classes can be used in Filtered HTML.
You can use the mark tag to highlight text.
This line of text is meant to be treated as deleted text.
This line of text is meant to be treated as fine print.
Horizontal definition list (advanced editing via source)
- Definition list title
- Here is a definition list description
- Euismod
- Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.
- Donec id elit non mi porta gravida at eget metus.
- Malesuada porta
- Etiam porta sem malesuada magna mollis euismod.
- Felis euismod semper eget lacinia
- Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.
Buttons (advanced editing via templates)
- use buttons to move though a transaction, aim to use only one button per page.
- button text should be short and describe the action the button performs.
Info-box. Full width. (advanced editing via templates)
Title here
Use an info box note to draw attention to important content on the page.
Info-box. Float left. (advanced editing via templates)
Title here
Use an Info-box to draw attention to important content on the page.
- here is a list item
- here is a list item
A body copy paragraph. Penatibus montes bibendum repudiandae sit malesuada sem assumenda. Aliquet nostrud pellentesque, at autem praesentium inventore phasellus malesuada tempor numquam elementum! Excepturi, ipsam aliqua gravida? Justo vestibulum sunt numquam, quidem viverra! Lorem incididunt. Tempus hic ante ante? Quae, quaerat temporibus nunc! Magna! Eligendi sollicitudin explicabo. Pariatur quibusdam montes ultricies magni quia.
A body copy paragraph. Penatibus montes bibendum repudiandae sit malesuada sem assumenda. Aliquet nostrud pellentesque, at autem praesentium inventore phasellus malesuada tempor numquam elementum! Excepturi, ipsam aliqua gravida? Justo vestibulum sunt numquam, quidem viverra! Lorem incididunt. Tempus hic ante ante? Quae, quaerat temporibus nunc! Magna! Eligendi sollicitudin explicabo. Pariatur quibusdam montes ultricies magni quia.
Info-box. Float right. (advanced editing via templates)
Title here
Use an Info-box to draw attention to important content on the page.
- here is a list item
- here is a list item
A body copy paragraph. Penatibus montes bibendum repudiandae sit malesuada sem assumenda. Aliquet nostrud pellentesque, at autem praesentium inventore phasellus malesuada tempor numquam elementum! Excepturi, ipsam aliqua gravida? Justo vestibulum sunt numquam, quidem viverra! Lorem incididunt. Tempus hic ante ante? Quae, quaerat temporibus nunc! Magna! Eligendi sollicitudin explicabo. Pariatur quibusdam montes ultricies magni quia.
A body copy paragraph. Penatibus montes bibendum repudiandae sit malesuada sem assumenda. Aliquet nostrud pellentesque, at autem praesentium inventore phasellus malesuada tempor numquam elementum! Excepturi, ipsam aliqua gravida? Justo vestibulum sunt numquam, quidem viverra! Lorem incididunt. Tempus hic ante ante? Quae, quaerat temporibus nunc! Magna! Eligendi sollicitudin explicabo. Pariatur quibusdam montes ultricies magni quia.
Get involved
- Item 1
- Item 2
- Item 3