ฝัง
- เผยแพร่เมื่อ 3 ต.ค. 2024
- This video is about creating an image in text or gradient text and thus making titles more attractive, visually appealing by using Elementor page builder.
Titles are usually single color made but in case you didn’t know, you can fill them up with gradients or images and turn them into an eye-catching design element.
Nowadays design trends dictate colorful stuff, liquid shapes, blobs so this is just another way to spice things up in that fashion - by using Elementor, of course.
-----
Episode 1: Image in text, gradient text - Elementor tips and tricks
• Image in text, gradien...
-----
Episode 2: Creative Borders - Elementor tips and tricks
• Creative Borders - Ele...
-----
Episode 3: Fancy Image Borders and Buttons - Elementor tips and tricks
• Fancy image borders an...
-----
Episode 4: Image Blobs - Elementor tips and tricks
• Image Blobs - Elemento...
-----
Elementor - Custom Shape Dividers Anywhere
-----
• Elementor - Custom Sha...
I really like your videos, but the music throughout the entire video is, to say the least, distracting.
I just had to pause the video to comment how much I like your explanations! You have a great understanding of parts that are easy and more difficult to follow along with. Great job and thank you!
Wow, thank you for the feedback!
Since yesterday I have been watching video tutorials on your channel and I can say it's the best tutorial channel on elementor
Happy to hear that!
Here is the code:
selector .elementor-heading-title {
background-image: url();
background-position: center center;
background-size: cover;
background-clip: text;
-webkit-background-clip: text;
}
Thank you!
@@biboymabbitt1929 Thank you, as well.
This channel is very cool for going to the next level design control, especially if you're not experienced with CSS yet.
do you have all of those shape & blobs these are use?
Best elementor videos on youtube, bro you are # 1 !
Glad you think so!
Oooh Boi not only me bro, the Israeli Elemetor group (in Hebrew) is talking about you, your Chanel, and your steroids. Giving you loads of complaints, and rightfully so. Love your work bro, you explain like a pro. Been following you for a year now. Loving every minute, hope you keep making creative stuff and ignite the imagination, and thank you for all that you’ve done so far!
The explanation starts at 5:40
6:13
You all prolly dont give a damn but does anybody know of a way to log back into an instagram account?
I stupidly lost the login password. I love any assistance you can offer me
After hating styling you bring me back into loving it again. Love your videos ❤
Ohoho, that's a great news, keep it up, it's not a bad thing at all!
You make coding look so easy. I’ve built about 10 Wordpress websites with Elementor pro but always stayed away from css. I’ll definitely use your tricks 👌👍
There you go! Glad to read I inspired you in that sense!
Thank you so much. You've already moved my conceptions to a new level, and you have opened a wide door of Inspirations.
Thanks from the heart
You're so welcome!
What a great explanation and the way you teach is awesome ....
I was looking for locomotive for what I came here now I'm all vedios
Great, I like the cleanliness of your work. Learning a lot, thanks!
What a gem of a channel! Thanks, Ooooh boi!
Thank you! Super helpful. You're an excellent teacher.
Glad it was helpful!
Thank you. Love from Pakistan
The background music is so disturbing...
That's exactly what I've been looking for. Thanks bro!
Man you deserve more subscribers, thank you for your tutorial
I agree... we can all learn a lot from this guy... he's a professional when it comes to explaining how-to's. Better than the actual Elementor team in some regards.
Awesome thanks man
Any time!
im having error at line background clip: text;
it is saying
Expected () but found 'text' .
how do i resolve this
Fantastic Tips! Congaratulatiuons! Thx
Background music is distracting 😫😖😣☹️🤯
Thanks so much for your clear education.
Really cool thx :-)
Glad you like it!
Thanks for this great video. I really like how you explain the purpose of why to design in certain way for every element. I would love more of that tips and ideas, how to think about design, and also more advanced and creative styling videos like your series ;)
Thanks mate, will do more for sure!
Thanks a lot for the step to step settings =)
You welcome buddy, thanks for watching!
Hi, I really appreciate the tutorial, thank you so much!
Really informative video bro.. your talent is awesome
Thank you 🙌
Hello there! Once again I find myself thanking you not only for an astonishing plugin, but for all the videos with simple and detailed explanations. You really do go above and beyond.
I'm not expecting an answer to this as it's such an obscure problem that very few will run into it. But if there is a quick fix off the top of your head, then I would be very grateful.
I have used the image through text and all is well on the new site I'm building. But when I add a text editor to a column that sits in a section, and that section has a video background, then the background called in the custom CSS seems to clash with the background in the section and the text disappears. No such problem with normal text.
I don't know but it might be the same if the section has an image background, and not just a video background.
Anyways - I really don't have any expectations - if you get as far as the thank you, I'll be happy!
It's OK. For some unknown reason it's all working fine now. Apologies!
Thank you. I love your videos. They’re clear and easy to follow. I have one request; when you’re working on small text areas, like the Custom CSS box, could you zoom in while you’re typing (in post production I guess) so the code you’re typing is easier to see while you’re explaining it.
Many thanks.
Thanks for watching, the note accepted!
again a great tutorial
One suggestion tho, can you put the volume of the background music a bit down please?
Just want to mention that I've found an issue with background-clip with gradients.
In your example you use all uppercase letters, but when you use normal case you will see that descenders will be cut off by the gradient image.
Adding padding at the bottom to the h2 won't fix it.
But adding some padding-bottom to the .elementor-heading-title element will fix it, but the extra padding will create space under the title.
To remove that extra space you have to compensate it with negative bottom margin.
Awesome tutorial man!
ever best
This was amazing!
Great tips and design tricks as always. It would be awesome to have secondary vids of yours that are a lot shorter and summed up (for those of us that don’t always have 20 mins to spare on busy days, just a suggest)
Yeah, good point, however I always tend to "explain" things on the way I expect them to be explained towards myself when I'm up to figure out something. No matter what, trust me, I really try to keep the vids as short as possible.
Oooh Boi Luv your vids and talents and sharing sir!
Thank you sir
Love your channel.. subscriber earned!
Awesome, thank you!
how can I use it for SVG instead of text?
Thanks! I'll use this trick!
You're the best man, I love your tutorials :)
Where did you get your backgroundimages?
BTW - I love this tutorial. This is exactly what I am searching for :)
Thanks! As for the images... Unsplash, Pexels, Rawpixel... there are many CC0 out there.
Sir I love you!
My love back to you bro!
Thanks brother
No problem
thanks it helped me a ton：)
Brilliant! Nearly bought an addon to do this. I love your reasoning behind your work. Perhaps time to shaprpen my teeth with CSS3. Bring us more some CSS coding tricks. I'm looking for something like how to resize a logo image in the header. Nothing what I have seen till now is doing the trick. But I'll put an effort into it how to do it with CSS.
I learned to do that by analyzing the element with inspect from developer tools (chrome) to find out the class of the logo image (different classes for different themes), then I use width hight and max-width and max-height with % values or pixel values. It works most of the times!
I really like your amazing tips. You are simply a great explainer. Can you help me to use background video in (elementor's)columns as we all know that elementor support background videos in section but can we do the same in columns. Try it. Thanks in advance
Awesome, thanks! is it possible to make it work with a video background?
Thanks again in advance!
Woohoo, that smells like a challenge... VIDEO IN TEXT ...but I think I'll pass that one.
Would love it too!
Would a GIF file be supported for that matter?
@@FrenchFriesStephanny, to be honest, I'm not sure whether transparent GIF dos the job or not, I didn't try. If you are about to use the animated GIF as a background - let me know the result. How about an A(nimated)PNG? ...or an animated SVG? I actually don't know what you are up to...
You are a very good communicator. And your videos are extremely helpful. Your knowledge is profound. But the music is obnoxious Maybe some intro music to set the stage, but once the lesson starts, your presentation stands firmly on it's own. No music necessary...Respectfully,
OK, noted, thanks for the feedback!
Hahahah :D in this video you sound kind of high bro :D Loooool "And thus make them mooooooooore attractive" hahaha . It was fun and helpful to watch!
Goddamned you're right! WTF?!? Who slowed down the audio?
@@OoohBoi Hehehe i thought it was just how you sounded in this one :=) Will you create new great vids soon? You´re my favourite elementor channel and that says A LOT, because i follow about 10 of the biggest elementor channels..
@@michaelhofby Sure, it's coming in a few minutes...
@@OoohBoi Cool :=). Btw i have a script for automatically closing a nav popup if using it as a menu with anchor links:
jQuery( document ).ready(function($){ $(document).on('click','.elementor-location-popup a', function(event){ elementorProFrontend.modules.popup.closePopup( {}, event); }) });
Tnx! I appreciate this and now I'llstart interesting in CSS now. Could this be done with a TH-cam video instead an image background ?
I'm afraid that it won't work with YT video...
can i put video in text instead of image
No you can't but I've made another video on how to do it by using the SVG mask, th-cam.com/video/WRPu1v4Kh9g/w-d-xo.html
Dear which font you are using?
As I recall, it is Montserrat.
great videos
hellow sir than you fo your amazing videos! one question please : how do you make that box(wha you call info box) i didnt find the widgets yet !
There's no secret buddy, just drag and drop widgets to the column, as simple as that.
I can't seem to get the gradient to work
Is there a typo?
selector .elementor-heading-title {
background-image: linear-gradient(to right, red, yellow);
background-position: center center;
background-size: cover;
background-clip: text;
-webkit-background-clip: text;
}
Try this one:
selector .elementor-heading-title {
background-image: linear-gradient(to right top, #ec2551, #c52a6e, #943979, #633e71, #3d3a59);
background-clip: text;
-webkit-background-clip: text;
}
@@OoohBoi Thanks for the reply.
Get the same result.
I noticed when I drag the section to the top of the page it is working, I think there is a conflict with other sections.
I made a page with some try-outs from your video's like overlapping columns, shape dividers, etc...:
www.beeldstorm.nl/testpaginacolumns
Will try from scratch with a new page.
Is there a possibility you can share the file itself?
The older videos do not include training files, sorry! I don't even have the file...
Hi sir just want to ask this question, is it possible to become a web developer without a background on html and css?
Probably a web DESIGNER rather than developer.
@@OoohBoi oh Thank you sir!
Thank you sir!
You are welcome!
Thank you! I have a question. Why do you use empty separators between Headers and Paragraph components?
And one other question, What is the font you use for headers? the big bold type
Well, to be honest, the default widgets spacing doesn't allow much control over the spacing so I rather reach for the separator or the margin. No other, special reason. My favourite font family for the heading is Montserrat.
Oooh Boi Thank you!
- Amazing work Oooh Boi! You rock! Can do the same things with the Steroids plugin? Another question, do you have any video explanation for the Perspektive panel? I didn't find any from learn with. Keep rockin!
Thanks! I have made a separate plugin for the image in text (cutt.ly/aflGR6w) so I won't include it to Steroids. As for the Perspektive extension - just give it a shot, it's really easy and pretty much straightforward.
@@OoohBoi hellow sir than you fo your amazing videos! one question please : how do you make that box(wha you call info box) i didnt find the widgets yet !
Thanks for this awesome trick!
QUESTION! Is it possible to apply the background image to part of text trough CSS code? So not the entire title, but just one word.
Did you try to wrap a chunk of text with some non-block element (like SPAN), give it a custom class and then apply the background image to that very chunk of text by using its class name? That's what actually comes to mind at this moment, I didn't give it a try...
I know it has been 9 months but just in case you did not find a solution I answer you. In CSS3 there is a pseudo-class called "first-letter" maybe it works this way. I have not tried it but maybe it works.
selector .elementor-heading-title:first-letter{
background-image: url();
background-position: center center;
background-size: cover;
background-clip: text;
-webkit-background-clip: text;
}
@@maendesign9909 Thanks bro! I'll try it out.
Not working CSS code showing expected () but found 'text'.
Wow!
@@OoohBoi Lol, Don't help them buy your add-on? I doubt very much that you do not know the answer, it is very simple.
@@OoohBoi same issue :(
Great info.
But gotta decrease the music volume BIGTIME!
Would be fantastic if you could add a link to a page that has the CSS code that could be copied? Great video!
That video will be re-done soon and the download link to importable Elementor file will be provided.
@@OoohBoi Great, thank you!
Why don't you leave the code in the video description. and the same with the rest of your videos.
Pd.Thanks you are the best
That was before. All of the newer videos include the training file.
@@OoohBoi cool.
@@OoohBoi Good to know, did you mention this in the videos... somehow I did not notice. Your channel is the best! Thank you.
@@JoeGator23 Yes, I always point it out in my video tutorials if there's a training file for download.
@@OoohBoi Your videos are awesome, you do a great job explaining concepts and explain concepts that are difficult for beginners better that any other videos I have seen... I am learning, but it takes practise.
Thank you for your tutorials!
Please could you say which font name you used for this exercise? Thank you
Sorry for a delay... these should be Montserrat and Rubik as I recall...
Very Helpful Tutorial thanks Sir, can i get your svg file, please.
Uh, it was long time ago, I don't think I have it, sorry!
@@OoohBoi it's okay sir but my badluck, i can't practis (:
Oooh Boi, I tried to adapt the background image on text code for hover effect in the nav bar but I dont get it right. I used your code and applied it on ".elementor-nav-menu a:hover {... it shows up on hover as normal background image, not on the text only but the whole filed, maybe need to change the background-clip???
At this point I'm not sure but I guess if you ask Google, you'll know whether something like that is possible or not.
Try adding the letter i after a:hover. I don't know why but it sorted out the same issue for me.
I am facing an issue while doing this. It seems the background effect(gradient or image) in the heading takes place only in 1 column in a page and in the subsequent columns the heading becomes invisible. Is there anyone facing the same issue? It shows perfectly in the elementor but not in the browser after update. Can someone suggest what is the way out
That's strange, I'm clueless. Could you share the link to your page?
very nice
may i know what font is that?
As I recall it was Montserrat.
Hello there :). Quick question: is it possible to do this with the free version of Elementor?
You can use the Customizer. There's a panel in Customizer named "Additional CSS" but if you go for this method, "selector" keyword will no longer work because you are out of Elementor. I've also made an add-on that works with the free version of Elementor but it's 5 bux, you can take a look here: cutt.ly/0ph68bG
Excellent content but the music is distracting at least and also loud too.
A few older vids only...
Can you do the image with animated text as well? As I have an animated headline text (using the animated headline widget) I want to change.and use an image also.
I'm not sure buddy but I guess it's OK if you give it a shot.
Would love to do Video in Text. Any hacks for that? Thnx. Great tutorials!
As I recall someone else already asked that question ... I suppose that an animated SVG or PNGa might work. However, I didn't try so I can't speak for sure.
How can I fix ?
I'm actually not getting that thing...
Hi,
I really like your videos.
I would like to know how it works with hover.
Best regards
I guess you already gave it a shot, didn't you?
Hi,
thank you for your quick reply.
yes i tried it but it doesn't work.
I am not a CSS specialist.
Maybe you can help me with that?
When I move the mouse over it, the font turns white, but I want the font to become gradient.
Is that possible?
This is a test page in which I would like to try out a few things.
Here is the link: websiro.de/
Best regards
@@stickereiberlin8976 Does this help? codepen.io/anthony-liddle/pen/uFoxA/
@@OoohBoi No, it doesn't work.
I also don't know where to use it.
I am not familiar with HTML and CSS.
I thought it would be used in Elementor in Custom CSS like e.g. this code of yours in your video:
"Image in text, gradient text - Elementor tips and tricks (Episode 1)"
.stroke {-webkit-text-stroke: 1px #fff; }.
I just want the font to be displayed in gradient rather than white on hover.
Best regards
@@OoohBoi
Hi,
I found out how to do it.
Here is the code for gradient hover:
.stroke {-webkit-text-stroke: 1px #fff; }
selector .elementor-button-text: hover {
background-image: linear-gradient (145deg, rgba (195,1,253.1) 22%, rgba (249,138,237.1) 51%, rgba (73,41,172.1) 77%);
-webkit-background-clip: text;
display: inline block;
padding: 0px;
-webkit-text-fill-color: # 00000000;
}
and here is the code for image hover:
.stroke {-webkit-text-stroke: 1px #fff; }
selector .elementor-button-text: hover
{
background-image: url (http: // your content / uploads / image.jpeg);
background position: center center;
background-size: cover;
background-clip: text;
-webkit-background-clip: text;
}
I hope I could help a bit.
TEST SITE: websiro.de/
Best regards
Didn't work for me :( Did it 4 times - CSS is correct. Text isn't clipping.
met my new superman
Oh boi...
OoohBoi I have a new suggestion, or feature for Steroids! Can we have the ability to "Skin" everything with overlays? For example add Overlays to shape dividers, we can put some image screens on top to make them feel more like textures or so? Add Drop Shadows too, basically give Elementor some of Photoshop Superpowers! Thank you!
Take a look at this video, it might be helpful: th-cam.com/video/GpUauF5hJGs/w-d-xo.html
As for the PS superpowers...well, we'll get there one day 🥵
Thank you !!!!!!
Hey, can you make a video about how to update PHP?
Yes. But I don't think I'm gonna do that, I'll rather stick to Elementor. And I'm sure there's plenty of videos and written tutorials on that subject all around the web. Just ask the almighty Google...
Sir, I a listening to this video and smiled because I thought to myself " This guy could teach!" I may have a proposal for you
All righty, great! Feel free to land your proposal....
is this possible using svg in place of text?
Sure it is, that's how Blob Images are made 🤓
My bad! 🤦♂️ Brilliant channel 👌
I think we can add:
=====
-webkit-text-fill-color: transparent;
=====
to remove the text color
Sure we can, however, the golden rule is: whatever is settable by Elementor - don't override by CSS.
@@OoohBoi good advice, thanks
informative but the music, have no purpose ....just to disturb your good work....
Fair enough. That's why there's no music on my newer vids.
absolutely have it when sloww ass people spend 3-4 minuts just talking before starting the tutorial . the mane says it all you don't have to describe it
Agreed! But you also have to agree that all of my newer tutorials are pretty-much straight to the point. Image in Text is one of my first YT vids and everyone is kinda clumsy as a beginner.
good video, lástima la introducción, demasiada!. Es mejor ir al punto
Yikes! That background MUSIC is WAY TOO LOUD and annoying...
It is.
5:41
come to the point fast
Fair enough. New videos exclude the jet lag...
Damn music
Please turn off the music !!!
OFF.
your video music is hurting badly my ear. please next time don't use this sound. we are eager to listen you only.
Fixed for all new tutorials
You talk alot and your music is so distratcting, nice videos, work on your audio and unnecessary talking
Fair enough!
absolutely pointless talking, we use elementor because we dont want to do coding !
That's what is called the path of least resistance.
waste of time,