Image with text

Here is an example of what this section can look like:

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

Text animation

See the documentation for text animations for more details.

Color scheme

Choose from one of the theme's color schemes as the background for the section.

Text alignment (desktop or mobile)

Choose left, center, or right text alignment.

Image

The image for the section

Image placement (desktop)

Choose to show the image on the left or right side of the section. The image will automatically be above the text on mobile.

Width (desktop)

Choose how wide you want the image to be on desktop. It will automatically fill the whole screen on mobile. 

Make image extend over the bottom edge of the container

Available in Whisk versions 4.1.0 and greater

When this box is checked, the image will overlap the bottom edge of the section.

When unchecked, the image will fit into the section with equal spacing around it.

Image shape

Choose from several image shapes, including different rectangular shapes. The image will automatically crop itself to fit this shape and the whole section will also adjust based on the size of the image you choose. If you have a lot of text in this section, we recommend a taller image for a taller section that can accommodate more text.

Color underneath section

See our documentation on Color underneath sections to learn more about how to use this setting. This is only relevant when the image is extended below the bottom container.

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://".

Image

Image

Upload the image you want to use in the block.

Image max width

This will be the width of the image in px unless it's too wide to fit the screen, then it will default to full width and scale with the screen size so it's never cut off.

Image text

If your image includes imbedded text, add that text here so that it can be picked up by screen readers for accessibility, and by Google for better search results.

Make image text h2 heading

If your image has text and is being used as the title for the section, check this box. This also benefit s accessibility and SEO.

Still need help? Contact Us Contact Us