Four Different Ways to Add Text Over an Image in Elementor
It’s a good idea to have both text and photos on your website because they are both important aspects to display. A better result will result from combining the two than from picking just one.
Because it incorporates both the linguistic and visual components of a perfect section, text over an image is the ideal element. It works better to display a product’s picture along with written details regarding its advantages.
This tutorial will demonstrate how to use the Elementor page builder plugin to place text over photos.
Why is text placed above images?
Every website’s two main elements are text and graphics. While either of these can be quite powerful on their own, using them together will dramatically increase your results.
The following are the key justifications for using text over images:
Hero sliders are sliders with a call-to-action button on top of a backdrop image that are common in hero parts of websites.
Highlight important details; simply writing about a service or product isn’t always sufficient. An explicit message can be sent by displaying an image with pertinent text.
Hotspot-enhanced images are excellent for emphasising the benefits of a specific product. The hotspots will be put in key areas of the image, and hovering over them will reveal pertinent data.
Effective design – On occasion, adding graphics below or next to the text can take up space on your website that would otherwise go unused. A better technique for utilising all of the screen real estate is to position the reader over the image.
It’s helpful to know how to add text over an image, whether it’s for one of the reasons mentioned above or to better suit your design requirements.
The four various ways to overlay text on an image are demonstrated in this article. The first two techniques can be carried out with Elementor’s accessible edition, but the final two require Elementor Pro.
Let’s begin with the first approach, which makes use of the picture widget.
First Approach: Text Over the Image Widget
This is my preferred technique for positioning text over an image, especially when using Elementor’s free basic edition.
You shouldn’t be deterred from attempting it even though it necessitates some CSS code because I will supply it for you.
To access the visual editor panel, first click the edit with Elementor button.
Then, drag the image widget to the right region you want from the left sidebar.
Change the Caption field to Custom after selecting your image on the Content tab. Once modified, type the personalised text you wish to appear over the picture.
The Style option also allows you to modify the caption’s size, font family, and background colour.
When you are happy with how it looks, select the Advanced tab and give the widget the textOverImage class.
Open the customise screen and select the Additional CSS option after you have modified the modifications.
then click Publish after pasting the CSS code below.
.textOverImage figcaption { position: absolute; margin: 0; width: 100%; top: 50%; transform: translateY(-50%); }
The caption will be centred within the image thanks to the specified CSS. If you wish to modify the widget’s font, colour, etc., you can easily edit it again.
Only if you don’t use Elementor Pro is it necessary to give the picture widget a class. To assign the code to the selection figcaption, expand the Custom CSS tab if you have the paid version.
The next technique will make use of the text widget with an image as a background.
Four Different Ways to Add Text Over an Image in Elementor
overlay text on image elementor
overlay text on image elementor