The Section Designer, accessible via the Section Menu, is live-updating wizard for designing the appearance and layout of individual Zen Sections

Some experience with CSS is helpful, though not necessary.

Designing a Section

When first created, a Zen section will have a border, a white background, and a fade gradient at the top (unless you have a custom brand that changes any of these characteristics). You can use the Section Designer to remove or alter these features, as well as to alter the placement of the section on a page.

The Section Designer allows you to control design and layout options for an individual section, including:

  • border
  • background
  • background image
  • image position
  • section position
  • section dimensions


Example Design

In the following example, the Section Designer is used to turn off the default section border, and apply a background image. You can use any image attached to the page as a background image. As shown in the Section Designer's preview panel below, the Section Designer will default to tiling the image (repeating it until it fills all available space):

In the following image, additional Section Designer settings have been used to move the background image to the left of the section, to turn off image repeat, and to turn the section border back on. In addition, the section dimensions have been fixed:

Three Example Zen Sections:

The three sections below were created by designing a Zen section with a fixed width, a left-positioned image (in the second two), and the position set to "left". Then, the Section Menu was used to Duplicate the section twice. The Section Designer was then used to vary the background and border...

Zen

Section

Design