Help Contents
-
Zen Documentation
-
Zen Foundation Features and Benefits
-
Zen Release Notes
-
Zen Administration Guide
-
Zen User Guide
-
Getting Started and Getting Around
-
The Toolbar
-
Adding and Editing Content
-
Drafts and Publishing
-
Configure Your Zen Settings
-
Designing Spaces
-
Designing Pages
-
Social Collaboration
-
Navigating with Zen
-
Search Engine Optimization
-
Macro Reference Guide
-
Active Image
-
Add Class
-
Attachments List
-
Blog Link
-
Body Class
-
Clear
-
Comment
-
Cross Space Link
-
Disappear and Reveal Macros
-
Dynamic Image Map and Hot Spots
-
Full Width
-
New Window
-
Page Tree
-
Page Turners
-
Random Content
-
Restrict Based on Permissions
-
Rotate Images
-
RSS Feed Link
-
Same Window
-
SEO Meta Description
-
SEO Title
-
Simple Children
-
Twitter Feed
-
Wrap
-
Zen Bin
-
Zen Colors
-
Zen Section
-
Active Image
-
Getting Started and Getting Around
-
Zen Branding Guide
-
Zen Design Cookbook
-
Zen Frequently Asked Questions
-
Zen Foundation Features and Benefits
Zen Sections are visual building blocks break up the content on your page into more manageable chunks. These chunks can be styled in many flexible ways (via the Section Designer), rearranged using drag-and-drop, and made into tabbed sections.
Please Note:
- Each Zen Section macro must have an id parameter that is unique on its page
- In the page, Zen Sections must be in sequential order, in particular:
- All main column sections must occur before left column sections
- All left column section must occur before right column sections
Zen carefully maintains the relationships of Zen Sections, so it is not advisable to directly create or edit Zen Section macros unless directed by Stepstone's support staff.
Use the "edit pencil" to edit Zen Section contents, and the Section Menu create, copy, remove, and design sections.
This page is provided for reference only.
Parameters
Terms in bold are required
Name | Wiki Markup | Default | Description |
---|---|---|---|
id | id= |
| Required number identifying the section. Must not be used by any other sections on this page. (This has nothing to do with the CSS id.) |
name | name= |
| The name of the section, which can be used to reference the section from other pages. In tabs, the name is used for the tab title if the name parameter is not specified. |
title | title= |
| Title of the section, which will be inserted in the section''s contents as an h1 element. In tabs, the title is used for the tab title. |
tab | tab= |
| Number identifying the group of tabs this section belongs to. |
column | column= |
| Choose left or right to make the section move to the left or right of the center (main) column. |
float | float= |
| Choose right or left to make the section float in its column container, taking up only the horizontal space it needs. |
clear | clear= |
| Choose both, left, or right to make the section vertically clear floating elements that precede it. |
position | position= |
| Choose top or bottom to make the master page section appear above or below the regular page contents. NOTE: this only applies to sections on the master page layouts. |
background | background= | true | Set to false to suppress the background image (often a gradient). Use with border= and float= to create columns. |
background-color | background-color= |
| A reference to the brand''s color palette (options are: "primary", "secondary", "tertiary", "light", "medium", or "dark". Usually "light" is a good option. Also, you can specify a CSS color for the background, such as "blue" or "#F0F0F0" |
background-image | background-image= |
| The page attachment filename to use for the background image. |
background-position | background-position= |
| Override the background image position specified by the brand. Use CSS values, such as 50% 50% or bottom right |
background-repeat | background-repeat= |
| Override the background image repeat characteristics specified by the brand. Use CSS values, such as no-repeat or repeat-x |
border | border= | true | Set to false to suppress the border. Use with float and background to create tiled layouts. |
width | width= |
| Fix the size of the section to the specified width. Use CSS values, such as 200px or 25% |
height | height= |
| Fix the size of the section to the specified height. Use CSS values, such as 200px |
margin | margin= |
| Set the padding around the outside of the section (between the border and its neighbors). Use CSS values, such as 24px or 6px 12px 6px 12px |
padding | padding= |
| Set the inner padding of the section (between the border and its contents). Use CSS values, such as 24px or 6px 12px 6px 12px |
class | class= |
| Adds additional CSS class names to the section. |