Automatic Popup with Lightbox in Flatsome Theme

Setup an automatic popup without any plugins and highlight your promotions and get more subscribers for your newsletter.

Back to tutorials

Tutorial Steps

1. Setting Up the Automatic Pop-Up
• Go to your desired webpage and add the Lightbox shortcode to trigger a pop-up.
• Adjust settings like auto_open and auto_timer. Setting auto_open to true will trigger the pop-up automatically, and setting auto_timer to 3000 milliseconds will make it appear after 3 seconds.
• To ensure the pop-up only appears once, set auto_show to once. If you need it to reappear, clear your browser cache or cookies.
Copy

[lightbox id="test" width="500px" padding="0px" auto_open="true" auto_timer="3000" auto_show="once"]Add lightbox content here..[/lightbox]

2. Adding Pop-Up Trigger on Specific Pages
• Log into your WordPress dashboard, navigate to the page where you want the pop-up (e.g., the Contact page).
• Open UX Builder on that page, add a text element, and paste the Lightbox shortcode.
• Set the id of your pop-up (e.g., “contact-popup”) to help differentiate it from others. Save your changes.
3. Creating a Button to Open the Pop-Up
• Return to the page in UX Builder where you want to add a clickable button.
• Insert a new button and add a link that references your pop-up id. For example, if your id is “contact-popup,” add #contact-popup as the link.
• Save the page, and your button will now trigger the pop-up when clicked.
4. Adding the Pop-Up Sitewide
• To display the pop-up on every page, go to Flatsome Advanced Settings.
• Paste your Lightbox shortcode into the footer script area. This will trigger the pop-up on all pages where the script is active.
• Remember, if it doesn’t appear right away, clear your cache and try refreshing the page.
5. Customizing the Pop-Up Design
• In the WordPress dashboard, create a new UX Block and design the content layout for your pop-up.
Copy

[ux_image_box style="overlay" img="https://www.flatsomedemos.com/mooi/wp-content/uploads/sites/6/2021/03/jason-wang-NxAwryAbtIw-unsplash.jpeg" image_height="56.25%" image_overlay="rgba(0, 0, 0, 0.529)" link="/programs/12-week-workout-program/" text_pos="middle" text_padding="15px 20px 15px 20px"]

[ux_text class="uppercase"]

<h2>Get 10% discount</h2>
[/ux_text]
[ux_text class="brown"]

<p>Join our mailinglist and get your free coupon code.</p>
[/ux_text]

[/ux_image_box]
[row padding="30px 30px 0px 30px"]

[col span__sm="12" align="center"]

Place you favorite form plugin shortcode here...

[/col]

[/row]

• Copy the shortcode of your new UX Block and add it to your Lightbox shortcode, updating the pop-up content dynamically.
• Adjust the width, padding, or any other style properties to refine the look.
6. Final Preview and Publishing
• Clear your cache one last time and preview your site to confirm the pop-up triggers as expected.
• Make any final tweaks to the design or behavior as needed.

By following these steps, you’ve now added a flexible pop-up feature to your Flatsome theme! Whether set to trigger automatically after a few seconds or by clicking a button, your pop-up can enhance visitor engagement—perfect for growing your audience, promoting deals, or gathering leads.

With the customization options in Flatsome, you’re fully equipped to tailor the look and feel of your pop-up to fit seamlessly with your site. Keep experimenting with different placements and designs to find what works best for your visitors. Happy building, and thanks for following along—see you in the next tutorial!