Get Premium

Elementor Lightbox Fade Transition (Instead of Slide)

Element.How also offers premium tutorials! Check them here:

Table of Contents

This tutorial is a simple one. It's simply about transforming the animation in the Elementor lightbox from 'slide' to 'fade'.

In my example page, click on an image, and navigate through the Elementor lightbox, to see the fade transition in action.

Extra: This tutorial will also make it possible to use HTML in the title and description of the slideshow captions. You will be able to add links, bold text, make it italic, change the color and styling of parts of it, using basic HTML.

Let's get started!

First, determine where you want the Elementor Fade Lightbox

This is a premium tutorial. Purchase access to unlock the full tutorial.

Access tutorial

$19/one time Purchase access

Includes

  • Gain Access to This TutorialUnlock complete access to the current tutorial: Elementor Lightbox Fade Transition (Instead of Slide)
  • Future UpdatesYou will get access to all future updates to this tutorial.
  • Enjoy Unlimited UsageUse on as many of your own sites or your clients sites as you wish.

    Note that reselling or redistributing is not permitted.

Access everything

$299/one time Purchase All Access

Includes

  • Unlock every premium tutorial on Element.howGet access to the entire library of premium tutorials on Element.how
    Preview premium tutorials
  • Get access to the CSS course for Elementor usersAccess the complete 14 HTML chapters, 30 CSS chapters and 7 Elementor Projects.Learn more
  • Simple CSS Grid For ElementorAn Elementor Addon to Create Awesome Grid Layouts in a Single Click for Containers, Galleries and Loop Grid. Learn more
  • free extra: ShapeDividers.com Premium AccessLifetime Premium Access to ShapeDividers.comVisit ShapeDividers.com
  • 6 months money backNo questions asked money back. Not what you expected? Get a refund.
  • One-time payment of only $299No hidden fees or subscriptions.

    Sales taxes added where applicable.
  • Support not needed!Due to personal circumstances, I no longer offer support. The vast majority of customers never needed support to start with, so chances are you will be just fine, the tutorials and templates provided are complete.

    I also extended the refund window from 1 to 6 months, during which you can get a full refund for any reason.
  • Lifetime access to everything Element.howThe price reflects what is currently available on Element.how. All future updates are included, but none are promised. You pay for what is available now, and the rest is a sweet extra.
* All prices are USD. Applicable taxes will be charged at checkout. Have a question? See the FAQ or email me.

Element.how also provides premium tutorials showing awesome advanced designs, check them out here.

Looking for something else? Search across 2927 Elements right here:

And get exclusive Elementor related discounts here

Checkout the Elementor Addon Finder directly

10 Responses

  1. This snippet worked, but once it's installed, the title and description aren't showing up on any images except the first one. I need to have titles and descriptions accompanying these images. Can you give me a fix?

    Also, I'm trying to figure out a way to use html in the WordPress image title and description areas, but they are not being recognized. Is there a way to do this?

  2. Hi again, and thanks for your last reply.

    I am having a new issue now when using this code. When I click on an image the first time, I get a spinning wheel. Then once I close the image I'm able to open it the second time without delay I click on it. It doesn't happen on every image, and it's happening on different images every time I load a page. This is an error I'm getting in the console:

    "Uncaught TypeError: Cannot read properties of null (reading 'addEventListener')
    at (index):1013:11"

    This is one of the pages with a gallery it's happening on - https://www.laceyterrell.com/velvet-jail-galleries/

    Do you have a fix for this?

    Thanks in advance for your help!

  3. Thank you so much for doing that. I'm not getting the error message any more.

    Just an FYI for you, it seems like the loading issue is only fixed when I use the "on specific pages" code and put it in an HTML element at the end of the page. It doesn't work when it's at the top of the page.

    Also, it seems to only work when the thumbnails are set to "full size" so the images are pre-load on the page before the lightbox is opened.

    I could be wrong about this, but it's the only way I was able to make it work.

    I appreciate all of your replies and fixes!

  5. Hi Maxime, the code doesn't seem to be working for me. I've tried every method (using WPCode plugin) including running the code on entire website, using code snippets only on gallery pages and finally inserting in an html box (tried both top and bottom of page) but none of the methods made any changes to my lightbox. Wondering if you have any ideas? I was so excited about the fade transition feature. Such a bummer...

    1. Greetings Dora!

      I see the problem. My tutorial is meant for the Elementor lightbox. Here, you are using a third party addon for the gallery, and it uses a different lightbox than the Elementor lightbox.

      So my tutorial simply won't work.

      For my tutorial to work, you would need Elementor Pro, and to use the gallery.

      You could also try with the Elementor Free Basic Gallery element, which I added now on the logo page just to test.

      I could not add any HTML element as my access is too limited, but if you add the code again, then that one should open in the lightbox, and it should have a fade transition.

      I hope this helps

      Cheers!

Leave a Reply