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