3 Amazing Flatsome Lightbox Button Shortcodes, You never knew

Flatsome lightbox button shortcodes offer a fantastic way to show your desired content in popups. It means when a site visitor press a button, you can show your desired website content with ease. As you know, the Flatsome WordPress theme comes with UX Builder, you can show any UX Builder element in the Flatsome lightbox.

You can enable Newsletter Signup, show Featured Product Categories and Best Selling Products, share Discount Coupons, and enable custom Call to Actions. 

How To Setup Flatsome Lightbox Button

Before showing the possibilities of presenting contents inside the lightbox, I am going to show the basic usage of Flatsome lightbox button shortcodes. in the following shortcodes, you can see there are two parts of shortcodes [bottom] and [lightbox]

Basic Way to Setup Flatsome Lightbox Button Popup

Using two shortcodes, I am going to show you the process of building and amazing usage of the Flatsome lightbox button.

Step 01 – Create a UX Block called – Lightbox

From the above code, place the lightbox shortcodes inside the Lightbox UX Block page. After pressing Publish button, you can notice a shortcode area is created in the right sidebar.

Step 01 – Create a WordPress page called – Landing Page

Now, create a WordPress page called Landing Page and place the Lightbox UX Block shortcodes inside the page called the Landing page, and then [button] after it.

Publish the landing page and press the Preview button to see the page on the frontend. On my end, the basic lightbox shows like the following screenshot.

Now, I am going to show you how you can use the basic process to enable newsletter signup, show best selling product and featured categories in flatsome lightbox popup.

01. Enable Newsletter Signup

In the previous tutorial, I showed to create an automatic Flatsome lightbox newsletter signup. In the tutorial, I will show how to trigger a popup with a newsletter subscription with the Flatsome lightbox button. The newsletter popup will look like the next screenshot.

First, follow the basic way to create a UX Block called Lightbox and WordPress page called Landing Page. 

Second, Create another block called Newsletter Signup. I’ve developed the page in UX Builder.

The block will generate a shortcode [block id=”newsletter-signup”]. I’ve added the block code for your convenience. Just copy the code to your Newsletter Signup block and add an image for the banner.

Finally,  copy [block id=”newsletter-signup”] and paste between the [lightbox][/lightbox] shortcode inside Lightbox  UX Block.

Now get to the landing page frontend where you put the flatsome lightbox button. Press the button, and the newsletter subscription lightbox will appear.

02. Show Best Selling Product in Lightbox

Like the newsletter signup, create a block a block called Best Selling Product. I’m going to share how I’ve designed my own best-selling product popup in the Flatsome UX Builder.

You can see I’ve already created Best Selling Product. You can easily create your own Best Selling Product using the Flatsome Page page builder called UX Builder. My block created this code [id=”best-selling-products”] for the Best Selling Product lightbox popup.

As the [id=”best-selling-products”] code is generated. Put the code inside [lightbox][/lightbox] shortcode inside Lightbox UX Block.

Now head to the landing page where you have put the but the Flatsome lightbox button. Check how it looks on my end.

03. Featured Category Lightbox

With the Flatsome WooCommerce theme, you can easily show the featured categories in the lightbox with ease. Create a block called Featured Category. You can create your own featured category block easily. If you have named your block Feature Category, It generates the shortcode [id=”featured-category”]

Now, insert the featured category shortcode inside [lightbox][/lightbox] shortcode inside Lightbox UX Block.

Lastly, head over to your landing page and press the flatsome lightbox button. It will trigger popup with Product Categories

Bottom Line

I’ve only three usages of Flatsome lightbox button. But you can show any type of Flatsome UX Builder element easily. You can enable lightbox to showcase product discount and promote sales offers for Halloween, Cyber Monday, Christmas, and so on. Also, you can create custom shortcodes as your need.

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

Ultimate Top 10 WordPress Paywall Plugins 2023

Are you looking for the best WordPress Paywall Plugin? WordPress paywall plugins are widely available, although not all of them are top-notch. Paywall plugins help you promote…

Start Booking Process with Availability Calendar Since Appointment Booking 1.19.0

With the release of the MotoPress Appointment Booking plugin version 1.19.0, we’ve introduced several significant improvements and enhanced flexibility to the booking form widget. Additionally, we’ve fixed bugs and implemented…

Discover Top 17 WordPress Community Themes 2023

Community or social gathering is an amazing platform where you can share your thoughts or ideas with your people. Here WordPress Community Themes can play a vital…

Ultimate Top WooCommerce Dark Theme in 2023

WooCommerce dark themes are a good option if you want your website to have a contemporary, melancholy atmosphere. Dark themes are sinister and enigmatic, whereas light themes…

WooCommerce Variable Product Attributes Setup 2023

Are you worried about how to create Radio, Label, Color, and Image Variation Swatches for WooCommerce variable product attributes? If your WooCommerce store sells a variety of…

Top Google Tag Manager WordPress Plugins 2023

Google Tag Manager WordPress plugin is a tag management plugin that can help you to put or update tags on your website. Using it, you will be…