Home » Departmental Administrative Units » Information Technology » Technical Training and How-Tos » Web Editing Tutorial

Web Editing Tutorial

Table of Contents

Logging in

Please submit a helpdesk request to obtain the login link if you do not already have it. It will bring up the standard UCLA Logon form. This login process will allow you to edit existing content on the website.

Editing existing pages

  • Once logged in, browse to the page you want to edit.
  • Click the Edit This link near the top of the page which will brings up the WordPress Block Editor for all content types: pages, news items, events, etc.
WP Edit This link
Figure 1

Paragraph creation

  • The Block Editor is set to the Paragraph Block by default. So you can simply start typing or pasting in your content.
  • Clicking Enter/Return creates a new Paragraph Block.
  • Clicking Shift+Enter/Return for a single line space.

Bolding, linking, italicizing content

Text blocks like Heading and Paragraph, have a WYSIWYG editing functions such as bold, italic, alignment, bullets, numbering and creating links.

  1. Styling: Highlight or select the text that you want to style and click on the appropriate icon to style that text.
  2. Linking: Highlight or select the text that you want to link and insert the web address. Click the small arrow to set the link. (figure 3)
    • Set external links (pages/posts not on www.psych.ucla.edu) to Open in new tab. (figure 3)
  3. Click on the Update button to save your changes.
Text editing with WP Block editor
Figure 2
Adding links WP block editor
Figure 3

Creating ordered and unordered lists

  1. Select the Paragraph Block that you want to convert to a list.
  2. Click on the Paragraph icon and choose List from the dropdown.
  3. By default the bullet (unordered) list will be applied.
  4. To change it to a numbered (ordered) list, select the list text and click on the numbered list icon that appears above the highlighted text. (figure 5)
  5. Pressing Enter/Return after each line will automatically create a new bullet or number.
  6. Click the Update button to save your changes.
Creating lists WP block editor
Figure 4
Figure 5

Nested lists

  1. Select the list item(s) you want nested and click on the icon in figure 6.
  2. Click the Update button to save your changes.
Nested lists
Figure 6

Adding images

  1. Place your cursor inside the editor where you want the image to initially appear. We will go over sizing and alignment in the next section.
  2. Click on the + icon that appears and choose the Image Block. (type “Image” in the search field if you don’t see that block)
  3. If you already have an image uploaded, choose Media Library to select the image.
  4. To upload a new image, click on the Upload button.
  5. Select the image you want and it will appear on the page.
  6. Click the Update button to save your changes.
WP Image Block
Figure 7: Adding the Image Block
Upload or select image
Figure 8

Aligning images

  1. Click on the image you want to edit to see the settings for its Block.
  2. To align the image to the left of a paragraph for example, click on the three bar icon above the image and choose Align Left.
Aligning an image with the WP Image Block
Figure 9
  1. With the image block still selected, in the right panel, you can either choose the image size from the dropdown, manually add it, or use the preset percentages, to reduce the size only.
  2. It is required to always include an Alt text to improve accessibility and search. This can be a short description of the image.
  3. After resizing, if you wish to wrap some text around your image, you can use the up or down arrow icon directly above the image (figure 10) to move the image next to the desired text block.
  4. When done editing, click on the Update button to save your changes.
Image resizing and placement using the Block Editor
Figure 10: Image alt text, resizing and placement with the block editor

Adding files

Note: for optimal viewing, consider converting your Microsoft Word files to PDF. For help converting files to PDF, please submit a helpdesk request.

  1. All files should be uploaded to Box in their respective folders here: https://ucla.box.com/s/onf0o5hx0rj1h5r310eh29h1jxxa7e58
  2. Once uploaded, hover over the file name and create a Share link so that anyone with a link can view or download the file.
Box Share links
Figure 11: Box Share links
Box share link
Figure 12
  1. Shared link is created and People with the link should both be selected before copying the link. (figure 12)
  2. Go back to the WordPress editor, highlight the text you want linked, and paste the Box file link in the web address field.
  3. When done editing, click on the Update button to save your changes.

Updating files

  1. Log into Box and locate the file you want to update.
  2. Hover over the file name, click on the icon with the 3 dots and choose Upload New Version.
Upload New Version to Box
Figure 13: Upload New Version to Box
  1. Choose the file you want to replace it with and you should see a “file name” was uploaded successfully message on top of the page when the upload is complete.
Box file uploaded success message
Figure 14: New version of Box file uploaded successfully message
  1. The URL will stay the same even if the file name was different than the previous version.
  2. Simply refresh the webpage that the file was linked on and you should see the new version.