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.
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.
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
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.
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.
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 Center or right below that is our y-axis.
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.
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.
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.
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
