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



Updated text in Footer