Description. Bio list page. When clicking any people on list, Lightbox with bio description will appear.

How to do.

1. Upload Files

Download this lightbox plugin and extract, you will have

• plugin-lightbox.css
• plugin-lightbox.js

Upload these files to your site. Follow this guide to know how to upload.

2. Add code

Access Home > Settings

Advanced > Code Injection

Add this code to Footer

<!-- Plugin Lightbox -->
<link href="/s/plugin-lightbox.css" rel="stylesheet">
<script src="/s/plugin-lightbox.js"></script>
<script>pluginLightbox();</script>
<!-- end Plugin Lightbox -->

3. Create Bio List Page

Add a page to create Bio List. You can design the layout as you like.

3.1. Image Box

You can use Image Blocks to create layout like this.

3.2. Image – Description – Button

or Image Block, Text Block, Button to create layout like this.

4. Create Bio Detail Pages

Each person will have a separate page. It will appear in the lightbox popup.

You can design the layout as you like. Eg this layout.

5. Find Bio Detail Pages URL Slug

Next, you need to find the page url of all bio detail pages

Hover on Page Name > Click Gear Icon > The setting box will appear.

Page URL at URL Slug

Assuming bio detail pages here are

• /person-1
• /person-2
• /person-3

6. Add links to create Lightbox

Edit Bio List Page > Edit Image Blocks > Insert the link, with this structure

#lightbox_bio-page-url

As in the example in step 5, you have 3 urls which is person-1, person-2, person-3, you need to paste these links

• #lightbox_person-1
• #lightbox_person-2
• #lightbox_person-3

If you use Buttons in Bio List Page, insert links to Button

Save. Done! See result!

7. Lightbox Style

If you want to customize Lightbox Style. Open instructions.html (When you unzip the downloaded file plugin in step 1, you will see this file.)

Scroll down to bottom, enter info > Click “Copy”

After clicking copy, paste the code to Home > Design > Custom CSS (See how to insert CSS)