Masker

Content Controls

Design Controls

Mask

In this section, you can define the appearance of the mask overlaying your element. Choose from predefined shapes or define your own, adjust the size and position, and decide if the mask should repeat across the element.

• Shape – Select a predefined shape for your mask.
• Custom Shape – Upload an image to create a unique mask shape. This control is only available when “Shape” is set to “custom”.
• Size – Choose a standard size for your mask or specify a custom size.
• Custom Size – Define specific dimensions for your mask. This control is only available when “Size” is set to “custom”.
• Position – Set the focal point of your mask within the element.
• Repeat – Decide if and how the mask should repeat.

Container

This section allows you to customize the container of your masker element. Modify dimensions, background color, padding, and borders to fit your design needs.

• Width – Specify the width of the container.
• Height – Specify the height of the container.
• Background – Choose a background color for the container.
• Padding – Adjust the padding around the content inside the container.
  • Padding – Define the amount of space between the content and the borders of the container.
• Borders – Customize the borders of the container.
  • Radius – Adjust the corner roundness of the container’s borders.
  • Styling – Define the style, width, and color of the container’s borders.
  • Shadow – Add a shadow to the container to create a sense of depth.

Layout

Control the layout properties of the masker and its container. Align content, define gaps, and set specific breakpoints for responsive design.

• Align – Set the horizontal alignment of the masked content within the container.
• Vertical Align – Set the vertical alignment of the masked content within the container.
• Gap – Determine the space between elements within the masker.
• Horizontal – Further refine alignment settings for the masked content.
  • Align – Specify the horizontal alignment of the content.
  • Vertical Align – Specify the vertical alignment of the content.
  • Vertical At – Choose the breakpoint at which the vertical alignment setting should apply.

Spacing

Adjust the outer margins of the masked element’s container to ensure proper spacing from other elements on the page.

• Margin Top – Set the amount of space above the container.
• Margin Bottom – Set the amount of space below the container.