Creating and Editing Website Content

There are often multiple ways to accomplish the same task in Drupal. This guide provides steps for one way of doing tasks related to content maintenance. You may find alternate methods that you prefer.

On this page

Logging In
Some Drupal Jargon
Adding Content (Nodes) to Your Website
Editing Existing Content (Nodes) on Your Website
Drafts
Putting Content on the Front Page
Using the Editing Form
CKEditor
Formatting Text with CKEditor
Paragraph Line Spacing
Format Text for Readability
Use Headings
Links (to Webpages and Files)
Adding Images

Logging In

You must be logged in to create/edit content on your website.
Login page: http://www.yoursite.org/user
Upon login, a black/gray toolbar will appear at the top of your site with shortcut links to maintain your site.

Some Drupal Jargon

  • Node: A piece of content in a Drupal site. Nodes are commonly displayed as web pages.
  • Content Type: A set of fields that define a particular kind of node. In Drupal 7, the default content types are Article and Basic Page. Additional content types may be added for your site as needed.

Adding Content (Nodes) to Your Website

  1. Click Add content in the gray toolbar at the top of the page.
  2. Click on the type of content you wish to create:
    1. Article: Use articles for time-sensitive content like news, press releases or blog posts. Articles appear on the homepage by default.
    2. Basic page: Use basic pages for your static (permanent) content, such as an 'About us' page.
  3. Complete the editing form for your new content.
  4. To save your content as an unpublished draft, click the Publishing options tab at the bottom of the page and uncheck the checkbox next to Published. To publish your content immediately, keep the checkbox next to Published checked.
  5. lick Save.

Editing Existing Content (Nodes) on Your Website

  1. If your content is already published, navigate to it on the website.
  2. Click the Edit tab below the title.
  3. Modify the information stored in the editing form.
  4. Click Save.

If your content is not already published (or if you can’t recall how to navigate to it through the website), click Find content in the gray bar and locate your content.


Drafts

The default status for all content types is Published (visible to the public). Sometimes you may want to save a node without publishing it. To save content as an unpublished draft or to unpublish it:

  1. Click the Publishing options tab at the bottom of the page.
  2. Uncheck the checkbox next to Published.
  3. Click Save.
  4. After saving, you will see the unpublished content as if it was published, but it will be watermarked as Unpublished.

Drupal does not have an interim publishing option for saving subsequent unpublished drafts once a node is published. To create a draft of existing content, create a new node using the same content type, copy and paste the existing content into the new node, and save it as an unpublished draft. When you are finished drafting, copy and paste the new content from the draft node into the published version and delete the draft.


Putting Content on the Front Page

Drupal’s default behavior is to display 10 Articles (newest to oldest) on its front page. This setting can be changed by an administrator. To selectively put any type of content on the front page:

  1. Complete the editing form for your content.
  2. Click the Publishing options tab at the bottom of the page.
  3. Check the options that are appropriate for your content:
    1. Published: This node will be available for the public to view.
    2. Promoted to front page: A summary/teaser of this node will appear on the homepage. Do not use this if the node will automatically appear on or remove itself from the front page, as it will interfere with automatic expiration.
    3. Sticky at top of lists: In contexts where this node (or its summary/teaser) appears in a list with other nodes, a “sticky” node will always appear at the top of the list.
  4. Click Save.
  5. To remove a node from the front page, uncheck Promoted to front page and re-save.

Using the Editing Form

The editing form collects information needed for each type of content on your site. The content type (e.g. Article or Basic page) determines the fields and settings that appear on the editing form.

CKEditor

Most content types include at least one field on the editing form with a large box for entering multiple paragraphs of formatted text. In most cases, this large box will have a toolbar at the top with formatting buttons. The toolbar we are using is called CKEditor. (“CK” stands for “Content and Knowledge.”)

The CKEditor toolbar can be configured with many different buttons. Buttons have been preselected to provide appropriate formatting options for your website. Some buttons have been omitted intentionally to help avoid common usability problems. The buttons on the CKEditor toolbar format your text by modifying the HTML code that will display it. You can see the HTML code by clicking the Source button. (Click Source a second time to toggle back to the formatted display.)

If the formatting option you require is not available on the CKEditor toolbar, you may need to add HTML tags or CSS rules to the HTML code. Related: Overriding Sitewide Theme Styling.

Formatting Text with CKEditor

Some formatting can be applied to text letter-by-letter (e.g. bold, italic, links); other formatting affects whole paragraphs. A paragraph in CKEditor is any text that ends with a hard return (you insert a hard return anytime you press the Enter key). Some examples of formatting that applies to whole paragraphs:

  • Align text left/right
  • Unordered/ordered lists
  • Indent/outdent
  • Normal text/Headings (found under the Format drop-down menu)

Paragraph Line Spacing

