Base Layout F

Base Layout F is a variation of Base Layout A. Here the focus is also on full-width modules where you use background colors in the modules in order to differenciate content visually down the page. The difference is just that in Layout F you use a transparency effect on the backgrounds of the modules.

If you add a pattern in as a background image for the site (or different patterns on individual pages) you can create a very unique visual effect by making the background colors of the full-width modules transparent.  For example, if you choose a green background pattern and then adjust opacity (transparency) of the module bakground in order to see the pattern behind the modules. If you use a black module background color (e.g. 10% opacity), the module background pattern appears slightly darker and if you use a white opacity (e.g. 20% opacity) the background pattern appears slightly lighter.

Header and footer

In your header and footer modules you can choose a distinctive color to frame the page. It can be beneficial to design to add a strong contrast amongst the transparent modules. That said, sometimes it works well to also use transparency in the header and footer (e.g. 80% black) so you can still see the background pattern slightly. See examples below.

Borders

As an extra design effect, you can frame a full-width module with a border on both the top and bottom of the module. To do this you need to use the Full Width Image module. First, choose a graphic (e.g. a pattern, shadow effect or simple lines) and upload it into the Full Width Image module and set it to repeate horizontally. Then simply add the module over and under (Tip: copy the module) the content you wish to frame. In the top Full Width Image module you need to remember to remove the spacing at thebottom of the module. You can do this within advanced settings in the mdoule. Then you also need to remove the spacing of the module that you're framing so it sits flesh across the bottom border image module. 

The example above shows a full-width module that is framed by a border on both top and bottom using the Full Width Image module. Both borders are a neon stripe with a shadow effect. The file is transparent so that the shadow can be used on all background colors. Note that the graphic is mirrored in top and bottom and both are repeated horizontally. Be aware that borders made this way are not automatically scaled. This means that they are shown in the same size (pixel height) in desktop, tablet and mobile views.

Examples

Below you'll find examples of different designs using transparent full-width modules as well as border designs using the Full Width Image module.