Image with text

Use the Image with text section to combine a feature image side-by-side with promotional text and button. With a flexible layout and optional content blocks, you can achieve a wide variety of looks.

  • Add a featured Image and Content blocks.

  • Customize the layout and change the container color for alternate looks.

Check out the related Video with text section.

Image with text
Section with container color

Set up section


In the editor side panel, click (+) Add section and select Image with text. Click and hold the drag handles ⋮⋮ to re-order sections.

Section styles


Click the section to edit general section styles for colors and spacing, available in all sections:

Set up image


  • Add a feature image and alternate mobile image.

  • Change the image aspect ratio (shape)

  • Make the image a clickable link to another page.

Click Image with text section to find settings

Setting
Description
Options

Image

Select or upload an image.

Mobile image

Select or upload an alternate image to display on mobile devices.

Aspect ratio

Crop the image to a uniform shape, or select Natural to maintain its original shape. "Aspect ratio" refers to the proportion between the image's width and height (W:H).

Natural Default Portrait (2:3) Portrait (4:5) Square (1:1) Landscape (5:4) Landscape (3:2)

Image link

The page or URL that you want the link to go to. Visitors are redirected when they click the image.

Change image layout


After uploading an image, adjust the width and position. Use the Breathing room option to add space around the image.

Click Image with text section to find settings

Setting
Description
Options

Desktop image width

Set the maximum width of the image on desktop.

35 - 70 % Default: 50

Desktop image position

Position the image to the left or right of the text content.

Left of content Right of content Default

Mobile image position

On mobile, show the image before or after the text.

Image first Default Image second

Image breathing room

Use the slider to add spacing around the image. Set the slider to 0 to display the image at the full width and height of the image area.

0-60 Default: 0

Add content blocks


Click (+) Add block to add text and image content to the section. Use the drag handles ⋮⋮ to re-order blocks, and add Spacer and Divider blocks to further customize the layout.

Change content layout


Change the width and alignment of all content blocks.

Click Image with text section to find settings

Setting
Description
Options

Content width

Display the section at full width of the screen or set a custom width. Under Section, you can also set the section width.

Full width Custom width

Custom width

Use the sliders to set the maximum width (in pixels) of the section content.

200 - 1000 px

Content position

For both desktop and mobile, choose the placement of the headings within the grid item. Select one of nine positions. The horizontal and vertical placement applies when there's enough room in the content area.

Text alignment

Set the position of the text content for desktop screens.

Left Default Center Right

Change container color


Change the Container color scheme to show a background color for the content area.

You can add and define different color schemes in Theme settings > Colors. Learn more

Last updated

Was this helpful?