Adding a Lightbox Button and Working with Lightboxes

Follow

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.

Note:

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

adding_lightboxes_button.png

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.

adding_lightboxes_properties.png

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

adding_lightboxes_click_action.png

The CLICK ACTION panel is the call to action center for your button.

adding_lightboxes_click_action_menu.png

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.

adding_lightboxes_clickaction_lightbox_menu.png

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

adding_lightboxes_button_label.png

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

adding_lightboxes_appearance.png

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.

adding_lightboxes_appearance_hover.png

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

adding_lightboxes_metadata.png

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.

adding_lightboxes_tab.png

If you have multiple lightboxes, you can toggle between lightboxes by using the drop-down menu.

adding_lightboxes_menu_expanded.png

Lightbox Indicators 

adding_lightboxes_warning_icons_menu_example.png

You’ll see 3 different indicators on the lightbox menu depending on the situation:

  • adding_lightboxes_green_circle_icon.png The green circle will appear if you have a new lightbox that hasn’t yet been edited.
  • adding_lightboxes_chainlink.png The chain-link will appear if you have a lightbox that doesn’t have any links.
  • adding_lightboxes_warning.png The warning will appear if you can’t add any more lightboxes because you’ve reached the 20 lightbox limit. 

Here are some ways you can do more with your lightbox buttons and lightboxes:

Was this article helpful?
0 out of 0 found this helpful