Pop-up preview images or videos are a very useful interaction when designing a website.Happy Addons for Elementor A free and powerful widget is provided - theLightbox(Light box) GadgetsIt can easily realize the pop-up window display effect of pictures or videos, without coding, to enhance the interactivity and visual appeal of the page.

This article will detail how theHappy AddonsRealizes image and video pop-ups and provides practical tips to make the page more attractive.

What is Happy Addons for Elementor?

Happy Addons for Elementor Elementor is an extension plugin for Elementor. It provides a large number of powerful, flexible design of the widgets and effects to help users more efficiently build a professional level of website pages. Whether it's a personal blog, e-commerce site, company website, or creative portfolio.Happy Addons Both can be extremely helpful.

Plugin Features:

• Rich Widget Components::Happy Addons Built-in more than 100 gadgets(Widgets), covering a wide range of aspects such as content presentation, interactive features, and layout assistance.

• Free is compatible with the Pro version:plug-in (software)free versionrespond in singingProfessional EditionTwo modes. The free version already contains a large number of practical functions, suitable for most of the basic needs of building a website; the professional version unlocks more advanced special effects and commercial use components, suitable for complex pages or enterprise-level projects.
• Rich style and animation support: Support for floating animations, rotation, scaling, transparency, filters, etc. CSS animation effectsThe result is a more visually appealing page. Create dynamic page effects without coding.
• Ready-made template snippet: Happy Addons The official website offers a large number ofPrefabricated design templatesThe user can use the Live Copy FeaturesOne-click copy to your own website to dramatically improve design and development efficiency.

How Happy Addons works

Usage 1: Button triggered Lightbox (Button Type)

1. Adding widgets

exist Elementor Search in the editor for "Lightbox", drag it into the page canvas.

2. Setting button text and icons

Click "Type", select "Button" type. Button text can be customized and appropriate icons can be selected from the icon library, SVG icons can be uploaded or no icons can be used, and icon positions can be switched left and right.

3. Select pop-up content type

Click "Lightbox Type" option, which allows you to select the type of content to be displayed:

• Video
• Picture (Image)

Video Settings (Video Lightbox):

• be in favor of YouTube,Vimeo,Self-hosted
• Video files can be uploaded directly from the media library
• You can set the start and stop time of video playback to show only the desired clips

Image Settings (Image Lightbox):

• Selectable from the media libraryphotographAs a pop-up preview of the content

4. Style customization

In "type" tab, you can set the button color, border, typography, hover state, etc. to create a visual style that matches the style of your website.

Usage 2: Image Trigger Lightbox (Image Type)

1. Switching trigger types

In the top drop-down menu of the left-hand settings panel, switch the trigger type to "Image".

2. Selection of pictures

Two images need to be set up:

• Images displayed on the page(Trigger)
• Click to bring up a preview image(pop-up window content)

Both images can be selected from the media library.

3. Style settings

In the Styles tab, you can add rounded corners, borders, shadows to image buttons, and even use CSS filters for advanced image effects.

Advanced Tip: Creating Text-Only Button Triggers

If you don't want to use a button with a background color, but instead want to trigger the Lightbox with a piece of text, simply:

• Remove inner margins (Padding) of buttons
• Set the background color to transparent
• Customize font color and hover state

This creates a text-only button that looks like a hyperlink, triggering a pop-up effect.

Display effect

summarize

leverage Happy Addons for Elementor offered Lightbox Widgets, without writing a single line of code, can add interactivity and aesthetics to the page, allowing visitors to focus more on the content display and improve the overall user experience. If you want to know more WordPress related knowledge, please pay attention to thePhoton fluctuation networkThe daily updates will be madeWordPress Tutorialand information, with the most atmosphericCommunities of exchange, communicate together to make progress together!

Contact Us
Can't read the tutorial? Contact us for a free answer! Free help for personal, small business sites!	Customer Service
① Tel: 020-2206-9892
② QQ咨詢：1025174874
(iii) E-mail: info@361sale.com
④ Working hours: Monday to Friday, 9:30-18:30, holidays off