> For the complete documentation index, see [llms.txt](https://help.fluorescent.co/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://help.fluorescent.co/lorenza/sections/theme-sections/text-columns-with-images.md).
# Text columns with images
The **Text columns with images** displays multiple columns of text blocks with feature images, great for highlighting your values, how your company works, or explaining key elements of your product.
## Set up section
Add this section to any template (except Checkout) and use the drag-and-drop handles to re-order its position. You can add this section multiple times with different content and settings.
{% hint style="warning" %}
Editing a template changes all pages that use that template. To edit specific pages, you can [create new templates](/lorenza/general/editing-themes/using-templates.md#create-and-assign-multiple-templates) or [use metafields and dynamic sources](/lorenza/general/adapting-your-theme/dynamic-content-with-metafields.md).
{% endhint %}
STEPS
In your theme editor (**Customize**):
1. Select a **Template** to edit from the dropdown menu in the top bar.
> Learn how to use templates in our [Templates guide](/lorenza/general/editing-themes/using-templates.md).
2. Under **Template**, click **(+) Add section** and select **Text columns with images**.
3. Click and hold the drag-and-drop handles **`⋮⋮`** to re-order your sections.
### Add column blocks
Add up to 8 **Columns** with a featured image, headings, and a call-to-action button.
STEPS
In your theme editor (**Customize**):
1. Click **(+) Add Column** and/or click on the Column block you wish to edit.
2. Under *Image*, click **Select image** to upload an image or icon to display at the top of the column.
> We recommend a 160px x 160px **`.png`** image and that all images are the same shape and size.
> If you would like to add an icon, there are plenty of sites that offer high-quality icons in many styles, like [The Noun Project](https://thenounproject.com/) and [Iconfinder](https://www.iconfinder.com/).
3. Adjust the **Max image width** using the slider
4. Change the **Heading** text.
> We recommended a short title of just a few words.
5. Change the **Subheading** text.
> We recommend two to three short sentences.
> We also recommend trying to keep the subheading text for all Columns around the same length.
6. Adjust the **Max width of text** of the Column text using the slider.
> The width will need to be adjusted when there are two columns per row on desktop.
> Experiment with this setting to find a clean visual shape for your text.
7. Add a **Link** and **Link text** to display a call-to-action button underneath the column.
> The most effective button labels ask customers to do something (e.g. Get started, Join us, Shop now). To learn more, [read "What is a Call to Action?"](https://www.thebalancesmb.com/call-to-action-1794380)
8. (*Optional*.) Click and hold the drag handles **`⋮⋮`** to rearrange the blocks:
> Click **Remove block** in the block settings to delete a block.
> Click the **Eye icon** to hide or unhide a block.
9. Click **Save**.
## Add call-to-action button
You can link to you collections or products or any other page with a custom call-to-action button.
STEPS
In your theme editor (**Customize**):
1. Click on the **Text columns with images** section to open the section settings.
2. Select or paste a URL for the **Link**.
3. Change the **Link text** to display on the button.
> The most effective button labels ask customers to do something (e.g. Get started, Join us, Shop now). To learn more, [read "What is a Call to Action?"](https://www.thebalancesmb.com/call-to-action-1794380)
4. Click **Save**.
## Section headings and style
Add section headings to display above the columns and adjust the style and layout of the whole section.
STEPS
In your theme editor (**Customize**):
1. Click on the **Text columns with images** section to open the section settings.
2. (*Optional*.) Use the **Section style** dropdown to use **Contrast** colors.
> The **Contrast** style uses the contrast colors in your **Theme Settings**.
3. Choose whether to **Enable animation** to show visual effects when scrolling, hovering, or interacting with the section.
4. Select the number of **Columns** per row to display.
> Choose between *1* and *4* columns per row.
5. Add a **Small heading**, **Heading**, and **Subheading** text.
> These optional fields are displayed as a header above your columns.
6. Select the **Alignment** to display the content on the **Left** or in the **Center** of the section.
7. Use the **Max width of text** slider to control the maximum width of the headings.
> Use this setting to create a clean visual shape for your text and avoid unwanted line breaks.
8. Click **Save**
## Settings reference
Click on the **Column** blocks to find the following settings:
| Setting | Description |
| ----------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| Image | Choose or upload an image. We recommend a 160px by 160px png image file and that all images are the same shape and size. |
| Heading | Enter heading text to display as a title for the column block. |
| Subheading | Add subheading text to display below the heading. Use the formatting buttons to add text styles, links, or lists. To learn more, see Shopify's [Rich text editor manual](https://help.shopify.com/en/manual/shopify-admin/productivity-tools/rich-text-editor#format-text-with-the-rich-text-editor). |
| Max image width | Using the slider, choose how wide the current column's image should appear. |
| Link | Select or paste a link for the call-to-action button. |
| Link text | Add custom text for your call-to-action button. The most effective button labels ask your customers to do something (e.g. Get started, Join us, Shop now). |
| Max width of text | Use the slider to control the maximum width and line breaks of the headings. |
Click on the **Text with columns** section to find the following section settings:
| Setting | Description |
| ----------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------- |
| Style | Use the Default or Contrast section style. The Contrast style uses the contrast colors in your Theme Settings. |
| Columns | Use the slider to choose how many columns to display per row. Choose between 2 and 4. |
| Small heading | Enter text to display as a small heading above the section title. |
| Heading | Enter heading text to display as a section title. |
| Subheading | Enter subheading text to display below the heading. |
| Link | Select or paste a link for the call-to-action button. |
| Link text | Add custom text for your call-to-action button. The most effective button labels ask your customers to do something (e.g. Get started, Join us, Shop now). |
| Alignment | Choose how the text in this section should be aligned. Either Left or Center. |
| Max width of text | Use the slider to adjust the maximum width of the heading and text. |
\\
***
> **Related links**
>
> [Gallery](/lorenza/sections/theme-sections/gallery.md)\
> [Grid](/lorenza/sections/theme-sections/mosaic-grid-3-columns.md)\
> [Image with text](/lorenza/sections/theme-sections/image-with-text.md)