What is widget?

Lets look at our demo page: http://demo.tomatocms.com. As you see, the page contains so much block contents.

Some of them are:

- "Hotest" show hotest articles,

- "Latest articles" show latest articles,

- "Most viewed articles" show most viewed articles

- and "TomatoCMS v2.0 release left" is a countdown to certain event, ...

All of these block contents was called Widget. (If you are a blogger, or web developer, you are used with this concept).

Layout Editor Tool

So, the page was composed by collection of widgets.

The questions is how to add/remove a widget to/from a page? Is there a tool to do this? The answer is YES. This tool is Layout Editor.

In this section, I will guide you how to use this tool to customize the layout of page.

Step 1

First, log in to the administrator section (go to http://yourdomain/admin/). Go to Extend >> Template menu at the top of page. You will see a list of available templates. Just click on the "List of pages" link.

Then you can see the list of pages on system. Our website have three pages:

- Home page

- Category page: show the list of articles when user view a category

- Article page: Show details of article

At this time, don't care about how to create new page. I will help you in other post.

Click on the "Edit Layout" link associated with "Home" page.

Here we go! The next step will be more fun!

Step 2: Reset the page

You have just seen Layout Editor. At the top of page, there are three tabs: Layout, Widget, and Output.

- Layout tab: Show list of widget container.

- Widget tab: Show list of widgets which can be filtered by modules.

- Output: It is special container. It is used to display the output of raw page (default output without any widgets).

Next is the layout section.

As I said above, all widgets was placed in the containers. TomatoCMS use 960 grid to build the layout of page. Basically, it means the width of page will be splitted into 12 columns. Each columns have width of 60 pixel.

Assume that our page will look like that:

The first row consist of three container and each container have the length of 4 columns.

The second row consist of three container which have the length of 6, 4, and 2 columns, respectively.

Click on the [x] icon from widget or container to remove the widgets and containers. You should remove all the widgets in container before remove the container.

Press the Save button and come back to the home page. Refresh home page to see that it is empty.

Step 3: Build the layout

First, we have to insert some containers.

The homepage will look like the figure in step 2, so, let create a full row container which its width is full of 12 columns.

Drag the rectangle labeled "12 columns (+)" and drop it to layout section. Then, drag the "4 columns" container and drop it into the container you have just created.

Repeat the action and the layout of page will look like:

The interesting feature is that you can resize the container by moving the mouse to the right edge of container (expect the full row container).

Step 4: Insert widget to container

Assume that you want to show the list of hotest articles at the first container of the first row.

Let click on the Widget tab, click on the "news" from the list of available modules. From the list of widgets, drag the "Show the hotest articles" widget and drop it to the first container.

Click on the collapse button of widget to view the configuration section of this widget.

Assume that you want to show 5 hotest articles, just input 5 into the textbox and click Preview button to preview the widget.

Widget in config mode ...

... and Preview mode

You can press Back button to back to the configuration mode.

Press the Save button. Come back to home page and see the result:

Repeat the above step and the final layout will be similar to following figured:

Final layout

Press the Save button to save the layout. Go to the home page and see the result.

Some features you should not miss

Layout Editor have ability of:

- Resizing the container,

- Previewing a widget or page. To preview the page, just click the Preview button (this button is beside Save button),

- Dragging and dropping container,

- Dragging and dropping widgets from a container to other container,

- Cloning widgets or containers (by clicking on the plus (+) button)

- Caching any widget you want. The updates from Twitter should be cached to improve speed of the page loading, for example,

- and loading widget by Ajax.