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




My Approach BEFORE








My Approach 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.





FeatureContainer



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



Default FeatureContainer



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 FeatureContainer



The text in Feature is using the Heading 1 format. The settings for Heading 1 can be adjusted in the Style Settings under Typography.



Adjusting settings for Heading 1



FeatureContainer after changes




Section 1



Here a background image was applied to the container and the text was moved to a different container and edited.



Default Section 1



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 Section 1.



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




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



Deleting image





In Main the text was split into two separate pieces of content, and then moved to different containers.



Default text in Main





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.


Once again select the ‘Source Code’ button on the far right of the tool bar.  In the Source Code window, 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 and Sidebar.



Duplicate text content




Now you can edit the text as you see fit.


In our example, the first paragraph in Main was deleted, whereas in Sidebar, the second and third paragraphs were 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 content in Main and Sidebar after changes



Next, the text area in Main was moved to the Content container in Section 2 by clicking and dragging the text content from the Main container and placing it in the Content container.



Text content moved to Content container





In Sidebar, a background color was added and the Spacing settings were adjusted.


This was done by selecting the blue edit icon for Sidebar. In the edit window, select Background Color and use the color picker to select a color, or enter a custom value if known.  



Setting background color for Sidebar



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 Sidebar




Section 1 after changes




Section 2


In this section, the image was removed, the text areas were repositioned, and the look of the text was adjusted.

Default Section 2



Text from Main in Section 1 was moved and placed in Content as was previously mentioned.







In Column 1, the image was removed from the page.


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



Deleting image





The text areas in Column 1, Column 2, and Column 3 were also repositioned. This is done by clicking on a piece of content and dragging and placing into a new container.


In our example, the Bio-Individuality section was moved from Column 2 to Column 1, and the Deconstructing Cravings sections was moved from Column 3 to Column 2.




Text areas in Columns 1, 2, and 3 after repositioning





The titles for each section are using the Heading 4 format. This can be determined by selecting the text and viewing the format indicator in the lower left corner of the text window. ‘h4’ represents Heading 4.


Heading 4 text format



The look of Heading 4 is adjusted in the Style Settings under Typography.



Adjusting settings for Heading 4



And as each heading is also a hyperlink, the settings can further be adjusted in the Style Settings under Colors.


Adjusting settings for links



Section 2 after changes




Section 3


The color of the linked text found in Content 4 has been adjusted in the Style Settings as previously mentioned.




Section 3 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.