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





Home page BEFORE








Home page AFTER





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


The Zest template differs from the Foodie Bonanza and Forks + Spoons templates in that it comes with a background image applied to the ENTIRE site.  

This can be changed under Background in the Style Settings.  

Default background image



To remove the background image completely, type the word 'none' in they space and Save Changes.  In our example, the image has been removed and the Background Color has been set to white.


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 default content in the Header section was moved and new content was created.


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



A new text area was created with the Text element and placed in Header.


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


The content was moved from the Header 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


The text in this section was moved from PageHeader section using the click and drag method. The button text was edited and the look of the text and button were adjusted in the Style Settings.

Content in PageHeader





Content moved to Content section and edited




The button text is edited by selecting the text box and highlighting the linked text.

Selecting linked text





Click the Insert/Edit link icon in the tool bar.  In the Insert link window, adjust the text of the button in the 'Text to display' box.  Click Ok and then Save your changes.

Edit button text



The format Heading 2 was used for the main text, with the look being adjusted in the Style Settings under Typography.

Setting format for Heading 2



The format for the button was adjusted in the Style Settings under Colors.

Setting format for buttons



Section 2


A background color was set for the Main area and the image was changed in Sidebar.

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



The Spacing tab was used to create spacing around the text within the container.

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


The entire section has been updated.


BEFORE



AFTER



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



For Content 1, a background color was applied and the spacing properties were adjusted.

This was done by selecting the blue edit icon for Content 1 and clicking Background Color and setting the color as mentioned previously.


Setting background color for Content 1



The spacing for Content 1 was also adjusted using the settings in the Spacing tab.



Adjusting spacing for Content 1




Text was also added using the Text element with the font color set to white within the Text editor in order to be visible against the background color.

Adjusting text color




Content 1 after changes




Column 1, Column 2, Column 3 were updated with a background color and changing of content.




Default



The content and each section was removed by clicking on each piece, and selecting 'Delete' in the lower left corner of the edit window.

Deleting content



Each section had a background color applied and the spacing adjusted in the same manner as previously mentioned.

Setting background color for Column 1



Adjusting spacing for Column 1




Each image was added by dragging and placing the Image element and selecting an image from the File Manager.

Selecting and placing an image

Text was added using the Text element.  The format Heading 3 was used and the text was set as a hyperlink.


Text as Heading 3 format



Setting text as hyperlink



The look of Heading 3 is adjusted in the Style Settings under Typography.  The settings for links can be adjusted under Colors.

                                                

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.

This is done in the same manner as shown previously.  To create a button, in the Class Dropdown, select 'Button 1'.  The formatting of the button was covered previously and can be adjusted in Colors.

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.



Footer updated