What is Webtools?


Webtools is a web interface which allows you to add content to your website with minimal technical knowledge.

The following guide is a collection of step-by-step instructions meant to assist you while you work on your site content.

Finding your way around Webtools


The main blocks you will be using are Article, Event, Directory, and Misc. Editors. The second level of blocks are collections of resources to help navigate Webtools and assist in creating articles and events.  Webtools will timeout after 720 minutes - SAVE OFTEN!

  • Header - The left corner tells you where you are on Webtools and provides navigable breadcrumbs.  The right corner provides links to log out and edit your profile.
  • Article - Add a single article using Article Editor, then add the article to a group of articles to display on your website using Article Lists.  Article tools are color coded Green.
  • Event - Add a single event using Event Editor, then add the event to a group of events to display on your website using Event Lists. Event tools are color coded Blue.
  • Directory - Add a single member using Directory Editor, then add the member to a group of members to display on your website using Centers & Groups. Directory tools are color coded Orange.
  • Misc. Editors - Each link is a separate tool, at the moment we have a Webform Editor and a Courses Editor.
  • Getting Started - Tutorials on how to use webtools and create media, UCLA copyright policies, and media participant release forms can be found in this block.
  • UCLA Resources - Links to useful information for creating events (such as classroom information, and parking and campus maps) are collected in this block.
  • Other Tools - Links to downloadable tools to help you create articles and events.



    To report any problems or suggestions with Webtools, please click on the “Report a Problem” link under Getting Started to email the webmaster.

Working with Content


    The most important part of your website is the content.  This section gives instructions on how to create articles and events, update content, and upload media files.
(137952)

Create a basic Article or Event


  1. There are two ways to create an article or event:
    • In the Article or Event block, click on Article Editor or Event Editor, then click on the New Article or New Event button.
    • In the Article or Event block, click on the add link under Article Editor or Event Editor.
  2. Enter the article or event information into the provided fields. The required fields are marked with a red asterisk on the form as well as listed below:
    3.                       Required Article  Required Event  Required Conference 
                           • Article Title  • Event Title  • Conference Title
                           • Unit/Center/Program  • Unit/Center/Program  • Unit/Center/Program
                           • Article Type  • Start Date  • Start Date
                           • Date Posted  • Start Time  • End Date
                             • End Time  • Start Time



    		 • End Time
    **If you choose News as the Article Type, the Article will automatically be displayed on the UCLA International Institute news feed.**

  3. The meat of the article or event is the Article field (Description field in event). Since Webtools does time out, it is recommended this portion be written outside of Webtools and copied into the Article or Description field. To paste clean text, click on the Paste Plain Text icon in the top right of the WYSIWYG toolbar.
  4. Click on the Save button on the top menu.
(137954)

Remove Microsoft formatting


Since Webtools has a time-out function, we highly recommend writing and editing article and event text outside of Webtools and then copying it into Webtools. Microsoft products such as Word have background formatting that will break Webtools text fields if it is copied directly; therefore, if you are creating an article in Word and would like to copy it over to Webtools, the text will need to be cleaned.

There are two ways to do this:

  • Copy the Microsoft text to Notepad (an application that is built into Windows) or a similar text editor, then copy that text to Webtools
  • Use the Paste Plain Text button on the WYSIWYG toolbar to copy the text to Webtools
(137955)

WYSIWYG toolbar


The WYSIWYG (stands for What You See Is What You Get) toolbar is the formatting toolbar above the Article and Description fields that allows you to format your text. Below is an overview of some useful tools:

 Paste Plain Text
 Insert Image; once the image is inserted, you can right click on the image and go to Properties.  From the Properties menu, you can add margins around the picture (5 all around is recommended) and add a Class called Caption to allow for an image caption (the caption text goes in the Alt Text field).
 Insert Hyperlink
 Insert Numbering
 Insert Bullets
 Insert Symbol
 Insert Table
  Use the New Paragraph button to separate paragraphs in your article
 The Apply CSS Class button allows you to set a style for certain text
(137956)

Additional Article and Event fields


