Sections allow you to structure your page content in columns and tabs. They are the best way to fit lots of content in limited real estate. Sections also help to represent any information in a readable and visually attractive manner.
Sections usually exist in groups of 2 or more, therefore, the content element that allows you to add a section is named Section Group. You can add section groups anywhere inside the main content area of your site. If you split your page into several columns using the Text Columns option - you may also add sections in each of the page columns.
To add a Section Group simply reach for the the Top Menu and select Add Content > Section Group. Green rectangles will appear to indicate the locations where a Section Group may be added. Select the desired location and a popup will open asking you to define the appearance for your Section Group.
The Section Group orientation is the way your sections will be arranged in the Section Group. If the sections appear one next to the other, their orientation is horizontal. Sections appearing one below the other have vertical orientation. There is a Section Group preview displayed on the right side.
Depending on the selected orientation, a number of style options will be displayed.
- horizontally oriented sections have classic and tabbed style option
- vertically oriented sections have classic, tabbed, classic collapsible, animated collapsible and accordion style options.
The appearance of these style options is as follows:
- classic sections appear one next to the other (for horizontal orientation) or one below the other (for vertical orientation). Use these as intro sections including highlights from other pages in the site, for filling up space when your page content is scarce, or to make sections stand out more on the page.
- tabbed sections allow you to fit a lot of content in limited real estate. With tabbed section groups only one section (tab) may be open at a time. By default the first section (tab) will open upon the loading of the page.
- classic collapsible sections are the same as classic sections, but each section has an option to collapse it. For each collapsible section you may choose whether it should be collapsed or expanded by default.
- animated collapsible sections are the same as classic collapsible ones, but here the sections collapse or expand with a nice animation effect.
- accordion sections, just like the tabbed sections, allow to display just one section at a time. When one section is opened, all others will automatically collapse with a nice animation effect. By default the first section is opened on load of the page.
Delimiters allow you to visually separate each of the sections using thin vertical solid lines. Delimiters are only available with horizontal classic sections.
Minimum height option is only available with tabbed sections (both horizontal and vertical). By default each of the sections (tabs) is as high as its content. If minimum height is specified, all tabs will be at least as high as is the minimum height. This eliminates the unpleasant content jumping effect observed when tabbed sections vary a lot in their content length.
After you define the appearance of your Section Group, click Add and you will be asked to add your first section.
You already defined the section appearance when you added your Section group. What remains now is to add the actual sections, and the content inside them. Inside the Add Section window the following options will be displayed:
- caption is the actual title of the section
- the caption may link to a page or external link (sections with classic orientation only)
- Special features will give you the option to collapse/expand your section by default (vertical classic collapsible and vertical animated collapsible sections only)
- Fix Width option allows you to define your own width for each of the sections in the Section group. For example, if you want four equal sections, define 25% Fix Width for each of the sections,. If width is not fixed, it will be defined by the width of the section title or section content.
- the option to upload you own section title images is appropriate for customized designs and is recommended for advanced users only.
Add the section and you may now start adding content to it. Just click Add Content from the top menu and green rectangles will appear to indicate the locations where this content may be added. Go to the green rectangle displayed below the section you just added, and drop your content there.
To add more sections to your Section Group just roll over it. Click on the icon displayed on the right, and green rectangles will prompt you to choose the position for your new section. Click a rectangle and another Add Section window will open.
To edit your section group or a single section just roll over the section group / section in Admin mode and click the blue icon displayed on top left. By rolling over the icon you may also delete, move, copy, etc. your Section Groups or sections.