Website creation and editing

Websites in the mines.edu environment are official sites generally intended to inform users about academics, programs, services and events at Mines. They are run by assigned area administrators and follow guidelines* and rules for an official website.

Websites and pages in the people.mines.edu environment are sites for faculty, staff and student profile pages as well as Mines’ research programs and projects. They are administrated by individuals or groups of individuals and provide more flexibility regarding format, layout and guidelines*.

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

Getting started

New Users

  • Individuals responsible for maintaining Mines websites must complete training before being granted editing and publishing access. Please fill out the Communications and Marketing request form to request training.

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 3-5 business days 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.

    Pro Tips

    • If you are an admin for multiple sites, you can easily move between them by hovering over “My Sites” in the top left of the toolbar. Your sites will display as a list.
    • Be careful to not create a new “Post” when trying to create a new page. Posts are a feature for blog sites only.

    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.

    Pro Tips

    • You may have multiple sections on a page or just one—it all depends on your content and layout needs.
    • Once your columns have been established, you may drag and drop existing modules around in them.

    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

    Screenshot displaying library button

    • Click on the Add New button

    Screenshot of Drop files anywhere field

    • 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

    WordPress screenshot of WYSIWYG, highlighting the Add Media button

    • 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

    WordPress screenshot of media library, highlighting photo upload and attachment details

    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

    Accordion

    A design tool that allows you to display content in collapsible tabs (like this!)

    Button

    A call to action, helping users accomplish a task such as learn additional information, open an application or form or go to another website.  You can modify color, text and size.

    button

    Call to Action

    A visual prompt asking users to accomplish a task. This module combines a title, body text, button and a contrasting background

    call to action

    Divider

    Add a horizontal line rule, custom vertical spacing or both

    divider

    Image

    Add images anywhere on your page—they also have several animation options

    student looking in museum case

    Image Intense

    This adds overlay and hover effects to image and text buttons. View the Image Intense site to see available options.

    image intense

    Map

    Embed a custom Google Map on your page. Can display as small or full width format

    google map

    Person

    A personal profile block. Helpful when creating an “about me” or “who we are” page. Combines text, imagery and social media links into a single, cohesive module

    profile examples

    Post Navigation

    Built-in navigation that directs users to next or previous information. For example, if you have a series of articles, you can have navigation reading “Read the Article Titled This” visible to prompt the reader

    Post Navigation example

    Post Title

    Displays the title of your current post and featured image. Used for blog posts

    Slider

    A rotating selection of images or videos

    Social Media Follow

    Create icon-cased links pointing to your online social profiles such as LinkedIn, Facebook and Instagram

    athletics facebook feed

    Tabs

    A great way to consolidate information and improve user experience. Tab buttons are stacked to create a great look inside any sized column

    tabs screenshot

    Text

    Areas for text added in a WYSIWYG (What You See Is What You Get) box

    Toggle

    A toggle is a series of accordions, allowing you to consolidate information and improve user experience on a page (this page is made with toggles)

    toggle series

     

    Video

    Embed a video in your webpage

    Less Common Modules

    Audio

    Add an audio file to your webpage

    Bar Counter

    Animated counter used to display statistical data

    number counter

    Blog

    This module allows you to add a blog feature to a webpage. This may be helpful if you have projects with frequent updates

    Blurb

    Combines text and imagery to showcase small bits of important information

    blurb example

    Circle Counter

    A visually-interesting way to display a single statistic. The number counts up and the circle graph fills to the percentage desired

    circle counter

    Code

    Allows custom code to be entered into the WYSIWYG for additional options

    Contact Form

    A simple form allowing users to contact you directly through your website

    contact form example

    Comment

    Place a comment from anywhere on your page. This is generally most useful with blogs or letters to the editor

    comment example

    Email Optin

    Create a mailing list through your website. This module supports MailChimp, Aweber and Feedburner integration

    email opt-in

    Filterable Portfolio

    Display most recent projects in either a grid or standard fashion. Projects may also be filtered by categories

    Gallery

    Create and organize collections of images—comes in grid or slider format

    gallery example

    Login

    Useful if you have a private website or page that require members to log into

    Number Counter

    Display numbers in a more engaging way. Could be useful for showing enrollment numbers, graduate numbers, on-campus housing numbers, etc.

    number counter

    Portfolio

    Show off work in a customized column structure. Visit the Divi Resources site for previews and instructions

    Post Slider

    A slider to display several features in a rotating slider. Great for showcasing top stories (best practices suggest no more than three or four)

    Post Navigation example

    Pricing Tables

    Stylized pricing tables with spaces for bulleted lists, prices and buttons

    pricing table

    Search

    Place a search form anywhere on your site. Users will be able to search all through your website content

    search bar example

    Shop

    Allows you to set up ecommerce on your site for purchasing and checkout

    Sidebar

    Create custom sidebars on any page in your website

    Testimonial

    Add compelling quotes from students and other stakeholders to encourage trust from your readers

    testimonial

    Video Slider

    A great tool for organizing and displaying a collection of videos

    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

    Screenshot displaying library button

    • Click on the Add New button

    Screenshot of Drop files anywhere field

    • 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

    Screenshot displaying library button

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

    screenshot of PDF details highlighting ULR field

    • 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

    Screenshot of wysiwyg toolbar

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

    screenshot of hyperlink url field

    • 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:

      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.
      screenshot of an anchor 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.

       

      Lab/Research group websites

      Websites in the mines.edu environment are official sites generally intended to inform users about academics, programs, services and events at Mines. They are run by assigned area administrators and follow guidelines* and rules for an official website. These sites are administrated by individuals or groups of individuals and provide more flexibility regarding format, layout and guidelines*.

      Colorado School of Mines offers labs and research groups the ability to create a website in our WordPress-based web environment, https://people.mines.edu. If you would like to make use of the People website service, please fill out a request and your website needs will be evaluated by our team.

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