1. Home
  2. Docs
  3. Creative Elements
  4. Lightbox & Modal

Lightbox & Modal

How to Configure and Style EA Lightbox & Modal

EA Lightbox & Modal lets you easily create popups which open after certain actions are triggered. This means you can display strong messages that will have meaningful impact on your readers. It is an extension to your content area. You have three trigger options, which have very distinct flavors. You can set the trigger timing that best suits the flow of the readers. Add a link with the pop-up to redirect them to another page.

Table of Contents:

  1. How to Activate Lightbox & Modal
  2. How to Configure the Content Settings
    2.1. Lightbox || Modal
    2.2. Content
    2.3. Settings
    2.4. Animation
  3. How to Style Lightbox
  4. Final Outcome

1. How to Activate Lightbox & Modal

To use this Essential Addons element, find the EA Lightbox & Modalelement from the Search option under the ELEMENTS tab. Simply just Drag & Drop the ‘EA Lightbox & Modal‘ into the Drag widget hereor the ‘+’ section.

Lightbox & Modal
After you are successfully done with step 1, this is how the element is going to look like.

Lightbox & Modal

2. How to Configure the Content Settings

Under the ‘Content’ tab, you will find the ‘Lightbox || Modal’ section.

2.1. Lightbox || Modal

You can use the drop-down menu to choose any of these two layouts: Standard & Fullscreen. For the Standard layout, you can change the width and turn off the auto height option.

Lightbox & Modal

2.2. Content

You can use the toggle to enable or disable the title. You can use the drop-down to choose a ‘Type’ of content. By Default, it is set to ‘Image’. You can upload your preferred image through ‘Choose Lightbox Image’ option.

Lightbox & Modal

If you choose ‘Content’ as type, then you can insert your own text content, media or a shortcode to display as a popup.

Lightbox & Modal

You can also choose your ‘Saved Template’ as a content type and use them as popups.

Lightbox & Modal

Click to See Live Demo

2.3. Settings

You can use the drop-down menu to select your preferred ‘Trigger’ option. By default, ‘Button Click’ is selected as Trigger.

From the ‘Exit Settings’ mini-section, you can apply changes to your exit button. Under ‘Button Click Settings’ you can choose a button type and modify button text, icon and alignment.

Lightbox & Modal

You can change your Trigger to ‘External Element’ as well. For that case, you will find an ‘Elementor Identifier’ field. You can name this whatever you want (with a dot or # since it has to be either a CSS Class or ID).

Lightbox & Modal

Navigate to the ‘Advanced’ tab of the element you are going to use as an external element. Then simply copy and paste your Elementor Identifier in the ‘CSS ID’ or ‘CSS Class’ field without the dot or the #.

Lightbox & Modal

You can also check out this video tutorial on how to use ‘External Element’ as trigger.

2.4. Animation

You can also choose your preferred animation options from the Animation drop-down menu. By default, it is set to blank.

Lightbox & Modal

 

3.  How to Style Lightbox & Modal

Switch to the ‘Style’ tab to style all the Lightbox & Modal. You can add Styling to the ‘Lightbox’, ‘Overlay’, ‘Button’ and ‘Close Button’ from this section.

Lightbox & Modal

4. Final Outcome

By following the basic steps and a bit more modifying, you can style your Lightbox & Modal as per your preference.

Lightbox & Modal

This is how you can design amazing Popups on your website by using EA Lightbox & Modal element.

Getting stuck? Feel to Contact Our Support for further assistance.

Tags , , , ,

How can we help?