Base Layout C

In Base Layout C you can frame the content of your site. This layout works well when you have more time to think about design because the layout gives you the option to really customize the character of the site and create a real visual identiy. You could also choose this layout and only add a top image and give the content background a standard color. 

Design of Base Layout C consists of two elements, a background design that defines botht he header and the background as well as a graphical element that is placed at the bottom of the page that closes the content frame.

This design doesn't work well for DIY as the design requires that you create a background graphic in Photoshop or a similar image editor program. That said, once the layout is designed, it's still easy to move and edit modules within the page as you like.

1: Background image

For the background image you need to design a content frame within your image that is then uploaded as a background image. Note that the file should be a maximum of 2000 pxiels high so this technique is not recommmended for long pages.

2: Background image - longer pages

If you have longer pages, you can still use this base layout by using a background image that simply frames the content at the top of the page but then fades into the background color of the rest of the page.

3: Footer graphic

You close the frame design by using a bottom graphic. This graphic is set in on the page with a full-width image module.

Header height

The height of the header in Base Layout C is flexible, based on the visual look and design you wish to create on the page. You adjust the height between the top of the page and the main menu by uploading a transparent .png file in the top bar. For example, if you upload a 300pixel high transparent .png, there will be 300 pixels between the top of your page and the menu. If are using a large logo or a graphic in top bar, you can add it to the transparent .png and upload. 

Width of background image

Your background image in this base layout design should be 2560 pixels wide. If the image is using a solid color, you can upload a smaller image and just add the same color as the page background color in page settings. 

Tablet optimization

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.

Footer design

You can choose if you'd like to give the footer a background color or just let it be a part of the background under the content frame. Both options work well, so just decide what works best for your site design.