Layout blocks

Creating the Layout block

Start in the Page management area of the Sequence page.

1. Click on the (Select type to create) dropdown menu above the Blocks area, and select Layout block.
2. Click Add.
3. Enter a block heading and content in the Main tab as required. Content here will display above the child blocks.
4. Click Save and Publish.

Selecting the Layout block display style

1. Click on the Children tab.
2. Choose a layout style from the How would you like the blocks to show? dropdown menu. These options will be covered in more detail below.
3. Click Save and publish.

Add, link, reorder and delete child blocks in the same manner as adding blocks on a standard sequence page.

Plain

Plain is the default display option, and will show the child blocks sequentially one underneath another, with no special display effects.

Panel

Panel will show each child blocks as a panels, with all content within the block surrounded by a faint edge/drop shadow. All child blocks will be displayed in sequential order. Panels are a good way to add more visual structure to a page.

Accordion

Accordion will condense the child blocks to a stack of clickable headings, which will expand to show the block content when clicked. These documentation pages have been setup in this manner. Accordions are excellent for organising large amounts of content so only the relevant content is shown at one time.

Slider

Slider will show the child blocks as a series of horizontal slides, with left/right arrows to navigate between them. Child blocks can be either text content or images, and the slider panel will resize to fit the content within. The headings of child blocks displayed as sliders will not be shown, only the content.

Tab

Tab will create a horizontal menu with clickable tabs that sit above the child block content. The heading of the child block will be displayed in the tab, and only the content of the child block selected will be shown in a content area below. Tabs are another excellent way to organise information so only one section is shown at any one time.

Tab - vertical

Vertical tabs function in a similar manner to horizontal tabs, except the tab menu is located on the lefthand side, and lists the headings of the child blocks as clickable vertical panels. The content of the selected child block is displayed to the right of the tab menu.

Scenes

Scenes will display the chid blocks as separate pages, and are excellent for more complex scenario style content. The first child block listed will be the default scene, and subsequent child blocks will be accessed from there. Each subsequent scene can be accessed either by setting up a hotspot in the first scene, or by javascript actions. Use the Set scene option in javascript actions to select which scene to navigate to.

Click-sequence

Click sequence will add a Next button underneath the content of the first child block, and when clicked, will show the next child block. Click-sequence works well for sequential content.

Here are some advanced options for using the tab layout block style that we've found so far.

You can enable scrolling to a tab using anchor points on click by adding the

`js__children__tabs__scrolling`

class to layout block's extra css classes field.

You can disable a tab by adding a custom javascript action with the following code (Substitute 'image' with the name of the tab you'd like to disable):

// Disable the switching of tabs to a tab named 'image'
$('.tab-container').on('click', function(e) {
    if (e.target.innerHTML == 'Image') {
        return false;
    }
});

// Disable the switching of content for tabs named 'image'
$('.tab-container').on('easytabs:before', function(e, item) {
    if(item[0].innerHTML == 'Image') {
        return false;
    }
});