Back to top anchor
Editor guides

Using WYSIWYG templates

User role
Content Editor Content Administrator
Task
Content editing
Topic
Content editing Text formats, editors, and styles
Product
Sector Starter kit

WYSIWYG templates allow you to expand the standard formatting options and to display your content in a more engaging way. This guide explains how use the templates in your WYSIWYG editor. 

A what editor? 

Get to know the WYSIWYG editor in Introduction to the WYSIWYG editor

The Sector Starter Kit includes a few basic WYSIWYG templates to get you started. 

In this guide

Also, tips for the templates available with the Starter Kit

Insert a template


Screenshot of templates in WYSIWYG editor

Screenshot - Adding a template in the WYSIWYG editor


You can insert a template in the WYSIWYG editor by adding a new line, clicking 'Insert template' in the toolbar ( 1 ), and selecting a template from the pop-up box ( 2 ).

Edit a template

In the editor you can see a preview of the template, and change its default filler text.


Administration Interface Screenshot

Screenshot - WYSIWYG template inside the WYSIWYG the editor


To keep the formatting it can help to highlight the text you want to update before you overwrite it. 

Having trouble with editing the templates?  

Have a look at our help article I’m having issues formatting in the WYSIWYG editor

Templates available with the Starter Kit

Blockquote


Screenshot of blockquote templates (with numbered highlights)

Screenshot - full width ( 1 ) and half width ( 2 ) blockquotes


Blockquotes are useful for highlighting a quote or other information, and their width can either be 'full' ( 1 ) or 'half' ( 2 ).

Grid - 2 x 1


Screenshot of WYSIWYG grid template

Screenshot - 2-column grid template


The grid template is used to lay out content in a responsive 2 x 1 grid.

If you want to add more rows, you can insert another 2x1 grid template just after the existing grid.

List - Definition


Screenshot of WYSIWYG list templates with numbered highlights

Screenshot - Templates for vertical lists ( 1 ) and horizontal lists ( 2 )


The list template can be used to list terms and their definitions.

By default, lists are vertical ( 1 ), but you can change them to be horizontal ( 2 ). To do this, edit the source code by selecting Source in the WYSIWYG toolbar, and change the <dl> tag to <dl class=”dl-horizontal”>

To create more list items, simply copy and paste the sample items.

Note - Default


Screenshot of WYSIWYG note template

Screenshot - WYSIWYG default note template


You can draw attention to information by putting it in a note. The default colour of a note is grey, but classes can be added to style it differently (e.g. to make it a ‘warning’ note).

To change the style, you will need to edit the source code by selecting 'Source' in the WYSIWYG toolbar, and replace class=”note” with the relevant class.

Note template variants
Note style Colour Class
Normal Grey class=”note”
Primary Dark blue class=”note note--primary”
Success Green class=”note note--success”
Info Medium blue class=”note note--info”
Warning Brown class=”note note--warning”
Danger Red class=”note note--danger”

Table


Screenshot of WYSIWYG table template with numbered highlights

Screenshot - Editing a table template in the WYSIWYG editor.


Use a table template to structure information in a table.

There are three table templates, depending on which part of the table you want to be the header (the header can be in the first row, column, or both).

Once you’ve inserted the template, right click on a cell ( 1 ) to add, edit, and delete parts of the table.

 

Last updated

Our Sector 9 Roadmap is out!

With the release for Drupal 9 coming closer, we have now published our Sector 9 Roadmap.

Need Help?

Sector is brought to you by Sparks Interactive - supporting Sector from Wellington and Auckland

Open Source award winner!

Sparks Interactive are delighted to accept the Open Source Use in Business award for Sector and the Sector.nz open source platform.

Subscribe for Sector updates