Organize Your Content: Sections and Categories
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.
1 First screen of a brand new website.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 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.
2 Close up of content tree.png
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.
3 Added new section with marks.png
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.
4 Add a new category with marks.png
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.
5 New category with marks.png
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.
6 Two sections each containing four categories.png
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.)
7 Rename category a with marks.png
In the dialog box replace the name CATEGORY A with HOME and SAVE.
8 Edit the category name with marks.png
Now Category A has been renamed.
9 Category a has been renamed edited.png
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.
10 Categories have been renamed.png
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.
11 Sections have been renamed.png
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.
12 Add a subcategory with marks.png
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.
13 New subcategory.png
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.
14 All subcategories added to the content tree.png
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.
14.1 Show with marks.png
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?
14.2 Website with one menu.png
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.
14.3 Go to left column with marks.png
When you move your cursor below the Bakery menu, a green plus icon appears. Click on it.
14.4 Add content with marks.png
Choose MENU from the dialog box.
14.5 Content dialog box with marks.png
Use the dropdown to change the MENU ROOT from Bakery - Home, Café, Delivery, … to Baked Goods - Breads, Cakes, Pies, … Then SAVE.
14.6 Menu dialog box with marks.png
Now there are menus for both sections in the left column.
14.7 Left column with 2 menus edited.png
If you go back to the window showing your actual website and refresh, it will look like this.
14.8 Website with 2 menus.png
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.
15 Select location with marks.png
The screen below will appear.
16 Initial location screen edited.png
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.
17 Move to baked goods with marks.png
Our Coffee has been moved.
18 Our coffee has been moved.png
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.
19 Delete a category with marks.png
Congratulations! You’ve completed the tutorial on organizing content.
11/09/2019 01:10:46
Or visit this link or this one