Zen Foundation Features and Benefits
Zen Release Notes
Zen Administration Guide
Zen User Guide
Getting Started and Getting Around
Adding and Editing Content
Drafts and Publishing
Configure Your Zen Settings
Navigating with Zen
Search Engine Optimization
Macro Reference Guide
Cross Space Link
Disappear and Reveal Macros
Dynamic Image Map and Hot Spots
Restrict Based on Permissions
RSS Feed Link
SEO Meta Description
- 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.
- 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.
Terms in bold are required
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.)
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 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.
Number identifying the group of tabs this section belongs to.
Choose left or right to make the section move to the left or right of the center (main) column.
Choose right or left to make the section float in its column container, taking up only the horizontal space it needs.
Choose both, left, or right to make the section vertically clear floating elements that precede it.
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.
Set to false to suppress the background image (often a gradient). Use with border= and float= to create columns.
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"
The page attachment filename to use for the background image.
Override the background image position specified by the brand. Use CSS values, such as 50% 50% or bottom right
Override the background image repeat characteristics specified by the brand. Use CSS values, such as no-repeat or repeat-x
Set to false to suppress the border. Use with float and background to create tiled layouts.
Fix the size of the section to the specified width. Use CSS values, such as 200px or 25%
Fix the size of the section to the specified height. Use CSS values, such as 200px
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
Set the inner padding of the section (between the border and its contents). Use CSS values, such as 24px or 6px 12px 6px 12px
Adds additional CSS class names to the section.