Text Paragraph Component

The text feature is a basic, widely used paragraph component that lets you add content like text, links, lists and tables, along with options for anchor links, media and text alignment.


Text Editor Toolbar and Features

Text Editor Tool Bar

Let’s break down the toolbar and see what each section can do (from left to right):

Text Formatting Styles

  1. Bold – To highlight a specific section, sentence or word, select the text and click the B icon in the toolbar to make it bold.
  2. Italic – To emphasize a section, sentence or word, select the text and click the I icon in the toolbar to make it italic.
  3. Remove format – To clear all styling from selected text, click the "remove format" icon in the toolbar. This is especially useful when pasting text from Word or other websites, as it removes unwanted fonts, colors and formatting for a cleaner, consistent look.
  4. Superscript -– To raise text slightly above the line, often for things like footnotes in citations (e.g., ¹) or mathematical problems (e.g., x²).
  5. Subscript – To lower text slightly below the line, commonly for chemical formulas (e.g., H₂O).

Headings and Structure

  • Headings help structure your content and make it easier for everyone, including screen reader users, to navigate content in sections. In most editors, headings two through six are available, and they should be used in the correct order for accessibility (e.g., Heading 2 followed by Heading 3, not jumping straight to Heading 4).
  • If the text isn’t actually a heading, select "paragraph" to keep it as regular text. The page title is usually set as Heading 1 automatically, which is why you won’t see it on the list.

Styles

  • Block styles are typically applied within tables to format and organize.
    • Unstriped table style is where the rows all look the same without alternating colors. Unstriped tables often appear automatically when you copy and paste a table from another source.
    • Equal width columns style is where each column in the table is the same size. For accessibility, using columns of equal width is ideal because they provide a consistent structure that makes tables easier to read.  After inserting your table, apply this style by selecting the entire table.
  • Text styles help highlight your links for better visibility.
    • To add a link:
      • Type the text you want to turn into a link.
      • Highlight that text. Click the link icon (paper clip) in the toolbar.
      • In the link URL field, type enter the URL you would like linked with no spaces.
      • Click "insert" to save the link.
    • After adding your link, you can choose to make your link look like any of these styles:

Button Transparent ButtonTransparent Button with an Arrow

Button with an Arrow Button (Video Icon)Button (Diagonal Arrow Icon)

Button (Download Icon) Button (Arrow Down Icon)

 Button (Email Icon) Button (Location Icon)

Links

  • The link feature is shown in the toolbar as a paper clip icon. In a text paragraph, you can add different links like website links or email addresses and use the styles mentioned above on them.

Add a link

  • Type the text you want to turn into a link.
  • Highlight that text. Click the link icon (paper clip) in the toolbar.
  • In the link URL field, type enter the URL you would like linked with no spaces.
  • Click "insert" to save the link.

Edit a link

  • Click on your hyperlink.
  • Click pencil to edit your URL.
  • Click on the widget, select link properties and set it to open in a new window. Opening external links in a new window is considered best practice.
  • Click on paper clip with a cancel icon to unlink your link.

Anchor Links

  • The anchor link feature is shown in the toolbar as a flag icon. Creating an anchor link is a quick way to navigate to specific content within a webpage. Learn how to add an anchor link.

Lists

Bulleted lists organize items with dots:

  • Item 1
    • Sub item 1
  • Item 2

Numbered lists arrange items in order using numbers:

  1. Item 1
    1. Sub item 1
  2. Item 2
  3. Item 3

Media

  • The insert media button (icon with an image and music notes) within the toolbar allows you to add your media content. Learn how to properly add images and embed videos on our site.

Quote

  • Block quote features are shown in the toolbar as a quotation mark icon. The quote icon is used to highlight a block of text as a quotation. By selecting your text and then clicking on the icon, you will turn it in to a quote.
  • Quote example from President Dunn:

Our goal is to ensure that as we elevate our research profile, we remain true to the values and mission that define us as a premier land-grant university.

Undo/Redo

  • The undo and redo features look like two curved arrows that let you reverse or restore changes made while editing the text paragraph component. To undo, click the left-pointing arrow; to redo, click the right-pointing arrow.

Bootstrap Grid

Insert Table

  • You can insert a table by copying from another source or creating one directly in the text editor. Just click the table icon and choose the number of rows and columns you want from the drop-down options.
  • The table has its own toolbar with four options: column menu, row menu, merge cells and add caption. The column and row menus let you insert, delete or set rows and columns as headers.
  • Screenshot of a table toolbar
    Table toolbar
  • After adding your table don't forget to set a style.

Horizontal Line

  • You can add a horizontal line to separate your content, which is helpful for dividing sections within the same group. It would look like this:

Text Alignment

  • Text alignment offers three options: left, right and center. Simply highlight your text and choose your preferred alignment from the drop-down.
  • Examples:

Align Left

Align Right

Align Center

Source

  • The source option lets you view and edit the HTML code behind your content. Most content editors don’t need to use it.

Find and Replace

  • Find and replace helps you quickly locate and change words or phrases in long text. By clicking the magnifying glass icon, you can search for text, replace it and choose options like "match case" or "whole words only."

Text Format

  • The text format option appears at the bottom, with accessible HTML set as default. Most content editors don’t need to change this.

Steps to Add Text

  1. Log in to Drupal by fining the "for faculty and staff" section in the footer and click "My Account.".
  2. Go to page you wish to edit.
  3. Click on + sign to enter a new paragraph component inside a group.
    1. Can be used both in normal or narrow groups.
  4. Add your text content or media using the instructions and explanations described above.
  5. Click "save" before exiting the paragraph.
  6. Save page as "in progress" or "ready to review."

Additional Web Editing Resources

Contact Us
Photo of University Marketing and Communications
University Marketing and Communications
Physical Address
1007 Campanile Ave.
Brookings, SD 57007
Mailing Address
Communications Center 105, Box 2230
Brookings, SD 57007
Hours
Mon - Fri: 8:00 a.m.-5:00 p.m.
Follow Us