How To Make A Heading Title Transparent And Show An Image Behind Elementor
How To Make A Heading Title Transparent And Show An Image Behind Elementor
All right guys in this Tutorial I’m going to show you how you can display an image behind your text in Elementor. It only takes a couple of minutes to do, so sit back, relax, hit that like And subscribe button, and let’s get into the Tutorial.
Adding a New Section and Heading Widget
Okay guys the first thing we’re going to do is add a new section to our page, and within that section we’re going to click on the menu icon, and drag in a heading widget, and in that heading widget we’re going to set our title as Marvel. This can obviously be anything you want it to be. Now I’m going to click on the style tab in the top left hand side, and click on typography, and the first thing I’m going to do is Select our font type. I’m next going to change the size of our font, and I can do that by sliding the slide bar to the very end with that done.
Applying Custom CSS with Elementor Pro
I’m now going to select the advanced tab in the top left hand side, and once in the advanced tab we’re going to go down to the bottom where it says custom CSS. To use custom CSS within Elemental you will need Elementor Pro. If you don’t have the elemental Pro there is a link in the top of the description. You’ll now need to go over to my website, and the link for that is in the description below, and you’re going to have to copy this bit of code, and paste it in on the left hand side in the custom CSS box.
Adding CSS Class for the Heading
Now that our code’s been added we’re going to add our CSS class name, and for this bit of code it’s heading, so what I’m going to quickly do is highlight the word heading in the top of our code, and I’m going to copy it, and I’m going to go to layout in the top left hand side, and paste it into CSS classes. With our CSS class is added you can see the image behind our text.
Changing the Background Image URL
If you want to change this image you’ll have to go back into the advanced tab in the top left hand side, and select custom CSS. As you can see in our code on the third line down it says background URL, and it’s this URL that you’ll need to change. All you need to do is highlight this URL, and paste in your new one. You can find your image URL within your WordPress media library. The next thing you’ll need to change is your image size.
Adjusting Background Image Size
As you can see it’s currently set of 40.
If I increase this you can see it becomes bigger, and closer below that is our background repeat. I currently have this image set as no repeat, and if you want to change that all you have to do is remove the note from the no repeat. To Simply explain what no repeat means is when one image ends, and another one is repeated next to it. Below our image repeat is our background X, and Y positioning. As you can see within this background image our x-axis is set to left. You can also change this to Centre or right. Below that is our y-axis.
Positioning the Background Image
This is what sets our image from top, middle, and bottom. This makes sure that our image is exactly in the position we want it. Next down in our code is our background colour. As you can see this is currently set as white, and you can change this to any colour you like, for example green. If we would have had a background set as repeat the green section would have been another image of Spider-Man. If you wanted to use this code multiple times through your web page.
Duplicating and Modifying the Section
All you’d need to do is change your CSS class name, and I’m quickly going to show you how to do that now, and I can do that by right clicking on our section, and so selecting duplicate. In our second section I’m going to highlight the text, and make sure I go into the advanced tab of the heading within the layout of our Advanced tab. I’m going to change our CSS classes to heading1.
Updating CSS for the Duplicated Section
Now what I need to do is go down to custom CSS, and where it says heading I’m going to change that to heading one. Now what I can do is go into our WordPress media library, and copy the image URL, and replace our Spider-Man image URL with our new Ironman one. As I said earlier on all I need to do is highlight the URL, and paste in a new one. As you can see our background image changes instantly.
Finalizing Image Positioning
Now all we need to do is change our background size, and change its positioning with its X, and Y axis. Once you’ve got it into the position you want it you’ll then need to go to the preview button in the bottom left hand side next to the publish button. Once in the preview page you can see whether you need to make any further changes in the positioning of of your background images. If you’re happy where everything is all that’s left to do is click on the publish button within Elementor.
If you have found this video useful so far please do hit that like And subscribe button. Remember if you do want to add custom CSS code to your Elemental website you will need Elementor Pro. If you haven’t already got Elementor Pro there is a link in the top of the description. It is an affiliate link. It doesn’t cost you any more to use, but it does give me a very small percentage of elementor’s profits if you choose to sign up.
If you have got any questions feel free to come, and drop them in the comments box below. Don’t forget to check out the rest of my playlists.
Thanks for watching.
I’ll see you in the next video.
