The grid: Containers and Boxes

For the layout of landingpages (such as overview pages, dossier pages, homepages) we use the Drupal module called "Grid". Using the grid you can conveniently and quickly arrange contents on your pages. The basic elements of the grid are containers and boxes.

Containers and boxes

Step 1 Creating a grid
Step 2 Placing containers
Step 3 Placing the sidebar container
Step 4 Choosing and placing boxes
Further Readings


Step 1 Creating a grid

When you just have created a new landingpage, it will not have a grid yet and you will have to create one. To do so, click on Grid in the blue line of landingpage links. You will also have to click on this grid link whenever you want to make changes later:

If there's no grid yet, have one booted:

Now you can start creating and placing containers.

Step 2 Placing containers

By the help of containers you can structure your page. Later on, this structure can be filled with contents which will be defined in boxes.  The following container types are at your disposal:

Choose the desired container, grab it with your mouse and move it to the left. Drop it in one of the blue lines which will show up on the left. Hitting the line will lock the container in the desired place. Repeat these steps until all the containers you need are placed at their desired spots:

Step 3 Placing the sidebar container

If you have chosen one of the containers leaving space on the right (types 2 und 3), you can place a sidebar. To do so, click on Sidebar and move the sidebar container (there is only one) to the last blue line on the left. This will lock it in the correct position on the right:

Doing this you have created the sidebar container but not yet filled it. Learn more about sidebar (contents) in the How-To on Sidebars.

When having placed the containers in the grid, you can start filling them with contents. In Best-Practice you will find tried and tested structures which we recommend for all Böll-sites. Please note that not everything that is technically possible really makes sense and looks good.

Step 4 Choosing and placing boxes

In the containers, you can place all types of content by choosing the respective boxes. To easily find what you are looking for, all box types are neatly arranged on the right in five categories: Static Content boxes, Lists, Reusable Boxes, Blocks and Contents boxes.

Static Content boxes are boxes which you will have to fill by yourself with text, image/s, audio/video, social links, calendar events etc.

The boxes, which will automatically be filled with the contents that had been created before, are called Lists.  Lists can contain the latest three articles or only the publications belonging to a certain publication series or a list of interviews tagged "Peace", to name only a few examples.

Reusable boxes are mainly sidebar boxes such as the "Social Links" or the Calender Entries (Events) which - once created - can be reused without changing any settings.

Blocks: Website editors are not allowed to create blocks, but if a warden or administrator has created blocks and released them for use in the grid, they will appear under Blocks and can be used by editors. Blocks  usually contain sophisticated html-code.

Contents boxes allow you to search for any existing contents such as person nodes, articles, publications (products) or landingpages which can be placed on the page in addition to the automatic lists.

To place a box in a container drag & drop it: Grab it with your mouse, move it to the respective container and drop it there.

By using containers and boxes you can create simple or very complex pages on the basis of a modular design.

Tip: The more important a page is the more complex its design should be.

Further Readings

If you want to learn more about how precisely containers and boxes can be used read How to create a landingpage: For instance a dossier