In this guide, we’ll show you how to add an “Image Background Text Effect widget” to your Elementor website. The Image Background Text Effect widget allows you to create striking text filled with a background image instead of a solid color. This eye-catching effect adds a visually unique style to your typography, making it perfect for headings, banners, or any text that needs to stand out. With customizable options for image positioning, typography, and blending styles, this widget enhances your design with depth and creativity.
Let’s explore the customization options available in the “Image Background Text Effect widget” for Elementor below.
Add an Image Background Text Effect to Elementor
This widget requires “Unlimited Elements Pro” version installed and activated on your WordPress website.
Go to Unlimited Elements and click "Widgets".
Search for "Image Background Text Effect" in the widget library.
Hover over the widget and click Install.
Add an Image Background Text Effect Widget to an Elementor Page
Click "Add Element" in Elementor
Search for "Image Background Text Effect" in the widget panel.
Drag and drop the “Image Background Text Effect” widget into the container.
Elementor Image Background Text Effect Widget General Settings
Beginning Text
Input field for text that appears before the image-filled text.
Image Text
Input field for the main text with the image background effect.
Ending Text
Input field for text that appears after the image-filled text.
Align
Controls the alignment of the entire text block.
HTML Tag
Select the HTML element for the text.
Image
Choose the image to be used as the background for the text.
Elementor Image Background Text Effect Widget Style Settings
Enable Styles
Toggle to enable or disable custom styling options.
Typography
Configure font properties such as family, size, weight, and more.
Color
Set the text color to match your design.
Custom Styles
Add your own CSS in the text area for advanced customizations.
Enable Styles
Toggle to activate or deactivate all styling options.
Typography
Adjust font properties such as font family, size, weight, and style.
Color
Set the text color to match your design preferences.
Custom Styles
Input area for adding custom CSS for advanced styling control.
Enable Styles
Toggle to activate or deactivate custom title styling.
Typography
Configure font settings for the title.
Color
Set the title text color.
Custom Styles
Access additional styling options.
Image Background Text Effect Widget Design Examples For Elementor
Here are some live use cases for the Image Background Text Effect widget.
Before After Widget with Image Background Text Effect.
Card Carousel with Image Background Text Effect.
Thank you for using the Image Background Text Effect widget for Elementor! This free widget lets you fill your text with an image, creating a striking and visually dynamic effect that brings depth and uniqueness to your design. It’s a creative way to make your typography stand out and enhance your site’s overall look. Need help or inspiration? Visit our demo page to see it in action.
