Lightbox buttons are a great way to add more content to your page without adding clutter. Lightboxes are small windows where you can add more information -- they're launched once you click on a lightbox button.
This article describes how to:
- Add a lightbox button to your page.
- Editing the appearance of your lightbox button.
- Add content to your lightbox button.
If you're using a Cloudflare SSL certificate on your domain, this will stop your Lightbox and Form Confirmation Dialog from loading. To prevent this from happening, disable your Cloudflare SSL certificate.
Adding a Lightbox button to Your Page
Navigate to the page in the Unbounce Builder where you’d like to add a lightbox.
Drag and drop the Lightbox Button widget onto the area of the page where you’d like to place your lightbox button. The button will appear on your page with options to further edit.
You can edit the size of your button by clicking and dragging on the small squares around the perimeter of your button.
The buttons that run along the top allow you to shift the alignment of your button in relation to the page section where you’ve placed it.
You can use multiple lightbox buttons on a single landing page and move them on the page as you’d like.
Editing the Appearance of Your Lightbox Button
Click on your button to populate the Properties tab on the right side of the builder. The Properties Tab has 5 panels that allow you to further edit your button.
The Geometry Panel
- Use the Size fields to enter an exact numerical value in pixels for the Width and Height dimensions of your button.
- Use the Position fields to enter an exact numerical value in pixels to move your button in relation to the Left of the page and the Top of the page.
The Click Action Panel
The CLICK ACTION panel is the call to action center for your button.
The Action drop-down menu gives you the options for your click action. The Show a Lightbox option will activate a lightbox when your customer clicks the lightbox button.
The Lightbox drop-down menu allows you to choose the lightbox that you’d like to associate with the lightbox button, or create a new lightbox specific to this button.
The Button Label Panel
The BUTTON Label panel allows you to change all the text values on your button, including the size, font family, and message written. You’ll want to change your button label to something more indicative of what will load in your lightbox.
The Appearance Panel
The APPEARANCE panel allows you to modify the look of your button in Up (normal), Hover (mouse is above the button), and Active (mouse is clicking the button) states.
If you edit the look of the button in the Up state, you can elect to have Unbounce automatically edit the appearance of your button in Hover and Active states for you, or you can remove the check mark beside Create appearance based on “Up” state to change the appearance manually for each of the other 2 states.
The Element Metadata Panel
The ELEMENT METADATA panel contains important information that’s unique to your button. The ID value is often required when you want to apply custom css, html, or scripts that apply to this specific button.
Add Content to Your Lightbox Button
Click on your lightbox button to bring up the button properties panel on the right side of the screen.
In the Properties panel, scroll down to the CLICK ACTION section and click the Edit Lightbox button.
This will bring up the lightbox screen in the Unbounce Builder. Add/edit your content just like you would with your main landing page.
Your lightboxes can also be accessed by clicking on the lightbox tab in the top left corner of the Builder.
If you have multiple lightboxes, you can toggle between lightboxes by using the drop-down menu.
You’ll see 3 different indicators on the lightbox menu depending on the situation:
- The green circle will appear if you have a new lightbox that hasn’t yet been edited.
- The chain-link will appear if you have a lightbox that doesn’t have any links.
- The warning will appear if you can’t add any more lightboxes because you’ve reached the 20 lightbox limit.
To rename your lightbox, click on the Page Properties Panel, and hover over the name of the lightbox (the default name given to a lightbox will be 'Lightbox', 'Lightbox 2', etc). Once the pencil icon appears, double-click the text to change the name of your lightbox.
Here are some ways you can do more with your lightbox buttons and lightboxes: