Creating a Lightbox Pop-up

22 Jul 2019

What is a lightbox?

Lightboxes (or pop-ups)  are a great way to catch a user’s attention. For example, can be used to start a registration flow or draw attention to an announcement such as promo codes or details about changes to an event.

These can be linked anywhere on your site- on your homepage for a special promotion, in the site footer to display other information about the charity, or even in the registration flow for more information.

How to set up a lightbox

  1. Create a new page, then head to page settings. We’d recommend setting this up with the blocks template. Go to Navigation & Display Settings > Display as lightbox.

  2. Turn off all other settings so that it displays just your content.
    • Make sure “Turn off Top Nav, Sub Nav, and Page Footer” are all on as well.
  3. Add in your content!

How to link to a lightbox

When linking to a lightbox, it needs the Class ‘lightbox’ so the browser recognises what kind of link it is.

On a Content Page

  1. Highlight the text you’d like to make into a button.
  2. Click the link tool, which will open up the link settings.

  3. Add in the link to the page next to URL (without the ?lightbox part)
  4. Add in ‘lightbox’ to the Class.

In your navigation bar

  1. Edit the navigation item.
  2. Add in the light to the page next to URL (without the ?lightbox part) or select the lightbox page from the drop down.
  3. Add in ‘lightbox’ to the Class.

If you need further help, please pop in a support ticket from your Funraisin Admin and our team will assist you.