Basic MODX User Guide

by Hayden Close ON May 29, 2019

Introduction

New to MODX? You’re in the right place. In this course you will learn the basics of managing your website.

This includes managing your account and how to create, edit and delete pages and posts.

This tutorial will give you the ability to manage your MODX website as and when modifications arise within your business.

Enjoy, and remember…

If you ever need our help with something not included in this course or any others then please get in touch.

Managing your user account

Login to your user account

1

Open your browser and enter the email address of your login page

2

Enter your username and password

3

Select 'Login'

Forgotten your login credentials

1

Select the 'Forgot your login' options on the login page.

2

Enter your Username or Email Address and select the 'Send Activation Email' button.

3

You will then be sent an email with a Activation link to recreate your password.

Edit your account Information

1

Hover over the user icon on the top right hand side and elect 'Edit Account' from the drop down menu that appear.

2

Log into your user account.

3

From this page you can edit the user account information.

4

Once the changes have been made - select the save button in the bottom right hand side to save any changes.

Reset your password

1

Follow the steps within the 'Edit Account Information' guide.

2

Once you are on the 'Edit Account' page, select the 'Reset Password' tab at the top on the page.

3

Enter your old password and the new password you want to use.

4

Finally, confirm the new password and select save.

Adding and editing pages

Creating a new page

1

Once you have logged into your account, locate the resources tab on the left hand side.

2

There are two ways to add a page.

The first option (Fig.1) is to select either of the 'new document' buttons. You can then drag the new page down to the required position.

The second (Fig.2) option is to select the '+' symbol next to a page to create a child page directly into this parent.

3

Provide a Title for the page and save the changes.

4

Below shows the website's tree. How a page appears on this tree represents how it appears on the header menu.

  • Dark grey means it’s on the menu
  • Light grey means it’s hidden from the menu (404, thanks pages etc)
  • Normal font means it’s live and published
  • Italic font means it’s not published and only people logged in can see it
5

Once you have edited you page following the next sections in this module, you can publish the Page an add it to the main menu like this…

6

Select the publish option and save the page to allow the page to become available for the public.

Note: The 'hide from menus' option will prevent the page from being used in a web menu

General page information

1

Enter the name/title of the resource. There is also a character count displayed on the top right so you know what will be visible on Google.

2

This is a longer title for your resource. This name will help with search engines and provide some more description of the page.

Note: That the brand name will also appear at the end of the long title as shown in the google preview.

3

Provide a description for the resource. The field is optional but will provide users will more information about the resource.

4

Enter a short summary of the resource within this field.

5

Add keywords to get a thumbs up and word count if keywords are used in the titles and descriptions.

6

Below shows a preview of how the page will be presented on Google, based on the information you have provided in the previous steps.

7

The alias is the address. For example this page could be accessed through https://unumbox.com/demo-page

This field will be automatically filled using the pages title by default.

Note: It’s best practice to only use lowercase characters, numbers and hyphens. The alias should only be changed from its default to improve SEO using keywords.

Editing the layout of your page

1

At the bottom of the page will be the content tab. This area contains all the pages' content.

2

Select the 'Add layout' option to be shown the different layouts which can be used.

Each option shows a graphic of how the content will be divide within the selected layout.

3

Once you have selected a layout option it will be added to the content. For example below shows a 2-column layout which separates the section of the page into 2-columns.

4

Unumbox can develop special fields and create templates with multiple layouts, if required.

Editing the content in your page

1

Once a layout has been selected, content can be added into each section by selecting the 'Add content' button.

2

Next, select the type of content which you want to add to the selected section of the layout.

3

This example uses the 2-column layout as shown in the 'Adding Layout' section. An image has been added to the right hand column. Also, a header & rich text box has been added into the left hand column.

Moving content around your page

1

Content can be moved easily through a drag and drop system. In this example the header will be moved from its current position, into a move position above the image on the right hand side.

2

First, click and drag the element you wish to move.

3

Move the element to the area you wish to place it. A grey box will appear to show where the element will be placed.

4

Once you are happy with the placement, simply let go of the left-click and the element will drop into place.

Uploading an image to your page

1

Once you have added a Image element (Ref. 'Adding Content')
Select the 'Choose' option.

Note: This also contains a drag and drop feature, where you can drag an image directly from your files into the image element.

2

Find the directory you wish to upload your image to and right click on it.
Then select the 'upload files' option.

3

From the following pop-up display select 'choose file(s)'

Note: This method can be used to upload multiple files into the chosen directory.

4

The computers files will appear. From here navigate to and select the image(s) you wish to upload. Once all files have been selected press the 'Open' option.

Note: It’s best practice to name images using lower case characters, numbers and hyphens.

5

The file(s) will appear as shown below. This will allow you to view the current state of each file and their size.

Click on the 'Upload' button.

6

Once all the files have been uploaded they will be displayed as successfully uploaded. This can then be closed.

7

Finally, select the image from the directory file.

Note: Files can be renamed once they have been uploaded.

8

The image will then be added into the content space. If you want to change the image select the 'delete image' option and repeat the process.

Note: For any images that have already been uploaded, simply select the image from the directory.

9

Alt tags can be added under an image to describe the image and help the visually impaired.

Alt tags can also provide search engines with text alternative. However, keywords shouldn't be forced into an alt tag. The correct image will allow keywords to easily flow through alt tags.

Adding a YouTube video to your page

1

Start by clicking 'add content' where you want the video to be added.

2

Select the 'YouTube Embed' option.

3

There are two ways to add the video.

1. Search YouTube for a video you want. (steps 4-6)

2. Paste the link of the video directly from YouTube. This option will add the video immediately.

4

After selecting the 'search YouTube' option. Search for the video you wish to add using the title or related keywords. Then click the 'search' button.

5

A list of related videos from the search you have completed will be displayed.

Select the video you want to add the to section.

6

The video will be added to the content area.

Adding and editing posts

Creating a new post

1

Select the blogs resources from the left hand side of the dashboard

2

Select the 'Create Post' option

3

Complete the details about the post. This works the same as creating a page.

4

Save the page once you have added the details. A blog requires a featured image which can be shown in the next course 'Adding a featured image'.

Adding a Featured Image

1

Select the 'add image' option shown below.

2

Select the image you want to use as the featured image.

Note: If you have not uploaded the image please refer to 'Uploading an image to your page' course within the 'Adding and editing page' module.

3

The featured image can then be cropped if required. The grey outline will show the area of the image which will be used as the featured image. Once you have edited the image select 'update'.

4

The completed featured image will then be shown on the blog. These option also allow you to remove the image, crop the image or replace the image.

5

Once you have added the featured image save the blog.

Publishing a post

1

There are two options when it comes to publishing a blog:

1. The blog can be instantly published once completed. (step 2)

2. A publish date can be scheduled for the future. (step 3-4)

2

To publish a blog immediately, tick the publish option and select save.

3

To schedule a date for the blog to be published select the 'setting' tab.

4

Enter the date and time you wish for the blog to be published. Then save the blog.

Adding Content to your post

1

Select the 'Add Content' options within the blog.

2

This will display all the content option avaible.

3

This example shows the use of a 'header' and a 'image right' element within the blog.

Quick Enquiry