Create custom lightboxes with personalized design and content using the Lightbox Builder Addon. This addon provides the Lightbox Builder Widget, enabling you to craft dynamic, on-page overlays with Page Builder by SiteOrigin. Engage your users with interactive lightboxes, perfect for showcasing content, promotions, or forms in a visually appealing way.
View the Lightbox Builder Addon demo.
Requirements
To make use of this addon, go to SiteOriginPremium Addons, locate Lightbox Builder, and click the Activate button. The Lightbox Builder Widget will be automatically activated at PluginsSiteOrigin Widgets.
Usage
The Lightbox Builder Widget is ready to be used anywhere:
Page Builder: Insert widgets in Page Builder by SiteOrigin in either the Classic Editor or Page Builder Layout Block in the Block Editor.
Block Editor: 100% Block Editor compatible. Insert widgets using the SiteOrigin Widgets Block featuring a live widget search form.
Theme and Plugin Widget Areas: Insert widgets into any theme or plugin widget area.
The following settings are available within the Lightbox Builder Widget:
Title:
This title will be used as the lightbox heading.
Content:
Click the Open Builder button to open an instance of SiteOrigin Page Builder and add rows, columns, and widgets to build your layout and your lightbox content.
Open Button
The settings for the lightbox opening button.
Button Text
Insert the button text such as “Signup Now” in the case of a newsletter signup form.
Icon
Optionally add an icon to the button.
Icon Color
Select the icon color.
Image Icon
Replaces the icon with your own image icon.
Icon Placement
Choose between Top, Right, Bottom, Left.
Design and Layout
Width
Leave blank to let the button resize according to content. Alternatively, insert a width value. Use the drop-down field next to the width field to select a unit of measurement. The default unit is pixels (px).
Align
Align the entire button on the page. Defaults to Center. Choose between Left, Right, Center, or Full Width.
Mobile Align
Set the button alignment on mobile devices. Defaults to Center.
Button Theme
Select a button theme. Choose between Atom, Flat or Wire. Atom has a rounded effect which Flat removes. Wire removes the background color and only uses a border.
Button Color
Select the button background color.
Text Color
Select the button text color.
Use Hover Effects
For the Atom and Flat themes, hover effects will lighten the background slightly, for the Wire theme, the background will be added on hover.
Hover Background Color
Select the button hover background color.
Hover Text Color
Select the button hover text color.
Font
Select the button font family.
Font Size
Set the button font size. Defaults to 1em.
Icon Size
Set the icon size. Applies if an icon was chosen. Defaults to 1.3em.
Padding
Padding is the distance between the text and the edge of the button. Defaults to 1em.
Rounding
Set the button rounding. Defaults to 0.25em for the top, right, bottom, and left corners.
Other Attributes and SEO
This section contains optional fields that some users will find useful.
Button ID
An ID attribute allows you to target this button in JavaScript.
Button Classes
Additional CSS classes added to the button link.
Title Attribute
Adds a title attribute to the button link.
Onclick
Run this JavaScript when the button is clicked—ideal for tracking.
Rel Attribute
Adds a rel attribute to the button link.
Advanced Customizations
The following functions can be applied using a child theme, custom plugin, or the Code Snippets plugin.
Close Icon/h3>
Icon
Select the lightbox close icon. Defaults to the Font Awesome Times icon.
Color
Select the lightbox close icon color.
Size
Enter the lightbox close icon size.
Position
Selet the lightbox close icon position. Choose between Top Right or Top Left.
Design
Title
Tag
Select the lightbox title HTML tag.
Font
Select the lightbox title font.
Color
Select the lightbox title color.
Size
Enter the lightbox title font size.
Margin After Title
Enter the lightbox title bottom margin.
Content
Background Color
Border Width
Border Color
Padding
Lightbox
Background Color
Set the lightbox background color. Defaults to rgba(0,0,0,0.8) which is black with 80% opacity.
Height
Set the lightbox height. Defaults to 70vh (70% of the viewport height).
Maximum Width
Set the lightbox maximum width. Defaults to 60vw (60% of the viewport width).
Custom Lightbox Trigger
Use a custom CSS selector to trigger the lightbox instead of the default click or page load.
function so_lightbox_builder_custom_trigger( $data, $instance, $widget ) {
if ( ! empty( $instance['custom_trigger'] ) ) {
$lightbox_settings = json_decode( $data['lightbox-settings'], true );
$lightbox_settings['trigger_selector'] = $instance['custom_trigger'];
$data['lightbox-settings'] = json_encode( $lightbox_settings );
}
return $data;
}
add_filter( 'siteorigin_premium_lightbox_builder_wrapper_data', 'so_lightbox_builder_custom_trigger', 10, 3 );