Besides the required and basic fields for posting articles and events, there are some extra ones that you might want to utilize.

  1. Event or Conference (Event Only): Choose Event for a single, one day event. Choose Conference for a multi-day event. For conferences, create a new event for each day or hour of the conference and then use the Add Event(s) field to create a list of these events. All the events will show up on the one conference page.
  2. Hyperlink (Article Only): This field is used to link to an article that is hosted solely on another internet medium (i.e. a blog or the Daily Bruin). Link Text is the text for the hyperlink.
  3. Pull Quote (Article Only): Highlights a quote outside of your Article text in larger font. The quote box is placed in different areas of the page depending on the layout of your site.
  4. Author (Article Only): This is a place to add an author for the article. This pulls from a discrete list of authors at the institute.
  5. Meta Tags: You may want to tag your article or event with various meta tags which make your content easier to search for. Articles offer tags by Subject, Region, and Country. Events by Country only.
  6. Images & Documents: These images are used in different displays of the article or event. Please reference Photograph Dimensions under Getting Started for the correct format of each image.
    • Thumbnail Image is the small picture on a list of articles or events.
    • Medium Image is used in certain formats depending on the layout of your site.
    • Large Image is the main image for the article or event.
    • Extra Large (Article Only) is used for very large images on certain sites.
    • Use Image Caption (Article Only) for the Large Image only.
    • Related Document allows you to upload a document which will be displayed as a link on the article. Accepted formats are .pdf, .doc(x), .xls(x), and .ppt(x).
  7. Use for Funding Opportunities Articles Only (Article Only): Provides an area to list information about funding opportunities; by adding this information, the article will be displayed automatically on the UCLA International Institute Funding page.
  8. Event/Conference Details (Event Only): Provides an area to indicate a Cost for the event if applicable. Indicate any Special Instructions for guests in the provided field.
  9. Location (Event Only): Address for the event or conference.
  10. Contact Information (Event Only): Contact information for the person conducting the event or conference.
  11. Sponsors (Event Only): Choose from a list of Centers, UCLA Departments, or write in External Sponsors for the event or conference. A check box allows you to indicate if it is a Non-UCLA Event.
  12. Related Centers (Event Only): Check other centers that are *not* sponsoring the event or conference, but may want to easily display the event or conference on their website.
(137958)

Locate and Edit existing content


  1. Go to Article Editor or Event Editor to find the lists of all Articles and Events in Webtools.
  2. Narrow your search by checking the box labeled My Articles ONLY (Article Editor only) which only shows the Articles your account has created or edited.
  3. You can Filter by Center or Article/Event Type.
  4. You can Search by Article/Event Title or ID.
  5. To find the specific Article/Event ID
    a. open the article in a browser
    b. the ID is at the end of the URL
    c. example: //www.international.ucla.edu/institute/article/1465; the Article ID is 1465
(137960)

Related Events and Articles


Use Related Events and Articles to link relevant events or articles to your newly created event or article.

  1. Locate your existing article or event through the Article or Event Editors.
  2. Click on Related Articles or Related Events in the Action column.
  3. Search for any articles or events you would like to link to your current article or event by using the Filter dropdowns or Search bar.
  4. Once you find a relevant article/event, click on Add to List in the right-hand column.
  5. Now these articles/events will show as links at the bottom of the current article/event
  6. You can quickly review the related articles or events with an item in the Article/Event Editor as a number count next to Related Articles (0) and Related Events (0) or in the Article/Event Editor, the lists of Related Articles and Events shows at the bottom of the form.
(137961)

Working with Article and Event Lists


Article and Event Lists are an important part of your Website. Once these lists are built, you can link them to your website to display your content.

  1. Go to Article Lists or Event Lists.
  2. Click on the New Article/Event List button.
  3. The following fields are required: Article/Event List Title, Description, Unit/Center/Program, and signifying if the list is Active or not. Click the Save button when finished.
  4. Once back in the Article or Event Lists screen, Search for your list by the title you just created.
  5. Click on Manage Articles/Events.
  6. Use the Filters and Search to find articles/events that you would like to group together and display as a list on your website.
  7. Click on Add to List when you find the right articles/events. They will now show up in the top list.
  8. You can Order the list by using the Sort up and down functions or you can Click and Drag the articles to the proper position. Hit the Save List Order button when finished ordering.
(137962)

Upload a Podcast


  1. While creating a new Article or editing an existing Article, scroll down to the block titled Podcast.
  2. Click on the Choose File button and browse to your podcast file. The file must be in the .mp3 format.
  3. Click on the Upload button.
  4. Enter the Time Duration of the file in the format of Hours: Minutes: Seconds with two places for each time segment (HH:MM:SS).
(138042)

Video


    It is possible to add a video to your article using the Video block.

  1. Click on the Choose File button and browse to your video file. The file must be in the .mp4 format. Click on the Upload button.
  2. You can also upload a picture that will display when the video is not running.  Click on the Choose File button next to Video Preview Image, select your file and then click on Upload. 
  3. Enter the video player size in the Dimensions area.  Recommended size is: 640 x 360
  4. The bottom three options pertain to Flash video and are for advanced users who should talk to the webmaster before proceeding.
(138043)

Using the Directory Block


The Directory block is used to add people to your website. This can be lists of staff members, faculty, interns, whatever your site’s needs are. The process for creating a list is twofold.

First step: Create members
  1. To Create a member, either click on Directory Editor, then New Member, or click on the add link under Directory Editor.
  2. Fill in all necessary fields for the member, First Name and Last Name are the only required fields.
  3. Hit Save.

Second step: Add members to Center
  1. Click on Centers & Groups.
  2. This list of Centers is static, only Admins can add or edit Centers.
  3. Find your Center by searching for the Center Title.
  4. Click on Manage Groups.
  5. Create groups by clicking on New Group and giving the group a name.
  6. Click on Manage Members for the group you just created.
  7. Search for members (from the First step) by Name.
  8. Add members to your Group by clicking the Add to List link.
(138045)

Create a Webform


Coming Soon
(138046)

Using the Courses Editor


Coming Soon
(138047)

Advanced Media


The Advanced Media tools are for advanced users only.  Please contact the Webmaster before attempting to use these tools.

What is Webtools?

Webtools in a nutshell

Working with Content