In this tutorial you will learn what sections and categories are and how to create, rename, move, and delete them.

When you open a new website with Webgarden the first screen you see should look something like this.

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 CONTENT, which is pictured below.

A SECTION is like a folder for a group of categories. You don’t actually see the section itself on the website. Sections are used to organize categories.

So far the website has one SECTION containing four CATEGORIES.

A CATEGORY is like an individual page on your website. Categories are visible on the website as long as they are part of a menu. (Webgarden automatically inserts a menu into every new website.)

So, as an example, let’s imagine that you are creating a website for a bakery. You could have one section including the categories Home, Café, Delivery, and Contact, and another including the categories Breads, Cakes, Pies, and Pastries.

You need two sections, each with four categories.

To add a second section click on + NEW SECTION.

You can also click on + NEW CATEGORY to add a new category. But in this case if you click on the + NEW CATEGORY that you can see above, it will add a new category to Section 1. If you want to add new categories to your new section, you need to open the first new category under the new section another way.

To add a new category first click on NEW SECTION in the content tree, so the new section appears on your screen. Then hover over the green plus icon in the upper right-hand corner and select CATEGORY.

Now you are in your new category, and a + NEW CATEGORY button has appeared in the content tree under the new category you just created.

Click on this + NEW CATEGORY three times to add three more categories to the new section.

Now the top part of our content tree looks like this with two sections, each containing four categories.

Next, rename your categories.

Click on CATEGORY A in the content tree. Then hover over the words CATEGORY A on the main screen. A box will appear around the words with a yellow edit icon in the upper right-hand corner of the box. Click on the edit icon. (It’s also possible to edit by just clicking anywhere on the box around the words.)

In the dialog box replace the name CATEGORY A with HOME and SAVE.

Now Category A has been renamed.

Go through and do the same with the other categories. Section 1 should contain the categories Home, Café, Delivery, and Contact. The New Section should contain the categories Breads, Cakes, Pies, and Pastries.

When you’re done your content tree should look like this.

Great. Now rename the sections as well. Although the sections won’t appear in any menus, they will appear in the navigation at the top of your website.

Change Section 1 to Bakery and New Section to Baked Goods.

Now you have a nice looking content tree, but it would be even better if you added some more pages. Under Café you could add some more categories with information about the café, like Menu, Our Coffee, and Photo Gallery.

Click on CAFÉ in the content tree. Hover over the green plus icon in the upper right-hand corner of the screen and select CATEGORY.

Now you can see there is a new SUBCATEGORY under the category Café and also a place to click for more subcategories in the same category.

Click to add two more subcategories under Café. Then rename all three subcategories - Menu, Our Coffee, Photo Gallery. The final result should look like this.

This is a basic outline for a bakery website. You can of course feel free to add more categories and subcategories yourself.

With Webgarden any category can have subcategories, and any subcategory can have its own subcategories. So you can add more and more categories and subcategories anywhere on the content tree indefinitely.

Let’s have a look at the actual website. Click on your homepage (Home) in the content tree. Then hover over the yellow edit icon in the upper right-hand corner and select SHOW.

Your website is open in a new window. So far you can see the pages in the first section, Bakery, on the left. You can’t see the pages in the section called Baked Goods. Do you know why?

That's because categories only appear on a website if they are part of a menu. Webgarden automatically inserts one menu into each new website, and that menu is for Section 1 (which was renamed Bakery). There is no menu for Section 2 (Baked Goods), therefore it doesn’t appear on the website.

To create a menu for Baked Goods, first go to the place where you would like the menu to appear. For now you can just add it to the left column. Click on LEFT COLUMN in the content tree.

When you move your cursor below the Bakery menu, a green plus icon appears. Click on it.

Choose MENU from the dialog box.

Use the dropdown to change the MENU ROOT from Bakery - Home, Café, Delivery, … to Baked Goods - Breads, Cakes, Pies, … Then SAVE.

Now there are menus for both sections in the left column.

If you go back to the window showing your actual website and refresh, it will look like this.

Now all of your pages are there, but what if you want to reorganize them? What if you want to move a category or subcategory to a different place? There are two options.

The first and easiest option is to CLICK AND DRAG. Click on the category (or section or subcategory) in the content tree and drag it to a new place.

The second option is to use LOCATION. While in the category you want to move, for example Our Coffee, hover over the yellow edit icon in the upper right-hand corner of the screen and select LOCATION.

The screen below will appear.

At first, you can only see your sections. Click on a section to see more options. Then click on MOVE across from the section or category you would would like to move Our Coffee to.

Our Coffee has been moved.

If you no longer want a category you can easily delete it. Go to the category you want to delete. Hover over the red trash icon in the upper right-hand corner and click on DELETE.