Skip Navigation
Training
Editor Playground
Anatomy of a Landing Page: Editing in EPiServer

Anatomy of a Landing Page: Editing in EPiServer

The Landing Page has a full width view with versatile layout options. The page is more of a container which holds your customized blocks to display information.

The page consist of the PGCPS Header & Footer, Page Title and the Content area, as well as metadata properties, which are used for search optimization and "partial page views" frequently referred to as "cards"

**This is a Rich Text Block (RT) with the Background Color set to Grey

Group Of Children Close

This is the description field of the Hero Banner Block. The image above is the "Hero" image displayed using the required size of 1300px by 400px.

The next four blocks display Link Cards (LC) the first two at full width, the last two at half width. Each Link card displays a different "card type"

**This is a Rich Text Block (RT) with the Background Color set to Grey

Link Card - Simple - Heading Hierarchy
Link Card - Image - General Detail
Link Card - Icon- Anatomy of a Landing Page
Read More
Link Card - Expanded - Editor Playground
Read More

Rich Text Block (H2)

Displays Blue background and buttons styled for a darker background.

Editor Playground (Format: Secondary Button)

General Detail (Format: Danger Button)

Images (Format: Link with Arrow on Dark)

Rich Text Block (H2)

Within this Rich Text Block (RT) you'll see a number of formatting examples to use throughout your editing experience.

Calendar and Clock

  • The image class is aligned to the right.
    • Highlight Image>Formats>Image Alignment>select Left, Right or Center.
    • Highlight Image>Select Insert/edit Image>Class>select Left, Right or Center.
  • The three (3) following links are displayed with different formatting selections, best used with our default background color: white.
    • Highlight Link>Formats>Buttons/Links>Select Link type
  1. Advanced Use of Blocks (Format: Default Button)
  2. General Detail (Format: Danger Button)
  3. Editor Playground (Format: Link with Arrow)

Table Examples (H3)

 Tables are used to display set information a variety of ways.

 Basic Table with Images (H4)
 aluminum can.bmp        
  • Empty Metal Food Containers and Lids
  • NO Food
  • Clean Aluminum Foil
  • Clean Aluminum Pans

Complex Table (H4)

In the following example, cell properties are changed to produce the displayed effect. To access these properties place the cursor in the desired cell and select Table>Cell>Cell Properties. Each of the bold cells below have their properties set to: Cell Type="Header Cell" 

  Name Phone# Fax# City
1. John Doe 555-555-5555 555-555-5555 Pittsburgh
2. JaneDoe 555-555-5555 555-555-5555 Baltimore
3. Chris Doe 555-555-5555 555-555-5555 Houston