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.

design guide v3 2

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

design guide v3 1

Setting width, columns and gutters in Gridmaker

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

zenario-layouts-1.jpg

Click 'Create a layout' button to open Gridmaker.

zenario layout v2 03

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)

zenario layout v2 04

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:

design guide v3 3

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

design guide v3 4

  • 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.

design guide v3 5

Click 'Add Slot'.

design guide v3 6

Use the resize button to resize the slot.

design guide v3 8

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

design guide v3 9

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).

zenario-layouts-8.jpg

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

Slot properties 2

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

zenario-layouts-10.jpg

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

zenario-layouts-11.jpg

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.

Edit 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'.

Slot properties

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

Grid view of slots

 

Saving the layout (checking permissions on file system)

Click 'Save' button.

zenario-layouts-12.jpg

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.

zenario-layouts-13.jpg

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'.

zenario-layouts-14.jpg

Click 'Save' button.

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

zenario-layouts-17.jpg