Website Tutorial

Misiway Milopemahtesewin

Website Managers

This website has been developed with WordPress, a state of the art publishing platform with a focus on aesthetics, web standards and usability. Remember to download a copy of the development guidelines document. We will have uploaded the full training session to YouTube as unlisted, which has been broken down into chapters for all of the sections within this tutorial guide.

The following tabs offer instructions through text and video, as well as specific details on settings, sections, and editing capabilities that are now available to website managers. In order to access this page, you must also be logged in to your user account. This page is private and can not be accessed by the general public.

Introduction

Welcome to WordPress

WordPress is an open-source content management system, and the most popular website management or blogging software in use on the web – supporting more than 19.5 million websites. That’s over 30% of the entire web!

  1. The backend admin menu has been simplified for your use. Some of the menu items are strictly for development purposes and can be made available, upon request. The following menus have been enabled for users under the editor profile:
  2. Do not expect to master website management in one sitting. Take your time when using the software, as doing too much at once can become overwhelming.
  3. If you are unsure of something, get in touch with the developer.
Discover WordPress

The Page Builder

Introducing Elementor, the most popular page builder available for WordPress. Take control of your content by building any layout you can imagine with this intuitive, frontend builder.

  1. Due to the builder’s steep learning curve, some element features have been disabled. The development team has given you enough flexibility to make changes to the layout’s content, without feeling overwhelmed.
  2. The duplicate button within Elementor should become your best friend. It can help you build consistent looking page layouts. Use it often and use it wisely.
  3. When working on website revisions, we recommend that you save often.
  4. If you are unsure of something, get in touch with the developer.

Below are official Elementor tutorial videos that should help you get to know the product and its extensive set of features. More videos can be found on their YouTube page.

Discover Elementor

Revision History Tool

The Elementor history system stores a record of actions and revisions for each page and post. It allows you to see what changes were made at each step of the editing process, by simply clicking on each of the buttons. The display will revert back to the indicated changes made.

  1. For Actions, simply run through each button that indicates the change made. Find the version you wish to restart with and go with it.
  2. For Revisions, find the saved or auto saved version of the page or post you are looking for and click the Apply button to restore the layout. The system will immediately revert back to that version.
Learn More

Manage Your Media

Recommended Image Sizes

There are three essential image dimensions that get used throughout the website. It is important to set proper image dimensions before uploading to the media library. Please consider the following before adding a new image.

  1. Background images must be set to a dimension of 1920 x 1080 pixels. These images should not exceed 250kb in file size.
  2. All other images must be set to a dimension of 1000 x 563 pixels (or 563 x 1000 pixels). These images should not exceed 150kb in file size.
  3. In some cases, specifically on the home and services pages, you may be better off to use a photo dimension of 1000 x 1000 pixels.
  4. Graphic elements that are used sparingly throughout the website can have more dimension freedom. Various graphic widths and heights have been uploaded and used; however, none should exceed 2000 pixels wide or high.
  5. Below is a link to a recommended image resizing websites:
  6. When saving your resized files, be sure to name them something relevant and searchable to the image. This will make it easier to find within the media library.
BeFunky Photo Editor
Birme Bulk Editor

Upload to the Media Library

The media library holds every uploaded file available for use on all sections of your website; categorized by date added or type. Manage your media library and consider the following.

  1. Upload new media by selecting Add New from the Media Library menu section. Select the files you wish to upload from your computer, then either use the upload menu or drag and drop them onto the browser screen.
  2. Be sure to add your media to the proper media category for each uploaded file. This is an essential step to keep a clean, optimized, and searchable library. Your options are as follows:
    • Background
    • Document
    • Graphic
    • Photo
    • Video
  3. If you wish to improve your media’s search engine optimization, edit the metadata (title, caption, alt text, description) by clicking on the file within the media library. Be sure to use relevant metadata that properly describes each image.
  4. If items are in use on the website and are deleted from the media library, they will no longer be displayed. Please be careful when deleting media library content.
Browse Media

Replacing Live Media

Since some media may be linked to several different pages of the website (documents for example), we offer a solution that helps to avoid broken links or outdated files. The following video and guidelines will show you how to easily replace a media file without breaking any live links.

  1. To replace a new version of live media, you must first open the Media Library.
  2. In the Media Library, click on a file you wish to replace.
  3. Click on the blue Replace button and follow any prompts that appear.
  4. Select the new file from your computer that you wish to replace it with.
  5. A popup will prompt you that the file has now has been updated.
  6. To test the new file, find where the media is located on the website to make sure the new version appears. In order to see the changes right away, you may need to clear your browser cache. Rest assured that new visitors will not have to do this.
