Elementor text over

8 minutes

How to put text over an image in Elementor

You might have seen a lot of websites where you might have seen the text on top of the background image. We will see how you can have Elementor text over the image. We will see how you can have Elementor text over the image. There are various ways you can add it. The guide will cover a few ways you can add the text. So, this will be helpful for you. We suggest you read the entire guide and then decide which is the best method that you can use.

 

How to add Elementor text over an image?

The first method we are going to see is very easy and the most preferred method. Most of the elements that you see on the internet that have text on top of the image will be using the method. Here, the concept is very simple. We will first add the image to the background of the website. Thereafter, we will add the text as another element on top of it.

Luckily, there are enough options available for you to edit it in the way you want. Elementor has got many options using which you can customize the text and the image. So, you will get the best look that you want with the help of Elementor.

Most people prefer this method because it’s easy to implement and one can also use the same method to add other elements on top of the image. If you want to add a subscribe button on top of the image, you can do that here.

So, let’s get started and see what ar the steps you need to follow to add Elementor text over the image. We will take an image as an example but you can add it on top of any media that you want.

 

Open the Edit Page

At first, you need to do the basics. This is where we will first create a page using Elementor. Make sure that Elementor is installed and active. Don’t worry, you don’t need the pro version of Elementor to do that. You can use the free version too.

You can create a page and edit it with Elementor. Thereafter, you can create a blank section where we will add the elements.

Now, if you want to add the image to be in a particular part, you will have to create a column for the same. For instance, if you just want to add the image in the right section, you can create a column and then add it in the section.

Once everything is done, we will add the background image to the column. You can add the background image in the column or you can even add it in the section. This is surely your choice on how you want things.

 

Adding the Background Image

You have two options here. You can either add the image in the section or you can also add it in the column. This is surely your choice. Depending on how you want to add the image, you can use the way.

If you want to add the image in the section, you can right-click on the section and add it or you can also click on the column and add it from there.

Here is the exact way to add it. You will first have to click on the section and then you will see the left panel. In the left panel, you will have to click on the “Style” section where you can make the changes.

In the Style section, you will see the section for Background. There are few options in the background. You can select the right background that you want from the list. You can either select an image or you can also add a video.

In the first option, you can select classic. Thereafter, you can select an image and use the plus sign to add the image to the background.

You can either select the image from the media folder or you can also upload it on your own. It will open the media library just like the normal photos you upload. So, the method will be similar to the WordPress dashboard.

Elementor text over an image

Edit the Background

In the next step, we will do a few customizations in the background. You can set the position in the background image. We will see how you can set the position of the background. Further, you can also set the attachment options.

Now, when it comes to the size, you can set the size as per your requirement. You can set the background image to fit, cover size, or you can also set it to the original size. The best way to decide which is the best way to have the image, you can always play around with it a little bit and you will have a complete idea of how you want to proceed.

Thereafter, you can also set the repeat mode if you have a small size image. For instance, if you want the image to keep repeating, it will be repeated until the end of the section. Usually, it doesn’t look great as the repeating image is bad in most cases. So, you can set it to no-repeat.

 

Using the Overlay

You can also set the background overlay from the same panel. You can also set the background overlay if you want. You might have seen many images where there is an overlay. The overlay can be of a simple color or you can also have an image that overlays the background. You might have seen a few pictures that look quite blacklist, this is how you can have a different overlay for the image.

Once you have done all these things, you are done with the image. Now, we will see how you can set the text. We will now see the quick way to add the text and then we will start making the changes in the section.

Adding the Text

The next thing that we have to do is add the text to the website. You can add the text on the website just like you add the element on the website. For that, you will have to click on the element and add the widget.

We have just added the background image in the column and we will still have the ability to add the text to the column. This is where you can simply drag and drop the element that you want.

For instance, if you want to add the heading, you can drag the heading widget and then place it in the column. In the same way, if you want to add the text box, you can also add the same thing.

Here, the great thing is that you can add any widgets you want. There are many widgets you can add here.

 

Changing and Styling the Text

You can surely style the text as per your need. This depends on the text box you are using. For instance, if you are using the text box, there are fewer customizations done from the Elementor. In this case, you will have to edit it directly from the text box. You can surely install TinyMCE if you want a little more freedom in customization.

In the same way, if you have a heading, you can add it in any way you want. Once you have edited the text, you are almost all done. You can save the text and then view the page to see how Elementor text over image looks

We will see some of the more tricks you can do here. You can change the position of the text and keep it at any place you want.

 

Setting the Position

You can use the position settings to place the text in the right place. Now, by default, the text will either appear at the center of it might appear at one of the sides depending on how you have aligned it Many times, we want to have a different position.

For that, you will have to open the advanced panel from which you can add the position. You can always first add the margin. There are few margin options that you can go with.

You can enter the top, bottom, and side margins. There are two ways you can add the options. You can either add it in the pixels or you can also add it in the percentage. Most people prefer the pixels as they already are more familiar with them. You can add it in the percentage also.,

Now, when you initially enter the size, it will be applicable for all the margin options. For instance, if you enter 2 in the top margin, the same will be applicable for the bottom and sides.

Sometimes, we just want to enter it for one side. In that case, you can click on the link button on the side. When you do so, you can enter all the fields individually. In this way, you can easily get started with the margins. It will allow you to set the text in the way you want.

You can then save the changes and that’s it. Now, you have successfully added Elementor texts over the image. There is one more way to add it. We will see that now.

 

How to add Elementor text over images using Plugins?

Like we have mentioned earlier, there is one more way to add the text. We will see how you can add it. For that, we will use a plugin using which you can do the thing.

The concept is still the same. You will have to use the same technique as we have mentioned before. This might have many people in confusion. You might be thinking about why you will need a plugin if you are following the same method.

Well, the plugin is used to have more effects for the background. You might have seen many websites where the text is stylish. So, if you want to have stylish text, you can surely use these plugins. Now, you surely might be knowing that the plugins might be paid, right?

So, we will see two plugins that you can use here. One of the plugins is free whereas the other one is paid. The free plugin is only for Elementor text over image whereas the other one is the complete addon pack. You can use the addon pack to have more elements in your Elementor arsenal.

Let’s start with the plugins.

 

Image Hover Effects – Elementor Addon

The first plugins that you can go with are Image Hover Effects. The plugin is for the image effects. You can have the image as per your wish. If you wish to have a stylish effect on the image, you can surely use this plugin. It’s free and can be found directly on the free plugin directory by WordPress. It’s a very limited plugin. However, as it’s a free plugin, you can surely try it out.

Master Addons

You can always go with Master Addons. Master Addons is the complete package that you can use for the Elementor. They have many widgets you can use. They also have many great features here. It’s a paid add-on. So, if you want to have something more for your Elementor page builder, you can surely use this addon. You can see their website for more information.

Final Words

To conclude, this is the way you can add Elementor text over the image. The method is simple and easy to use. You can surely use the plugin if you want. We highly recommend you to play around it a little bit to see which one looks the best. For instance, you can try setting the background image in the section, and then you can try using it for the column. In the same way, you can also try different positions and set different sizes for the background image. This will give you a clear idea of which Elementor text over image looks best.






0/5


(0 Reviews)

Alexey Seryapin

Alexey is a WordPress wizard with 10+ years of experience as a lead developer, He has launched 500+ WordPress websites and 100+ WooCommerce shops.

WEBSITE UP TO DATE & SECURE WordPress Maintenance Service

Save 17% with our Annual pricing plan.

Has your website been hacked?

WordPress Malware Removal Service

We will fix any WordPress hack and make your website hackproof.

Related Posts

how-to-add-product-variations-in-woocommerce

How to Add Product Variations in WooCommerce?

how-to-use-woocommerce-shipping-classes

How to Use WooCommerce Shipping Classes?

how-to-get-woocommerce-category-id

How to Get WooCommerce Category ID

how-to-get-woocommerce-product-id

How to Get WooCommerce Product ID