The following is an example of how the look of the Foodie Bonanza About Me page can be customized with basic editing techniques.
About Me BEFORE
About Me AFTER
Header Background Color
The background color was changed from white to pink. This change applies to the entire website and was covered in the Home Page guide.
Logo / Business Name
A graphic logo was added, replacing the Business Name text. This change also applies to the entire website and was covered in the Home Page guide.
Site Menu
The look of the site menu was changed using the Colors settings for Menu and Sub Menu. This change also applies to the entire website and was covered in the Home Page guide.
Background Image for Feature Container
The background image for the container was changed from the default Strawberry background to an image added by the user.
Default background
This is done by going into Edit Mode and selecting the blue edit icon for the FeatureContainer.
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
Header Section
The look of the text for the page heading was changed. This was done by adjusting the look of Heading 1 format in the Style Settings under Typography.
Default text in Header container
Adjusting the settings for Heading 1
Changed settings applied
Section 1
The text content was edited and the image was replaced.
First, the text content in Main was split up into two text areas.
Default text
This is done by first duplicating the content.
When viewing the text in the Text editor, select the ‘Source Code’ button on the far right of the tool bar.
Selecting 'Source code' button
In the Source Code window, highlight everything and use your desktop command for ‘Copy’.
Highlight and copy
Next, create a new text area.
Click and drag the Text Element and place in ContentLeft.
New text area in ContentLeft
Once again, select the ‘Source Code’ button on the far right of the tool bar.
Select 'Source code' button
In the Source Code window, use your desktop command for ‘Paste’ to add in the copied content and click ‘Ok’.
Then click ‘Save changes’.
You should now see the same content in Main and ContentLeft.
Duplicate content in Main and ContentLeft
Now you can edit the content.
Click the text in Main to edit.
Highlight the lower portion of text and delete it by pressing your ‘delete’ key.
Highlight unwanted text
Unwanted text removed.
Highlight the remaining text and set alignment to ‘Center’. Click to Save changes.
Alignment set
Text content in Main after adjustment
Now click on the text in ContentLeft to edit.
Highlight the upper portion of text and remove by pressing your ‘delete’ key.
Highlight unwanted text
Unwanted text removed
Highlight the remaining text and set alignment to ‘Center’. Click to Save changes.
Alignment set
Text in ContentLeft after adjustment
Adjusting the settings for Links
In ContentLeft, the settings for Heading 3 were adjusted in the Style Settings under Typography.
Adjusting the settings for Heading 3
A text button was also created.
This is done by clicking and dragging the Text Element and placing it below the existing text in ContentLeft.
Placing new text area
In the text window, text was added, the alignment was set to ‘Center’.
Creating link
In the Insert link window, the destination URL is entered and ‘Button 1’ is selected for Class.
Select ‘Ok’ and then ‘Save changes’.
Link set up
The look of the button is customized using the Colors settings for Buttons in the Style Settings.
Adjusting the settings for Buttons
The look of the rest of the text was adjusted using the Main Text settings under Typography.
Adjusting the settings for Main Text
The image in Sidebar was also replaced.
Default image
This was done by going into Edit mode and clicking on the image. In the edit window, select ‘Browse Images’ to select a new image from your File Manager.
Edit window for default image
New image selected
New image
Footer
The copyright information at the bottom of the page was updated to reflect the name of the business. This change also applies to the entire website and was covered in the Home Page guide.