Customizing Zest: Home

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.