Sector content elements

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 bold, italic, strike through it, and use super^script and sub_script. 
• 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

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

Example - image embed full width

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.

Example - File embed short teaser

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.