ฝัง
- เผยแพร่เมื่อ 7 ม.ค. 2021
- ► How to apply image masking in Elementor with icons, blob shapes and text? What is the Selector in Elementor Custom CSS? Useful free online tools and many other tips & tricks...
► Elementor Theme Builder Course from el mentor: links.el-mentor.com/elementor...
#wordpress #elementor #tutorial
▬▬ About this Channel: ▬▬▬▬▬▬▬▬
Welcome to the TH-cam channel of el mentor (el-mentor.com)! My name is Danijel. I am a WordPress trainer and Udemy instructor from Bad Tölz (Germany). On my TH-cam channel you will find helpful tips and tricks about WordPress & Elementor Page Builder with focus on Performance and SEO.
▬▬ About this Tutorial: ▬▬▬▬▬▬▬▬
In this Elementor tutorial, you will see 4 different ways to mask your images in Elementor. You can use a Premium Addon but you can also implement image masking for free with Custom CSS. As a mask we will use a blob shape, icons, and transparent text.
This tutorial is also available in German: • Image Masking mit Cust...
▬▬ Table of Content: ▬▬▬▬▬▬▬▬
1. Premium Elementor Addon for Image Masking - Happy Addons (01:27)
2. Image Masking for free with Custom CSS and Blob Shape (02:41)
3. Elementor Custom CSS - What is the selector? (05:00)
4. Image Masking for free with Custom CSS and Icons (08:00)
5. Image Masking with transparent text and hover effect (11:00)
▬▬ Helpful links from this tutorial: ▬▬▬▬▬▬▬▬
► Crocoblock Templates: links.el-mentor.com/crocobloc... *
► Premium Elementor Addon for Image Masking: links.el-mentor.com/happy-addons *
► WordPress Theme in this tutorial: links.el-mentor.com/neve-pro *
► www.blobmaker.app/
► nucleoapp.com/app/
► thenounproject.com/
► SVG Tutorial: tutorials.jenkov.com/svg/index...
► CSS Mask: developer.mozilla.org/de/docs...
► CSS background-clip: css-tricks.com/almanac/proper...
▬▬ CSS Code from this tutorial: ▬▬▬▬▬▬▬▬
CSS Code for the Blob Shape and the Icons:
selector{
-webkit-mask: url(please enter your own url here);
-webkit-mask-size: 88%;
-webkit-mask-position: top center;
-webkit-mask-repeat: no-repeat;
mask: url(please enter your own url here);
mask-size: 88%;
mask-position: top center;
mask-repeat: no-repeat;
}
CSS Code for the Text (Hover) Image Masking:
selector .elementor-heading-title{
background: url("please enter your own url here");
background-position: 0 0;
background-size: 80%;
-webkit-background-clip: text;
-moz-background-clip: text;
-o-background-clip: text;
background-clip: text;
transition: background-position 1.5s;
}
selector .elementor-heading-title:hover{
background-position: 0 50%;
}
▬▬ Thank you for your support: ▬▬▬▬▬▬▬▬
If you want to support me and my work and you are thinking about buying the following themes, plugins, or addons anyway, I would be very thankful if you could use one of the following affiliate partner links for the purchase:
Best Elementor Addons:
► Elementor Pro: links.el-mentor.com/elementor... *
► Premium Addons: links.el-mentor.com/premium-a... *
► Crocoblock Plugins: links.el-mentor.com/crocoblock *
► Ultimate Addons for Elementor: links.el-mentor.com/ultimate-... *
► Happy Addons: links.el-mentor.com/happy-addons *
Best Elementor Themes:
► Astra Pro: links.el-mentor.com/astra-pro *
► OceanWP: links.el-mentor.com/oceanwp-pro *
► GeneratePress: links.el-mentor.com/generatep... *
► Neve Pro: links.el-mentor.com/neve-pro *
► Kadence Pro: links.el-mentor.com/kadence-t... *
Very Helpful WordPress Plugins:
► WP Rocket: links.el-mentor.com/wp-rocket *
► ShortPixel: links.el-mentor.com/shortpixel *
Thank you very much for your support! ♥♥♥
▬▬ More WordPress & Elementor Tutorials: ▬▬▬▬▬▬▬▬
► el-mentor.com/elementor-tutor...
▬▬ About el mentor: ▬▬▬▬▬▬▬▬
► Legal information: el-mentor.com/legal-information/
* = Affiliate Partner Links
Thank you very much for this fantastic video and your code, pal! ;-)
Thank you for your feedback :-)
this is amazing thnx bro ❤❤❤
you're welcome :-)
Nice one bro ...
Thanks :-)
Hahahaha muy buena intro, gracias por el video
muchas gracias :-)
Haha muybien intro Amigo 🤣
Muchas gracias! ;-)
🎉⚡️💻🙌🏻🌎
Thanks :-)
Can we have the css you use? Also what if I change the image do we need to go again to the css?
I just added the Custom CSS Code to the description of the video.
How can I add custom elements or icon that can be editable. Like I can change the colour in wordpress
You can change the colour of icons if you upload custom icons as icon fonts / web fonts. You could also use inline SVG to change the colour with Custom CSS.
@@el-mentor actually I don't have this as font. I just have some specific shape that I want to upload and be able to change the colour
Says svg isn't supported as a file tyle.
1. Step: Go to Elementor > Settings > Advanced and enable Unfiltered File Uploads. 2. Step: Use Save SVG Plugin for more security.
@@el-mentor thank you so much!
you're welcome :-)