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