This is the main body of the page. You can type just as you would in any word processor. Hitting enter will create a new paragraph—no need to press it twice. You can also press “Ctrl + Z” to undo, or use the toolbar button.
In order to help search engines find these pages, we need to provide a title and description. This meta information can be access by clicking “Edit → Edit Page Properties”. Every page must have a unique title and description.
We recommend keeping descriptions under 150-160 characters. Titles may be prefixed with “DRIVE! | ” if desired and should be as short and to the point as possible.
The toolbar buttons can be used to create lists and tables, as well as add basic formatting like bold, italics, and superscript.
- Item 1
- Item 2
- Item 3
To stop a list, press Enter twice or click the list button again.
- First item
- Next item
- Sub item
- Another sub item
To create subitems, click the indent button while the cursor is on a list item. To switch the bullet type for a subitem, just click the list button of the type you want. The symbol can't be changed, only whether a square or numerals are used.
If you need to display a table of data, you can insert a table using the table button in the toolbar.
To insert a heading, click the “¶” button in the toolbar and choose a heading level from the drop-down menu. For SEO and accessibility reasons, don‘t use “Heading 1” in this section. Instead, start with ”Heading 2” and continue increasing the level for subsequent sub-sections.
Some headers are styled in all caps, while others are not. This is automatic and should not be altered in order to maintain consistency. The margin before and after headings is also automatic. Changes to the default heading styles should be done in the CSS by a developer.
Here are all of the heading style:
It's unlikely that a page will require “Heading 5” or “Heading 6,” but they exist just in case (HTML only supports up to 6 heading levels).
Since many assistive device users navigate webpages by headings, it's important to choose headings based on their content, not visual appearance. Only increase a heading level when your content is a subsection of the previous heading, otherwise use continue using the same heading level.
Images can be inserted anywhere in this section. By default they will span the width of the column, or be centered if they are not wide enough.
Please make sure to add description text when inserting an image. If you forget, simply double-click the image to access its properties. This text will be used by screen readers to describe the image to visually impaired users.
Images can be aligned to the left or right by selecting the image and clicking the text align left/right buttons in the toolbar. On smaller screens, these images will be centered and the text will break to a new line.
Images can also be hyperlinked by selecting the image and clicking [+] → “Link…”, or using the shortcut Ctrl + K. This is the same for hyperlinking text—select the text to link then click the “Link…” link (that's a lot of links!). We recommend not opening links in a new window, even for PDFs. This is bad for accessibility and takes the choice of whether to open a link in a new window/tab away from the user. There's a good explanation in this CSS-Tricks article if you want more information.
Videos can be inserted using the embed code provided by the video's provider. We recommend using YouTube to host videos due to its larger audience, but Vimeo will also work.
In YouTube, click Share → Embed and copy the code. To insert the video on the page, click [+] → “Code snippet…” and paste the code, which should look something like this:
<iframe width="560" height="315" src="//www.youtube.com/embed/d0UqfGCKX98" frameborder="0" allowfullscreen></iframe>
You‘ll see a big black box in the CMS when the video is inserted, but don't worry, it will display properly when the page is published.
To embed a Vimeo video, the process is the same except that the embed code can be found by hovering over the video player and clicking the “Share” button.
Note that the Vimeo embed code contains some extra text with the video's title and attribution. Feel free to delete that, it won't affect the video player.
Editing the Source Code
If you are comfortable coding in HTML, you can edit the source code directly by clicking the code button (last in the toolbar). Please avoid adding custom styles in order to maintain a consistent design system.