• You MUST read the Babiato Rules before making your first post otherwise you may get permanent warning points or a permanent Ban.

    Our resources on Babiato Forum are CLEAN and SAFE. So you can use them for development and testing purposes. If your are on Windows and have an antivirus that alerts you about a possible infection: Know it's a false positive because all scripts are double checked by our experts. We advise you to add Babiato to trusted sites/sources or disable your antivirus momentarily while downloading a resource. "Enjoy your presence on Babiato"

How to make an image like this...?

Medw1311

Purple People Eater
Staff member
Administrator
Moderator
Babiato Lover
Trusted Seller
Trusted Uploader
Jul 24, 2019
11,429
25,260
120
Any ideas how to do this?

Capture.JPG
 
  • Like
Reactions: LM1984
And here's the final result lol...

Capture.JPG
 
  • Haha
Reactions: marcost96
I'm wondering how you could achieve the final image without Photoshop (y)
It's done with Elementor. The cloud background behind the letters is a section background image with Parallax effect and then in the section I placed the image with transparent letters I created in Photoshop.
 
  • Like
Reactions: underwater
For those interested I've actually found a way to do this fully in Elementor Pro without having to make the image with the transparent letters in Photoshop first. Here are the steps...

1) Create a single column section.
2) Set the background colour of the section to whatever you want.
3) Use the heading widget to put a header into the column.
4) Set the font and font size to whatever you want.
5) Go to the Advanced tab of the Heading widget and then to the Custom CSS section and enter the following code...

CSS:
selector .elementor-heading-title
{
     background: url("/path-to-your-image-you-want-to-appear in the text") #EE4540 repeat 30% 70%  ;
     -webkit-background-clip:text;
     -webkit-text-fill-color:transparent;
     background-attachment: fixed;
}

The colour value in the code will be the fallback text colour if the image can't be loaded for some reason.

Capture.JPG
 
AdBlock Detected

We get it, advertisements are annoying!

However in order to keep our huge array of resources free of charge we need to generate income from ads so to use the site you will need to turn off your adblocker.

If you'd like to have an ad free experience you can become a Babiato Lover by donating as little as $5 per month. Click on the Donate menu tab for more info.

I've Disabled AdBlock