Creating a Lightbox Pop-up
Use a Lightbox to grab the users attention
What is it?
A lightbox is a pop-up that is triggered by either you landing on a page or when you click a button.
What are the benefits of using it?
Lightboxes (or pop-ups) are a great way to catch a user’s attention. For example, they 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.
This article explains the following things:
- How to create a content page as a lightbox
- How to have a button/link open up a lightbox page
- How to have a content row/block open up a lightbox page
- How to add lightboxes open up from your navigation
Creating a lightbox content page
Step 1:
Create a new page, then head to page settings. We’d recommend setting this up with the blocks template. To do this:
Scroll down to Navigation & Display Settings > Display in lightbox
Step 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 so that the lightbox displays with no navigation settings
Step 3:
After these settings are adjusted you can go back to page content and start styling and adding content to your lightbox classed page.
How a Lightbox looks when published
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. To do this:
Highlight the text you’d like to make into a button > Click the link tool, which will open up the link settings > Add in the link to the page next to URL (without the ?lightbox part) > Add in lightbox to the Class.
Adding Lightbox to content row or block
A lightbox is also supported by our platform on content rows and blocks individually, so you can have particular sections such as galleries or videos opening in lightboxes using the same URL and class setup as above.
In order to do this, you will need to create another lightbox content page > get the URL of the page > click into column row > settings > add the URL in the link field > set link target to lightbox
This content row has a lightbox added to it. You can click anywhere in this section and it will open up a lightbox page.
Adding to your navigation bar
You can also add the lightbox class to the navigation bar. To do this:
- Edit the navigation item
- Add in the link to the page next to the URL (without the ?lightbox part) or select the lightbox page from the drop-down, (this would be the name of your content page that you have turned into your lightbox)
- Add in lightbox to the Class
(This article will help guide you through setting up navigation menu items https://support.funraisin.co/blog/add-site-navigation )
If you need further help, please pop in a support ticket from your admin and our team will assist you.
