Image with text

Overview #

The Image with text section is designed to enhance your theme by allowing you to combine images with text in a flexible layout. This section is ideal for showcasing products, promotions, or any content that benefits from a visual and textual combination. It provides various customization options to tailor the appearance and behavior of the section to fit your needs.

Key components and functionality #

Layout settings

This section allows you to control how content is displayed on different devices, ensuring a responsive design.

• Stack on mobile: Enable this option to stack the image and text vertically on mobile devices for better readability. This setting is particularly useful for creating custom mobile layouts.
• Stack on desktop: Similar to the mobile option, this setting stacks the content vertically on desktop screens, allowing for a more streamlined presentation.

Content alignment

Adjust the vertical alignment of the content within the section to ensure it fits well with your design.

• Content alignment: Choose from top, center, or bottom alignment to position your content as desired.

Button settings

Customize the appearance and behavior of buttons within the section.

• Button position: Decide whether the button appears above or below the content. Default: above
• Button position on mobile: Similar to the desktop setting, but specifically for mobile devices. Default: above
• Open link in a new tab: Enable this option to open button links in a new tab. Default: false

Display settings

These settings help you manage how the section appears on different devices.

• Display full width on mobile: Enable this to make the section span the full width of the mobile screen. Default: false

Usage notes #

• Responsive design: Utilize the stack settings to ensure your content is easily readable on both mobile and desktop devices.
• Performance: Optimize images for web use to ensure fast loading times.
• Accessibility: Ensure text contrasts well with the background for readability and consider adding alt text to images for screen readers.

Usage examples #

1. Product Highlight: Use the Image with text section to feature a new product. Upload an image of the product and add a compelling description alongside it. Use the button settings to link directly to the product page.

2. Promotional Banner: Create a promotional banner by selecting an eye-catching image and overlaying it with text that describes the promotion. Adjust the content alignment to center the text for maximum impact.

3. Storytelling: Share a story about your brand or a specific product by combining images with narrative text. Use the stack settings to ensure the story is presented clearly on all devices.