You’ll manage content in Drupal using the page editor.
Getting to the page editor
Via the Content Screen
- Find the page you want to edit by typing a portion or all of the page title in the text box below Title.
- Click Filter and find the page in the list.
- Click Edit under Operations on the far right of the corresponding page name.
Via the page
If you are already on the page you want to edit, click Edit Draft or New Draft below the site navigation.
The WYSIWYG editor
The bulk of the text content on the page editor is managed through the WYSIWYG editor.
WYSIWYG stands for what you see is what you get. The WYSIWYG editor is an interface that allows you to see a basic representation of what your live page will look like—as you create it.
Toolbar
The WYSIWYG editor contains two main elements: the toolbar and the text box. The toolbar allows you to format your text, add images, link to documents or other websites, insert anchors, create tables and view and edit the HTML source.
Each item on the toolbar is outlined in the table below.
Name |
Function |
---|---|
Bold |
Applies bold styling to text |
Italic |
Applies italic styling to text |
Subscript |
Makes text smaller and places it to the bottom right of the text before |
Superscript |
Makes text smaller and places it to the top right of the text before |
Remove Format |
Removes previously applied formatting from text. |
Increase Indent |
Increases the indent in a bulleted or numbered list. |
Decrease Indent |
Decreases the indent in a bulleted or numbered list. |
Paste as plain text |
Pastes text and does not retain formatting. Suggested for text from Google Drive applications |
Link |
Creates a link to a page outside of your site (this includes other case.edu sites), anchor points on your site, or email addresses |
Internal link |
Creates a link to a page on your site that is in Drupal or a file or image that is in the media library |
Remove link |
Removes a hyperlink from text but leaves the text |
Anchor |
Sets anchor points within text |
Bulleted List |
Creates an indented list with bullets |
Numbered List |
Creates an indented list with numbers |
Insert Media |
Embeds images from the media library |
Video Embed |
Places a video in the content that streams on the page |
Block Quote |
Applies blockquote styling to the selected text |
Table |
Inserts a table |
Formatting Styles |
Changes text format for headers, body text and buttons. Buttons only apply to links. |
Source |
Switches to HTML editor |
Importing Text
If you’re importing text from another source, don't just copy and paste it into the text box. If you do, you will likely have formatting issues on your page. The preferred method uses the Paste as Plain Text button in the WYSIWYG Toolbar.
- Copy text from source.
- On your keyboard, press CTRL+shift+v on Windows or command+shift+v on Mac
Using Headings
Headings give a page structure and are important for text readers and search engines. In addition, users skim pages by reading headings.
- Headings can be changed under Formatting Styles in the WYSIWYG (Formatting Styles also lets you turn links into buttons)
- Heading tags are used for headings only and not for emphasis within normal text. Bolded text should be used for emphasis, and not in place of headings.
- Each heading is designated by a number—the higher the number, the smaller the heading. You can see the size difference in the following example.
- Heading 1 (H1) is the largest heading. H1 is used once per page for the page title and is disabled by default in the WYSIWYG.
- Always start your page with Heading 2, and move chronologically through the page.
- Headings shouldn’t be used for visual appeal; instead, they should give hierarchical ranking to the content on your page. Think of headings as a book structure.
- h1 is for a page title (book cover)
- h2 is for major content sections (part one, part two, epilogue, etc.)
- h3 is for content that falls under an h2 (book chapters)
- h4 is for content that falls under an h3 (different authors, sections, within a book chapter)
Linking
PDFs and other documents must be added to the media library first before linking to them from a page. That process is covered in the Media Library section.
To link to a document:
- Save the document in the media library.
- Highlight the text you wish to link to the document. (Example: International Agreements Approval Form)
- Select the Internal Link button in the WYSIWYG editor
- Begin typing the name of your document
- Select your document as it displays under the Media - Document options (you may have to scroll)
To link to a website or email:
- Highlight the text you wish to link
- Select the Link button in the WYSIWYG editor
- For web pages, leave the Link Type set to URL and paste the website you wish to link to in the URL box.
- For email, click the drop-down menu under Link Type and select Email, and type or paste the email into the Email Address field
Styling Buttons
You also have the option to style a link as a button.
- Highlight the linked text you wish to apply the style to (text must already be linked).
- Choose a button style from the Styles drop-down menu.
- Once you select a style, you should see the button when you view the page in live mode—either in preview or after publishing.