Full width modules

You might notice that a lot of modern websites have long pages with a range of information included on a single page as you scroll down. As you scroll, there are usually different colors or what you could consider ‘layers’ to help break up the information in a visual way. To support this modern approach to web design, mono has developed a number of so called “full-width modules” where we’ve taken some of our popular existing modules and given them the functionality to spread their backgrounds across the width of the browser. In these modules you define the background color which creates this layer affect and helps display differentiating content on long pages in a well-designed and manageable way.

So far we have developed six full-width modules. See them all below.

Using full width modules

All full-width modules (except for the Jumbotron module) function as follows:

1: Choose between two spacers at the top and bottom of the module based on how much space/‘air’ you want in the design. 

2: If you do enter content in a given field, it will not appear on the live website. Take for instance the full-width gallery module. If you do not write text in the header field or the text field, then the module collapses accordingly and displays only the gallery itself. This allows you to use full-width modules in various combinations.

3: You can select a unique background color for each of the different full-width modules giving the ‘layer’ affect to help differentiate the content on the page.

4: By using the "remove space" function on the Jumbotron module, you can place the Jumbotron module directly on top of a full-width module (no spacing between the Jumbotron image and the background color of the full-width module). This gives you yet another way to differentiate your content in a sleek way.

See examples of using full-width modules below.

Examples

This example shows a page where a Jumbotron module (with spacing removed) is placed on top. It creates a sense of unity between the two modules. The full-width module used is a full-width three column module, where a very light gray background color has been selected in order to mark the transition to the next section of the page. At the bottom a headline module and two text modules are placed (note that this example is using a two-column page type).

This page starts with a headline and an intro text (preamble). Below we have used a product list module with 5 graphics with links. Each of those links to a gallery page that is built in the same way as this page. The product list module therefore works as a form for navigation in this example. Below the product list module is a full-width gallery module. Note that only the headline and the gallery itself is populated with content (preamble is not displayed on this page, as there is no text added). A light gray color is selected as the background, and spacing is removed making it visually connected to the module below. Below the full-width gallery module is a full-width text module. Only the headline is in use in the module, and with the medium background color this module works as a visual transition to the text and download module at the bottom of the page.