Highlight text with image – User Guides

Create eye-catching text alongside icons and images

What is the highlight text with image section

The Highlight text with image section in Beautify displays text alongside icons or images, making it easier to present information in a clear and visually appealing way. This layout helps draw attention to key points and is particularly useful for highlighting product features, service benefits, or important messages in a way that’s both informative, eye-catching and easy to scan.

How to set up the highlight text with image section

Steps

Open the Theme Editor and add the Highlight text with image section to the page.
Use the Content settings to adjust the Text alignment and choose whether to Center text on mobile.
Set the Text size and Mobile text size.
Navigate to the Style settings and choose whether the section should be Full width.
Select a Color scheme for the content. Color schemes can be managed in Theme settings > Colors.
Choose one of the five Section background options:
Default: Uses Beautify's default color scheme selected in Theme settings > Colors > Schemes.
Color: Select a custom Background color
Image: Upload a Background image
Simple gradient: Set the gradient start and end colors, plus the gradient style
Advanced gradient: Customize the gradient further using the COLOR STOP settings
If the section is not full width, an additional Layout setting, Boundary above section controls the spacing above the section. This can help to create smoother transitions between sections.
Default - Will leave the standard spacing at the top of the section
Tight - Will leave a smaller space between sections
Join - Adjacent sections will touch each other
Click Add block to add more blocks, or use one of the existing blocks that are present upon install. A block can contain Text, an Icon or an Image.

Note

The Content radius selected in Theme settings > Design will be applied to Image blocks.

FAQs

I want to fade sections into each other. How do I do this?

The section Style and Layout settings can be used to manage the Section background and blend sections together to create a seamless flow. An easy method to do this is to select a Simple gradient background and make the Gradient start and Gradient end colors match the sections above and below. Alternatively, a Collage hero section can show an image behind up to 5 sections that are above or below it.

Why is the background color is not showing for my full width section?

A Collage hero section can show an image behind up to 5 sections that are above it or below it. This will override the full width background settings for those sections. If you are not seeing the color you have chosen for Section background in the Highlight text with Image section, be sure to check it is not being overriden by a Collage hero.

Bring your business ideas to life with Shopify

Can't find what you're looking for?

Our support staff are here to answer your queries, so don't hesitate to write to us!