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.
HeaderContainer
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
FeatureContainer
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
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
Footer
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.