Home - Widgets - Modal Window

Modal Window

Preview Widget
Preview Widget
Getting Started
Content
Global Layout
Container & Content Styling
Button Settings & Styling

More Widgets

• Modern Video
• Modal Anything
• Static Template
• Toggle Content

# Getting started

The modal window from Booster Addons is an exceptional tool if you want to display some text using a popup.This widget uses a button that when clicked on will display a section with a button, some text, and even an icon if you choose so.Select from different button layouts and popup effects and style everything from the text to the modal container.

Lets go over the details.

Content

This section will be used to define the content text.

  • Heading : This text control will represent the content of your heading.
  • Text Content : A paragraph text that will appear under the heading.

Layout

Under the layout section, you will be able to alternate the position and the alignment of each element of the modal window widget.This gives you more flexibility when using this widget in conjunction with other web page elements.  

  • Alignement : Horizontally and vertically align the popup containing the text in the widget section.
  • Show Effect : The show effect represents an animation that will be played when the popup is displayed.Select one of the many available animation effects.
  • Heading & Content Alignement :  Align the heading and content text inside the popup container.
  • Close Button :

This is where you will choose a layout for the popup close button .Here are the options available : 

-None : Choose this if you don't want to use a closing button.

-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.

  • Close Icon Position & Layout : Position your icon to either the top left corner or the top right corner and select the either inside the container or outside for layout.
  • Button Alignment & Text : Align the button inside the widget and change its text.

Styling

The styling tab will be used to control the styling & design for the widget elements.

  • Container Styling

You have the full control over the styling of the container section:

-Container Size, Margins & Padding : Control the width of your widget & apply custom margin and padding values to have even more control on the popup position.

-Background : Customize the section background & choose to apply either a solid background color or a gradient color.

-Borders & Shadows : Change the border width and style, and apply custom box shadow for the container.

-Content Padding & Margins : Change the padding and margins values for both the content and the close button.

  • Text Content Styling

Customize the text properties and colors for the heading and short text.

-Typography : Change the font size, letter spacing... choose from hundreds of Google font families.

-Colors : Apply custom colors for your text elements.

  • Close Settings

Change the settings and style for the close button.

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.

-Margins : Change the margins to control the space between the icon and the other elements.

Close Button Styling

-Colors : Customize the color  for both the button text and the button background.​

-Typography : Change the text properties for the button text.Change the font size, font family, letter spacing and more.

Button Settings & Styling

In this section, you can define your button text and change everything about the button layout and style.

  • Text & Button Alignement : Control the alignement for the button and the button's inner text.
  • Button Layout :

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.

  • Icon :

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.

  • Button Styling Settings

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.

  • Normal & Hover : Select​ which button state you want to customize.Normal for the idle state and hover for when the button is being hovered.Note that all the remaining options of this section will only affect the selected state.

  • Button Styling

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.

  • Icon

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.

  • Normal & Hover : Select​ which icon state you want to customize.Normal for the idle state and hover for when the icon is being hovered.Note that all the remaining options of this section will only affect the selected state.

  • Advanced Icon Styling

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 

Get Help From Professionals

Can't find what you are looking for?

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.

Open a Ticket
Open a Ticket

WHO ARE WE ?

We are a group of talented WordPress developers & designers from Morocco our main goal is to create great products & provide the best services to our customers.

BOOSTER ADDONS

CREATIVE ELEMENTOR BUNDLE

HELPFUL LINKS

About Us

Documentation

Blog Articles

Video Tutorials

Request Support

GET INVOLVED

Feedback

Bug Report

Submit Design

Privacy Policy

Terms & Condition

FOLLOW US

Email : contact@certaindev.com

WebSite : Certain Dev

Made with love from Earth!

Certain Dev | all rights reserved © 2020