3.5 Configuring the Layout of your Cloudbase 2 Template

Layout refers to how the articles are structures on your home page. In the past, 3 to 4 column layouts were common. But these are very difficult to read. If you really want to convey information, you are better off with a one column layout with all the menu items at the top of the HOME page. This is how most books are written. At most, you should have two columns on your home page with a single side menu.

This does not mean however that all of the sections of your home page should be a single column. It is quite common to have “feature boxes” at the top and bottom of your HOME page to highlight particular sections of your website.

Cloudbase 2 offers incredible flexibility and ease in terms of setting and changing your page layout. It is simply a matter of clicking a couple of buttons – and then creating and placing modules or boxes wherever you want.

To better understand the Cloudbase 2 Layout Options, go the Template Manager, select the Cloudbase 2 Template and click on EDIT to reach the Template – Edit page.

On the left side of the screen is a map indicating all of the various Module Positions you can use (but do not have to use):

Open the LAYOUTS section and you will see that you can define how many modules you can have in each of the above positions:

PAGE LAY OUT TIPS

There are a total of 9 horizontal rows (not all of which are shown in the image above) and 6 vertical columns each of which can be set anyway you want. This layout area is one of the primary reasons we recommend the Cloudbase 2 Template. If you click on 1 position, the row will be 960 pixels wide. Click on 2 and each will be 480 px wide. Click on 4 and each will be 240 px. By default, the 4 columns are assigned evenly (3 | 3 | 3 | 3) for each of the 4 module positions if you have them active or published. Based on the 12 column layout with 4 modules of equal width published, the front-end will look like:

When you slide the slider bar below to select different widths for these 4 positions, a tooltip on the side will also show you the numeric value of the configuration.

In this case, we have dragged the slider to the left and have chosen the layout 2 | 3 | 4 | 3, which means that module position top-a is assigned 2 grids, top-b is assigned 3,top-c is assigned 4 and top-d is assigned 3 grids. After hitting Apply or Save this will cause the front-end's layout to change and display:

You can see the 2 | 3 | 4 | 3 proportions have been applied to the layout. Joomla has the ability to show different modules on different menu items, so you may have 4 modules published on your Home menu item, but only 2 modules published on one of your internal pages, for example. To accommodate this you can merely click the 2 in the Positions list and choose a layout that suits your needs:

This will translate into a 8 | 4 or worded another way, a 2/3 and 1/3 distribution of the 2 modules:

Main body Layout

The layout for the mainbody area is slightly different from the other module layouts. The primary difference is that the mainbody can be displayed along side up to 3 sidebars. This provides the ability for a Gantry-powered template to support a 4 column layout. More than 4 columns in your layout is rare because it quickly becomes unreadable. 1 to 3 columns is the preferred layout for a modern website.

The layout setting below leads to a fairly narrow Mainbody position with 3 sidebar columns published to the right of it. The configuration is set to 6 | 2 | 2 | 2 where the mainbody is using 6 grid units, and the 3 sidebars each use 2. This adds up to the 12 grid system we are using in the example shown above.

If you drag the slider to the right you will see the positions shuffle around giving different options for where the mainbody is displayed as well as various widths for each. With 4 total columns there is not much room to have widely varying column widths, so let's turn off one of the columns by disabling the modules in the sidebar-c module position using our module manager. Below you will see how the default layout is currently set to display when we have only 2 sidebars published:

The 2 sidebars are displayed on the right each taking up 2 grid units, while the mainbody is on the left occupying 8 grid units.

Mainbody (6) - Sidebar A (3) - Sidebar B (3)

Dragging the slider to the right will provide a wide variety of layout options.

As you can see below, this example shows a layout of 3 | 6 | 3, where the main body is in the middle:

After click the Apply button, you will be able to see this layout applied to the frontend:

Sidebar A (6) - Mainbody 6)

The above examples are just a few of the possible options. For the purposes of this article, we will use the following Layout settings:

Top = 1

Header = 1

Showcase = 2

Feature = 4

MainTop =  1

MainBody = 2 ((sa = 3, mb = 9) (Move red slider all the way to the right for layout with left side bar)

MainBottom = 4

Bottom = 4

Footer = 2

After entering these settings, click on APPLY, then Preview to see what your website now looks like.

Eventually, we will publish the Top, Header, Main Body and Footer positions on every page. The rest of the positions will only be assigned to the Front Page. Thus, most of the pages will appear like regular web pages with the main content on the right and a narrow side menu on the left.

 The end goal will be to create a modern page layout like the following 960 pixel Grid:

The Front Page is designed so that the first four rows (to the Feature Area) are seen on the Opening Screen. (which is typically about 1200 pixels or 12 inches wide by 800 pixels or 8 inches high).  The remained of the page is viewed when the reader scrolls down the page.

The FEATURE and UTILITY positions are only on the Front Page. Thus the remaining webpage will have the following appearance:

Finally, click on the Advanced Section to open it: Verify that the Display Component is on and click on the Build Title Spans so it is off (otherwise if the Title Spans were one, there would be two different colors in all the titles). Also click on Page Suffix so that it is on. 

Then click on SAVE to go back to the Template Manager page and the main Joomla Control Panel.

This concludes the basic configuration of the template. We will eventually create the main menu and add a slide show. But before we can fix up the menu, we need to organize and write the articles that the menu will link to. So the next section is all about organizing and writing articles.