Content Controls
Popup
In this section, you will find various controls to customize the behavior of your popup element. You can manage its visibility, decide whether users can scroll the page when the popup is active, and even choose to hide or display the close button. Additionally, there are advanced settings for adding custom HTML IDs, CSS classes, and more.
- Disable Overlay – Use this toggle to enable or disable the overlay behind the popup, which affects how users interact with the rest of the page.
- Allow Scroll – This toggle allows users to scroll through the webpage even when the popup is active.
- Disable Close Button – Choose whether to show or hide the popup’s close button with this toggle.
- Show Close Button After – Set a specific time delay before the close button appears. This control is only available when the ‘Disable Close Button’ is not activated.
- Popup Can’t Be Closed – Ensure that the user cannot close the popup with this option, available only when the ‘Disable Close Button’ is active.
- Automatically Close After – Decide if and when the popup should close automatically, with a set time delay.
- Advanced – Dive into advanced settings for your popup:
- Popup HTML ID – Assign a unique HTML ID to your popup for more precise styling and scripting.
- Popup CSS Class – Add custom CSS classes to your popup for advanced styling options.
- Keep Open On Hashlink Clicks – Decide whether the popup should remain open when users click on hashlinks.
Design Controls
Popup
Control the appearance of your popup with these design settings. Customize its position, background, size, and more to ensure it fits perfectly within your webpage. Add padding, borders, and shadows for additional styling, and even animate your popup’s entrance and exit for a dynamic user experience.
- Position – Manage the popup’s positioning:
- Align – Choose the horizontal alignment of the popup.
- Vertical Align – Select the vertical alignment for your popup.
- Translate – Precisely adjust the popup’s position:
- X – Move the popup horizontally.
- Y – Move the popup vertically.
- Background – Customize the background color of your popup.
- Size – Define the size of the popup:
- Width – Set the width of the popup.
- Height – Set the height of the popup.
- Max Height – Define the maximum height the popup can reach.
- Padding – Adjust the inner spacing of the popup.
- Borders – Style the borders of your popup:
- Radius – Round the corners of your popup.
- Styling – Choose the style, width, and color of your popup’s borders.
- Shadow – Add a shadow to your popup for a 3D effect.
- Layout – Manage the internal layout of your popup:
- Align – Align the content inside the popup.
- Vertical Align – Vertically align the content inside the popup.
- Gap – Adjust the space between the elements inside the popup.
- Horizontal – Fine-tune the horizontal alignment of your popup’s content:
- Align – Choose how the content is aligned horizontally.
- Vertical Align – Choose how the content is aligned vertically.
- Vertical At – Adjust the vertical alignment based on screen size.
- Animation – Add animations to your popup:
- Entrance – Customize the popup’s entrance animation:
- Animation Type – Choose the type of entrance animation.
- Duration – Set how long the entrance animation lasts. This control is available when an ‘Animation Type’ is selected.
- Delay – Add a delay before the entrance animation starts. This control is available when an ‘Animation Type’ is selected.
- Ease – Select the easing function for the entrance animation. This control is available when an ‘Animation Type’ is selected.
- Exit – Customize the popup’s exit animation:
- Animation Type – Choose the type of exit animation.
- Duration – Set how long the exit animation lasts. This control is available when an ‘Animation Type’ is selected.
- Delay – Add a delay before the exit animation starts. This control is available when an ‘Animation Type’ is selected.
- Ease – Select the easing function for the exit animation. This control is available when an ‘Animation Type’ is selected.
Overlay
Manage the visual appearance of the overlay layer of your element, tweaking its color, clip settings, and various layer options to create a unique look. Adjust image layers, their size, and positioning, and experiment with gradient or color overlays for creative effects. Note that specific controls will appear based on your previous choices, providing a customized design experience.
- Color – Choose a color for the overlay, enhancing the visual appeal of your element.
- Clip – Define the clipping settings for the overlay, dictating how it should be displayed over the element.
- Layers – Customize different layers within the overlay for intricate designs.
- Type – Select the type of layer you want to work with, opening up various customization options.
- Image – Add an image to the layer, available only if ‘Type’ is set to ‘Image’.
- Size – Choose the size for your image, accessible only when ‘Type’ is set to ‘Image’.
- Width – Manually set the width of the layer, available when ‘Size’ is set to ‘Custom’.
- Height – Manually set the height of the layer, available when ‘Size’ is set to ‘Custom’.
- Repeat – Decide if and how the image should repeat, available only for image layers.
- Attachment – Set the attachment settings of the image, available only for image layers.
- Position – Choose the position of the image within the layer, available only for image layers.
- Left – Adjust the left positioning of the layer, accessible when ‘Position’ is set to ‘Custom’.
- Top – Adjust the top positioning of the layer, accessible when ‘Position’ is set to ‘Custom’.
- Gradient – Add a gradient to the layer, available only when ‘Type’ is set to ‘Gradient’.
- Overlay Color – Choose an overlay color for the layer, available only when ‘Type’ is set to ‘Overlay Color’.
- Blend Mode – Set the blend mode, determining how the layer blends with layers below it.
Close Button
Personalize the close button of your popup, adjusting its color, size, and position, and opt for a wrapped button for additional styling options. Experiment with background color, padding, and border-radius settings for a wrapped close button. You can also replace the default icon with a custom one and even shift the button’s position with translation controls.
- Color – Set the color of the close button, ensuring it stands out or blends in with your design.
- Size – Adjust the size of the close button to suit your design needs.
- Wrapped – Choose whether to wrap the close button, which enables additional styling options.
- Background – Set a background color for the close button, available only when ‘Wrapped’ is enabled.
- Padding – Adjust the padding around the close button, available only when ‘Wrapped’ is enabled.
- Radius – Set the border radius of the close button, creating rounded corners, available only when ‘Wrapped’ is enabled.
- Custom Icon – Replace the default close icon with a custom one to match your site’s aesthetic.
- Position – Choose the position of the close button within the popup.
- Outside – Decide whether the close button should be placed outside the popup.
- Translate – Adjust the close button’s position with translation controls.
- X – Translate the close button horizontally.
- Y – Translate the close button vertically.
