Getting Started
You can learn more about our use of colors—including why we limit the number of colors we use in text—and fonts—including why we limit our fonts to United and Source Sans—on design and layout in the getting started section of Drupal Basics.
Formatting Text
Most of the text formatting icons are the same or similar to those found in Word.
Bold, Italics, and Strikethrough
These buttons work just like the options in a Word processing document. B for bold, I for Italics, and S for Strikethrough.
NOTE: We removed the underline button in the August 2018 code update.
Align Text
These are text align buttons. The editor defaults to a left align, however you can also use the center align or right align options if needed.
Bulleted and Numbered Lists
These are bullet buttons. They work just like Word bullets and numbered lists. You can use the indent buttons to change the bullet positions.
Indents
These are indent buttons. By default, you can only add an additional indent with the right button. If the indent is too great, you can use the left button to decrease it. Using the indent buttons with bullets will move that line of bullets to the right, nesting them.
Superscript and Subscript
These are the superscript and subscript buttons. The superscript icon is the one on the left that looks like X squared. A superscript example: High Text and a subscript example: Low text
Horizontal Line
This is the horizontal line button. A horizontal line is a line that, when placed between paragraphs, will create a horizontal line that runs the width of your content.
NOTE: Images or text that are aligned or floated to the left or right can cause the line to not run the whole width of the content, so it is something to be aware of when you use horizontal lines.
Cut and Copy
These are the cut and copy buttons. They look and function just like a Word processing document.
Special Characters
This is the special characters button. When you click on this button it will open a pop-up window with more than 100 different letters and characters you can insert into your content. To insert a character, put your cursor where you want the new character, click on the character you want and it will automatically be added to your content.
Adding Headers
About Headers
Think of headers as the outline of your page. They should be arranged to show the hierarchical ordering of information from the broadest and most important (Heading 2) to secondary information that supports the information in your Heading 2 (Heading 3) to the most specific information that supports the information in your Heading 3 (Heading 4).
Like an outline, you should always start with most important — Header 2 — with your Header 3 information below that and your Header 4 information below your Header 3 information. Do not skip levels — don't start with a Header 3, or go straight from a Header 2 to a Header 4. You can go from a Header 3 or a Header 4 back to a Header 2 when you switch broad topics.
As a general rule, we recommend that you do not apply bold or italics to your headers as they already have a bold style applied to them and the italics should only be used in specific use cases.
Accessibility in Practice
For screen reader users, header tags are vital in giving a sense of the main topics of the page and enabling easier navigation through your content. Think of your headers as a table of contents for your page for both screen reader software and your users. Additionally, effective header tags help with search engines — making your site more accessible to everyone.
Examples of Header Formats:
Header 2
Header 3
Header 4
Header 5
Header 6
Example of How to Use the Header Formats:
United States (Header 2)
This information is about the United States. Lorem ipsum dolor sit amet, cu solet vocent similique sea, sale iusto utroque an mel. Sed doctus iisque ceteros ei, iracundia aliquando eos id. Corpora conclusionemque at eos, usu elitr debitis in.
Oregon (Header 3)
This information is about the state of Oregon in the United States. Lorem ipsum dolor sit amet, cu solet vocent similique sea, sale iusto utroque an mel. Sed doctus iisque ceteros ei, iracundia aliquando eos id. Corpora conclusionemque at eos, usu elitr debitis in.
Eugene (Header 4)
This information is about the city of Eugene in the state of Oregon in the United States. Lorem ipsum dolor sit amet, cu solet vocent similique sea, sale iusto utroque an mel. Sed doctus iisque ceteros ei, iracundia aliquando eos id. Corpora conclusionemque at eos, usu elitr debitis in.
California (Header 3)
This information is about the state of California in the United States. Lorem ipsum dolor sit amet, cu solet vocent similique sea, sale iusto utroque an mel. Sed doctus iisque ceteros ei, iracundia aliquando eos id. Corpora conclusionemque at eos, usu elitr debitis in.
San Francisco (Header 4)
This information is about the city of San Francisco in the state of California in the United States. Lorem ipsum dolor sit amet, cu solet vocent similique sea, sale iusto utroque an mel. Sed doctus iisque ceteros ei, iracundia aliquando eos id. Corpora conclusionemque at eos, usu elitr debitis in.
Canada (Header 2)
This information is about the country of Canada. Lorem ipsum dolor sit amet, cu solet vocent similique sea, sale iusto utroque an mel. Sed doctus iisque ceteros ei, iracundia aliquando eos id. Corpora conclusionemque at eos, usu elitr debitis in.
British Columbia (Header 3)
This information is about the province of British Columbia in the country of Canada. Lorem ipsum dolor sit amet, cu solet vocent similique sea, sale iusto utroque an mel. Sed doctus iisque ceteros ei, iracundia aliquando eos id. Corpora conclusionemque at eos, usu elitr debitis in.
Vancouver (Header 4)
This information is about the city of Vancouver in the province of British Columbia in the country of Canada. Lorem ipsum dolor sit amet, cu solet vocent similique sea, sale iusto utroque an mel. Sed doctus iisque ceteros ei, iracundia aliquando eos id. Corpora conclusionemque at eos, usu elitr debitis in.
Add Headers
To style headers for your body copy, highlight the text you want to format and click on the button that says “Normal” on the toolbar. That will give you a drop-down menu. Scroll down and select from Heading 2 or Heading 3 or Header 4.
Be sure to use “header” tags (H2 for major headings, H3 for subheadings, H4 for sub-subheadings) to separate sections rather than just bolding the text.
Adding text above or below a Grid or other non-standard item
When working around your grids or other template items you may need to add text above or below that item. As an example, when there are two grids or templates adjacent to each other and you want to add a horizontal line between them.
To add a new text paragraph above or below your grid or other template item, you will need to use the “insert paragraph” option shown here as a red line and red box with a left curved arrow:
To add spacing between two grids or template items when editing your content, click near where you want to add the new paragraph space and place your mouse cursor above or below the grey box where you want the extra space added and the red line and a red box (
) will appear. Click on the red box with the arrow and it will add a new paragraph space where the red line is shown.