Introducing Image & Gallery Lightbox: The Easiest Way to Pop Up Your Images!

Today, we are introducing Elementor version 1.6, which comes packed with two powerful new design features that have been two of the most user requested features of all time: Image & Gallery Lightbox and Text Shadow. We are also offering new play icon controls for videos, bulk load for template files and improved loading.

Image & Gallery Lightbox

The first feature I am happy to introduce is Image Lightbox.

With Lightbox, when a user clicks on one of the images on your website, the image opens in a lightbox popup. This provides you with a much better user experience.

Lightbox has been a requested feature of Elementor since pretty early on, but we wanted to make sure we do it right.

Now we are releasing one of the best, most easy to use solutions for creating image, gallery, carousel & video lightbox on WordPress.

Image Lightbox: When you switch lightbox on, every image you click on will open in a lightbox. 

Gallery & Carousel Lightbox: This feature also works on the Gallery and carousel widget. If you click on a gallery or slider image, the lightbox pops-up and you can sift through the images with the same right and left arrow. The Carousel widget could also be used to create a lightbox slider if you only present one image at a time.

Video Lightbox: The Lightbox feature for the video widget has been released a few months ago, but has now been updated and improved.

Until now, WordPress users had to use either a lightbox plugin or add code to their website.

Now, Elementor’s lightbox enables you to customize the background color that appears around the image popup.

Image lightbox works on images on the Image, Gallery, Carousel and Video widgets.

Lightbox Can Be Set Globally Or Individually

Lightbox can be set on the global level, meaning it will affect all images, galleries, and carousel sliders in Elementor automatically.

Even if you disable the lightbox on the global setting, you can still open a lightbox for a specific image.

This is done by going to image > content and setting lightbox to ‘Yes’.

The reverse is also true – you can have global lightbox turned on, and still disable it for a specific image.

Lightbox is 100% Mobile Responsive

As always, we’ve put a strong emphasis on mobile responsiveness. This has been heavily considered for all types of lightboxes, to make sure visitors from mobile devices get the same consistent experience when using the lightbox feature as desktop visitors do.

When you click on an image on mobile, the lightbox pops up, and lets you browse all the images through swiping left and right. Needless to say, the lightbox modal has also been adapted to perfectly fit the screen it is displayed on.

Lightbox Features

  • Works on Image, Gallery, Carousel & Video widgets
  • 100% mobile responsive
  • Configured globally or individually
  • Lightbox background color control
  • Option to disable lightbox popup preview when inside editor

Text Shadow

Next, let’s take a look at the new Text Shadow feature.

The text shadow effect has been added to the Heading widget and enables you to make any headline much more enticing and eye catching.

Play Around With Text Shadows

Put your hands on the wheel and take the new text shadow for a spin. Explore the endless possibilities of text shadow designs. 

The classic text shadow makes any WordPress headline pop up real nicely. Use Blur=0 to add depth to your headlines

Blur can be used to add a neon glow effect to headlines

Blur + distance combinations can produce some interesting results

Improved Video Overlay Button

The Elementor video overlay button lets you add a play button on top of your videos, so the user is much more likely to press play.

We have now added more customization options to this button, including control over the color, size and drop shadow of the button.

Additional New Features

We’ve introduced several other important updates, that are very helpful but are more ‘under the hood’.

Improved Elementor Loading

The loading of the editor has been vastly improved, and it now works faster and in a more stable method.

Bulk Export/Import Template

We’ve added a way to upload Elementor templates in bulk, using a .zip file.Simply upload the zip that includes your JSON templates and they will all be uploaded at once.

Conclusion

I hope you’ll enjoy all the new and free functionality we’ve added into Elementor. You are invited to update to Elementor 1.6.

Please let me know which is your favorite feature in the comments below, and don’t forget to subscribe to be the first to hear about new updates and feature releases for Elementor.

Liked This Article?

We have a lot more where that came from! Join 482,910 subscribers who stay ahead of the pack.
By entering your email, you agree to our Terms of Service and Privacy Policy.

About the Author

Ben Pines
Ben Pines
Ben Pines is Elementor's CMO. He has been in the online marketing industry for over 10 years, specializing in content marketing. WordPress has been Ben's platform of choice since the time it was used solely for blogging.

Share on

Share on facebook
Share on google
Share on twitter
Share on linkedin

Comments

