Elementor Lightbox Fade Transition (Instead of Slide)
Get Premium

Elementor Lightbox Fade Transition (Instead of Slide)

Just Released: 10 Popular Web Hosts Tested In Depth

WordPress Hosting Review

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 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.

WordPress Hosting Review

Access tutorial

$9/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
  • 30 day 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.
  • Great supportGet help when you need it. Support includes getting things working as intended.

    Support excludes customization work.
  • 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.

    I will say that it is definitely my intention to keep adding tutorials to Element.how.
  • Launch offer discounts!This all inclusive package is freshly released and to celebrate, there is a special discount available:

    10% for new customers with coupon code LAUNCH10

    20% for existing customers with coupon code LAUNCH20

    Available for a limited time only.
* 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 2701 Elements right here:

And get exclusive Elementor related discounts here

Checkout the Elementor Addon Finder directly

9 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, I'd like to do the same with a testimonial carousel, without worrying about captions… Is there a simple way to modify your code to do this? Thanks!

Leave a Reply

Elementor Lightbox Fade Transition (Instead of Slide)

Resources

Premium

Account

Discounts

Facebook Youtube Envelope

© Copyright 2023 Element How
Privacy Policy | Terms & Conditions