The Style Editor allows for extensive control over the appearance of the various types of Section Groups: Horizontal Classic, Horizontal Tabs, Vertical Classic, Vertical Collapsible (these include normal and animated collapsible as well as Accordion type of section groups), Vertical Tabs. The structure for each section type is roughly the same and we explain below in detail each configuration.

In the visual previews below, you can rollover the images to see overlaid the different building blocks explained with text captions.

Horizontal Classic

This configuration allows you to have side by side columns of content. The Horizontal Classic and all other section groups have an outer container that can be styled separately to set a background or spacings to the entire group - in the rollover previews the outer container is outlined in pink. The separate sections are composed of a header (green outline in the rollover image below) and content part (navy outline), with the header featuring two building blocks similar to a main navigation button - an outer part called Header and the inner Caption (red). You also have control over the size and appearance of the delimiter between sections (orange).


Horizontal Tabs

Using tabs is a popular method to increase content density by displaying multiple blocks of content in essentially the same visual space. With the Style Editor you have control over the appearance of the different parts of the tab sections. For the tab itself (the top clickable part) you can set the appearance of the selected (green outline in the rollover image below) and normal (cyan) state of the tabs as well as set the styles for the tab caption (red). You can also set the styles of the content part of the tab - background color and image, paddings and margins.


Vertical Classic

For the Vertical Classic sections you can again edit the style of the header (green outline), the header caption (red), the content part (navy outline) and the separator between the sections (orange).


Vertical Collapsible

Vertical Collapsible sections (this includes Animated and Accordion types of section group) are very similar to the Vertical Classic, but you have control over the appearance of the collapsed sections (they don't have a content part - light blue outline) and there is an additional element - the expand / collapse icon that appears on the right of the section headers which has two states - expanded (violet outline) and collapsed (teal color).

You can choose to set a common style for the different kinds of sections (like in the previews above) or you can create completely different appearances for the different configurations. In the examples above we have used a single pattern image (soft gradient with a white edge at the top, tiled horizontally) for all header types and the same style for captions (all caps, black Georgia with increased spacing between the letters). The shadows below each section can again be created using a single pattern image tiled horizontally along the bottom edge of the content part of each section (choose position bottom).