Base Layout D

Base Layout D is a simple design, framing the content on a page. We have defined two versions of this layout. The first version features the header (logo and men) within the content frame and the other version features the header outisde the content frame. Below we'll explain in more detail how to build each version.

Design 1: Header inside content frame

In this version where the header is placed inside the content frame, you use a background image that frames the header area. Just like in Base Layout C, you use a background image (2500 px wide x 2000 px high) and then put a graphic in the bottom of the page to close the frame. Note that the graphic at the bottom needs to be placed on all pages.

The footer should have the same background color as the outer frame, so it looks like the footer text and icons are sitting directly on the outer frame.

To give this design a even more unique effect, you can add a border or a shadow around the content frame. This is done in the actual background image and the bottom graphic (see example below or here). If you need to move the logo down the page a little, you can add a transparent .png image with the height you'd like in the Wide Top Bar Image area in the header module.

Design 2: Header outside content frame

In this version of Layout D you design a background image in a given color. The image should be 1030 pixels wide, so the content works with the background. You add the image as a background image in your site settings and set it to repeat vertically. Then you'll need to set the page background color, add a Top Bar Image and add the footer background in the same color in order to create the frame for your content.  To get both the menu and the logo outside the frame, you need to choose skin 4. This design can be done 'globally' meaning all pages will automatically have this design. However, you cannot use shadows or borders in this verison.

Design 3: Header logo outside the content frame and menu inside the content frame

In this version you design a background image in the same way as the second version mentioned above. You add the image as a background image in site settings and repeat it vertically down the page. To ensure the logo is set outside the content frame, you need to choose skin 2. This design can be done 'globally' meaning all pages will automatically have this design. However, you cannot use shadows or borders in this verison.

Tablet and mobile view

When you define the width of your content frame, you should be aware that your site is optimized to 1024 pixels wide in tablet view. This means you have two options when it comes to tablet optimization. One option is to make the frame wider than 1024 pixels. In this instance, you will see the background color and not the edges. The other option is to use a narrower frame in your design, for example 950 pixels. In this instance, you'd see the vertical content frame in the tablet view. We recommend you choose the solution that works best for your overall design.