The Image with text overlay section displays immersive content through a combination of a high-resolution image, text, and a call-to-action button. Use this section to build your brand, and highlight special promotions and products.
Add this section to
Customize section settings
Click the Image with text overlay section to open its settings.
Adjust section height
Use the Section height dropdown to choose how the image will be displayed.
The four options are:
- Small
- Medium
- Large
- Original aspect ratio
This setting has a direct effect on how the image fits into its container. Using a section height will allow for more width, so if cropping is occurring, try choosing an alternative section height option.
Add the image
To add an Image, click Select image.
Use the Position dropdown to identify the focal point of the image. This option controls where the image is cropped based on the specified center of the image. There are nine options:
- Top left
- Top center
- Top right
- Center left
- Center
- Center right
- Bottom left
- Bottom center
- Bottom right
This setting will not have much of an impact if your background image's dimensions are roughly the same size as the section.
Add the overlay
With the image in place, add text for the Heading and Text.
Then configure the Content position using the dropdown. This will assign the text to a particular point on the image. There are nine options:
- Top left
- Top center
- Top right
- Center left
- Center center
- Center right
- Bottom left
- Bottom center
- Bottom right
To add an optional Overlay, use the Overlay style dropdown to select Solid or Gradient. This will add a translucent cover for the image for increased contrast with the added text.
Solid features a single color, while Gradient offers a blend of colors.
Disable the overlay
Selecting None will disable the Overlay.
Control the colors
Select a Text color using the rounded-rectangle swatch. This setting will be independent of the Theme settings when used.
If an overlay is active, select the color to use with the Background color setting. Then determine the level of transparency by using the Background color opacity slider.
Add a call-to-action link
Assign a Link to direct customers to, then enter the Button text.
Share your experience with Empire
Your feedback is crucial! Help make Empire better by sharing your thoughts.
What to provide:
- Pain points: What's not working for you?
- Missing features: What should we add to Empire?
- General feedback: Any other ideas?
How to provide feedback:
- Fill out our quick and easy form.
- Details help us improve, so the more specific, the better!