Web Training

This web training resource is currently being updated to reflect the newest version of Divi, which will come with several changes to the editing interface. Updates to the manual will be finished by Monday, July 13. In the meantime, please reach out to webteam@uwosh.edu with any questions.

Navigating Your WordPress Site

How to Log In

Each site at UW Oshkosh has some number of editors who can log in to that site. If you are an editor of a website, you can log in by following these steps:

1. Type your website’s URL into your browser and add /wp-admin to the end of the URL. Example: uwosh.edu/advising/wp-admin
2. Then, enter your NetID and password and click on the “Log In” button. 

Adding/Deleting Editors

1. To add or delete an editor on your website, send an email to the IT HelpDesk at helpdesk@uwosh.edu. 
2. The Help Desk will need to verify the change with your Site Owner. If you do not know who your Site Owner is, or if your Site Owner has left UW Oshkosh, please ask the HelpDesk for assistance. 

Preparing to Edit Pages

When you log in, you will see two dark grey menus across the top of your browser and on the left-hand side of your browser. From here, you can find the Edit Page interface for a page in one of two ways:

Method 1

1. On the left-hand menu, Click on Pages > All Pages to see a list of the pages on your website. 
2. Hover over the page you would like to edit and click on the edit button. 

Method 2

1. Click on your site’s name in the top menu bar to move to the front page of your site. (You can also use this button to navigate from any page back to your Dashboard.)
2. You can browse through your site as normal while logged in to WordPress. A dark gray menu at the top of your browser will let you know that you are still logged in. 
3. From here, you can navigate to any page you wish to edit and click on Edit Page.

Editing a Page with the Divi Builder

The Divi Builder is an easy-to-use page editor that will show up on the Edit Page interface for your page.

• Your page is broken up into a number of sections (purple, blue or orange) that may be broken into rows (teal or red). You likely won’t need to worry about these elements.
• The actual content of your page consists of various types of modules (grey). Some common module types are Text, Image and Menu.
• Lime green modules are called global modules. Global modules are used for common page elements such as navigation menus and page footers. If you edit a Global Module, your change will be applied to every instance of that module throughout your entire site. Be careful with global modules and make sure you understand them before you edit them.
• The text that you see on each module in the Divi Builder is that module’s Admin Label. This text is shown only on the Divi Builder and is not readable on the public version of your page. You can edit this text straight from the Divi Builder.

To edit a module, follow these steps.

1. Click the Edit icon on a module. The Edit icon should look like a gear.
2. In the Edit Module interface that appears, make any number of changes to your module’s content and settings.
3. Click on the green checkmark icon to commit your changes to a module. Your changes will be saved for the duration of your editing session, but they will not be applied to your site yet.
   1. To leave the Edit Module interface without saving your changes, click the red X icon.
   2. Note: if you are editing a Global Module, any changes you have made will be applied throughout your entire site after this step.
4. Repeat steps 1–3 to make any number of additional changes.
   1. You can use the Preview button to see a preview of your page in a new browser tab.
5. If you would like to preview your page, click on the “Preview Changes” button in the Publish menu on the top-right side of your browser, outside of the Divi Builder.
6. To save all the changes you have made, click “Update” in the Publish menu.
   1. Careful! If you leave the Edit Page interface before clicking Update, all of your changes will be lost.

The Media Library 

The Media Library is your site’s collection of images, PDFs, and other documents. All of these files are saved in the same place and easily accessible throughout your website. 

• You can access the Media Library by clicking on “Media” in the left hand column.
• You can also access the Media Library while editing some modules. For example, when editing a Text module, you can click the button that says “Add Media” above the content field.

Adding Media

1. From the Media Library, click on “Upload.” You can either browse to find the files you would like to upload or drag and drop the files into the uploader.
2. When your file has been uploaded, you can edit it by clicking on it in the Media Library.
   • If your file is an image, it is extremely important to add a description of the photo to the “Alternative Text” section. This allows people with disabilities to be able to understand the photo if they are unable to actually see it. 
   • You may also add a caption and a description of the photo/file. 
   • Save your changes to the file by clicking “Update” in the box on the left-hand side of the file/image.

Adding Media to a Page

• If you would like to add an image to a page, you can create an Image module or add an image to a Text module with the “Add Media” button.
  • When adding an image to a Text module, you can edit certain properties of the file by clicking on your inserted image and clicking on the pencil icon. In the Media Library, you can edit the photo’s title, caption, size, linked URL, and other properties.
  • Back in the text editor, you can also click on an image and use the alignment icons to align your image to the left, center, or right.
• If you would like to link to any document in your Media Library, you can find the link by clicking on the file in the Media Library and copying the text in the “Copy Link” field.

Website Best Practices

Keep content concise

Set goals for your website, the pages within it and what you want people to do or find on your site. Once you have that set, write out the content needed to accomplish those goals and consider adding content only if there will be value added to your audience. 

Use headings/subheadings and lists to break-up content

In Web writing, think about your content in chunks. What “chunks” of information should stay together. Once you have determined which content should be grouped together, write a header or subheading for each section. This creates a visual break for your audience, helping them to digest the information. Breaking lists into bullet points helps the flow of your content. 

Write in the inverted pyramid style

The inverted pyramid style puts the most important information at the top, the who, what, where, when, why and how, in the first paragraph. Keep your sentences short and your paragraphs to one to three sentences, making the content easier to digest, and less overwhelming.