How to Create Masks for Elements with JupiterX

Enhance the visual appeal of your website by adding captivating masks to elements like images, videos, and maps with JupiterX's Mask Option. This feature enables you to apply predefined shapes or use your own custom designs, giving your website a unique and engaging look.

Getting Started with Mask Options

To begin using the Mask Options, follow these simple steps:

1. Open the Elementor Page Builder and select the element you wish to apply a mask to.
2. Navigate to the Advanced Tab within the widget settings for that element.

Option Controls

Within the Advanced Tab, you will find the controls for the mask settings:

• Mask: Enable by toggling this on to activate the mask features.

  Shape: Choose a predefined mask shape or upload your own. The available preset shapes include:

  • Circle
  • Flower
  • Sketch
  • Triangle
  • Blob
  • Hexagon
  • Custom (Upload option for your SVG path file)
• Image: When you have selected "Custom", you will be able to upload your mask file in .PNG or .SVG format. Your uploaded image can then be used as a mask.
• Fit: Select how you want the mask to fit the element. Options include:
  • Fit
  • Fill
  • Custom
• Position: Position your mask on the element. You can choose from:
  • Center Center
  • Center Left
  • Center Right
  • Top Center
  • Top Left
  • Top Right
  • Bottom Center
  • Bottom Left
  • Bottom Right
• Repeat: Decide if and how the mask should repeat. Your choices are:
  • No Repeat
  • Repeat
  • Repeat-X
  • Repeat-Y
  • Round
  • Space

Using Custom Masks

For a truly customized experience, creating your own mask gives you limitless creativity. Here's how:

1. Design your mask in a graphic editor. Save it in .PNG or .SVG format.
2. In the Shape field, select "Custom".
3. Click on the Image option to upload your custom mask file to the WordPress media library.
4. Adjust the Fit, Position, and Repeat settings to get the desired effect.

Visualizing the Changes

Remember to preview your changes to see how the mask affects the element.

1. Click the Preview button within Elementor to open a live preview of your page.
2. Check how the masked element blends with the rest of your design.
3. Make any necessary adjustments back in the element settings.

Adding a mask to elements in JupiterX is an easy way to add depth and character to your website design. With the variety of options available, you can create truly unique designs that capture your visitor's attention.

Feel free to explore different combinations of shapes, positions, and repeats to find the look that's just right for your site. Happy designing!