1. Home
  2. Site Building
  3. Add Flexible Pages
  4. Text Area

Text Area

Text areas display regular text and headings on a flexible page.

WYSIWYG Editor Options

 

 

Section 1

  1. Undo
  2. Redo

 

Section 2

  1. Bold the highlighted text
  2. Strikethrough the highlighted text
  3. Italicize the highlighted text
  4. Insert a special character

 

Section 3

  1. Create a link with the highlighted text
  2. Remove the link from the highlighted text

 

Section 4

  1. Create a bulleted list
  2. Create a numbered list

 

Section 5

  1. Left align the highlighted text
  2. Center align the highlighted text
  3. Right align the highlighted text

 

Section 6

  1. Insert a Table (for use only with necessary content)
  2. Insert a Grid layout
    • Grids are an excellent tool for creating the layout you want that is mobile responsive (unlike tables).
    • Use this button to add a grid with the desired rows and columns.
    • To change the column size, edit the Source code and change the number in "col-md-6" to another number (like "col-md-4").
      • The smaller the number, the smaller the column.
      • The total of all column sizes must add up to 12.
  3. Insert a horizontal rule
  4. Create a block quote from the highlighted text

 

Section 7

  1. Insert a Node (piece of content on the website - person, event, news, etc.)
  2. Insert a Block (reusable piece of content under Content > Blocks)
  3. Insert a File (images and documents under Content > Files)

 

Section 8

  1. Change the style of the highlighted text 
    • Styling the text only changes the visual appearance of the text. These visual changes are not interpreted by assistive technologies.
    • Multiple styles can be applied at the same time
    • Use this dropdown to change a link into a button
      1. Create a link using section 3
      2. Highlight the link
      3. Select the button style from this Style dropdown
  2. Change the format of the highlighted text
    • Formatting the text changes the functionality and visual appearance of the text. These functional changes are interpreted by assistive technologies.
    • Use headings to divide your content into sections
      • Just like a list, headings should be sequential (starting with heading 2)

 

Section 9

  1. Subscript the highlighted text
  2. Superscript the highlighted text

 

Section 10

  1. Edit the HTML Source code
  2. Edit text in fullscreen mode
  3. Clear all styles from the highlighted text
  4. Paste text that is copied from Word

Text Area FAQs

Documents can be added with a variety of display options.

  1. Edit the page that will have the document
  2. Add or edit a text area
  3. Place your cursor in the desired document location within the text
  4. Click the "F" button for files and click "Browse"
  5. Upload a new file
    • Change the file's display name if desired
  6. OR select "Library" to find a document that's already uploaded
  7. Click "Next" until you see "View Mode" and "Align" options
  8. Select desired options
  9. Click "Embed" and save the page

 

Images can be added with a variety of display options.

  1. Edit the page that will have the image
  2. Add or edit a text area
  3. Place your cursor in the desired image location within the text
  4. Click the "F" button for files and click "Browse"
  5. Upload a new file
    • Add Alt text
  6. OR select "Library" to find a document that's already uploaded
  7. Click "Next" until you see "View Mode" and "Align" options
  8. Select desired options for image size (View mode) and placement of the image (Align option).
  9. Click "Embed"
  10. Click on "Save"

Videos must be uploaded to YouTube first.

  1. Click the "F File" button in your WYSIWYG editor
  2. Click "Browse"
  3. Click the "Web" tab
  4. Enter the complete url of the YouTube video you wish to embed
  5. Click "Next"
  6. (Optional) Upload a different thumbnail for the video or keep the existing one (called Poster image)
  7. Click "Save"
  8. Click "Next"
  9. Select the view mode (size) and alignment
  10. Click "Embed"

Please visit the Link Text to a PDF page to learn more.

See how to make these buttons in section 8 of the WYSIWYG editor section above.

Button Examples

Default Button Primary Button Hollow Button

WYSIWYG stands for "What You See is What You Get".