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




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



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.