The following is an example of how the look of the Foodie Bonanza 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

Header Background Color

The background color was changed from white to pink. This is done by going to the Design tab and adjusting the Style Settings by going to the Colors section and changing the background color for the Header.  This change will be applied to the all pages within the website.

 Heading color set to white

Heading color changed to pink.

Logo / Business Name

If you do not have a graphic logo for your website, your Business Name will be what is displayed at the top 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 at the top of page. This can also be added in the Site Settings.

 Business Name example


Graphic Logo example

(Note: Your website does not include a logo creator option)

Background Image for Feature Container

The background image for the container was changed from the default strawberry-themed background to an image added by the user.

Default strawberry background

This is done by going into Edit Mode and selecting the blue edit icon for the Feature Container.

In the edit window, click on the image to change it.

Changing 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 image

Adjust how the image displays using the available settings. Click ‘Save’ to save your changes.

Settings for background image


New image set as background 

CallToAction section content

Two things were done here.

First, the existing content was moved.

This is done by clicking and dragging each piece of content from the CallToAction section to the ContentMid section.

 Content being dragged to ContentMid area


Content placed in ContentMid area

Second, a new Text area was placed and the new text was added. The formats Heading 1 and Heading 2 were used for the text, with the look of each text format being adjusted in the Style Settings under Typography.

Editing text

Styling format for Heading 1 and Heading 2

Site Menu

The look of the site menu was changed using the Colors settings for Menu and Sub Menu.


Default menu

Styling format for Menu and Sub Menu


The number of listings displayed in the menu was adjusted by adding pages and editing menu items within the Pages section.


Main Menu items when viewed in Pages section


Menu after styling and adding of items

Section 1

The look of this section was changed along with some of the content.

The background image was removed and replaced with a background color.

This was done by selecting the blue edit icon for Section 1. In the edit window, type ‘none’ in the the source box OR click ‘Remove’ to remove the background image. Click on Background Color and use the color picker to define a color, or enter a custom value if you have one. Click Select to keep your selection, then Save your changes.

Removing of the background image


Setting of background color

Next, the image of the woman was replaced with another image. This was done by going into Edit Mode and clicking on the image of the woman. 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

The container containing the new image, ContentLeft, was also customized.

By clicking on the blue edit icon for ContentLeft, the Border tab was used to create a white border for the container.

Adjusting border settings for ContentLeft

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

Adjusting spacing setting for ContentLeft

The change in the container settings allows for a more custom look.

The slider content was also removed from the page. 

This is done by going into Edit Mode and selecting the slider. In the edit window, click the ‘Delete From Page’ button in the lower left corner to permanently remove from the website. Please note that deleting content in this manner CANNOT be undone.

Select 'Delete From Page' to remove slider from website

The provided Lead Generation Form content was added by moving it from the CallToAction section using the 'click and drag' method outlined above.

Section 2

In this section the text on the left side was edited and the image on the right was replaced using the same methods used for Section 1.

Default content

Same sections with updated text and image

The ‘Recent Recipe’ section was removed completely from the page. This was done by going into Edit Mode and clicking on each section of content and selecting the ‘Delete’ button in the lower left corner.

Deleting Recent Recipe text 

Deleting recipe images

Deleting recipe name and 'View Recipe' buttons

Section 3

Here, the background color was changed by clicking the blue edit icon for Section 3 and setting the Background Color and color intensity.

Default look and content


Setting background color

The text for the latest blog posts and the video spotlight sections were changed using the Text editor. The H3 format is used and customized using the Typography section of the Style Settings.


Editing Blogs & Recipes text 

Editing Video Spotlight text

Formatting style for Heading 3

After changing container settings and text edits


The copyright information at the bottom of the page was updated to reflect the name of the business.

Default text

This is done by going into Edit Mode and selecting the section and editing the text.

Editing of text

Updated text in Footer