Customize Your Header, Footer, and Side Columns

In this tutorial you will learn how to change the overall layout of your website and customize your static blocks.
Options for Your Website Layout
The layout of a website can be split up into 5 blocks. The HEADER, FOOTER, LEFT COLUMN, RIGHT COLUMN, and CONTENT blocks.
1 Example of 5 block layout with marks.png
The Header, Footer, Left Column, and Right Column are called STATIC BLOCKS. They are the same on every page of your website. The content block is not static. This is where the unique material for the particular page appears.
You may be thinking, what if I want a different layout? Can I change it? No problem. You can get rid of any (or all) of the static blocks. Whenever a static block isn’t present, the content block occupies the empty space.
When you open a new website with Webgarden the first screen you see may look something like this.
2 New website edited blurred.png
In the content tree on the left you can see all the different parts of your website. In this tutorial you will learn how to manage the part called WEBSITE STRUCTURE, which is pictured below.
3 Website structure.png
A Practical Example
As an example, let’s imagine that you are creating a company website with only a header and a footer.
Eliminate Unwanted Static Blocks
First you need to eliminate any unwanted static blocks.
In this case, you want to get rid of the side columns, but it isn’t possible to delete the folders LEFT COLUMN and RIGHT COLUMN from the content tree. To eliminate static blocks we need to delete all of the content from them; then they will disappear.
Click on LEFT COLUMN in the content tree.
You will see a menu in the left column. You need to delete it. To do this, hover over the menu and select the red trash icon which will appear in the upper right-hand corner closest to the actual menu.
4 Delete menu edited with marks.png
When prompted, click on OK to confirm you want to delete it.
Now your left column is empty. You can still see it in the content tree, but it will not appear on the website.
5 Empty left column edited.png
Click on RIGHT COLUMN in the content tree.
6 Empty right column edited with marks.png
The right column is already empty, so you don’t have to do anything.
Great! You’ve successfully deleted the side columns. Now you have just a header and a footer.
To see how it looks so far, first go back to the homepage. Then hover over the yellow edit icon in the upper right-hand corner of your screen and select SHOW.
7 Show edited with marks.png
Your actual website will open in a new window. There is a header, a footer, and content.
8 Website with generic header and footer with marks.png
Customize the Static Blocks You Choose to Keep
Next you need to customize the header and footer so they will represent the business and contain the elements you want.
1. Header
Go to the HEADER.
Your website needs a title. Hover over WEBSITE TITLE and select the yellow edit icon in the upper right-hand corner of the box that appears.
9b Change the website title edited with marks.png
In the dialog box, change the HEADING TEXT from Website Title to Watermelon and SAVE.
10 Heading dialog box with marks.png
Next, add a menu to the header so visitors can access all the pages of your website. You can make room for it next to the website title by reducing its width.
Hover over the heading element. You will see two small gray arrows in the upper right-hand corner of the box that appears. Use the gray arrows to click and drag across the screen, reducing the borders of the element to 4 tiles.
11 Reduce heading size edited with marks.png
Then click on the green plus icon in the empty tile to the right of the website title and select MENU.
12 Add a menu edited with marks.png
Use the dropdown menu to change the MENU STYLE to HORIZONTAL EXPAND ON ROLLOVER and SAVE.
13 Basic menu options with marks.png
The menu should be horizontal, but it doesn’t look that way because it has been condensed into one small tile. Use the gray arrows, like you just did with the website title, to expand the menu width to three tiles.
14 Expand menu edited with marks.png
Next, delete the Latin text using the red trash icon, just as you did before with the menu in the left column.
15 Delete latin text edited with marks.png
Add a decorative image in its place. Click on the green plus icon below the website title and select IMAGE.
16 Add image edited with marks.png
Under BASIC image options CHOOSE a FILE to upload your image.
17 Basic image options with marks.png
Move to the tab for ADVANCED image options. This time you can try changing the element WIDTH in advanced settings instead of clicking and dragging as before. Select 7 from the dropdown so the image will stretch across the entire screen (which is 7 tiles in this example). Then change the DISPLAY STYLE to FULL RESOLUTION so the image will cover the entire area (or choose ORIGINAL SIZE for the best resolution if your image is at least as large as the area it will occupy), and SAVE.
18 Advanced image options with marks.png
Go to the window showing your actual website and refresh. Have a look at the nice header you’ve created.
19 Final header.png
2. Footer
Now to fix up the footer.
Go to the FOOTER and delete the Latin text.
You are left with a contact widget. It is possible to keep the widget in the footer or to just have one on your contact page. On Webgarden there are lots of things you can put in the footer - such as menus, pictures, links to social media, or even a Google map with directions. For this example, let’s delete the contact widget, change the color of the footer, and add our contact information.
After you’ve deleted the contact widget, click on the yellow edit icon below where it says FOOTER. This opens the dialog box for the footer’s main COLUMN LAYOUT element. If you change something here, it will change throughout the entire footer. Change the DIVIDE to 8 and the HIGHLIGHTING to PATTERN 4. In this case, changing the highlighting will change the color of the entire footer.
20 Change main column layout edited with marks.png
In the colored area, use the green plus icon to add three HEADING elements.
21 Add heading elements edited with marks.png
The first one will act as a spacer. Leave the HEADING TEXT field empty. Go directly to the ADVANCED tab and adjust the WIDTH to 2. SAVE.
22 Add spacer with marks.png
Use the second heading to add your phone number.
Enter your phone number as the HEADING TEXT and change the SIZE to SMALL.
23 Basic heading options edited with marks.png
Move to the ADVANCED tab. Use the dropdown menus to change the WIDTH to 2 and the ALIGNMENT to CENTER. SAVE.
24 Advanced heading options with marks.png
For the third heading, do exactly as you did for the phone number, but add your email address instead.
The final result should look something like this.
25 Final result.png
Congratulations! You’ve completed the tutorial on customizing your header, footer, and side columns.
11/09/2019 01:11:42
Or visit this link or this one