Learn The Secret To Awesome Image Effects in WordPress
HTML-код
- Опубликовано: 6 июл 2024
- In this tutorial video, discover how to create visually stunning effects on your website images using simple mask techniques.
Whether using Bricks Builder, Elementor, or any similar tool, you'll learn the universal principles of applying masks to images to achieve professional-looking designs.
I'll walk you through the process from creating your mask in software like Pixelmator Pro or Photoshop to applying it in Bricks Builder for a unique and eye-catching effect.
This video is perfect for anyone looking to enhance their web design skills with creative image effects.
Join me in unlocking the potential of masks in your website projects!
00:00 - 00 - What effects are we aiming for?
00:14 - 01 - How to achieve the effects
00:34 - 02 - Creating the image mask
02:00 - 03 - Adding the masks to our designs
03:11 - 04 - Getting more creative with the settings
Take your WordPress website and skills to the next level!
► The Essential Web Designer's Documents Pack
Looking to take your web design business to the next level? The Essential Web Designers Documents collection has got you covered! With handcrafted, professionally designed documents that have generated tens of thousands in revenue, you'll have everything you need to impress clients, streamline your workflow, and boost your bottom line.
► Buy the Essential Web Designer's Documents Pack Now: links.wptuts.co.uk/ewdd
► THE TOOLS I LOVE ◄
If you like what we do and would like to support us, please consider using these affiliate links when purchasing any of the plugins covered in our tutorials. Thank you for your support.
► EXCLUSIVE WPTUTS DISCOUNTS ◄
✅ WPVivid Backup Pro: jo.my/vividpro (use WPTUTS20 for 20% off)
✅ Project Huddle: jo.my/etafyp (WPTUTS for 20% off - Exclusive)
✅ Flowmattic: jo.my/flowmattic (WPTUTS for 20% off annual plans)
Clickwhale: jo.my/clickwhale (WPTUTS20 for a 20% discount on all plans)
► MY PREFERRED HOSTING PROVIDERS ◄
✅ Hostinger: jo.my/92dmbb
✅ CloudWays: jo.my/1feeng8
✅ SiteGround: jo.my/sgwptuts
► WORDPRESS VISUAL PAGE BUILDERS ◄
✅ ELEMENTOR PRO: jo.my/1s0t2s2
✅ Bricks Builder: jo.my/bricks
✅ Brizy Pro: bit.ly/2Ji97r8
✅ GenerateBlocks: jo.my/xotgcy
✅ DIVI 3 Page Builder: bit.ly/2HiiDcE
► WORDPRESS THEMES ◄
✅ GeneratePress Premium: bit.ly/2Ydn1SE
✅ Blocksy: jo.my/y67ten
✅ DIVI Theme: bit.ly/2G8JMiA
✅ Astra Pro: bit.ly/2zruoKn
► WORDPRESS TOOLS ◄
✅ InstaWP: jo.my/0jdh2j
✅ Crocoblock: jo.my/croc
✅ CSSHERO: bit.ly/2qbrRl6
► WORDPRESS PLUGINS ◄
✅ SEOPress Pro: jo.my/seopress
► SUBSCRIBE ◄
bit.ly/2rX7rhu
► LETS CONNECT: ◄
👉 Twitter: / wptutz
👉 Facebook Group: wptuts.co.uk/facebook
SUPPORT: Our website offers additional information and perks. Please check it out! wptuts.co.uk 
Хобби
I never realized how easy it is to create masks, thank you.
I know, right.
Once you see how easy this is, you can get some really creative effects created in a few minutes.
Would you believe, I was creating masks to do that very thing, when your video popped up on my feed. I haven't been using the transparent effect, but might try that next. I've actually moved away from page builders these days, but it's very easy to apply masks with the Kadence Advanced Image block - my theme and blocks plugin of choice these days.
Genius !! Clear, concise and practical!! Thanks !!
Had no idea, thanks for this one! Great to impress the type of clients who wrongly think "value" in a site is based on visual effects and animations
Exactly!
You can get pretty creative with this technique and take it even further if you're happy delving into CSS itself. :)
Nice video. Thank you for sharing. 👍
Thank you! Cheers!
This is sooooo good thanks 👌
Obrigado pela aula.
Really good video, thanks!
This can be done in Figma free also.
Great idea! Thanks for showing this!
You are so welcome!
I followed this guidance Paul, using Elementor and worked. However the semi transparent outlines didn't work in Elementor. Any ideas whether this a limitation within Elementor?
Very cool 🎉
Great work! Thank you for sharing 👍
Thanks for the visit
Sweet.
Ok so I watched the video and thought, get outta here, this cannot be that simple. Fired up affinity photo, put 2 black rectangles on a transparent canvas...exported as SVG...and...YES! IT REALLY IS THAT EASY!!!
Super, Simple, and Sexy! The tut about using masks is pretty cool, too !! Thanks for sharing this feature!
Haha, cheers Jim. :)
Hello there!
I've been using Elementor Pro until this moment, but now I started considering moving to Bricks for upcoming clients, not only for all good things I'm seeing about Bricks, but specially for their lifetime plan.
Would you have any point against doing so/do you have any video covering this topic?
@@phkoon I made the move myself and haven’t looked back. Once you become accustomed to the change in workflow, you’ll find a lot of things can be done natively in Bricks whereas Elementor requires plugins.
The class first design methodology alone is worth the switch.
Could you share the .svg file so I can use it?