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