Text columns with images

1. What are text columns with images?

Text columns with images is a layout feature commonly used to present information in a visually appealing and organized manner. This layout typically involves dividing a section into multiple columns, each containing a combination of text and images. It's an effective way to highlight key information, showcase features, services, or products, and create a balanced visual experience.

2. How to add column items?

To add column items with images and text in a Text Columns with Images section for your store, you need to follow these steps. 

• Click on the Add section and select Text Columns with Images.
• Enter the section heading.
• Adjust the heading size, text alignment, background color, and padding as needed.
• Select the heading tag for this section to enhance the SEO of the page. 
• Click on Add column to add a new column item.
• Click Upload images to upload an image or select an existing image from your library.
• You can crop or adjust the image as needed.
• Enter the main heading and subheading (if needed) for the column item.
• Adjust the heading size and enter descriptive text.
• Enter the label for the call-to-action button.
• Paste the URL or search for the link that the button will lead to.
• Choose among Primary, Secondary or Text link button styles depending on your design preference

3. How to set up the section layout?

To set up the section layout for your clothing store using the provided configuration options, follow these steps. 

Heading Settings

• Heading: Enter the main heading for the section. Put the text inside a square bracket to give it a highlight effect. 
• Marker: Choose the highlight effect to be Underline or Font highlight.
• Heading size: Adjust the heading size using the slider (default is 100%).
• Heading tag: Choose the appropriate HTML tag for the heading (e.g., H2 for secondary headings).

Layout and Spacing

• Image position: Choose the Image position to be on top or below the text. 
• Column layout on desktop: Choose the number of columns to display on desktop (e.g., 3 columns).
• Block spacing: Set the spacing between blocks.
• Enable side padding: Add left and right padding when the section is full-width.
• Show section divider: Add a divider line for the section.

Mobile Layout

• Image position: Choose the Image position to be on top or below the text.
• Column layout on mobile: Choose the number of columns to display on mobile (e.g., 1 column or 2 columns).
• Block spacing: Set the spacing between blocks on mobile (default is 16 px).
• Top padding: Adjust the padding at the top of the section on mobile (default is 20 px).
• Bottom padding: Adjust the padding at the bottom of the section on mobile (default is 20 px).

By organizing and configuring these settings, you can create a visually appealing and responsive section layout for your clothing store that enhances user experience across all devices.