The following is an example of how the look of the Zest Home page can be customized with basic editing techniques.
Home page BEFORE
The Changes That Were Made and How They Were Done
Logo / Business Name
If you do not have a graphic logo for your website, your Business Name will be what is displayed on the side of your website. The text for your Business Name can be edited within the Site Settings, and the look can be edited with Site Name section located in Typography.
If a graphic logo is added to your site, that will replace your Business Name on the side of page. This can also be added in the Site Settings.
Default business name
Setting Business Name
Adjusting settings for site name
Business Name after changes applied
Background Image for Entire site
Default background image
Removing background image
Background Image for HeaderContainer
The background image for the container was changed from the default background to an image added by the user.
Default
This is done by going into Edit Mode and selecting the blue edit icon for HeaderContainer.
In the edit window, click on the image to change it.
Changing the background image
Select the image from your File Manager, from the royalty-free stock images within the Content Manager, or upload your image directly from your computer.
When you have chosen your image, click ‘Accept’.
Selecting new background image
Adjust how the image displays using the available settings. Click ‘Save’ to save your changes.
Settings for background
New background image set
Header section content
The text content and the from content were moved by clicking and dragging each piece of content from Header to CallToAction.
Content in Header
Content moved to CallToAction
New text area
FeatureContainer section
A background color was added to the FeatureContainer area. This is done by going into Edit mode and selecting the blue edit icon for FeatureContainer.
In the edit window, click on Background Color and use the color picker to select a color, or enter a custom value if you know it. Click Select to keep your selection, then Save changes.
Setting background color for FeatureContainer
CallToAction section
Content moved to CallToAction
Section 1
When the background image for the entire site was removed (see above), the background color for Section1 defaults to the background color for the entire site. In this example, the background of the website is set to white.
Content section
Content in PageHeader
Content moved to Content section and edited
Selecting linked text
Edit button text
Setting format for Heading 2
Setting format for buttons
Section 2
Default content in Main
To change the background color of Main area, click on the blue pencil icon in the top left corner of the content area.
In the edit window, click on Background Color and use the color picker to select a color, or enter a custom value if you know it. Click Select to keep your selection, then Save changes.
Setting background color for Main
Setting spacing for Main
Default content in Main after changes
The image in SideBar was also updated.
Default image
This was done by going into Edit mode and clicking on the image of the heart. In the edit window, select ‘Browse Images’ to select a new image from your File Manager.
Edit window for default image
When the new image is selected, click ‘Place This Image’ to save your changes.
New image selected
New image
Section 3
A background image was added to Section 3 by clicking on the blue pencil icon in the top left corner of the content area.
Click to select an image from your File Manager as was covered previously.
Setting background image
Setting background color for Content 1
Adjusting spacing for Content 1
Adjusting text color
Content 1 after changes
Default
Deleting content
Setting background color for Column 1
Adjusting spacing for Column 1
Selecting and placing an image
Text as Heading 3 format
Setting text as hyperlink
Adjusting the settings for Heading 3 and Links
Column 1, Column 2, and Column 3 after changes
In Content 2, a new text area was added. The text is set up as a hyperlink with a button class applied.
Setting hyperlink as button
Content 2 after changes
Footer
The copyright information at the bottom of the page was updated to reflect the name of the business.
This is done by going into Edit mode and selecting the section and editing the text.