OoohBoi Elementor AddOns

Image Mask Usage Manuals

Installation

Image Mask addon for Elementor should be installed like any other WordPress plugin, please don’t be confused with an “addon” term!
  • Download the package to the local drive first
  • Install the addon through the WordPress plugins screen directly (detailed instructions on YouTube)
  • Don’t forget to activate the addon through the ‘Plugins’ screen in WordPress

Usage Instructions

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.

Case: Image Widget

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.

Case: Section/Column Background Overlay

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.

The Interface - Controls

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.


Mask position

Allows you to position the mask image in relation to the object being masked. Chose from predefined positions or select Custom for more accuracy.


Mask size

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.


Mask repeat

Your image mask can be repeatable in any direction if needed.


Image rotate

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.

FAQ

How do I translate OoohBoi Image Mask to a different language?

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!
So…

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.

Why do I have to use SVG file type to mask the target image/element?

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.

I need help...

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.