How to Add Lightbox in Flatsome Powered Website

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

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

Lightboxes can come in an 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 a lightbox to Flatsome powered website is very simple. You can open any content in a lightbox using a lightbox shortcode.

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

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

For demonstration purposes, 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 the output.

Add lightbox to Flatsome using UX Builder

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

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

For demonstration purposes, here I am going to add a lightbox to the 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 Paragraphs for demonstration purposes.

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 the 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 has grown 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. You can also know how to create a newsletter lightbox sign-up popup to engage more people in your community.

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.

Subscribe To Our Newsletter!
Hi, I’m Mohamed. I share delicious recipes that I have cooked and loved. I’ve been food blogging for over 10 years and have a Diploma in Nutrition. You will find many healthy recipes as well as my favourite comfort food on the blog because I believe in a balanced diet.

Related Posts

Fintech’s biggest hits and misses of 2023

As 2023 comes to a close, we’re here to look back at the biggest fintech stories of the year. Silicon Valley Bank’s implosion felt like a fintech…

It’s critical to regulate AI within the multi-trillion-dollar API economy

Alex Akimov Contributor With two decades of tech leadership experience, Alex Akimov, former head of API at Adyen, now revolutionizes embedded finance at Monite by building best-in-class…

EU’s provisional deal on gig worker rights fails to get enough backing from Member States

Not so fast on that Christmas present for precarious gig workers in the EU: A political deal announced mid month, which aims to bolster platform workers rights…

Arduino exploring India manufacturing to limit counterfeit sales

Arduino is considering manufacturing in India. The startup, best known for its open source microcontroller boards, hopes to restrict the rise of counterfeit boards and cater to…

Top robotics names discuss humanoids, generative AI and more

Last month, I took an extended break. In a bid to keep my robotics newsletter Actuator (subscribe here) up and running, however, I reached out to some…

Pornhub owner pays US government $1.8M to resolve sex trafficking probe

Pornhub’s parent company Aylo Holdings will pay $1.8 million to the U.S. government to resolve a charge of profiting off of sex trafficking. The company, formerly known…