0K - views

Panel pages Mainly used for top level or landing pages

Possible to use panel pages in lower levels of the website.. Panel pages consist of components which are inserted in each panel.. Best Practice. Limit number of components on the page.. Top level pages.

Embed :
Download Link

Download - The PPT/PDF document "Panel pages Mainly used for top level or..." is the property of its rightful owner. Permission is granted to download and print the materials on this web site for personal, non-commercial use only, and to display it on your personal computer provided you do not modify the materials and that you retain all copyright notices contained in the materials. By downloading content from our website, you accept the terms of this agreement.

Panel pages Mainly used for top level or landing pages






Presentation on theme: "Panel pages Mainly used for top level or landing pages"— Presentation transcript:

Slide1

Panel pages

Mainly used for top level or landing pages

Possible to use panel pages in lower levels of the website.

Panel pages consist of components which are inserted in each panel.

Best Practice

Limit number of components on the page.

Slide2

Top level pages

Start with a hero banner to provide a primary

focus

Insert content top-down

, in order of importance/relevancy

Use a variety of components for a

visually interesting page

Use

white space to visually break up the page

Slide3

Components

Components are individual panels with specific layouts and functionality to display content.

Slide4

Heading / HERO

BANNERS

Slide5

Rich text component

Messages

Call to action

Example 1

Example 2

Slide6

FEATURED CONTENT

LISTINGe.g News

Slide7

CARDS – 2 columns

Slide8

CARDS – 3 columns

Slide9

CARDS – 4 columns

Slide10

PANES

Horizontal Card

Slide11

LINKED LIST

Slide12

DIRECTORY

Slide13

Pane style

If required, a title, summary content and footer content can be added to pane containing a component (see mock-up below)

Slide14

Example

Slide15

Front Page

Slide16

Landing Page:

xxxxxxxxxxx

Slide17

Landing Page:

xxxxxxxxxxx