Find a Media File

Modify a Page

Using Page Elements

Although the development firm does not recommend that you revise live page layouts, we have given you the creative freedom and the tools at your disposal to do so. Some restrictions do apply.

The video also shows you how to copy brand elements, which can be pasted to any section of another page or post. Use this feature to keep layout consistency throughout the website.

  1. Do not change the permalink (slug) of an existing page, as this will disrupt the link and could deactivate the page from the menu system.
  2. It is important to keep all page settings at their default. Any unspecified changes to the structure may remove key pieces of the page’s framework.
  3. If you make a mistake and need to go back, don’t forget about the revision history tool (bottom of the editor), described in the Introduction section.
  4. Images found on current page designs can be changed at any time. All background images are set to 1920 x 1080 pixels, with a file size under 250kb. All other images are once again recommended to be at a dimension of 1000 x 563 pixels (or 563 x 1000 pixels), with a file size of under 150kb.
  5. Graphic elements found on current page designs can be changed at any time. The dimensions of these graphics range, depending on where they are being used; however, none should exceed 2000 pixels wide or high.
  6. Keep in mind that responsive breakpoints (widescreen, desktop, laptop, tablet, mobile) should also be reviewed and revised when making considerable changes to a page.
  7. In order for the changes made on the page to stick, you must click the Publish button at the top of the editor.

Below are official speed art videos that give you a great sense of how website pages can be built using Elementor. A small tip, slow down the video playback speed so it is easier to comprehend.

View Your Pages

Creating Space for Elements

One of the biggest challenges when it comes to designing a page layout, is dealing with margins for space. Elementor makes this an easier task.

  1. When you see elements that are stuck together, that usually means they need a margin for vertical space.
  2. Click on the item that you wish to create vertical space for and make your way to the advanced menu tab.
  3. The standard that has been used throughout the website is 20 pixels of vertical space. Select the area in which you need space (top or bottom), and add the number 20 within its respective box.
  4. Once you are satisfied with your changes, click the Publish button to push them to the live site.
View Your Pages

Managing FAQs

Learn how to add to or edit the several FAQ accordions that are found throughout the website.

  1. Go into the pages menu in order to access the page builder for the pages with FAQ elements.
  2. Click on the FAQ element. Use the navigator option if you can’t seem to click on the right layer.
  3. We ask that you watch the video for the remaining instructions on how to manage a table element.
  4. Once you are satisfied with your changes, click the Publish button to push them to the live site.
View Contact Page
View Your Pages

Creating a New Page

Please note that this option may not be available for all editors. It takes a few meticulous steps to make this happen, so only certain users will have access to the following options. 

  1. The easiest way to create a new page is to clone one that already exists. Find a page that has a similar set of content you wish to have on the new page. Hover over that page and select the duplicate option.
  2. The backend will reload and a new page will be drafted. Use the quick edit option to name it, set your slug (URL), and set its order within the website’s hierarchy. Click update so the changes stick.
  3. You can now jump into the main WordPress editor to set initial page settings. Please watch the video for further instructions on this part.
  4. Once the new page has all of its main assets in place, you are ready to start editing its layout. Simply use the Elementor page builder (blue button) to craft your new page.
  5. Keep in mind that responsive breakpoints (widescreen, desktop, laptop, tablet, mobile) should also be reviewed and revised when making considerable changes to a page.
  6. Once you are satisfied with your changes, click the Publish button to push the new page to the live site.
  7. Once you review your page and feel like its ready for the public to see, simply go into the menu settings and add your new page to appropriate menus. Please watch the video for further instructions on this part.

Please refrain from deleting any templates within the page builder section. If they are deleted, main parts of the website will break. If by chance a template is deleted, please notify our development team immediately.

View Your Pages

Managing Services

Adding a New Service

Create or edit a service post that is published on the services page of the website. These dynamic posts will update within all sections that are expected to pull this content automatically.

  1. To publish a service post, select Add Post from the Services menu. To revise an existing post, find them listed under the same menu.
  2. Insert a creative title in the box at the very top. This title will also determine your post’s unique URL.
  3. Insert a featured image and optional Header Image at a dimension of 1920 x 1080 pixels. These images will be showcased within the thumbnail and header of the service post.
  4. Add a summary of your post into the excerpt box found just above the Publish/Update button. This is the piece of text that will be used to summarize your service post in certain areas. The excerpt should not exceed two sentences.
  5. Fill in the custom fields that pertain to the service post.
  6. If necessary, publish dates can be retracted, scheduled, or set to post immediately.
  7. Preview then publish or update your post.
