Advanced Grid Builder offers a unified interface for configuring a variety of grid styles and themes. Some styles are unique, while others are variations of existing configurations. The simplest way to customise your grid is by using a Theme Preset. Theme presets automatically configure the grid editor settings, which you can then adjust to achieve your desired design. This guide will teach you how to manually configure each style, starting either from a new shortcode or by resetting an existing shortcode to 'None' for the preset.
Grid
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, a grid variant, primarily display images in each cell.
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.
Accordions
Accordions are grid variants where content areas dynamically show or hide via JavaScript when their titles are clicked.
On the Style Presets Panel:
- Select 'Accordion' under 'Basic Styles' to apply accordion-specific CSS and JavaScript.
On the Fields Panel:
- Include a title to the left of the content area.
- Add fields within the content brackets; this content will toggle visibility when the title is clicked.
Carousels
Carousels in Advanced Grid Builder use the Slick Carousel JavaScript library, turning any cell design into carousel slides.
On the Carousel Settings Panel:
- Choose between 'Scroll' or 'Fade' styles.
- Optionally, adjust additional Carousel Options.
Lists
Lists are simplified grids, mainly showcasing titles, with content marked up using <li> tags.
On the Fields Panel:
- Retain only the title in the Field Pattern.
- Select 'li' for the 'Title Tag'.
On the Grid Sizing Panel:
- Set Columns to 1 in the Cell Layout (or more for multiple columns).
- Set Gaps to 0px under Cell Layout to reduce spacing between items.
Tables
Tables in AGB are formatted as 1-column grids with alternating cell background colours, not as HTML tables.
On the Fields Panel:
- 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).