In order to bring you the best possible user experience, this site uses Javascript. If you are seeing this message, it is likely that the Javascript option in your browser is disabled. For optimal viewing of this site, please ensure that Javascript is enabled for your browser.

UCLA Home / Portal Toolkit

Article ID: 1001729         Send us your feedback about this article  View the print friendly version of this article
How to Format an Article

Help your reader scan the article and perform tasks by making important information stand out.

Organize content with:

  • Headings and subheadings
  • Numbered lists
  • Bulleted lists
  • Bold-face lead-ins
  • Tables
  • Related information links

The Vignette Content Management (VCM) system has an HTML editor plug-in, eWebEditPro, which will help you format articles. If you do not see a toolbar above your teaser, body and contact fields or text looks like "gibberish" (HTML) then eWebEditPro has not been installed and you must download the eWebEditPro plug-in to your computer. Contact your content manager or LAN/IT help desk if you do not have permission to install an application.

Back To Top 

Creating Information Hierarchy

Headings & Subheadings
Distinguish levels of information by using heading styles. "UCLA Heading 1" and "UCLA Heading 2" styles can be applied by highlighting a header and selecting the appropriate style from the "Apply Style" drop-down menu in the eWebEditPro toolbar. Click the related link "Sample Article" to see how headings should appear in an article.

Heading 1 - Use when three tiers of headings are necessary. Use on the major heading.
Heading 2 - This is the most frequently used heading and should be applied to second-level headings, when using a three heading levels. Or use on the top level of header, if using only two levels. Use this heading style when only one level of heading is needed.
Bold Header - Apply to low-level heading. Click "B" in the eWebEditPro toolbar to apply bold to a selected heading.

Text Spacing

Hard Return
In eWebEditPro, hit the "Enter" key on your keypad and a large paragraph return is inserted.

This is my first line of text.

This is my second line of text. There is a hard return in between my lines of text.

HTML Tag: <p></p>

Soft Return
A soft return, which will move text to the following line, can be created by typing [Hold Shift + Enter].

This is my first line of text.
This is my second line of text. There is one soft return in between my lines of text.

HTML Tag: <br></br>

Two soft returns creates a white space equivalent to one hard return. (not shown)

Back To Top 

Header & Paragraph Spacing
After you apply header styles, make sure blocks of text are spaced properly. The general rules are:

  • Heading 1 - 1 hard return + 1 soft return before heading /1 hard return after heading (optional)
  • Heading 2 - 2 soft returns or 1 hard return before heading /1 soft return after heading (optional)
  • Bold Header - 2 soft returns or 1 hard return before heading /1 soft return after heading (optional)

Horizontally align text and images to the left (default). Vertically align text and images to the top.


Unordered List
Use bullets when the order of the listed items doesn't matter. Do not use a bullet if only one item is "listed."

Bookmarks (Anchor Links)
If you've written a long article with clearly defined sections, consider creating bookmarks at the top of the page so the reader can easily jump to the topic of interest. Always include a "Back to Top" link after each section. View eWebEditPro Demo "Hyperlinks and Bookmarks" and the toolkit article "Glossary of Portal Terms" for additional information.

Back To Top 

Contact Information

Contact information is typically placed at the bottom of the article page in the "Contact" field. "Contact" is not a required field but we strongly suggest you add contact information pertinent to the subject matter presented in the article. Sometimes, you may want to include contact information for more than one department; if so, repeat a format shown in the examples below. Some variances in the contact information appear on the portal site. If you have a compelling reason why you need to deviate from the portal guidelines, please discuss the change with an IT Services Portal Team Member. Please do not include personal contact information, such as an individual's name or email address, as it requires more effort to maintain (keep accurate)—use departmental information instead. Here are three samples of how contact information may be presented:

Example 1: Complete Contact Information

Campus Human Resources, Employee & Labor Relations
Email: | Phone: (310) 794-0860 | Fax: (310) 794-0865 | Mail Code: 146548

10920 Wilshire Boulevard, Suite 200
Los Angeles, CA 90024-6504
Office Hours
Monday – Friday 8 a.m. to 5 p.m.
Saturday and Sunday Closed

Example 2: Partial Contact Information with Email Address, Phone Number and Fax Number

Campus Human Resources, Policy & Personnel Services
Email: | Phone: (310) 794-3147 | Fax: (310) 794-0865

Example 3: Partial Contact Information with Phone Number and Fax

Campus Human Resources, Policy & Personnel Services

Phone: (310) 794-3147 | Fax: (310) 794-0865

Example 4: Partial Contact Information with Email Address and Phone Number

IT Services Portal Team
Email: | Phone: (310) 825-8686

Back To Top 

IT Services Team
Email: | Phone: (310) 825-8686

Related Information