Select a grid type to change the mode of your grid between grid, carousel, accordion, or table.

Note that while selecting a grid type will ensure the basic styling and JavaScript behaviours are applied, it will not always create the look and feel you may be expecting as each type will need further settings adjustments to achieve a classic result. To fully configure each grid type, it is better to apply a preset.

Some grid types will have further options available for you to configure and will be revealed after selecting the grid type.

Grids

The grid is the default style when adding a new shortcode. To maintain the grid style, simply avoid applying settings for other styles. Main format settings for the grid are available on the Grid Sizing panel.

Galleries

Galleries are a variant of a grid. To create a gallery:

On the Fields Panel:

• Keep only the ‘image’ field, positioned to the left of the content area. Uncheck the ‘Content Wrapper’ to remove all content, including the wrapper, thus eliminating any space it might occupy in your grid.

On the Grid Sizing panel (optional):

Set an ‘Image Aspect Ratio’ to standardise gallery image shapes, especially useful when the original images vary in size

Tables

Tables in AGB are formatted as 1-column grids with alternating cell background colours, not as HTML tables.

From the table options:

• Add fields to the pattern as inline elements. Ensure they’re within the content brackets.
• Select ‘Show Table Headers’ to display field column headers.
• Clear the ‘Inline Separator’ field.

On the Grid Sizing Panel:

• Choose ‘Fixed Width’ for ‘Cell Layout’.
• Set Gaps to 0px.
• Select ‘Centre’ for ‘Grid Justification’.
• Use ‘max-content’ for ‘Cell Width’.
• Choose ‘Same Column’ for ‘Inline Column Widths’.

On the Style Presets Panel:

• Set alternating row colours using ‘Odd Colour’ and ‘Even Colour’ fields (e.g., #fafafa, #eee).

Carousels

Carousels in Advanced Grid Builder use the Slick Carousel JavaScript library, turning any cell design into carousel slides.

From the carousel options:

• Choose between ‘Scroll’ or ‘Fade’ styles. Optionally, adjust additional Carousel Options.

Accordions

Accordions are grid variants where content areas dynamically show or hide via JavaScript when their titles are clicked.

From the accordion options:

• Include a title to the left of the content area. The open/close behaviours will be attached to this field.
• Add fields within the content brackets; this content will toggle visibility when the title is clicked.