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
S I Z E C H A R T
FR
32
34
36
38
UK
4
6
8
10
ITA
36
38
40
42
USA
00
0-2
2-4
4-6
To find out the equivalent sizes by country, please see the USA size chart below.
Size (USA)
Chest
Waist
Hip
Leg
00
76
57
83
33
0-2
80
61
87
33
2-4
84
65
91
33
4-6
88
69
95
33
💡 ASK A QUESTION
Our Client Care Specialists will be delighted to assist you with your enquiries via live chat. They are available between 09:30 - 17:30 (GMT -03) Monday to Friday
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.
Latest Articles
Mega Menu & Custom Dropdown with UX Builder
PHP Snippet: Woocommerce Reviews as Shortcode
Best WooCommerce Themes for Your Online Shop in 2023
Remove Additional Information Tab @ Single Product