Paragraphs have an extra margin of space separating them from other text to improve readability.

  • Use the Enter key to start a new paragraph (aka hard return).
  • Use Shift + Enter to insert a line break within the current paragraph (aka soft return). Line breaks do not add extra space between lines.

Format Text for Readability

  • Organize your text with Headings and lists (unordered (bulleted) or ordered (numbered)).
  • Text should not be in all caps, all bold, all italics, or all Headings.
  • Avoid mixing fonts or adding colored text.
  • For emphasis, use bold, italics, or one of the heading styles.
  • Color should not be used as the only indication of emphasis (particularly red or green).
  • Underlining should never be used to emphasize text – people confuse it for a link.

Use Headings

Headings are options available in the Format menu (listed as Heading 2, Heading 3, etc.). Use the heading styles for headlines and to title sub-sections in the body of each page. Type the headline, highlight it, and select “Heading 2,” “Heading 3,” etc. from the menu.

  • Each page should have one and only one Heading 1. This will be automatically applied to the main title of the page.
  • Like an outline, headings should be nested to convey the structure of the page. Each Heading 2 should be a sub-point of Heading 1, each Heading 3 should be sub-point of Heading 2, etc. In other words, you should not put a Heading 3 on the page unless there is a Heading 2 appearing somewhere before it.

Why It’s Important to Use Headings

When a piece of text is formatted as a heading, it changes in two ways:

  • It becomes bigger/bolder than normal text.
  • Structural information is added to the code of the page to indicate that the text is a heading.

The extra “structural” information that is added to the code is not visible in the formatted view, but it is important because:

  • Search engines can use it to identify keywords that sum up what the page is about.
  • Screen readers can use it to help visually impaired users identify the main sections of the page (sort of a table of contents for the page).

Links (to Webpages and Files)

To create a link:

  1. Type the text/insert the image for the link.
  2. Select the text/click on the image.
  3. Click the Link button.
  4. Type or paste the link URL in the URL box.
    1. If you are linking to another page on your website, change the Protocol drop-down to <other>, then enter a relative URL (the segment of the URL that follows the “.org”). Example: for a link to http://www.example.org/about-us, enter only /about-us
    2. If you are linking to an uploaded file and want to make the URL look cleaner, change the Protocol drop-down to <other> and enter a relative URL that begins with “files.” Example: for a link to http://www.example.org/sites/www.example.org/files/documents/policy.pdf, enter only /files/documents/policy.pdf
    3. If you see "#overlay-context=..." in a link, delete the portion of the URL starting with "#." Example: for a link to http://www.example.org/childrens#overlay-context=events-and-programs, enter only /childrens
  5. Click OK.

General Link Tips:

  • The color or style of links should not be changed – use the default colors.
  • If possible, a link should use the same language as the title of the page it links to.
  • A link should never use the words “Click Here.”
  • Unless the document is primarily intended to be printed, links should be descriptive text, not the URLs they are pointing to.
  • For links to the LINKcat catalog, use http://launcher.linkcat.info/go.cgi, never http://linkcat.info.
  • For links to specific books in LINKcat, use the “LINKcat Link Advisor”: http://help.linkcat.info/catalog/link_advisor.pl

Making Links to Uploaded Files

  1. Type the link text.
  2. Select (highlight) the link text.
  3. Click on the Link button on the CKEditor toolbar.
  4. Click the blue Browse Server button.
  5. This will open the File Browser window which is divided into three frames:
    1. Left: Navigation Tree (an expandable folder directory that reflects the tree structure of your website files. To refresh the tree always click on the documents folder below the blue <root> folder.)
    2. Right: File Name (displays the contents of the folder selected in the Navigation tree)
    3. Bottom: Preview
  6. In the Navigation Tree pane do one of the following:
    1. Browse to the folder where you want to save the file that you will be uploading; or
    2. Create a new folder by browsing to the folder that you want to be its parent, clicking the parent folder name, then clicking the Directory button on the toolbar. In the Subdirectory name field, type a folder name in all lower case with no spaces and click Add.
  7. Click the folder where the uploaded file should be stored (the selected folder will be in bold), then click the Upload button on the toolbar.
  8. Browse to the location of the file on your computer and select it.
    1. The maximum file size for an upload has been set at 2 MB. This process will abort for any file over 2 MB.
    2. The maximum resolution for uploaded images is 1200 x 1200 pixels.
    3. The maximum file size and resolution can be raised on a temporary or permanent basis upon request to allow uploading larger files.
    4. Ignore the Create thumbnails checkboxes when working with non-image files.
  9. Click the Upload button below the checkboxes.
  10. Make sure the file you uploaded is highlighted, then Click Insert File on the top toolbar.
  11. Click OK to finish inserting the link.
  12. Remember to save your changes.

Adding Images

Steps for adding images with the CKEditor toolbar