The following is an example of how the look of the Zest My Training page can be customized with basic editing techniques.

My Training BEFORE

My Training AFTER

The Changes That Were Made and How They Were Done

Logo / Business Name

The business name text was changed and the look was modified. This change applies to the entire website and was covered in the Home Page guide.

Background Image for Entire Site

The default background image for the entire site was removed. This change also applies to the entire website and was covered in the Home Page guide.


The background color for HeaderContainer was changed. This was done by going into Edit Mode and selecting the blue edit icon for HeaderContainer.

Default HeaderContainer

In the edit window, select Background Color and use the color picker to select a color, or enter a custom value if known. Click Select to keep your selection, then Save changes.

Setting background color for HeaderContainer

The text paragraph in HeaderLeft was moved to Content1 by using the click and drag method.

Text paragraph in HeaderLeft

Text paragraph moved to Content 1

The image in HeaderRight was removed from the page.  

This was done by clicking on the image and in the edit window and selecting ‘Delete’ in the lower left corner.

Deleting image

HeaderContainer after changes


In this section, a background image was added, content was added to Content 1 and Content 2, and their container settings were adjusted.

Default FeatureContainer

The background image for the container was changed to an image added by the user.  This was done by going into Edit mode and clicking on the blue edit icon for FeatureContainer.

In the edit window, click ‘Add Background Image’ to select a new image from your File Manager, the royalty-free stock images found in the Content Manager, or upload your image directly from your computer.

When you have chosen your image, click ‘Accept’.

Selecting background image

Adjust how the image displays using the available settings. Click ‘Save’ to save your changes.

Settings for background image

For Content 1, the text was added when moved from HeaderRight. A background color was also added by clicking the blue edit icon and choosing a background color using the same process outlined previously.  

When using the color picker to choose a color, the opacity of the color is set using the slide scale in the color window.

Adjusting color opacity

The Spacing tab was used to adjust the spacing within the container. Save your changes when finished.

Setting spacing for Content 1

For Content 2, a border was added to the container.

This was done by clicking the blue edit icon and in the edit window, selecting the Border tab. A style was chosen along with a width and color. Save changes when complete.

Setting border for Content 2

An image was also added to Content 2 using the Image element

When the element is placed, the edit will open and prompt you to select an image from your File Manager.

Selecting your image

When you have chosen your image, the element suggests a size to use based on the original dimensions of the image and the size of the container the image is being placed in.

Suggested size to use for image

By clicking the ‘Choose Size’ tab, a new size can be selected from a dropdown of common size types (thumbnail, gallery, etc.) or a custom size can be generated by entering in a custom width.

Choosing image size

Create a custom size

The alignment of the image can also be adjusted within the Advanced tab of the edit window.

Setting alignment in Advanced tab

Once your size is selected, click ‘Save changes’ to place the image.

Size selected and image ready to be placed

FeatureContainer after changes

Section 2

Here the text in Main 2 was edited and the image in Sidebar 2 was removed.

Section 2 with default content

To begin, in Main 2, the default text was split into two text areas.

Default text in Main 2

This is done by first duplicating the content.

When viewing the text in the Text editor, select the ‘Source Code’ button on the far right of the tool bar.

Source code button

In the Source Code window, highlight everything and use your desktop command for ‘Copy’.

Copying everything in Source code window

Once copied, select ‘Cancel’ or hit the ‘x’ to close the Source Code window, then select ‘Close’ or the ‘x’ to close the Text editor window.

Next, create a new text area. Click and drag the Text Element and place in Sidebar 2.

Once again select the ‘Source Code’ button on the far right of the tool bar.

Source code button in new text area

Use your desktop command for ‘Paste’ to add in the copied information and click ‘Ok’. Then Save changes.

Pasting copied information

You should now see the same text content in Main 2 and Sidebar 2.

Duplicate content

Now you can edit the text as you see fit.

In our example, in Main 2 the list of educators was deleted, while in Sidebar 2 the text paragraph was deleted.

To delete a portion of text, click on the text box to open the edit window. Then highlight the portion of text you would like to delete, and press your ‘delete’ key. Save changes when ready.

Text highlighted

Text deleted

Also in Main 2 a new text area was added.

This was done by dragging and placing the Text element below the existing text.

New text was entered with the Heading 3 format applied to the first line.

Applying Heading 3 format

The alignment set to Center.

Setting alignment

And the text link is set up with the ‘button 1’ class to create the actual button.

Creating hyperlink

Applying button class

New text area with content

The settings for Heading 3 can be adjusted in the Style Settings under Typography, while the settings for buttons can be adjusted under Colors.


Adjusting settings for Heading 3 and Buttons in Style Settings

In Sidebar 2, the image was removed by clicking on it and selecting ‘Delete’ from the lower left corner.

Deleting image

Section 2 after changes


The copyright information at the bottom of the page was updated to reflect the name of the business.

This change also applies to the entire website and was covered in the Home Page guide.