Basic Styles

Basic Styles

The Basic Styles checkboxes allow you to apply some of the most commonly used styles to your grid without needing to know any CSS, a language used for styling web pages.

Reset

The Reset option resets all editor panels, except for Query Source, to the default style selected under Theme Preset (see below). This reset doesn't affect your undo history, so you can always hit Undo after a reset to revert to your previous configuration. This is useful if you've made a lot of changes to your grid and want to start fresh without undoing the entire history.

TIP: To reset the grid to the original settings and clear all formatting, select None as the preset before resetting.

Override Theme Fonts

Select Override Theme Fonts to replace your theme's default fonts with a set of default fonts from Advanced Grid Builder. These fonts are based on Open Sans. This is useful in scenarios where your theme's default fonts don't fit well with the visual design of your grid or when you want to ensure consistency with the Advanced Grid Builder presets. This is a quick and easy way to ensure your grid matches the visual style of the presets on this website, especially if your theme's default fonts aren't suitable for a grid.

Cell Shadow

The Cell Shadow option adds a subtle shadow effect to the entire cell, giving it depth and making it stand out from the background.

Image Shadow

The Image Shadow option adds a subtle shadow effect to the image thumbnail, helping it stand out within the cell.

Hover Enlarge

The Hover Enlarge option applies a subtle animation to the cell when the mouse hovers over it, making the cell appear slightly larger. This can help draw attention to the cell the user is currently viewing.

Cell Hover Shadow

The Cell Hover Shadow option adds a shadow effect when you hover over a cell. It looks great when combined with Hover Enlarge.

Centre All Text

The Centre All Text option centres all text within the cell. Please note that if you've aligned text in a specific way within a sub-element, that alignment will override this setting.

Centre Content (Vertical)

The Centre Content (Vertical) option centres the content vertically within the cell. This setting relies on CSS Flex settings and may not work in all configurations. Some potential limitations include issues with elements that have fixed heights or when parent containers are not flexible, which can prevent proper vertical centring.

Note: This setting conflicts with the Equalise Grid Heights setting and will be automatically disabled when the Grid Sizing / Equalise / Cell Heights field has a value other than off. Learn more about CSS Flex settings here.

Centre Content (Horizontal)

The Centre Content (Horizontal) option centres the content horizontally within the cell, helping to balance the layout of your grid.

Note: If Equalise Cell Heights is enabled, this option will be automatically disabled as the two features are incompatible.

Image Hover Zoom

The Image Hover Zoom option applies a zoom animation to the image thumbnail when the mouse hovers over it, making the image appear larger and drawing attention to it.