Back to overview

Page areas

The page is subdivided in overall areas – such as service navigation, main navigation and footer – and the content area (containing all content elements, right column, left column and the horizontal teaser bar). The content area can be subdivided in different areas based on different grids. It contains all different types of content elements and teasers in various combinations.

The basic layout area has a fixed width of 960 pixels, the content width is 928 pixels.

Basic page areas

1. Service navigation, 2. Header, 3. Content area, 4. Horizontal teaser bar, 5. Footer, 6. Background

Content area – full width

This layout grid is used for content spreading over the whole width of the content area – without a right or left column – such as a filter column or a column with additional context sensitive content. The grid has a subdivision of maximum 4 columns.

Content area full width grid

Subdivisions

  • One 4-column element: e.g. homepage stage, shopping cart, applications
  • Four 1-column elements: Horizontal teaser bar, Complex forms
  • One 2-column and two 1-column element: Horizontal teaser bar
  • Two 2-column elements: e.g. shopping cart form elements, glossary, sitemap

Content area and right column

This layout grid is used for content that is combined with context sensitive information in a column on the right hand side of the layout area. The basic content area can be subdivided into maximum 3 columns. The spacing between the basic content area and the right column is 32 pixels. The spacing between the columns in the basic content area is 16 pixels.

 

Subdivisions

Basic content area with 3-column text or picture (Subpages, product detail view, landing pages)

Basic content area with 1-column picture on the left and 2-column text or 1-column text and 2-column picture on the right (Subpages, landing pages)

Basic content area with 2-column picture on the left and 1-column text or 2-column text and 1-column picture on the right (Subpages, landing pages)

Basic content area with 1,5 columns content (Forms, products A-Z)

Content area and left column

This layout grid is used for content that is combined with a filter bar in a column on the left hand side of the page layout. It is used for search result list and product lists. For the current use cases no subdivision of the basic page area is necessary and therefore not defined. The spacing between the left column and the basic content area is 32 pixels.

PHOENIX CONTACT
GmbH & Co. KG

+49 5235 3-41984

Christine Nolte-Dietrich

Christine Nolte-Dietrich

Coordinator Communication Guidelines