OoohBoi Elementor AddOns
Please note that OoohBoi Image Mask works with the following Elementor elements and widgets:
Section/Column Background Overlay (panel!) and Image Widget
There’s a slight difference in settings/options availability tho. It means that the options relating to Image Widget will be found in a separate panel – “OoohBoi Image Mask” panel, while those relating to the Background Overlay element can be found below the existing “Background Overlay” panel options/settings.
When in Editor, select the target Image Widget, open the Style tab and expand OoohBoi Image Mask panel. Upload the mask image (should be SVG file type!) and play with options.
Select the target Section or Column, open the Style tab and expand Background Overlay panel. All the Image Mask options will be available under the default Background Overlay panel options. Upload the mask image (should be SVG file type!) and play with options.
Choose Image Mask
The mask image should be transparent SVG file type. PNG might be used as an alternative but you may expect it to be “pesky” a little bit.
Allows you to position the mask image in relation to the object being masked. Chose from predefined positions or select Custom for more accuracy.
Select one of predefined sizes or the custom one. The Custom mask size is controlled by Width parameter only in order to keep the mask aspect ratio.
Your image mask can be repeatable in any direction if needed.
Optionally you can rotate the masked object, but rotating the mask itself is not possible.
Image position – X
Allows you to move both mask and the Background Overlay along the X axis in either direction – positive or negative.
Image position – Y
Allows you to move both mask and the Background Overlay along the Y axis in either direction – positive or negative.
First of all you gonna need gettext catalogs (.pot files) editor. My favorite is POedit. For the purpose of translation you can use any other gettext editor. Google to find one!
Open a file named “ooohboi-image-mask.pot” which can be found in “ooohboi-image-mask/lang/” folder. Translate then save/export two files; “ooohboi-image-mask-YOUR_LOCALE.po” and “ooohboi-image-mask-YOUR_LOCALE.mo”.
Be sure to keep your language files in “ooohboi-image-mask/lang/” folder!
What exactly YOUR_LOCALE stands for?
Well it’s more like a tag that helps WordPress identify language being used with it. For example, if you need to localize your plugin copy to Dutch, you’ll save translated files as “ooohboi-image-mask-nl_NL.po” and “ooohboi-image-mask-nl_NL.mo”. If you need to translate to French it’s gonna be “ooohboi-image-mask-fr_FR.po” and “ooohboi-image-mask-fr_FR.mo”. And so forth.
Check out WordPress Codex for complete list of locales.
You don’t, you can try with transparent PNG too, however here’s the PRO list:
1. SVG (a.k.a. scalable vector graphic) is a vector graphic format and as such it’s resolution-independent and infinitely scalable. Your mask edges will always be sharp, no matter how much you scale it up or down.
2. SVG graphics are routinely smaller file sizes compared to their raster graphics brethren.
3. SVG as a mask works flawlessly while transparent PNG can be pesky sometimes
Decision is yours, of course!
Copyright © 2020 Sofarider. All rights reserved.
Feel free to ask anything in relation to OoohBoi’s Elementor Addons. In case you spotted a bug – make a report. If you have an improvement suggestion – let me know.