Back to top anchor
Documentation

Sector content elements

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

The Sector Starter Kit comes with a set of preconfigured content elements that are easy to adapt to your design and easy to edit with the Sector content authoring tools. 

Content elements page 

The content elements page is part of the sample content and lists the content elements with help text for editors - have a look at our online demo

Included are

  • Standard text formats - You can make text bolditalicstrike through it, and use superscript and subscript
  • Internal links using an autocomplete widget. 
  • Anchors
  • Ordered and unordered lists including indents
  • The standard editor tools - undo/redo, remove unwanted formats, maximise your editor window, switch to HTML source view
  • and more. 

Because Sector is a New Zealand distribution, we also have support for Māori macrons. 

All this and much more is provided by the CK What-You-See-Is-What-You-Get text editor (WYSIWYG for short), including:   

  • Image, video, and pdf embeds
  • Block quotes 
  • Horizontal lines 
  • Headlines 
  • Text styles like lead and highlight 
  • Templates for callouts, columns layouts, definition lists and responsive tables, 

Text editor  

The user guide Introduction to the WYSIWYG editor steps you through the features one by one. For this guide we want to introduce two of our favourites - media embeds and WYSIWYG templates. 

Media embeds

Media embeds allow us to create design patterns for the way images, videos, and pdfs are displayed in the content flow. The credit note and alt text are taken from the image entity in the media file browser - no need to add them every time you use the image. 

Design pattern for media embeds


Snowy mountains shrouded in cloud with a blue sky background.

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

Example - image embed full width


Snowy mountains shrouded in cloud with a blue sky background.

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

Sample text - Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.

Example - Image embed half width floating right


The patterns in the Sector Starter Kit - full width and half width - can be extended easily by a Drupal sitebuilder.

File embeds

There is an especially powerful tool for file embeds. For file embeds and the teaser embeds for files, the design pattern wraps the file into a design pattern including the required meta data - instead of linking to files with no context or meta data.


PDF
294.08 KB

Example - File embed short teaser

DOCX
26.25 KB

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

Example - File embed teaser


The user guide Adding media files in the WYSIWYG editor shows how it's done. 

A similar principle applies to preconfigured, editable design templates using WYSIWYG templates.

WYSIWYG templates

A WYSIWYG template is a styled element that is consistent across the site. The template is dropped into your editor and the text can be overwritten. 


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

Example - WYSIWYG template for a styled block quote


Using templates is an advanced editor's task, but it is easy to learn. The guide Using WYSIWYG templates will get you going.

Content preview 

Text editor style sheets allow us to make the preview in your editor very close to how the content is displayed to your audience. Content previews allow you to test responsive layouts across devices. 

Ready for more?

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