Marketing · Elementor
Popup & Lightbox Modal widget for Elementor
An on-page popup or lightbox for a promo, form, or media embed. This is the widget; site-wide popups with conditions live in Popup Builder.
Get King Addons
This page describes the PHP/JS for this widget — not a renamed stub. Install the free plugin from WordPress.org.
What it actually does
An on-page popup or lightbox for a promo, form, or media embed. This is the widget; site-wide popups with conditions live in Popup Builder.
How to add it in Elementor
- Install King Addons. Install Elementor and King Addons. Get King Addons from WordPress.org.
- Edit with Elementor. Open a page and click Edit with Elementor.
- Insert the widget. Search the panel for “Popup & Lightbox Modal”. Typing “king” lists every King Addons widget.
- Set inspector controls from this widget’s PHP. Configure “Select Template”, “Box Animation Direction”, “Button Text”, “Set Width of popup box”. Style and Content tabs are listed on this page.
When to use it
- A “watch the video” lightbox on a feature section.
- A coupon modal tied to a button click.
- A small announcement overlay on a campaign page.
Inspector controls from this widget’s PHP
| Control | What the code does |
|---|---|
| General — Select Template | Ajax Select2: options load from a King Addons admin-ajax endpoint. |
| General — Box Animation Direction | The chosen value is read in render() and applied on the front end. Options: Top; Right; Bottom; Left. |
| General — Button Text | Printed in the widget HTML from render(). |
| General — Set Width of popup box | Switcher inspector control (`kng_popup_box_width_switcher`). |
| General — Width (%) | Writes CSS `width` onto the widget’s front-end markup. (default 100, min 0, max 100). |
| General — Set Maximum Width of popup box | Switcher inspector control (`kng_popup_box_max_width_switcher`). |
| General — Maximum Width (px) | Writes CSS `max-width` onto the widget’s front-end markup. (default 855, min 0). |
| General — Set Maximum Height of popup box | Switcher inspector control (`kng_popup_box_max_height_switcher`). |
| General — Maximum Height (px) | Writes CSS `max-height` onto the widget’s front-end markup. (default 385, min 0). |
| General — Disable Button | This is a useful feature if there is a need to set a custom element as the trigger instead of the default button. |
| General — CSS Class of trigger element (optional) | Apply a specific CSS class to your custom trigger element, such as a button, text, a menu item, etc. You can add the class in the Advanced tab of the new trigger element. Then, enter the same class in this field as well. This way, the Popup & Lightbox Modal will open when you click on the trigger element. Please check the result on the live website, due to limitations of the Elementor preview mode. |
| Button — Button Horizontal Position | Writes CSS `text-align` onto the widget’s front-end markup. Options: Left; Center; Right. |
| Button (Normal) — Typography | Elementor typography group: family, size, weight, transform, style, decoration, line-height, letter-spacing. Selector: `{{WRAPPER}} .king-addons-popup-button`. |
| Button (Normal) — Text Color | Writes CSS `color` onto the widget’s front-end markup. |
| Button (Normal) — Background Color | Writes CSS `background-color` onto the widget’s front-end markup. |
| Button (Normal) — Padding | Writes CSS `padding` onto the widget’s front-end markup. |
| Button (Normal) — Box Shadow | Elementor box-shadow group for the selector. Selector: `{{WRAPPER}} .king-addons-popup-button`. |
| Button (Normal) — Border | Elementor border group: type, width, color, and radius when the group includes it. Selector: `{{WRAPPER}} .king-addons-popup-button`. |
| Button (Normal) — Border Radius | Writes CSS `border-radius` onto the widget’s front-end markup. |
| Button (Hover) — Typography | Elementor typography group: family, size, weight, transform, style, decoration, line-height, letter-spacing. Selector: `{{WRAPPER}} .king-addons-popup-button:hover`. |
| Button (Hover) — Text Color | Writes CSS (king-addons-popup-button, color) onto the widget’s front-end markup. |
| Button (Hover) — Background Color | Writes CSS (king-addons-popup-button, background-color) onto the widget’s front-end markup. |
| Button (Hover) — Padding | Writes CSS (king-addons-popup-button, padding) onto the widget’s front-end markup. |
| Button (Hover) — Box Shadow | Elementor box-shadow group for the selector. Selector: `{{WRAPPER}} .king-addons-popup-button:hover`. |
| Button (Hover) — Border | Elementor border group: type, width, color, and radius when the group includes it. Selector: `{{WRAPPER}} .king-addons-popup-button:hover`. |
| Button (Hover) — Border Radius | Writes CSS (king-addons-popup-button, border-radius) onto the widget’s front-end markup. |
| Popup box — Background Color | Writes CSS `background-color` onto the widget’s front-end markup. |
| Popup box — Padding | Writes CSS `padding` onto the widget’s front-end markup. |
| Popup box — Box Shadow | Elementor box-shadow group for the selector. Selector: `.king-addons-popup-{{ID}}`. |
| Popup box — Border | Elementor border group: type, width, color, and radius when the group includes it. Selector: `.king-addons-popup-{{ID}}`. |
| Popup box — Border Radius | Writes CSS `border-radius` onto the widget’s front-end markup. |
| Popup box — Z-Index of Popup box (optional) | Note: The Popup box may not display over all elements in the Elementor preview mode here, due to limitations of the Elementor preview mode. However, the Popup box will display properly over all elements on the live website. Please check it there. |
| Close Button — Select Icon | Icon rendered with Elementor Icons_Manager in this widget’s HTML. |
| Close Button — Color | Writes CSS (color, fill) onto the widget’s front-end markup. |
| Close Button — Size (px) | Writes CSS (font-size, width, height) onto the widget’s front-end markup. (default 20, min 1). |
| Overlay — Overlay Background Color | Writes CSS `background-color` onto the widget’s front-end markup. |
Content and Style tabs from this widget’s PHP, including repeater fields and group controls (typography, background, border, shadow). Elementor’s Advanced tab is core Elementor and is not listed here.
FAQ
What does Popup & Lightbox Modal actually change on the page?
An on-page popup or lightbox for a promo, form, or media embed. This is the widget; site-wide popups with conditions live in Popup Builder. Inspector labels from this widget’s PHP include “Select Template”, “Box Animation Direction”, “Button Text”, “Set Width of popup box”.
Is this the same as Popup Builder?
No. This widget is an on-page modal you place on a canvas. Popup Builder creates site-wide popups with display conditions (King Addons → Popup Builder).
How do I add Popup & Lightbox Modal in Elementor?
Install King Addons and Elementor, edit a page, search the panel for “Popup & Lightbox Modal”, drag it onto the canvas, then set Content and Style.
Do I need Elementor Pro?
No. King Addons runs on free Elementor. Some King Addons options (for example template-in-accordion, extra popup conditions, parts of the template catalog) need King Addons Pro — not Elementor Pro.
Related marketing widgets
Video Popup
A poster image that opens a video (self-hosted or hosted) in a popup, with autoplay-on-open available.
Phone Call Button
A click-to-call button that opens the phone app on mobile and still looks like a CTA on desktop.
Price List & Menu
A menu or price list: item, description, price, optional image — for restaurants and services.
Share Buttons
Social share buttons for the current page, with networks and labels you choose.
Business Hours
Opening hours with weekday rows, highlights for today, and closed states.
Countdown & Timer
A countdown to a date (or evergreen) for launches, sales, and events.
Get King Addons
One free plugin. 80+ Elementor widgets, 650+ templates, and 4,000+ sections. Search for Popup & Lightbox Modal after you activate it.