Image grid with text
The image grid with text section is a unique design to the Whisk theme. Here's how you can customize it for your store.
Settings
First section
When this section is the first one at the top of the page, make sure this box is checked. It helps with SEO and page performance in the following technical ways:
- It will load the image as loading="eager" instead of loading="lazy"
- It will remove the fade in image animation if it is active in Style/Theme settings so that the image loads onto the page
Color scheme
Choose from one of the theme's color schemes.
Mobile text alignment
Choose whether you prefer the text to be left or center aligned on mobile. For longer text lengths, we recommend left aligned for better readability.
Text animation
See the documentation for text animations for more details.
Image shape
You can select the shape for the images in the grid. They can either be "diamond", "hexagon", a "flower" (available on Whisk 4.0.0 or greater), or a "circle" (available on Whisk 4.0.0 or greater). Here's an example of how a few of these options look on "sharp" and "soft" Theme setting styles.
Sharp diamond
Sharp hexagon
Soft diamond
Soft hexagon
The settings allow you to customize each of the 4 grid blocks. You can upload an image, make the image a link (optional), and change the background color to one of the themes color schemes. You can even choose to leave one of the blocks without an image and a color instead. Here's an example of how that could look:
Section spacing
(Whisk 5.0.0 and above)
Adjust top and bottom padding within the section.
Add space above or below
(Whisk 4.3.1 and below)
Depending on the sections that are above or below this section, you may want to add some extra space for a more pleasing layout.
Blocks
Heading
Heading font style will be the heading font chosen in Typography/Theme settings.
Heading
The text for the block.
Heading size
Select the size of the text for the heading.
Subheading
Subheading font style will be the accent font chosen in Typography/Theme settings.
Subheading
The text for the block.
Subheading size
Select the size of the text for the heading.
Make text bold
Check this box to make the subheading text bold.
Text
Text will be the body font chosen in Typography/Theme settings.
Text
The text for the block.
Text size
Select the size of the text.
Make text bold
Check this box to make the text bold, which can be helpful for legibility on a transparent background.
Buttons
Buttons will be automatically colored based on the color scheme chosen as the text box background. The following applies to both Button 1 & Button 2.
Button label
The text for the button. To hide either of the buttons, leave the label for that button blank.
Button link
Add a link to the page you want the button to lead to. If it's a page outside of the store, make sure it's the full URL with "https://".