The following is an example of how the look of the Forks + Spoons 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 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


 


Graphic Logo





Background Image for Header Container


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



Default background image



This is done by going into Edit Mode and selecting the blue edit icon for the 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


 



CallToAction section content


The existing content was changed, including the button text and link.



Call to Action BEFORE





Call to Action AFTER





Heading 2 was applied to the revised text and the button text was updated. Heading 2 is found in the Formats menu in your text editing window.  



Note: Due to having a background color, the text color has been changed to white within the Text editor.  Highlight the text and change the color to something visible to make any edits, then once again change text color to white prior to saving changes.

 

Editing white text



The button text was updated by highlighting the text on the button and clicking on the Insert/Edit Link icon (chainlink) in the editing window toolbar. Update the 'Text to display' and 'Url' fields as needed and click OK, then Save Changes.  The color and look of the button was changed using the Colors settings for Buttons.




Settings for buttons



The background color was also changed.


This was done by selecting the blue edit icon for FeatureContainer.  Click Background Color and use the color picker to set your desired color and intensity, or enter a specific color number if known.  Click Select to keep your selection and then Save your changes.



Changing background color




Section 1 Content


The content was updated and colored backgrounds were added to ContentLeft and ContentRight.



Section 1 default





To change the background colors for ContentLeft and ContentRight, click on the blue edit icon in the top left corner of the content area. Click on background color and use the color picker to define a color or enter a custom value if you know it. Click Select to keep your selection.



Setting background color



The Spacing tab was used to create spacing around the image within the container.  Save your changes when finished.  Repeat process for ContentRight.

 


Adjusting spacing for ContentLeft



The image in ContentMid was also updated.

 

The image of the woman was replaced with another image of a man. 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





Section 1 with updated changes





Section 2 Content



The images in DisplayCardTop1 and DisplayCardTop2 have been updated, as well as the text in DisplayCardBottom1 and DisplayCardBottom2.



Section 2 default




The images and text were altered using the same procedures for editing text and changing images as described above in Section 1 Content.



Section 2 with updated changes

 



Section 3 Content


The content in areas Main 3 and Sidebar 3 has been deleted.


This is done by going into Edit mode and selecting the content. In the edit window, click the ‘Delete From Page’ button in the lower left corner to permanently remove from the website. 



Deleting content





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.



Updated copyright information





Typography

All typography, colors, sizes and fonts are controlled on the Design tab in the top black toolbar. Click on Typography on the left hand side for all of the available options for customization.