How to Open a Lightbox with Flatsome

In this tutorial you will learn how to popup a Lightbox after clicking in a link into your page. You need to follow some steps in order to have it done.

Here’s how:

Step 1: Create your own UX Block

In order to make it clearer, you need to understand that the Block you will create will be inserted into the Lightbox window so make sure to create a responsive UX Block to make it more user-friendly.

Go to UX Blocks > Add new > Open UX Builder

Build your own UX Block with the elements you want the visitors and clients to see and after you finish, save it and done!

Paste your lightbox shortcode in a notepad, you will need it in the next steps.

P.s.: The UX Block shortcode I created is block id=”extra-size-chart”

Step 2: Add it into the Flatsome Lightbox shortcode

The Flatsome Theme has your own lightbox shortcode, you don’t need to write a sort of lines to make it happen, that’s the best part of being a Flatsomer.

Now you just need to copy the original shortcode of this page.

Before start doing the next steps, firstly you need to understand what means each part of this code:

  • id=”test” is the URL parameter of this lightbox, it means that the “link” you will add into your hyperlink is #test. It’s recommended to choose your own id (ex.: id=”size-guide”, id=”exchanges-returns”, etc)
  • lightbox is the name of the shortcode
  • width is the size of the windows that will popup in the visitor’s browser.
  • padding is the distance between the content and the end of the popup window.

After copying and pasting it into your notepad on your computer, you will replace the phrase ADD YOUR UX BLOCK SHORTCODE HERE with the UX Block shortcode you created in the first step.

Step 3: Add shortcode into the page you want

In order to see it working in a proper way, you should add the shortcode you built in the previous step into the page you want. For example, if it’s a product page, you must add it in the last part of the page, before closing the <body> tag or right below of the link, it’s up to you, the most important thing is that this shortcode must be inserted into the same page of the page you want the visitors to see the lightbox.

Step 4: Add hyperlink into the specific word

It’s time to add a link into the word you want the visitors to click in order to open the popup window with this Block content.

How do you do that?

Open the Text Editor, select the word and click on Add link. You will add as a hyperlink exatcly the id you’ve chosen to your lightbox, for example, the ID I’ve chosen for mine one was size-guide so in the link I’ll add #size-guide.

See example of how you need to fill in your shortcode parameters:

  • id=”size-guide”
  • width=”1500px”
  • padding=”20px”
  • hyperlink must be #size-guide

See how it works: See size guide

Don’t worry if you see the shortcode when you’re adding it into your page, when you publish it the visitors will not see. I recommend you to try it.

Step 5: Publish it and test

After having the work done, it’s time to publish and test.

Hope this tutorial might help you and make your website more friendly and optimized for your customers’ experience.

And done! That’s what you need to do to have your own lightbox in your Product Page and in anywhere.

You cannot copy content of this page

To provide you with a better browsing experience, this website utilizes cookies. You consent to our usage of cookies if you browse this website.