Text and images are significant elements to display on your website, and it’s wise to have them both. Combining the two will create a more effective result than choosing only one.
Text over an image is the ultimate element because it covers a perfect section’s visual and textual aspects. It’s more effective to show a product’s photo with written information about its benefits.
This article will show you how to add text over images in the Elementor page builder plugin.
Why Position Text Over Images
Text and images are the two primary components of every website. While each of them can be very effective on its own, combining them can skyrocket your results.
Here are the main reasons why to place text over images:
- Hero slider – Many websites’ hero sections feature sliders with a call-to-action button atop a background image.
- Emphasize critical points – writing about a service or product isn’t always enough. Displaying an image with relevant text can deliver a more explicit message.
- Image with hotspots – This is very useful for highlighting the advantages of a particular product. The hotspots will be strategically placed on the image, and hovering over them will expose relevant information.
- Efficient design – Occasionally, placing images next to or below the text can use valuable space on your website that will go to waste. Placing the reader over the image is a better practice for using the maximum available space.
Whether it is one of the reasons listed above or to better match your design needs, it’s beneficial to know how to place text over an image.
This article presents four different methods for displaying text over an image. The first two methods can be accomplished using the free version of Elementor, while the last two require Elementor Pro.
Let’s start with the first method by using the image widget.
Method #1: Display Text Over the Image Widget
This is my preferred method for positioning text over an image, especially when using the basic version of Elementor.
Although it requires some CSS code, it shouldn’t discourage you from trying it, mainly because I will provide it for you.
First, click the “Edit with Elementor” button to open the visual editor screen.
Then, drag the image widget from the left sidebar to your desired section on the right.
Choose your image under the Content tab and change the Caption field to Custom. Once changed, enter the custom text you want to display over the image.
You can also use the Style tab to change the size and font family, as well as add a background color to the caption.
When satisfied with how it looks, navigate to the Advanced tab and assign the textOverImage class to the widget.
Once you have updated the changes, open the customization screen and enter the Additional CSS tab.
Then, paste the CSS code below and click Publish:
.textOverImage figcaption {
position: absolute;
margin: 0;
width: 100%;
top: 50%;
transform: translateY(-50%);
}
The provided CSS will position the caption in the center of the image. You can always re-edit the widget if you want to change the font size, color, or other settings.
Assigning a class to the image widget is only necessary if you are not using Elementor Pro. However, if you have the paid version, expand the Custom CSS tab and assign the code to the selector figcaption instead.
We will use the text widget with a background image in the following method.
Method #2: Text Widget with a Background Image
In our previous posts, I showed you how to set a background color or image to any page in Elementor. This method will use techniques we learned in the other article to accomplish similar results.
To start, drag either the Text editor or the Heading widget to the desired section on the canvas on the right.
After entering your custom text, center it and customize its properties, such as size and style.
Then, click on the Advanced tab, expand the background tab, and select the image to display behind the text.
For better results, set the image position to center-center, with no repeat and size to cover.
Then, expand the Layout tab and increase the padding values until you’re satisfied with the results.
Please remember to check the mobile view to ensure the style is consistent across all devices. You may need to adjust some of the properties for a better fit.
Up to this point, we used the accessible version of Elementor to display text over an image. The next couple of methods will show you how to do it with Elementor Pro (or you can get it from us for only $4.99).
Method #3: Text Over the Gallery Widget
The Gallery widget is a great way to combine images and text. It’s very similar to the first method I showed you above; however, we don’t need to use CSS this time.
First, drag the Gallery widget to the canvas on the right, and select the image you want to display.
Enter your custom text as the image’s caption, and then click the Insert Gallery button.
The gallery widget defaults to four columns, allowing each item to occupy 25% of the entire section. Therefore, change the column number to one and the image size to full.
Then, expand the Overlay tab and change the title field to caption. Once changed, hover the mouse cursor over the image to ensure the text is displayed.
Next, move on to the Style tab, expand the Overlay tab, and enter the Hover options. Here you can change the overlay background color or remove it altogether.
Finally, expand the Content tab, and style the text to fit your design expectations. Moreover, change the hover animation to none. That will ensure the reader is always displayed, even when the image is not being hovered over.
The Portfolio and the Posts widgets are similar to the Gallery widget, and you can achieve similar results by selecting any of them.
Method #4: The Hotspot Widget
The hotspot is a very cool widget often used to highlight key points of a product or a store locator indicator.
By default, the hotspot widget includes one hotspot in the middle of the image, but you can change its position and add as many as necessary.
After selecting the image, expand the Hotspot tab and change the properties of the first item.
Then, move on to the Position tab and adjust the vertically and horizontally offset values to the correct position.
You can then add additional text items to be displayed over the image and assign different values to each of them.
Once added, move on to the Tooltip tab if you want to change the tooltip’s position and trigger condition.
Of course, similar to any other Elementor widget, you can change any aspect of the widget’s look from under the Style tab.
When satisfied with the result, please save the changes and test them on the live site.
Conclusion
Showing text over images is an excellent feature every website owner should be familiar with. This article showed you how to position text over an image using Elementor in four ways.
Leave us a comment and tell us which of the methods above you used to achieve this task.
Also, make sure to subscribe to our YouTube channel and like our page on Facebook.