View Services

Managing Resources

Adding a New Resource

Create or edit a resource that is published within different areas of the website. These dynamic posts will update within all sections that are expected to pull this content automatically.

  1. To publish a resource post, select Add New Resource from the Resources menu. To revise an existing post, find them listed under the same menu.
  2. Insert a creative title in the box at the very top. This title will also determine your post’s unique URL.
  3. Select your resource categories and tags, which will determine where these resources will be displayed.
  4. Select the type of resource you are uploading.
  5. Upload or link to your resource.
  6. If necessary, publish dates can be retracted, scheduled, or set to post immediately.
  7. Preview then publish or update your post.
View Resources

Publish News

Adding a News Post

Create or edit a news post that is published on different parts of the website. These dynamic posts will update within all sections that are expected to pull this content automatically.

  1. To publish a news post, select Add Post from the News menu. To revise an existing post, find them listed under the same menu.
  2. Insert a creative title in the box at the very top. This title will also determine your post’s unique URL.
  3. Select the News category to open a set of fillable custom fields.
  4. Insert an optional Featured Image at a dimension of 1000 x 563 pixels. This image will be showcased within the header of the news post.
  5. Add a summary of your post into the excerpt box found just above the Publish/Update button. This is the piece of text that will be used to summarize your news post in certain areas. The excerpt should not exceed two sentences.
  6. Fill in the custom fields that pertain to the news post.
  7. If necessary, publish dates can be retracted, scheduled, or set to post immediately.
  8. Preview then publish or update your post.
View News

Publish Events

Adding an Events Post

Create or edit an events post that is published on different parts of the website. These dynamic posts will update within all sections that are expected to pull this content automatically.

  1. To publish an events post, select Add New Event from the Events menu. To revise an existing post, find them listed under the same menu.
  2. Insert a creative title in the box at the very top. This title will also determine your post’s unique URL.
  3. Select the event category that best fits this post.
  4. Insert an optional Featured Image at a dimension of 1000 x 563 pixels. This image will be showcased within the header of the events post.
  5. Add a summary of your post into the excerpt box found just above the Publish/Update button. This is the piece of text that will be used to summarize your events post in certain areas. The excerpt should not exceed two sentences.
  6. Fill in the custom fields that pertain to the events post.
  7. If necessary, publish dates can be retracted, scheduled, or set to post immediately.
  8. Preview then publish or update your post.
View Events

Publish Jobs

Adding a New Job Post

Create or edit a job post that is published on different parts of the website. These dynamic posts will update within all sections that are expected to pull this content automatically.

  1. To publish a job post, select Add New Job from the Employment menu. To revise an existing post, find them listed under the same menu.
  2. Insert a creative title in the box at the very top. This title will also determine your post’s unique URL.
  3. Add a summary of your post into the employment description. This is the piece of text that will be used to summarize your job post in certain areas.
  4. Fill in the remaining custom fields that pertain to the job posting.
  5. If necessary, publish dates can be retracted, scheduled, or set to post immediately.
  6. Preview then publish or update your post.
View Jobs

Managing the Directory

Adding a Directory Listing

The interactive directory is very easy to manage and add listings to.

  1. Access the map by clicking the Directory menu.
  2. At this time, only one map exists. Click on the Edit button to start working within it.
  3. Follow the immediate prompts to create a new listing. The following information is required for a full listing submission:
    • Title
    • Address
    • Description
    • Website or social media link
    • Photo gallery (1000 x 563 pixels)
    • Category selection(s)
    • Phone number
    • Fax number
  4. For consistency purposes, be sure to select the following options:
    • Animation = Drop
    • InfoWindow open by default = No
    • Display on front end = Yes
  5. To publish your listing, simply click the blue Add Marker button.
  6. Be sure to save your map (gray button) once you are done adding markers.
View Directory

It's Been a Pleasure

Congratulations on your new website! We would like to take the time to thank you for trusting in our work. It has been a pleasure working with you and hope that this is the continuation of something great.

We are here to answer any of your questions. If you need more guidance, we can help. While you host with us, we will continue to update and maintain the website. For larger revisions, we will still be available to help, but at an additional cost.

We’d love to hear about your experience, and any constructive guidance on how we do things. If you haven’t already done so, please take a moment to write us a review on our Facebook page. It would be much appreciated.

705-262-4960

info@detailmedia.ca