Open a Lightbox Popup
Last updated
Last updated
Welcome to our tutorial on how to create a friendly and engaging Lightbox that pops up when visitors click on a link on your webpage. Don't worry; it's easier than it sounds! Let's get started with these simple steps:
To make things crystal clear, the block you create will be inserted into the Lightbox window, so ensure it's responsive for a user-friendly experience.
Go to UX Blocks > Add new > Open UX Builder.
Build your UX Block with the elements you want your visitors to see.
Once you're done, save it! Don't forget to paste your Lightbox shortcode somewhere safe; you'll need it in the next steps.
Pro tip: The UX Block shortcode I created looks like this - block id=”test” .
The Flatsome Theme comes with its own Lightbox shortcode, saving you from writing a ton of code. Here's how:
Copy the original shortcode from this page.
Understand each part of the code (e.g., id, lightbox, width, padding).
Replace the phrase ADD YOUR UX BLOCK SHORTCODE HERE with the UX Block shortcode you created in step 1.
For it to work seamlessly, add the shortcode to the page you want. For example, if it's a product page, insert it at the end of the page before closing the <body> tag or right below the link.
That's the sample lightbox shortcode:
Now, let's add a link to the word you want visitors to click to open the popup window. Here's how:
Open the Text Editor, select the word, and click on Add link.
Use the chosen id for your Lightbox in the hyperlink (e.g., #test).
Example:
id: test
width: 1500px
padding: 20px
hyperlink: #test
No need to worry if you see the shortcode during the process; it won't be visible to visitors once you publish it. Give it a try!
After all the work, it's time to publish and test. Make sure everything looks and functions the way you want it to.
And there you have it! This tutorial is designed to make your website more friendly and optimized for your customers' experience. Now go ahead, create your own Lightbox, and elevate your product pages and more!