Base Layout B

Base Layout B is distinguished from other designs by using a large top image above the navigation across all pages. The top image carries the visual identity of the site; it sets the tone and defines the look and feel. Using a visually significant top image can reduce the need for images further down the page - a trick which can be used successfully on sites where visual material is sparse.

Using the top image as background image

The top image is added as a background image. It can be added globally (under 'site settings') so that it is displayed on all the pages of the site. Or it can be added 'locally' to each individual page (in Page Settings).

If the top image is set as background image it will not be scaled in the width. This means that the user's screen size determines how much of the image is visible. Therefore its important to use an image that works well on both small and wide screens. We recommend an image that is 2500 pixels wide.

The height of the top image

The height of the top image is up to your discretion, based on the look you're going for. However, we recommend a height between 200 and 500 pixels.

PLEASE NOTE: If you are using skin 4, remember to apply the following CSS snippet in the global CSS-field to ensure the correct placement of the logo. The height of your top image should match the height of the top (marked in red):


        .header .logo,
        .header #identity{
            top: 430px;
        }
        .header .logo img{
            margin-top: 0 !important;
        }
  

Header designs

All header designs (skins 1-6) can be used in Base Layout B.

When using skin 1-3 you may let the background image 'continue' behind the navigation so that the navigation menu texts are displayed on top of the image - creating a unique effect. Using drop down menus is recommended in this combination. 

You may also choose to create a visual division between the top image and the menu by applying a dramatic background color to the navigation bar.

Mobile view

To optimize Base Layout B for mobile screens it is best to hide the background top image in the mobile view (because it will look disproportiantely large on small screens). If you wish to preserve a visual element in the same position in the mobile view - the top image can be replaced by a normal image module where the image has been adjusted and is only displayed for mobile view.