Landing pages can exist in any context/branch, including the initial web page. There is more to a context, but we'll be focusing on the specifics for a landing.

The page's left and right margin

By default, the template used in most websites would be Layout=default-web. Setting this property for the ROOT context, will propagate for all pages.

Any context can override this by setting Local layout=default-landing, for example. Local layout will be used in that context, and will not propagate in its own branch. Let's see a common configuration for the ROOT context:

// All pages will use the default web layout
Layout = default-web
// This page, instead, will use the default landing layout
Local layout = default-landing

For this current context we used:

// Only here we will use the default landing layout, will not propagate
Local layout = default-landing

Notice that the stripe color covers the whole space, from left to right.

The wiki we used

// ${parser.imgtbg('/glow-1.png')} stands for a stock image. You can use your own images URL.
@w{textstripe(class=very padded,color=Deep-SeaBlue,image=${parser.imgtbg('/glow-1.png')})}
@w{header(class=inverted big,icon=huge yellow loading cog)}
This content is within a padded text stripe, to provide space
@w{subheader}
The header adds an icon, changing the color and adding some animation.
@w{/subheader}
@w{/header}

---+++The components

The text stripe adds more left and right margins, and increases...
@w{/textstripe}

The wiki we used

@w{stripe(class=very padded,image=repository(/bg-example.png))}

@w{header(class=big)}
Use your own image as a background
@w{subheader}
And create complicated layouts
@w{/subheader}
@w{/header}

@w{grid(class=three column padded stackable)}

@w{column}

%icon-huge cubes%

Describing your product/service features, how to buy and next actions.

@w{button(class=primary,icon=right caret,link=#,text=Some action)}
@w{/column}

@w{column(class=center aligned)}

%icon-huge university%

Who you are, how to contact, why everyone should trust your company.

@w{button(class=primary,link=#,text=Contact)}
@w{/column}

@w{column(class=right aligned)}

%icon-huge orange comments%

Community, projects, forums. The activity you're generating in every day tasks.

@w{button(class=basic secondary,icon=right caret,link=#,text=Community)}
@w{/column}

@w{/grid}

@w{/stripe}

The wiki we used

@w{widestripe(class=very padded,image=repository(/bg-example.png))}

@w{header(class=big center aligned)}
Breaking conventional margins
@w{subheader}
Reaching the entire screen width. Notice that the layout still adapts to small devices' screen.
@w{/subheader}
@w{/header}

@w{grid(class=three column padded stackable)}

@w{column}

%icon-huge cubes%

Describing your product/service features, how to buy and next actions.

@w{button(class=primary,icon=right caret,link=#,text=Some action)}
@w{/column}

@w{column(class=center aligned)}

%icon-huge university%

Who you are, how to contact, why everyone should trust your company.

@w{button(class=primary,link=#,text=Contact)}
@w{/column}

@w{column(class=right aligned)}

%icon-huge orange comments%

Community, projects, forums. The activity you're generating in every day tasks.

@w{button(class=basic secondary,icon=right caret,link=#,text=Community)}
@w{/column}

@w{/grid}

@w{/widestripe}