Using the Text Area Editor
This guide explains the function of each button available for formatting and styling your text.
To see these styles in action, visit the Text and Typography Styles page of our sample website. While there, you can adjust the color scheme to match your own website's color palette to see exactly how these styles will look on your site.
A quick note about some of the styling functions:
In some cases, you'll need to remove one style of text before you can add another one. In order to do so, first highlight the text in question and uncheck the styling that is added. Next, check the style you wish to add.
For example, if your text is formatted as Splash Font and you wish to change it to Lead font, you will need to highlight the text, de-select Splash Font and then select Lead Font.
Text Styling Functions
When you first open a Text Area, a large box with a variety of icons will appear. You can use this toolbar to customize the appearance of your text content.
Basic Text Formatting
Text can be made Bold or Italic by clicking on the B or I, respectively.
Your text will default to left alignment with no indentation. To increase the indentation, click the button highlighted below. If you wish to undo this change, you can click the button to the left of it to decrease indentation.
To change the alignment of your text, click alignment dropdown to choose left, right, center, or justify alignment.
Your content can be inserted into a Table by clicking the table dropdown and selecting your options.
For accessibility purposes, the first row of a table will automatically be designated as Table Headings. Headings are critical to include in a table so that screen reading software can identify information in the table.
Hyperlinks can be added or removed from your text by first highlighting the desired text, then clicking the link/unlink button.
As a reminder, it is critical to write meaningful link text. Doing so is helpful for all users, but especially those who are blind or visually impaired and use screen reading software. A more thorough explanation of appropriate link text, including examples of what to do and cautions of what to avoid, can be found in the Hyperlink Guide through the Stanford Office for Digital Accessibility.
Once you click the link button, a pop up window will appear. Paste your URL into the space for "Link URL" and add descriptive text to the Title box. Click the green checkmark when you're done.
Organize lists with bullets or numbering by clicking the corresponding buttons.
.png?apiToken=eyJhbGciOiJIUzI1NiIsImtpZCI6IjIwMjMtMDUtMDQifQ.eyJzY29wZSI6Im5vdGUtZXhwb3J0IiwibmlkIjoicV9XdlBBM2tYdyIsImlhdCI6MTczMzI0NDE5MywiaXNzIjoiaHR0cHM6Ly9zbGl0ZS5jb20iLCJqdGkiOiJUQXl3SDRWdW4yTzI2NyIsImV4cCI6MTczNTgzNjE5M30.QFTSeKFjPBgzPDnwcvpRYWPeBEf11N3lrPJXMgebK20)
Additional Text Styling Options
Vertical Line
Add a vertical line to your page.
.png?apiToken=eyJhbGciOiJIUzI1NiIsImtpZCI6IjIwMjMtMDUtMDQifQ.eyJzY29wZSI6Im5vdGUtZXhwb3J0IiwibmlkIjoicV9XdlBBM2tYdyIsImlhdCI6MTczMzI0NDE5MywiaXNzIjoiaHR0cHM6Ly9zbGl0ZS5jb20iLCJqdGkiOiJUQXl3SDRWdW4yTzI2NyIsImV4cCI6MTczNTgzNjE5M30.QFTSeKFjPBgzPDnwcvpRYWPeBEf11N3lrPJXMgebK20)
Block Quote
The Block Quote function allows you to highlight quotes within a text area. The formatting is the same as the Testimonial Component. To add a block quote, highlight the desired text and select the " marks in the editing bar.
.png?apiToken=eyJhbGciOiJIUzI1NiIsImtpZCI6IjIwMjMtMDUtMDQifQ.eyJzY29wZSI6Im5vdGUtZXhwb3J0IiwibmlkIjoicV9XdlBBM2tYdyIsImlhdCI6MTczMzI0NDE5MywiaXNzIjoiaHR0cHM6Ly9zbGl0ZS5jb20iLCJqdGkiOiJUQXl3SDRWdW4yTzI2NyIsImV4cCI6MTczNTgzNjE5M30.QFTSeKFjPBgzPDnwcvpRYWPeBEf11N3lrPJXMgebK20)
The resulting output will appear like this on your page.
%20(1).png?apiToken=eyJhbGciOiJIUzI1NiIsImtpZCI6IjIwMjMtMDUtMDQifQ.eyJzY29wZSI6Im5vdGUtZXhwb3J0IiwibmlkIjoicV9XdlBBM2tYdyIsImlhdCI6MTczMzI0NDE5MywiaXNzIjoiaHR0cHM6Ly9zbGl0ZS5jb20iLCJqdGkiOiJUQXl3SDRWdW4yTzI2NyIsImV4cCI6MTczNTgzNjE5M30.QFTSeKFjPBgzPDnwcvpRYWPeBEf11N3lrPJXMgebK20)
Insert Media
Another option in the Text Area is adding images and videos to compliment the content on your pages. You can add an image, wrap an image around content, and/or add videos. This can be done by clicking the photo button. Additional information about inserting media, including step by step instructions, can be found on the Images/Videos in Text Area guide.
.png?apiToken=eyJhbGciOiJIUzI1NiIsImtpZCI6IjIwMjMtMDUtMDQifQ.eyJzY29wZSI6Im5vdGUtZXhwb3J0IiwibmlkIjoicV9XdlBBM2tYdyIsImlhdCI6MTczMzI0NDE5MywiaXNzIjoiaHR0cHM6Ly9zbGl0ZS5jb20iLCJqdGkiOiJUQXl3SDRWdW4yTzI2NyIsImV4cCI6MTczNTgzNjE5M30.QFTSeKFjPBgzPDnwcvpRYWPeBEf11N3lrPJXMgebK20)
Headings and Styles Menus
In addition to the classic editing options in the Text Area, the Format and Styles dropdown menus have even more options to help highlight your content.
Headings Menu
Within this menu, you can set your Heading levels. Headings should only be used to break up text into organized groups, and are NOT meant to be a way of simply making your text bigger.
From an accessibility perspective, headings provide individuals who use screen readers with a simple method to navigate within a page or a document. Moreover, the use of headings allows all individuals, regardless of disability status, to move and find information in a more efficient manner. Using different heading styles and font sizes helps organize information into meaningful sections and demonstrates how subtopics relate to the main topics, and with one another. For example, a document structure could be:
- Heading 1 is the main topic or title of the content
- Heading 2 is used for major subtopics that relate to the main content
- Heading 3, Heading 4, and Heading 5 could be used to further refine related subtopics
More information about Headings and their proper use can be found at the Headings and Structure Guide created by the Stanford Office of Digital Accessibility.
%20(1).png?apiToken=eyJhbGciOiJIUzI1NiIsImtpZCI6IjIwMjMtMDUtMDQifQ.eyJzY29wZSI6Im5vdGUtZXhwb3J0IiwibmlkIjoicV9XdlBBM2tYdyIsImlhdCI6MTczMzI0NDE5MywiaXNzIjoiaHR0cHM6Ly9zbGl0ZS5jb20iLCJqdGkiOiJUQXl3SDRWdW4yTzI2NyIsImV4cCI6MTczNTgzNjE5M30.QFTSeKFjPBgzPDnwcvpRYWPeBEf11N3lrPJXMgebK20)
To add a heading: select the desired content and click on the Format menu. Select the desired heading style. The list has Heading 2 through Heading 6.
To remove a heading: select the Normal option at the top of the menu and it will revert back to the text.
Styles Menu
Adding any of these styles can be done by simply highlighting your text and clicking on the corresponding Block, Text, or Link style option. Removing the styling requires an additional step, as selecting a new style does NOT remove the original.
To remove styling from your text, highlight the text in question and uncheck the styling that is added. For example, if your text is formatted as Splash Font and you wish to change it to Lead font, you will need to highlight the text, de-select Splash Font and then select Lead Font.
Note: The color and style of these options are determined by your website's selected color palette and theme. As a result, some may appear slightly different than the thumbnail.
The Styles Menu contains many options for your text and expands to include link and button styles when the text is hyperlinked.
%20(1).png?apiToken=eyJhbGciOiJIUzI1NiIsImtpZCI6IjIwMjMtMDUtMDQifQ.eyJzY29wZSI6Im5vdGUtZXhwb3J0IiwibmlkIjoicV9XdlBBM2tYdyIsImlhdCI6MTczMzI0NDE5MywiaXNzIjoiaHR0cHM6Ly9zbGl0ZS5jb20iLCJqdGkiOiJUQXl3SDRWdW4yTzI2NyIsImV4cCI6MTczNTgzNjE5M30.QFTSeKFjPBgzPDnwcvpRYWPeBEf11N3lrPJXMgebK20)
Text Styles
To add any of the styling options to your text, simply highlight the text and select an option from the Styles dropdown list:
- Lead Font (can 'move' when animation is enabled on a site)
- Splash Font (can 'move' when animation is enabled on a site)
- Short Line Length
- Breakout Box
- Caption
- Credits (usually used for photos and other media)
- Emphasized text
.png?apiToken=eyJhbGciOiJIUzI1NiIsImtpZCI6IjIwMjMtMDUtMDQifQ.eyJzY29wZSI6Im5vdGUtZXhwb3J0IiwibmlkIjoicV9XdlBBM2tYdyIsImlhdCI6MTczMzI0NDE5MywiaXNzIjoiaHR0cHM6Ly9zbGl0ZS5jb20iLCJqdGkiOiJUQXl3SDRWdW4yTzI2NyIsImV4cCI6MTczNTgzNjE5M30.QFTSeKFjPBgzPDnwcvpRYWPeBEf11N3lrPJXMgebK20)
Examples of all of these styles can be seen on our sample website . You can also see how these styles will appear on your specific site by updating the color palette to match your website!
Link Styles
Links can have a variety of appearances. In order to view these options, you will first need to create your hyperlink. To do so, follow the steps outlined earlier in this guide . Next, place your cursor somewhere on the linked text. Finally, click the "Styles" dropdown menu.
%20(1).png?apiToken=eyJhbGciOiJIUzI1NiIsImtpZCI6IjIwMjMtMDUtMDQifQ.eyJzY29wZSI6Im5vdGUtZXhwb3J0IiwibmlkIjoicV9XdlBBM2tYdyIsImlhdCI6MTczMzI0NDE5MywiaXNzIjoiaHR0cHM6Ly9zbGl0ZS5jb20iLCJqdGkiOiJUQXl3SDRWdW4yTzI2NyIsImV4cCI6MTczNTgzNjE5M30.QFTSeKFjPBgzPDnwcvpRYWPeBEf11N3lrPJXMgebK20)
Now that your cursor is placed in hyperlinked text, you'll notice the options in this menu have changed. They now include:
- Primary Button
- Big Primary Button
- Secondary Button
- More Link
- External Link
- File Link
- PDF Link
- Private Link
To see how links and buttons will be formatted on your specific website, check out our sample webpage and update the colors to your site's color palette.
Less Commonly Used Buttons in the Toolbar
Remove Formatting
If you wish to remove the formatting of a section of text, highlight the text in question and click the remove formatting button.
Note: This only works for certain formats, such as removing bullets or numbered lists. To remove text or link styling, you'll need to highlight the text, click on the formatting option to remove, and then select the formatting option to add.
%20(1).png?apiToken=eyJhbGciOiJIUzI1NiIsImtpZCI6IjIwMjMtMDUtMDQifQ.eyJzY29wZSI6Im5vdGUtZXhwb3J0IiwibmlkIjoicV9XdlBBM2tYdyIsImlhdCI6MTczMzI0NDE5MywiaXNzIjoiaHR0cHM6Ly9zbGl0ZS5jb20iLCJqdGkiOiJUQXl3SDRWdW4yTzI2NyIsImV4cCI6MTczNTgzNjE5M30.QFTSeKFjPBgzPDnwcvpRYWPeBEf11N3lrPJXMgebK20)
Undo and Redo
If you wish to undo a change, select the "Undo" arrow. To revert back, select the "Redo" arrow.
%20(1).png?apiToken=eyJhbGciOiJIUzI1NiIsImtpZCI6IjIwMjMtMDUtMDQifQ.eyJzY29wZSI6Im5vdGUtZXhwb3J0IiwibmlkIjoicV9XdlBBM2tYdyIsImlhdCI6MTczMzI0NDE5MywiaXNzIjoiaHR0cHM6Ly9zbGl0ZS5jb20iLCJqdGkiOiJUQXl3SDRWdW4yTzI2NyIsImV4cCI6MTczNTgzNjE5M30.QFTSeKFjPBgzPDnwcvpRYWPeBEf11N3lrPJXMgebK20)
HTML
The "HTML" button is not typically used. However, if you are HTML savvy, feel free to use this option. Most users won't need to touch it.
%20(1).png?apiToken=eyJhbGciOiJIUzI1NiIsImtpZCI6IjIwMjMtMDUtMDQifQ.eyJzY29wZSI6Im5vdGUtZXhwb3J0IiwibmlkIjoicV9XdlBBM2tYdyIsImlhdCI6MTczMzI0NDE5MywiaXNzIjoiaHR0cHM6Ly9zbGl0ZS5jb20iLCJqdGkiOiJUQXl3SDRWdW4yTzI2NyIsImV4cCI6MTczNTgzNjE5M30.QFTSeKFjPBgzPDnwcvpRYWPeBEf11N3lrPJXMgebK20)
Video Tutorial
The tutorial spans 10:33-17:37.