Text

Text Toolbar

The text component, and any block where you add long-form text, will have a toolbar at the top of the box where you type. Most icons will look similar to what you find in Word or Google Docs, but some are unique.

Adding Text

Add Body Text

Add body text: 1. Add a Text component to your blog post / web page.

1. Click in the text box.

2. Enter your text directly or paste from notepad or another plain text editor. Do not paste directly from Word if you can help it.

3. Save.

Format Text as a Heading

Headings give structure to a page and help humans and search engines scan a page. Choose the correct heading to define the structure. Don’t choose a heading because you like the color or font size. For more information on headings, see the Writing for the Web section of this guide.

Add a heading: 1. Highlight the text that will serve as a heading.

1. Click on the dropdown menu in the upper left in the toolbar.

2. Select Heading 2 or Heading 3.

3. You'll see your text change appearance in the text editor.

4. Save.

Format Intro Text

Use at the beginning of blog posts or pages for brief intro text that will appear at the top of the page. Text will be larger than normal body text.

Add intro text: 1. Add a Text component to your blog post / web page.

1. Add your text.

2. Highlight the text you want to use as intro text.

3. Click on the styles drop down menu.

4. Select intro-text from the list of options.

5. You'll see the change reflected in the text editor.

6. Save.

Format Text as a Block Quote

Use a block quote to call out a brief section of text. Readers who skim your article may be drawn in to the text by reading that quote.

Add a block quote: 1. Add a Text component to your blog post / web page.

1. Add your text.

2. Highlight the words you want to display as a block quote.

3. Click the block quote icon.

4. Your block quote text will be indented in the editor.

5. Save.

6. Verify the block quote is displaying correctly.

Add a Link

Add a link: 1. Add a Text component to your blog post / web page.

1. Click in the text box and type your text.

2. Highlight the words you want to link.

3. Click the link icon.

4. Paste your link in the box and click Save.

5. Your text should be blue and underlined in the editor.

Format a Link as a Button

Sometimes we want a link to stand out as a call to action. In those instances, you can apply a style to a link to change its appearance. Choose a primary or secondary button.

1. Add a Text component to your blog post / web page.

2. Enter your text.

3. Highlight the words you want to link.

4. Click the link icon.

5. Paste your link in the box and click Save.

6. Your text should be blue and underlined in the editor. Put your cursor anywhere on the link.

7. Click the styles dropdown.

8. Choose a link style.

9. Button Primary: Use to style a link so that it looks like a blue button. Use for a primary call to action.

10. Button Secondary: Use to style a link so that it looks like an all-caps button. Use for a call to action of lesser importance.

11. Save.

12. Verify that the links are displaying as call to action buttons.

Using Images in Text Components

Add an Image with a Caption

Add a caption under an image, separate from the page text:

1. Add a Text component to your blog post / web page.

2. Click in the text box.

3. Click the “E” in the toolbar.

4. Click Select Media.

5. Select Add Image, then select Choose File.

6. Browse your computer to find the image you want to upload. Select the image and click Open.

7. Add Alternative Text (Alt Text) and click Save.

8. On the next screen, you have a series of options that determines how your image will appear. Add your caption and adjust settings where needed, then click Embed.

9. Display As (required): Use to select if you want a Narrow or Wide image. Wide will fill up most of the container. Narrow will be a smaller image.
10. Alternate Text (optional): Use if the image needs to be described to the user for accessibility.
11. Align (optional): Use to set your image to align Left, Center, or Right. If you leave this set to None, your image will be center-aligned. Use right-align sparingly, if at all.

12. Caption (optional): Use to add a caption to your image. Captions accept text only. You cannot add a link to a caption.

13. You should see your image in the text box with the caption in a gray border on the bottom of the image.

14. Save your work. You should see the image caption in gray immediately below the image.

15. If you need to make changes to the image or any settings, edit the page then double click the image to open the options box.

Create a Linked Image

Add a link to an image:

1. Add a Text component to your blog post / web page.

2. Click in the text box and click the “E” in the toolbar.

3. Click Select Media.

4. Select Add Image, then select Choose File.

5. Browse your computer to find the image you want to upload. Select the image and click Open.

6. Add Alternative Text (Alt Text) and click Save.

7. On the next screen, you have a series of options that determines how your image will appear.

8. Display As (required): Use to select if you want a Narrow or Wide image. Wide will fill up most of the container. Narrow will be a smaller image.
9. Alternate Text (optional): Use if the image needs to be described to the user for accessibility.
10. Align (optional): Use to set your image to align Left, Center, or Right. If you leave this set to None, your image will be center-aligned. Use right-align sparingly, if at all.

11. Caption (optional): Use to add a caption to your image. Captions accept text only. You cannot add a link to a caption.

12. Click Embed. Your image will be embedded in the text box.

13. Click on the image. You'll see a slight blue outline around the image when it is selected. Then click the link icon in the toolbar.

14. Paste in the URL you want to add to the image, then click Save.

15. Save your post and make sure your image is linked and going to the right place.

Add a PDF Document

Save the PDF File / Update File Name

1. The PDF file name should be in all lowercase with words separated by dashes:
2. YES: monster-at-end-of-book-activities.pdf

3. NO: Monster End of Book Activities.pdf

4. Name your PDF file something meaningful and human-readable. You’ll need to know the file name later when you add it to the website.

5. YES: read-to-rise-activity-sheet-aug-2021.pdf
6. NO: read-to-rise-5.pdf

Add the PDF to the Document Library

The PDF must be added to the website's document library before it can be linked on a page.

1. Select Content > Media > Add Media > File

2. Click Choose File.

3. Find the PDF on your computer and click Open or Upload.

4. Type a name for your file that you will remember later. Then click Save.

5. The file is now saved in the document library. The next step is to add a link to the PDF from a webpage.

Add a Link to a PDF to a Webpage

1. Go to your page or blog post where you want to link the PDF.

2. Add a Text component to your blog post / web page.

3. Type the text for the link you want people to click to open/download the PDF. Then highlight that text, then click the link icon.

4. Start typing the file name and a dropdown list of options will appear. Select your file by clicking on it. Then click Save.

5. Type (pdf) after your link.

6. Save your page and test the PDF link to ensure it functions correctly. PDFs should open in the browser window.