The Mosaic home page section presents images, text, and links through engaging blocks that vary in size and organization.
Use the theme editor to add an optional heading, customize the section's appearance, adjust the layout, adjust the layout, activate mobile compression, add the mosaic blocks, and add an overlay.
Add Mosaic to your home page
- In the theme editor (Customize), click [+] Add section
- Locate Mosaic
- Click the section, then Add
- Save
Add an optional heading
Add a Heading for the section using the provided text field.
Customize the section's appearance
Choose from three options for the Section height. The options are:
- Small
- Medium
- Large
Adjust the layout
Use the Text alignment dropdown to reposition the text in the Mosaic tiles. There are nine options:
- Top left
- Top center
- Top right
- Center left
- Center center
- Center right
- Bottom left
- Bottom center
- Bottom right
Reduce cropping
Use the Maintain aspect ratio option for images to align with the proportions of the original image (rather than those provided by the section).
Even with this setting enabled, images may still crop near the margins to fit various screens and browsers, so avoid images with text and/or content near the edges. Instead, include messaging through the Heading and Text fields.
Activate mobile compression
Enable Compress blocks to minimize the amount of space for the mobile view. When enabled, customers can expand and view the block by selecting it.
Add the mosaic blocks
Feature up to a maximum of five blocks by selecting [+] Add promotional item. To access the individual block settings, select the block by clicking on it.
Choose an Image with the Select image button, then add a Heading and Text.
Click the rounded-rectangle swatch to select a Text color.
Specify the Link for the block to direct the customer to a particular page. This link will display as a button. Add the desired Button text, then choose either Primary or Secondary from the Button style dropdown.
Add an overlay
To add an Overlay, a translucent cover for the image, select Solid (single color) or Gradient (blend of colors) from the Overlay style dropdown.
Choose the Color for the overlay by clicking the rounded-rectangle swatch, then adjust the level of transparency using the Opacity slider.