Using Gridmaker to create a layout

Zenario CMS uses Gridmaker, a powerful feature that uses a Grid-Based system to design the layout of a webpage. All you need to do is add some settings and Gridmaker will automatically create the HTML and CSS structure for your layout.

Grid-Based Web Design

This is a design that we will use as an example to show you the steps to build a website using Zenario.

The design is based in a 12-column grid. Each column is 51px wide and 48px space giving a full width of 1140px.

Setting width, columns and gutters in Gridmaker

Login as an Administrator and go to Organizer. Then go to 'Layouts'.

Click 'Create a layout' button to open Gridmaker.

By default the grid creates the layout in a 'Fixed width' setting. This means all of the widths are specified in pixels.
We will start by setting the Full width (1140px); Columns (12); and Column/gutter (51px / 48px)

Now you have the correct grid to match your design. We can now proceed to add the slots that will hold the plugins.

Adding Slots

The slots are the plugins containers. In Gridmaker they are represented by red rectangles. Let's take a look to the header of our sample design:

We want to add 3 plugins hence we need 3 slots. We make the slot as wide as the design suggests:

• the first slot is for the Banner plugin, for the logo. The design suggests this module is 3-columns wide;
• the second slot for the menu will be 7-columns wide;
• the third slot for the language picker will be 2-columns wide.

In Gridmaker we add the slots by clicking 'Add' [+] button.

Click 'Add Slot'.

Use the resize button to resize the slot.

First we need a slot 3 columns wide for the logo.

Then we change the name of the slot to something more meaningful. E.g. 'Slot_Logo'. Mouseover the name and click 'Edit properties' (pencil button).

Enter a unique slot name. Then click 'Save properties' button.

Now, we need a 6-column wide space. Again, click 'Add' [+] button. And click 'Add whitespace'.

Use the resize button to make it 6-columns wide.

Follow the same steps above to add the rest of the slots.

Setting default slot heights

A slot's height can be set in order to better reflect it's use and appearance on the page.

To do this, click on the pencil icon to edit the slot properties.

In the properties box there are some size options ranging from small to extra extra large. Select the appropriate size and click 'Save properties'.

In grid view, you can now see the size of the slot. This will also be reflected on the front end as well.

Saving the layout (checking permissions on file system)

Click 'Save' button.

If on clicking the 'Save' button you get an error mesage saying 'Your zenario_custom/templates/ directory is not writable. The files needed cannot be written to the filesystem.' then proceed to change the permissions of that folder to be writable.

And make sure the following folder is writeable by the Apache web server:

• zenario_custom/templates/grid_templates

(For example, you could use chmod 777 grid_templates).

Then click the 'Save' button again. You should be able to save your new layout by now.

Give a name to your layout. We recommend to use a descriptive name e.g. 'Home page layout'.

Click 'Save' button.

Your new layout has been created. You can see it listed in Organizer > Layouts