How to Set Up the Image with Text Overlay Section in Concept

Add and edit content blocks

• Under Image with text overlay, click Add block, then select the content type you need.
• Use Subheading, Heading, and Text blocks for the banner message.
• Add a Button block to configure the label, destination, style, size, icon, and whether the link opens in a new tab.
• Use a Link block for a simpler text link.
• Add an Icon block to select a built-in icon or upload a custom icon.
• Use an Image block to place an additional image within the overlay content; adjust its width for desktop and mobile.
• Add Empty space to control spacing between blocks, or Custom Liquid for custom content.
• Add Breadcrumb to display a Home link and the current page title.
• Click Save.

You can drag the blocks to change their display order. The section also supports app blocks when available.

Configure highlighted text

• Open a Heading or Text block.
• Enter the content you want to display.
• Choose a Highlighted text style and, when applicable, a Highlighted scribble style.
• In the Heading block, enable Enable reveal effect if you want the heading's highlight animation.
• Click Save.

The heading reveal setting is separate from the banner's parallax effect.

Adjust colors and section effects

• Under Colors, configure Text, Background, Background gradient, Highlight, and Highlight gradient.
• Set Button text, Button background, and Button background gradient as needed.
• Adjust Overlay and Overlay opacity to control the tint over the background image.
• Under Section, adjust Top padding and Bottom padding.
• Optionally enable Show section divider, Make section full width, or Make section rounded.
• Enable Enable parallax effect if you want the background image to move during scrolling; select a Parallax direction: Vertical, Horizontal, or Zoom.
• Enable Allow transparent header if you want the section to work with a transparent header when the page/header layout supports it.
• Click Save.

Preview the section

• Open the page preview and check the banner image, text, buttons, and overlay contrast.
• Switch to mobile preview and confirm the mobile image, height, and content position.
• Scroll the page to check the parallax effect if enabled.
• Test the button and link destinations.

Troubleshooting

• The mobile image does not appear: Make sure Mobile image is selected; otherwise, the desktop image is reused.
• Text is difficult to read: Adjust Overlay, Overlay opacity, and Text color.
• Content is not in the expected position: Check the desktop and mobile content position settings separately.
• Parallax does not appear: Make sure Enable parallax effect is turned on and preview by scrolling the live page.
• The button is missing: Check that the Button block has a label and an appropriate link.
• The transparent header does not appear: Check the section's Allow transparent header option and the page/header configuration.

Need Further Assistance

If you encounter any issues or need additional help with your Concept theme, please contact our support team via our Ticket System for assistance within 8 hours.