83 Responses

  1. I am so excited about these new features!!! Both have been on my dream list for a while and the text shadow, in particular, surpasses my expectations!!! Also love the new styling for the video icon. WOW!!!

  2. Really awesome. Elementor has been my first choice to build unique designed websites for happy clients : ).

    Please consider as next feature, overlay pop-ups for contact form, for example.

    Great job!

  3. The text shadow is a superb feature and one that I will look to implement in my next web design and probably look to bring in to a few existing ones after testing it.

    Great work once again Ben.

  4. These features are awesome! Do you guys plan to include a column background image overlay link? You know how you can make an image fill a column, then pace text and other elements on top of it? You would hover over the column and the overlay will appear and there will be an icon or call to action to click on? This would be very handy to have as a feature.

  5. Hi, i have issues with the lightbox, when i want to change the picture it doesn’t work, i mean when i press the left right arrows, also when i try to click on a picture it always send me to the first image of the carrousel, any solutions for that? thank you!

  6. Elementor has seriously improved. I used it today after a long time. It has improved leaving beaver, visual composer behind. The best thing to happen to wordpress page builders is elementor. We hope you keep adding elements which are provided in visual composer. Thanks for much. The free is totally unbelievable.

  7. This is great, you guys are doing an awesome job! However i would like to complain a bit 😉

    1. Please add keyboard arrows support (left / right for prev / next image in the gallery).

    2. Mobile version has way to much padding – the images are very small because the arrows take a lot of place, they could be placed above the image. It’s just my opinion, if anyone has a different approach please reply 🙂

    And again – I love Elementor and it’s my favourite wysiwyg editor for wordpress, and i’ve been using a lot of them in the past.

  8. Awe-some!!! Look forward to using the new lightbox and drop shadow features… and the faster startup for Elementor is also appreciated. Thank you once again for all your hard work. Elementor is truly fantastic… and keeps getting better and better.

  9. Great video with clear explanations. I have a question regarding using Genesis child themes. The SiteBuilder blogger says he uses Genesis child themes all the time with good results. Is this the case since Genesis child themes (say from Studiopress) are tied to the Genesis settings and updates? Does Elementor overwrite and manage all child theme code. Do you recommend using Genesis Framework child themes?

  10. Nice things going on… 😉 As always i have a question… Can we have in elementor main tab that is called elements or layers or objects where people can see elements from page like layers in photoshop and also they can select from there… i made menu that overlaps video in background and when div or section have negative margin and its on top its impossible to select… thanks and keep up with great work!

    Dek

  11. Hi Ben – You guys are pretty awesome and I have been building beautiful sites that I will share soon. Im the owner of Level Creativ – I would love to give some suggestions in this blog to things that could greatly take elementor to the next level if possible.

    1. Slides in pro version needs to have gradient option, and image layer option for product pngs that hover over the main slide image. – also text shadow on slides, or shapes to go under text like a rectangle.

    More control over text padding

    Global button / Title setting across all slides

    ———————————————————————————————————————-

    2. The Map – Needs to have color styles like modern grey overlay.

    3. Social Icons – I wonder if there could be a use your own image option, as I love to design my own icons and upload them. Right now I can solve this by just using image element rather than social element. – even more styles to social would be nice including a grungy version.

    4.Various Hover Overlays on The Pro Gallery – and Pro Portfolio. I am now using “The Grid” until the gallery and portfolio come with more options.

    5. Forms – Need a line style option. I can get this effect by dropping border to 0 on 3 sides, but would be nice to have this option

    6. Forms – Have forms have option for Mailchimp / Constant Contact integration.

    7. Image Carousel – Justified height with variable width for horizonal display- great for portfolios. Instead of toggle arrows have option for slider bar directly under images which you could grab and slide left or right

    8. Section access like beaver builder where we can allow clients to only edit or adjust certain sections from logging in…(header and footer Non accesible…)

    9. White label branding when client logs in to edit elementor.

    10. ELEMENT TEMPLATES!!! Maybe this is possible not sure, but lets say for buttons having the same consistency across many pages -so if we have an element that will be used through a site, we can save that element as a template and insert it wherever…if finding I have to set up a buttons settings everytime i need a button. Like I said maybe there is a solution already for this? Create empty section w just a button perhaps?

    I have alot more suggestions but this is a good start, and Im sure others would agree 🙂 Love it all for sure

  12. Ben, you asked which new feature is my favorite. While they are both amazing, last night (yes last night) I was looking for a work-around for a blurred drop shadow! My vote goes to the Text Shadow Feature, because of its timeliness. Thank you!

  13. I’ve been creating web pages since 1995, when I hand wrote HTML for a Claudia Schiffer tribute site – what it lacked in style, it more than made up for in content.

    Fast forward through 22 years of technology and I’m glad to say we’ve reached a point where web design is no longer painful. In fact it’s almost a pleasure to fire up Elementor, either for a quick edit, or to build a new page. Well done team.

  14. Awesome! You guys keep delivering amazing value. This is why I switched to Elementor Pro from a competing product.

    These updates are perfect and will cut down on the amount of custom CSS I need in my theme.

    Sorry to be a pain, but two features that would really rock would be:

    1) Global sections — i.e. ability to update in one place and have it reflected on all pages that use that section template.

    2) Parallax backgrounds. For a while I had a jQuery plugin to add this functionality to my section background images but it interfered with my background gradient overlay on smaller devices (there was a gap that appeared around the image). So I basically scrapped the parallax effect. It would be really cool if there was a parallax option built into Elementor with different speeds, like slow, medium, fast.

  15. Oops. You’re right! I just tried creating a global template. I added it to a page and then went back and edited the template. Now I see the updated section when I refresh the page. I must have been doing something wrong the last time I tried it.

    This is great. It’ll save a lot of time. Thanks!!!

  16. In order to improve the usability features of your lightbox running under a web desktop environment (not mobile, as almost nobody uses the share buttons [check it out here: https://www.moovweb.com/anyone-use-social-sharing-buttons-mobile ]), you should implement a way to have share buttons AND to automatically update its Open Graph Protocol image (og:image component and the other og components) in order for the image that will appear on the shared post (on the destination website) is the same image the user was viewing in the lightbox when she/he clicked on the share button. This is VERY important, specially for photographers, designers and other artists, when they want to share their latest image on their social network pages. Otherwise, it’s a wast of time to try to have the post to show the same image as the one we were sharing.

  17. Love both. Is there any plan of offering this text shadow across more Elementor widgets? I know that it should be used sparingly, but I wouldn’t mind using it in the regular text editor. Keep up the good work!

  18. Hi There Love everything you are doing with Ele its been so nice to use but i have a question that i wanted to ask.

    On mine the normal plugin is 1.6.1 but the Pro version is 1.5.8 and its not saying there is an update on any of my sites i have the lightbox on the images but not the video’s and i dont have the options to tweak the Play Icon or anything like that, i have this installed on about 8 sites and the same problem and on 2 different servers

    if you can help that will be great

  19. Love the new features! I was wondering if you have any suggestions on how I can add a link to a button so it can it can open a video lightbox? Thank you!

  20. Hi there how do you get the lightbox on the videos?

    I am all up to date but there is no option at for anything to do with lightbox for videos images are fine but nothing for vidoes

  21. For some reason the lightbox doesn’t work for me. The lightbox opens buts its just the grey backdrop. The photo (PNG) doesn’t show..

  22. Thanks!

    Both Media Caousel widget and Flip Box do not show caption text in active Lightbox.
    When LightBox is activated the caption text disappears.

    I need to use the Image Gallery widget. Using Image Gallery widget with caption, the caption shows using the gallery, but using the LightBox in Image Gallery, the caption text disappears.
    I hope this wil be solved in an update of Elementor.
    I added this at GitHub.

    For now I will have to find other solutions, due the fact two companies need this solution (caption text using image gallery and a lightbox).
    (One company use images that are 97 years old and need to show where the images are shot. The other is an advertising company downloading and using all my images).

    I also tried other LightBoxes, but they “come in conflict” with Elementor LightBox. I assume its a simple name conflict (everybody calls this LightBox).

    Why not call it … eLightBox! (read: elementor Lightbox).

    I hope this will be solved in an update of Elementor!

  23. This didn’t work! I have tiled mosaic galleries on with lighbox throughout my site. This works great for Desktop & Tablet. But for mobile I would like the images full size so the user can just scroll down through and maybe pinch zoom. Any other ideas on how to have both? Thanks. Anna

  24. When I place an image or Image Carousel in Elementor, all works fine, except when I click on the picture to display it in the lightbox. The enlarged image appears, but when I click the X icon to close it, the image goes away and the screen “grays out” (turns dark). The site is locked up until I refresh the browser. By trial and error I discovered that the problem goes away if I select “No” rather than “Default” in the Image Gallery Content area. What exactly is the purpose of the “Lightbox” Default/Yes/No selection and why does this bug exist in my site? (I’m using the OceanWP theme).

    1. The default/yes/no controls whether the lightbox is active or not. If you have a Pro account, you can contact our support and they can help you. Otherwise, you might try asking in the Elementor community in Facebook.

  25. Hi there – can you change the colour of the arrows that are ether side of each image. On my theme they are a very pale colour and it’s not easy to see these arrows or the cross in the top right to close it.

Leave a Reply