lightbox Flatsome

How to Add Lightbox in Flatsome Powered Website

I have recently got a question from someone asking me how to create a lightbox in Flatsome. He want users to click on a button on his site so that people can get a popup message.

Additionally, he requested me to make the process easy so he could do it himself in the future. So I decided to create the tutorial on how to add lightbox in Flatsome.

Lightboxes can come in array of styles, from a combination of images with text, to text on a plain background, and many more. As such, they make sure the user focuses on the popup rather than the rest of the screen.

Add lightbox in Flatsome

Adding lightbox in Flatsome powered website is very simple. You can open any content in a lightbox using lightbox shortcode.

Navigate to your WordPress dashboard. Click on Add New button under UX Blocks.

Add a title and paste the shortcode for lightbox button on the description field from Flatsome documentation.

For demonstration purpose, I am adding the title as Lightbox Demo.

Click on the Publish button once done. After that go to the link and click on the button to check output.

Add lightbox to Flatsome using UX Builder

Navigate to the page where you want to add lightbox and click on Edit with UX Builder under Edit Page from your Dashboard.

Setting option will appear and you need to select where you want to add lightbox shortcode. You can also add your desired elements.

For demonstration purpose, here I am going to add lightbox to Custom Order button.

Once you click on the button, you will get the option to customize.

Click on Add to Section and select Text elements from the list.

After that select your desired presets from the given link and click Apply button. I have selected Paragraph for demonstration purpose.

On the Open Text Editor field, add this lightbox shortcode and write your popup message. Click on Apply button to save the setting.

To add a new button for popup message, you can paste the shortcode of the Flatsome doc.

Now click on the button from the site to check how it works.

Lightbox is a trend that grew a lot in the last couple of years. More and more people have started to use it on their sites. Presenting your media files inside a lightbox can be a great way to make the content more engaging.

If you need more tutorials on Flatsome theme or WooCommerce, let me know in the comment section. I’ll write the next tutorial for you.