Using the MODx CMS

An introduction to the MODX CMS

The Content Management System (CMS) used to manage your website is a system of templates and pages. The templates are the fixed elements of the pages, such as the header and the menu.

Templates are not editable by the user as they are part of the design of your website.

Within the template area is a content area that you have access to via an easy to use editing panel.

The menu is generated automatically when a page is created and can be made to disappear from the menu if it is an internal page that doesn’t require a direct link from the main menu.

Logging into your website control panel

Go to http://www.yourwebsitename/manager and enter your user name and password.

Editing the content

Once logged into the system, click on the page you wish to edit from the list on the left of the screen. You will see a summary of this page, showing details such as whether it appears on the menu, which template is used and so on. To begin editing this page, click ‘edit’.

You will see a set of fields at the top of the page where the following can be changed:

Title – this affects what the page is called in the list on the left only

Long Title – this is repeated on the actual page in the title

Description – enter a description of this page if required; this is usually linked to the description meta tag used for SEO purposes

Uses template – this identifies which template this page uses

Menu title – this name appears in the menu (if ‘show in menu’ is ticked)

Menu Index – this alters the order of the menu items shown on the left hand side and in the live page itself

The lower panel is where the main editing is done – you might need to scroll the page down to see it.

The top part shows various editing tools – most of these are not needed, the ones you will probably use, are;

  • B I U – bold, italic and underlined text
  • Styles – these are pre-determined styles, more can be added if desired but we would do that for you
  • Format – choose a heading or a paragraph style for a selected piece of text
  • •- this sets a selected set of text to become a bulleted list
  • Chain symbol – this allows a link to be added to a selected section of text (to an email address or an internal or external page)
  • Tree in a box – this allows you to insert an image into the page

NB: The other buttons should not really be used as they will add unnecessary code to the page and make it slower to load, less search engine friendly and might detract from the overall design of the site. If new styles are required, we can add them for you.

To edit the page

Make any changes required to the text and click ‘save’ at the top of the page to save your changes. NB – there is no ‘undo’ feature at this stage as the changes are made live to the site.

To add a link

Select the text you want to become the link and click on the chain symbol. In the pop up window, select the ‘general’ tab if it is not already active and click on the drop down list ‘Link List’ and choose the appropriate page name.

Change the ‘Target’ to ‘open in new window (_blank)’ if you want the page to open in a new window whilst keeping the existing one open in the background (useful if you are linking to another site, but want yours to remain on the screen) otherwise, leave it set as ‘open in this window’ (useful if you are navigating to another page in the site and wish to close the existing window).

Enter a suitable title for this link in the ‘title’ field – useful for Search Engines and users when they hover over the link.

Click ‘Insert’ to finish.

The link will take on the appropriate style for a link that has already been set up for you.

To link to an e-mail address, enter mailto:joe@xyz.com in the Link URL field and follow the above instructions before saving your changes.

To insert an image

Place the cursor in the location where the image is to appear. Click on the ‘insert image’ icon (the tree in a box) and a pop up window will appear.

To search for the image, click on the small box to the right of the ‘Image URL’ field. All the existing images will be displayed, either choose one of these images if appropriate, or click on ‘Browse’ to search for and find an image on your PC.

When you have found the image, click ‘OK’ or ‘Insert’ depending on the type of PC you have, click ‘Upload’ and the image will appear in the image window.

Click on this new image and it will appear in the ‘insert image’ pop up window.

Enter a description and a title for this image (the description is the part that shows up when a visitor to the site hovers over the image).

Click on the ‘Appearance’ tab.

The dimensions of the image can be changed here – though it’s highly recommended that the image is re-sized before uploading to the system.

The image can either be aligned by selecting an option from the ‘Alignment’ drop down, or it is recommended that a pre-designed ‘Class’ is used.

Click ‘Insert’ to finish. The options can be changed at any time in the future.

To add a link from this image, just click on the image and follow the ‘adding a link’ instructions above.

Adding links to other material

There are two ways to upload documents to the system;

  1. Upload them in one go via the File Manager
  2. Upload them when creating the link

Using the File Manager

Click on Resources > Manage Files (from the top menu tabs) and navigate to the correct folder which is assets > files > xxx (more folders can be added here)

Click on ‘Browse’ and find the document on your computer and upload it as normal. If you are uploading several documents, click ‘Browse’ again and find another document on your computer.

Uploading from the page itself (or editing a link)

Open the page that will contain the link, select ‘Edit’ to go into editing mode and highlight the word(s) that will become the link. If a link exists, delete it by clicking the broken chain icon. Re-select the word(s) and click the chain icon. A popup window will appear –

  • If linking to another page on the site, click the ‘Link List’ dropdown list and select the page.
  • If linking to an external website, enter the name in the ‘Link URL’ field, remembering to add http:// at the beginning.
  • If linking to a document, click on the small box to the right of the ‘Link URL’ field that will open another window. Select the folder that the document will be located and either select the document if you have uploaded it earlier, or click on ‘Browse’ and find the document on your computer.

NOTE: If you upload a replacement document, the old one will remain on the system until deleted and the new one will have a suffix added to the document name.

When you have done this, the original popup window will still be in view, change the ‘Target’ to ‘open in a new window’ if linking to a document or if you are linking to another website. Enter a name in the ‘Title’ field (this will be displayed when the mouse is hovered over the link).

Click ‘Insert’ and you’re done!

Adding a page

To create a new page, the easiest way is to duplicate an existing page in the same section – choose the page and instead of selecting ‘edit’, choose ‘duplicate’ instead then re-name it as required.

Adding a news article

To create a news article, the easiest way is to duplicate an existing article/page in the same section – choose any page under the ‘news’ section and instead of selecting ‘edit’, choose ‘duplicate’. Put a new title, page heading & search engine description (they should all be the same) as these are used elsewhere in the site and then add in some information into the summary section – this is what’s shown in the first few lines of the ‘news’ page. Fill in the resource content section which houses the actual article; i.e. what is shown when the user clicks on ‘read more’ in the news page. The CMS will automatically place the article at the top of the list as it is the most recent so you don’t have to do anything.