Skip to content

CMS Basics Tutorial

Adding a New Web Resource

  1. After logging into the Evolution CMS manager, you will see this home page.

CMS editor's home page

  1. To create a new web page, either click the page icon in the top left corner or right click on the folder you want your new resource in and select "Create Resource Here."

cms editor with two icons highlighted

  1. A "New Resource" page will appear. After adding a page title, a URL alias will be automatically generated upon saving the page.

screenshot of new resource edit page

Adding Content to a Page

  1. In the template variables, select the type of content you would like to add from the dropdown menu.

screenshot of the editor's content section

Types of Frequently Used Blocks

  • Content: Use to add text, images, tables. Generally most used
  • Banner Image: Use to create a large banner on the page
  • Tabs Content: Use to create content sections to be used in a tab system
  • Reveal Content: Use to create a section that can be hidden or revealed by clicking a button in another block
  • Columns: Use to set up columns populated by content blocks
  1. To open the content block, click the blue plus icon on the left hand side.
  1. This section is a row. Most content can be added here.

screenshot of a text row with numbered icons

  1. Leave this as default to have content stay on the left side of the page. Change to Center Row(s) to have content vertically centered on the page.
  2. Change the column size here to change the width of the content on the page.
    1. Each row on a page is made of 12 columns. When you want two or more rows of content to appear beside each other on the page, their column size must add up to 12 or less. 
    2. Example: To put an image beside a paragraph of text in two different rows, both rows can be set at Col 6. Or, the image can be set smaller at Col 4, and the text set to Col 8. Once they add up to 12, the next row in the CMS will appear beneath them.
    3. To force a row to end before adding up to 12, change the "Regular Column" option to "Last in Row."
  3. Use the plus button to add another row. Use the minus button to delete a row.
  4. Add in text links to the page.
  5. Add images to the page.
  6. Open the source code editor to edit the HTML directly. It is good practice to paste text directly into the source code editor to avoid copying unneccesary elements and styling. See below for details.
  7. Use this dropdown menu to change text styles.

Why You Should Paste Into the Source Code Editor

When copying text from an external source, such as a document or a webpage, it may also include classes, elements, or spacing that is not needed. You may not be able to see these elements in the text field editor.

Example: A list is copied from a document. It looks fine in the text editor, but when the source code is opened, unnecessary styling and spans are visible. screenshot of unordered list in a text fieldscreenshot of source code

A list made the same way in the text editor would look like the same, but the source code would be cleaner.

screenshot of a list in a text field

screenshot of source code list

Text can still be copied from external sources, but instead of pasting it into the text field, it should be pasted into the source code editor instead. Doing so will turn the text into a standard paragraph style that may then be styled as desired.

Resource Options

  1. To view information about a resource, right click on its name in the site tree on the left side and click "Resource Overview."
  1. This screen will appear, giving you details about the resource.

screenshot of a page overview

  • Create Resource Here: Click this button to create a new resource with the current resource as its parent.
  • Create Weblink Here: Click this button to create a new weblink with the current resource as its parent. See more below.
  • Edit: Click to edit the resource.
  • Move: Click this to move the resource to a new location in the site tree. Select move, click the name of the new parent resource in the site tree, then save.
  • Duplicate: Click to duplicate the current resource in the same location. This will duplicate all of the resource's content, as well as any child resources it may have.
  • Delete: Click to delete the resource and any child resources it may have. Once deleted, the page will appear striked out in the site tree, and can be undeleted if necessary.
  • Preview: See the page in a new tab.

Adding a New Weblink

  1. Click the link icon in the top left or right click on the folder you want to put the weblink into and select "Create Weblink Here."

screenshot of the cms home page with two icons highlighted

  1. Edit your new weblink.

new weblink edit page screenshot

  1. Add the title which you want the weblink to show on the page menu.
  2. Add the link where the weblink should go.
    1. If it is linking to another page in the site tree, use the page ID in this format: [~##~]
    2. If is linking to another website, use a standard link. Example: https://www.thesaurus.com/
  3. Save when finished.