Help Center

Using the image with text section

Updated

The Image with text section is a flexible image-based section that allows you to highlight an image or multiple images alongside text content. You can choose to display the image on either the left or right side, depending on your preference.

image with text.png

Adding the section

  1. Log in to your Theme editor and navigate to the page you would like to display this section.
  2. You'll see a list of available sections on the left-hand side. Locate the Add section button and click on it.
  3. From the list of available sections, find and select Image with text.

Section settings

In the section settings, you will find several common settings available in most themes, which include:

Image

You can set up to 2 images, upload and customize the image settings in this section:

  • Image upload options: Click the Select Image button to choose an image from your media library or upload a new one.
  • Image shape: Adjust the shape of the images as needed.
image block.png

Text content

Customize the text content to be displayed alongside the image:

  • Subheading and Heading: Provide a subheading and heading for your content.
  • Text (Description): Add your main content or description in the provided field.
  • Text alignment: Choose whether the text is aligned to the left, center, or right.
  • Button (Optional): You can include a button below the description text. To add a button, enter your desired text in the Button label field and provide the corresponding URL in the Button link field.
text content block.png

Section layout (image positions)

Choose how you want to position the image and text within the section:

  • Image size: Adjust the size of the images as needed.
  • Layout: Select whether you want the image on the left or right side of the text content on desktop view.
section layout.png

Additional settings

  • Show top padding: Adds extra space at the top of the section.
  • Show bottom padding: Adds extra space at the bottom of the section.
  • Color scheme (Expanse, Fetch and Gem): Determines the background and text colors for the section. Customize available color schemes in Theme settings > Colors.
  • Lazy load images (Impulse, Motion and Streamline): Enable this when the section appears below the fold to help reduce unnecessary image loading and improve performance.
  • Use alternate section color (Streamline): Applies the alternative section background and text colors defined in Theme settings > Colors.

 

Related articles