Articles in this section

See more

Turbo Guide: Image with Text

  • Last updated:
  • Updated
Follow

image-with-text-lead-in.png

Supported Versions

The details shared here apply to the most recent version of Turbo. To keep your theme up to date, check out this helpful document.

 

In This Article

 

Using the Image with Text section

The Turbo theme includes a highly configurable 'Image with Text' section which is available on the homepage. The 'Image with Text' section is perfect is you want to prominently display images. Whether these are product related, company related, or lifestyle shots; this section will show off any big or important images you have along with any applicable text and a call to action button.

In order to set up the Image with Text section, click into Customize (your Theme Editor) > Sections > Add Section > Image with Text.

 

Image with Text Settings

  • Section Settings

    The section settings determine the look and layout of this section!


    image-with-text-formatting-settings.png
     

    Wide display

    You can choose to enable 'wide display' so this section will spread out the full width of the screen. Otherwise, the section will sit in a 'container' on the homepage and not span the full width:

    image-with-text-wide-display-min.gif

     

    Images per row

    Here you can choose how many 'Image with text' blocks you'd like to show per row. Choose from 1 or 2:

    image-with-text-per-row-min.gif

     

    Text alignment

    Here you can choose the alignment of your text and button: left, center, or right:

    image-with-text-alignment-min.gif

     

    First image position

    This setting allows you to choose whether your first content block's image shows up on the left or the right. The following content blocks that you add, will then alternate so they appear staggered:

    image-with-text-position-min.gif

  • Content Block Settings

    The content block settings are for configuring each image with text block. You can choose to add an image, enable image cropping, heading, text, button label/link, and colors for each 'image with text' block.

    image-with-text-content-block-settings-min.gif

    image-with-text-content-configure-min.gif

 

Examples

  • Demo Shop Examples

    Here's how we set up the 'Image with Text' homepage section in each of our demo shops for Turbo!

    • Portland

      image-with-text-portland-1.png

      Section settings

      Wide display - enabled

      Images per row - 1

      Text alignment - center

      First image position - right

      image-with-text-portland-2-min.gif

      Section settings

      Wide display - enabled

      Images per row - 1

      Text alignment - left

      First image position - right

    • Seoul

      image-with-text-seoul-1.png

      Section settings

      Wide display - enabled

      Images per row - 1

      Text alignment - center

      First image position - left

      image-with-text-seoul-2.png

      Section settings

      Wide display - enabled

      Images per row - 1

      Text alignment - center

      First image position - left

    • Florence

      image-with-text-florence.png

      Section settings

      Wide display - enabled

      Images per row - 1

      Text alignment - left

      First image position - right

    • Chicago

      image-with-text-chicago.png

      Section settings

      Wide display - enabled

      Images per row - 1

      Text alignment - left

      First image position - right

    • Dubai

      image-with-text-dubai.png

      Section settings

      Wide display - disabled

      Images per row - 1

      Text alignment - left

      First image position - left

  • Additional Examples

    Example 1


    image-with-text-additional-example.pngSection settings

    Images per row - 2

    Text alignment - left

    First image position - left

     

    Example 2


    image-with-text-additional-example-2.png
    Section settings

    Images per row - 1

    Text alignment - center

    First image position - left

 

Mobile Layout

When viewed on a mobile device, regardless of your 'first image position', the image and text will stack vertically with the image showing first:

image-with-text-mobile-layout-min.gif

 

Related articles