Image Mask

Demo: https://demo.wocode.com/image-mask-widget

Tutorial Videos

Setup

• Place the widget in an existing or new row.
• Unique ID: Use a Unique ID when multiple instances of the widget will be used.
• Mask and Background Image Menu: This additional menu allows you to load a mask image and a background image.
• Mask Image: Begin by loading a mask image. We’ve provided 45 masks you can use. Click the link labeled “Download mask images” to download the image mask pack.
• Once you load the mask image, you may find that the mask is cut off on the top and bottom. This happens because the mask image exceeds the height of the panel. You may adjust the panel height in the Design options. Additionally, you may adjust the image mask width and height in the Design options.
• Background Image: This image sets the image seen behind the mask, as well as the image shown when the panel is expanded/opened. Note that since this image can be shown at full browser width (potentially), it is best to use a high resolution image. A common sizing would be 2000px wide, but best not to exceed 3000px.
• Title Text: This title appears in the upper left corner of the panel when not expanded, and then in the center of the background image when the panel is expanded.
• Button Text (bottom right): This custom text determines what text will appear as the text in the bottom right of the panel. We refer to this text as a button, since it acts as a link to open the panel.
• Content Blocks: This menu offers 3 separate text fields where you may enter the content text seen once the panel is opened. If you wish to not use any of the content blocks, leave them empty.

DESIGN SECTION

• Panel Height: As you would expect, this sets the height of the panel. Do not use the blue grab handle on the widget container to attempt to resize the panel.
• Panel Color: This sets the color of the panel. Learn more about managing colors in the “Tips” section below.
• Mask Width/Height: This sets the size of the mask image. It is generally best if these 2 values match.
• Title Text Styling: These styling options offer styling control of the Title. Note that there are unique styling settings available for the Opened Panel Title font size and color. This way, the title can utilize different size and color to better fit the panel and background image colors.
• The remaining sections: Button Styling, Content Blocks Text Styling and Spacing are self explanatory and will not be discussed here.

TIPS

• Color Management: You may run into a situation where the solid/opaque portion of the mask image does not match the color of the panel. The simple solution here is to change the panel color to match the image mask. However, there may be times when the mask needs to be edited to match your site or brand colors. Use a photo editor like Photoshop to update the color in the PNG mask image.
• Creating Your Own Mask Images: You may want to create a custom original mask. To do so, simply create a new project in Photoshop or a similar image editor. Set the background to transparent. You may then apply a solid color fill to form the opaque portion of the mask. Finally, use your eraser or custom shape to create transparent (empty) portions of the image. These transparent sections will allow your background image to show through the mask. Save your image as a PNG and upload into the widget when ready.