Website creation and editing

Getting started

New Users

• Individuals responsible for maintaining Mines websites must complete training before being granted editing and publishing access. Please view the website training page for more details.

Requesting Access to an Existing Site

• If your department or group has a website and you need editing access, please fill out the Communications and Marketing request form. It will take 1-3 business days to process and a member of the team will notify you by email as soon as access has been established.

Requesting a New Website

• If you would like to request a new website for your department, unit or team, please fill out the website request form. It may take 2 – 4 weeks to set up, and we will contact you via email when the site is ready for development. Please review our training material and accessibility information in preparation for your new site.

Logging In

• Once you have been given access to your site(s), you will be notified via email.
• Go to your site URL and add /wp-admin to the end of the web address—this will bring up the login page.
• Type in your username and password.
• A black menu ribbon will appear beneath the address bar when you are logged into your site.

WordPress basics

Mines utilizes WordPress, a professional, user-friendly web publishing platform to help community members develop and maintain both professional and personal websites. We use a WordPress tool called Divi Builder, which is a block-based representation of websites. It allows for a drag and drop page-building experience. Our training will help you understand how to use these moduels to best suit your user and content needs. It’s important to note that attempting to edit a page using the standard editor will result in unintentional deletion of the page’s layout and design elements. If you are unfamiliar with Divi please make sure to attend a training before attempting to update pages.

Dashboard

The administrative area of your website. Once you’re logged in, you can access all the functions necessary for managing your website. Controls are found on the top toolbar, side toolbar and in-page components.

Page Components

Pages are comprised of sections, rows and modules. As you build a page with Divi, you will:

1. Choose and add a section type
2. Add a row, and select how many columns you’d like in that row
3. Fill the columns with types of content (modules)

Sections

Sections are the largest and most basic building block for designing layouts. Used to create large groups of content and the first thing you add to your page. There are three types of sections:

1. Standard section – offers the largest selection of modules
2. Fullwidth section – expands the entire width of the screen
3. Specialty section – allows for the most diverse column structures

Rows

Rows sit inside of sections. There are 20 row types that you can select to break up your sections into columns. After you define a column structure for your row, there is no limit to the number of modules you can place in it. When you click on Add Row, you will be prompted to select how many columns you’d like. This can be altered at any time.

Modules

Modules are the various content types that make up the pages. The most common are text and images, but other types are available such as call to action, social media feeds, accordions, maps and tabs. Review all the available modules.

Images

Images are an essential part of a website and we encourage you to add them to yours. Each site has a separate media library, which you can access on the left toolbar.

You can add images to your library at any time—before your build or during.

Image Sizing

Make sure your images are an appropriate size before adding to your website. Images for websites should not be larger than 400 KB.  Please review instructions using this recommended free online image editor.

Uploading Images to your Media Library

Before being able to display any images on your website, you first must upload them to your media library.

• Log in to your website
• Go to the dashboard
• In the left navigation, go to Media, and select Library

• Click on the Add New button

• You can either drag and drop images into this field or click Select Files and choose images from your files
• When you are ready to add an image to a page, follow the instructions below to either insert it into a text box or an image module

Adding an Image

To Text Box

• To add an image to a module, place your cursor where you’d like the image to appear
• Click the Add Media button—this will open the media library

• If your chosen image has already been uploaded, click on it and then click Insert Into Page
• If your chosen image has not been uploaded, you can simply open the folder where it’s located and then drag and drop it into the library

To an Image Module

• Open (or add) an Image Module
• Click on Upload an Image
• You can select from the image library or open a personal folder to drag and drop an image
• Other options are also available including making the image a lightbox, linking the image to another location and adding a background

Image Guidelines

• Accurately represent the program, event, community, location, etc.
• Subjects look happy/engaged
• No words needed to understand what’s happening
• Photos are high quality and in sharp focus
• Nothing offensive or that misrepresents the university
• Accepted formats: JPG, JPEG, PNG, PDF*
• Mines photos available for use are located on the Zenfolio website

*If upload PDFs in the media library, please ensure they are accessible.

Modules

Modules are the building blocks of WordPress websites and allow you to add different content types to your pages, e.g. plain text, images, tables of information and buttons. The first section contains the most frequently used modules and the second section contains less frequently used modules.

For additional information about any of the modules, you can visit the DiviBuilder website.

Most Common Modules

Less Common Modules

PDF and Word Documents

Adding attachments to websites is not encouraged, as it is more helpful for content to be on an actual webpage. This is because saving flyers, schedules, calendars, etc. as images or untagged PDFs saves them as images, meaning a screen reader can’t extract any information from them. But if you need to add an attachment, we suggest a Word document converted to a readable PDF file.

Uploading Files to your Website

Before utilizing a PDF on your website, you first need to upload it to your Media Library.

• Log in to your website
• Go to the dashboard
• In the left navigation, go to Media, and select Library

• Click on the Add New button

• You can either drag and drop files into this field or click Select Files and choose files from your computer
• When you are ready to add a file to a page, follow the instructions below to either insert it into a text box or an image module

Adding a Hyperlink to a File

• Log in to your website and navigate to the page where you’d like to add the document link
• In the left navigation, go to Media, and select Library

• Find the PDF you want to link to in the Library (e.g. SAMPLE PDF) and click on it
• The document details will open

• Copy the URL in the top right box
• Close the box and exit the Library
• Return to the page you want to update and in editing mode, highlight the text you would like to link to the document
• Click on the link button

• Paste the URL into the link field, click the arrow

• Save and Exit

Word Documents

• When creating the document, ensure that you are adding proper headings, alt text and link text.
• After you have saved a copy as a Word document, save it as a PDF.
  • Select File
  • Save As
  • File Format: PDF
• If you want to check that the text is readable, you can simply try to highlight it with your mouse. If you can, it is accessible—if you can’t, it is not.

Visit the WebAIM site for additional information on tagging PDFs and accessibility.

Online tools are available to help you review your PDFs for accessibility. Some of them include:

• Adobe Acrobat DC Accessibility Checker
• PAVE.org.

Anchors

When you want to help a user get from one page to another, or one site to another, you will likely use a simple hyperlink. But if you want to help a user get to a specific place on a page, you can use an anchor. Anchors can:

• Link the user from one location to another location on the same page
• Link the user from one location on a page to a specific location on a different page

Creating an Anchor text link in divi

STEP 1: CREATE THE ANCHOR LINK

Create the text for you anchor link and then add a hyperlink on it just like you would do when creating a normal link.

STEP 2: ASSIGN THE URL

Our url for the sample above would be: https://www.mines.edu/webcentral/anchors/#anchor-link
The anchor url is the url of the page followed by # and your text. The link can be anything you want but it is recommended that your link is related to the subject.

Faculty websites

Colorado School of Mines offers faculty the ability to create a personal website in a dedicated WordPress-based web environment. If you would like to make use of this service, please fill out a request.

Please note that while we provision the site and provide hosting space, we do not offer additional support, such as content design or customization. The faculty member is responsible for adding content and images and managing and maintaining their personal website.

All newly created websites and pages on Mines’ domains must follow accessibility guidelines.