The modal anything widget, as its name dictates, allows you to display any of your content as a popup. Whether you want to use a media or combination of a media and text, you can create a template and use it.Select from different button layouts and popup effects and define a custom style for the modal container.
Lets go over the details of this widget.
The content section will be used to select a template.
Under the layout section, you will be able to alternate the position and the alignment of each element of the modal anything widget.This gives you more flexibility when using this widget in conjunction with other web page elements.
Under the styling tab section, you can change the styling & design of the modal anything elements.
You have the full control over the styling of the container section:
-Container Size & Margins : Control the width of your widget & apply custom margin values to have even more control on the popup position.
-Full Screen Background : Customize the popup full screen background color.
-Borders & Shadows : Control the border width and style, and apply custom box shadow for the container.
Change the style for the close icon.
Close icon Styling
-Close Icon Type : Choose if you want to use as square or round shape for your close icon.
-Colors : Apply custom colors for both the icon and the icon background.The colors can also be changed for the hover state.
-Margins : Change the margins to control the space between the icon position.
In this section, you can define your button text and change everything about the button layout and style.
This is where you will choose a layout for your widget.Here are the options available :
-No Icon : Choose this if you only want to use text for your button.
-With Icon : Choose this if want to use a combination of an icon and text.
-Just Icon : Choose this if only want to use an icon on your button.
This area with only be displayed if you choose to use an icon in the layout control.
-Choose Icon : Apply an icon from our extensive icon libraries.
-Icon Position : Control the icon position in conjunction with the text.
Control everything about the button size and typography.
-Width & Height : Define your button height and width or enable the full width option if you want it to be equal to the containing section's width.
-Typography : Choose a font family and change all the text properties to adjust it to your needs.
Customize all the aspects of the button's background and also change the text color with following options.
-Colors : Solid and gradient colors are both available with the addition of having full control on the gradient behavior.
-Borders & Shadows : Control the border for your button & apply custom text and box shadows.
Control everything about your icon, customize the color and size.
-Position, Size and Margins : Change the icon position to the left or right of the button and change its size and margins.
-Icon Color : You can apply a solid single color, or a gradient color with custom directions.Note that the color can be change for both the normal and hover states.
Enabling this will provide you with additional icon styling options.
-Background : You can change the background size and customize the colors with the possibility to use solid and gradient colors.
-Borders & Shadows : Control the border for the icon & apply custom box shadows.This also can be applied
If you can't find what you are looking for any our documentation website, please feel free to open a support ticket & get help from our support team.