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









The Changes That Were Made and How They Were Done




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





Once copied, select ‘Cancel’ or hit the ‘x’ to close the Source Code window, then select ‘Close’ or the ‘x’ to close the Text editor window.

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





In Main, the color of the linked text was set using the Colors settings for Links in the Style Settings.


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



To create the button, the text is highlighted and the ‘Insert/edit link’ button is selected.



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






When the new image is selected, click ‘Place This Image’ to save your changes.

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.