Child pages
  • Working with the Editor
Skip to end of metadata
Go to start of metadata

The editor toolbar (pictured above) includes most most of the functionality needed when editing webpage content, including:

Formatting Text

Emphasis Styles


Highlight text and select the Bold icon to apply a bold emphasis to text


Highlight text and select the Italics icon to apply an italic emphasis to text

Alignment Styles


Choose between the following paragraph alignments:

  • left
  • center
  • right
  • fully justified


Indent or remove indentation from a paragraph


This style is used to identify long quotations. For example:

Swarthmore students are expected to prepare themselves for full, balanced lives as individuals and as responsible citizens through exacting intellectual study supplemented by a varied program of sports and other extracurricular activities. The purpose of Swarthmore College is to make its students more valuable human beings and more useful members of society. Although it shares this purpose with other educational institutions, each school, college, and university seeks to realize that purpose in its own way. Swarthmore seeks to help its students realize their full intellectual and personal potential combined with a deep sense of ethical and social concern.

Show Block Elements

List Styles

There are two ways to present lists using the Editor: bulleted or ordered. To begin a list place your cursor on a new line and click one of the two list buttons. If you need to nest a list item, place your cursor on the line you'd like to nest and click the Indent button.

Bulleted List

This type of list does not imply any specific order or hierarchy. Customize the bullets by right-clicking on a specific list item to access its properties. 

  • Item
  • Item
    • Nested item
  • Item

Ordered Lists

This type of list explicitly sets the order and/or importance of the content. Alter the style of a particular list item (e.g.. upper/lower Roman numerals, numbers, upper/lower alpha) by placing your mouse on a particular item and right-clicking.

  1. Item
  2. Item
  3. Item

Text and Headings

This drop-down list is used to structure the content of a page. Properly formatting text can help visitors, search engines, and screen readers interpret the content.

To change the format of a block item such as converting normal, paragraph text into a heading tag, place the cursor at the beginning of the text and choose the appropriate heading size from the drop-down menu. Note: This change will affect the entire block, not just a piece of that block. If you are uncertain what text the block includes use the "Show Blocks" button to outline all the blocks on the page.

When working with headings, make sure to follow a logical order. This will be particularly useful to visitors browsing via screen-reader software.

Subscript and Superscript

Subscripts and superscripts are most often used in mathematical expressions or footnote references. Subscript is a character that is slightly smaller than the text that surrounds it and is set below the baseline. It is the first button in this set.

Superscript is very similar to subscript only it appears above the baseline. It is often used in mathematical expressions to denote power or the numerator part of a fraction. In normal text superscript often directs a user to a footnote. It is the second button in this set.

Links and Anchors

Highlight the text you wish to use as the link text (this text should provide clear context to the visitor as opposed to something like "click here" or "more"). Then choose the "chain icon" to reveal a window with the following options:

  • Link to a Swarthmore page
  • Link to a URL (e.g.. a non-Swarthmore page) or a document
  • Link to an anchor within the text of this page
  • Link to an email address

Each has its own options as described below.

Link to a Swarthmore pages

To link to an existing (published) Swarthmore page simply start typing the page title in the Link area. As you type, Drupal will attempt to auto complete the page title by providing a list of pages containing the word you've started to type.

Link to URL or link to document


Copy the URL from the page you want to link to and paste it in the URL area. The dialog will automatically adjust the Protocol dropdown. Under "Target" choose "New Window."


Use the Browse Documents button to open the document file browser. Upload or select a document.

Link to an Anchor in the text

Links to anchor tags allow a visitor to jump to a specific area of a page, commonly a section heading. Note that this method requires the presence of an anchor tag. See instructions on Creating Anchors as necessary

  • Choose "Link to an Anchor in the text." 
  • Under Select an Anchor choose By Element Id.
  • Select the appropriate Element ID

Link an Email

In addition to adding an email address, editors may add a "Message Subject" and a "Message Body". This may be useful in gathering additional information, or if you want to sort your emails by subject (e.g.. the message subject in the contact block email link could be 'From web contact block", while the message subject within text could be 'Inquiry from Apply to Swarthmore').

Creating Anchors

To create an anchor, click the last link button (it is marked with the image of a flag). Anchors are typically placed at the beginning of the section heading or paragraph you want to jump to. The only requirement is to add a name for the anchor - the name should be one word and contain no spaces. Examples of good anchor names are:

  • creatingAnchors
  • admissionsRequirements
  • required-documents

You will know you've successfully created an anchor when you see a red flag appear in the Editor (this red flag will not be visible to the public).  If you need to edit the anchor name, you can click on that flag and the Anchor dialog will reopen.