Include media and messaging using the dynamic Grid section.
Click the Grid section to open its general settings.
Add an optional Heading and Subheading with the provided fields.
Choose an optional Section heading color, Section subheading color, and Section background color using the round swatches.
Images used in this section will be cropped to fit the blocks, but this can be disabled by checking Maintain aspect ratio.
Conserve space in mobile views by using the Compress blocks option. This will minimize the blocks, allowing customers to expand the information by clicking the block.
Click one of the preloaded Grid blocks to customize its content.
For each block, assign the desired Image by clicking Select image.
Add a Preheading using the provided field, then adjust the Preheading color with the circular swatch.
Add a Heading using the provided field, then adjust the Heading color with the circular swatch.
Add Text using the provided field, then adjust the Text color with the circular swatch.
Add a URL to the Link field, then customize the Button text for the button's label.
Configure the block’s Text color using the rounded-rectangle swatch, then choose a Button style from the dropdown.
Specify where the text appears on the image with the Text alignment dropdown. There are 9 options:
- Top left
- Top center
- Top right
- Center left
- Center center
- Center right
- Bottom left
- Bottom center
- Bottom right
Use the Width dropdown to control the horizontal space occupied by the block. Half width will include two blocks per row, while Full width spreads the block across the width of the section.
Adjust the Desktop height with the provided slider.
Adjust the Mobile height with the provided slider.
Activate an overlay, by selecting either Solid or Gradient from the Overlay style dropdown. Then determine the Color with the rounded-rectangle swatch and level of Opacity using the slider.