How to Add Text on Image in WordPress Elementor

Learning how to add text on image in WordPress Elementor is a simple yet powerful design technique to create engaging sections on your WordPress website. Whether it's a hero section or a content highlight, overlaying text improves readability and visual appeal.

Basic Method: Using Inner Section and Heading

The easiest way to overlay text on an image in Elementor is by combining a background image with a heading widget inside an inner section.

1. Open your page with Elementor.
2. Drag an Inner Section onto the page.
3. Click the section handle and go to Style > Background to set your image.
4. Under Layout, set the height to Min Height and define your desired size.
5. Inside the section, drag a Heading widget.
6. Center the text and customize the typography, color, and spacing.

Using Image Widget with Text Overlay

To create an Elementor image with text using the Image widget, you’ll need a workaround using absolute positioning.

1. Insert an Image widget and select your image.
2. Drag a Text Editor or Heading widget over it.
3. In the Advanced tab, enable Positioning > Custom Position and set it to Absolute.
4. Adjust the text widget’s location and z-index so it appears clearly over the image.

Add Text Over Image Using Container or Section Background

If you use the container layout (Flexbox), follow this to overlay text:

Navigate the container settings

• Drag a Container to the page
• In the Style tab, set your background image

Add and style the text block

• Add a Heading or Text Editor inside the container
• Center it using Align and Justify Content in Flex settings

Design Tips for Image and Text Alignment

To make your layout visually appealing and ensure the text remains readable across all devices, consider these in-depth tips:

• Contrast: Choose contrasting colors between the image and the text. Light text works well on dark backgrounds and vice versa.
• Spacing: Adequate padding and margins around the text help prevent visual clutter and enhance readability.
• Overlay Color: Apply a semi-transparent overlay (e.g., black with 30% opacity) on the image to improve text clarity without obscuring the image entirely.
• Typography: Use legible fonts with sufficient size and line-height. Avoid script fonts or extremely thin typefaces unless the image has a very clean background.
• Alignment: Center alignment is popular for hero banners, while left or right alignment may suit content-rich sections.
• Hierarchy: Use bold or larger fonts for headings and lighter styles for subtext to create a visual flow.

Making the Text Responsive

Responsive text ensures your message looks great on all devices.

1. In Elementor, switch to Tablet or Mobile view.
2. Adjust Text Size, Line Height, and Padding.
3. Use VW or EM units instead of pixels for flexible scaling.

Troubleshooting Common Issues

Text not visible? Check these common causes:

• Low contrast: Add a background overlay for better readability.
• Z-Index: Ensure your text widget has a higher z-index than the image.
• Positioning: Confirm your section or container uses relative positioning.

Useful Links

Add Text Over Image in Elementor – Learn how to overlay text on images using various methods in Elementor, including background images and absolute positioning.

How to Use Z-Index in Elementor – Understand how to control the stack order of elements to ensure text appears above images.

Style Tab – Background – Discover how to set background images and overlays to enhance text readability over images.

Elementor Responsive 101 – A comprehensive guide to making your Elementor designs responsive across all devices.

Style Tab – Position – Learn about positioning elements absolutely or relatively to create layered designs with text over images.

90+ Top Widgets to Achieve Your Goals with Elementor!

Elfsight created dozens of useful widgets to make your website more attractive and boost its performance in so many ways. Try these no-code solutions for free on Elementor!

Conclusion

Adding text over an image in WordPress Elementor is a versatile feature that enhances both design and user engagement. Whether you use sections, containers, or widget positioning, there are multiple methods available. With some practice, you can master how to add text over image in Elementor and fully customize image layout in Elementor for a more dynamic website experience.