{"id":2421,"date":"2021-06-22T06:23:59","date_gmt":"2021-06-22T06:23:59","guid":{"rendered":"https:\/\/elementor.com\/academy\/?p=2421"},"modified":"2023-02-21T14:09:01","modified_gmt":"2023-02-21T14:09:01","slug":"how-to-add-a-dynamic-lightbox-to-your-wordpress-website","status":"publish","type":"post","link":"https:\/\/elementor.com\/academy\/how-to-add-a-dynamic-lightbox-to-your-wordpress-website\/","title":{"rendered":"How to Add a Dynamic Lightbox"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-post\" data-elementor-id=\"2421\" class=\"elementor elementor-2421\" data-elementor-post-type=\"post\">\n\t\t\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-7515da4b elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"7515da4b\" data-element_type=\"section\" data-settings=\"{&quot;background_background&quot;:&quot;classic&quot;}\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-55982191\" data-id=\"55982191\" data-element_type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-1516759c elementor-widget elementor-widget-video\" data-id=\"1516759c\" data-element_type=\"widget\" data-settings=\"{&quot;youtube_url&quot;:&quot;https:\\\/\\\/www.youtube.com\\\/watch?v=80NLEjV2UNE&quot;,&quot;video_type&quot;:&quot;youtube&quot;,&quot;controls&quot;:&quot;yes&quot;}\" data-widget_type=\"video.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"elementor-wrapper elementor-open-inline\">\n\t\t\t<div class=\"elementor-video\"><\/div>\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-2100206d elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"2100206d\" data-element_type=\"section\" data-settings=\"{&quot;background_background&quot;:&quot;classic&quot;}\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-7d6fa40c\" data-id=\"7d6fa40c\" data-element_type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-5cfff876 elementor-tabs-view-horizontal elementor-widget elementor-widget-tabs\" data-id=\"5cfff876\" data-element_type=\"widget\" data-widget_type=\"tabs.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"elementor-tabs\">\n\t\t\t<div class=\"elementor-tabs-wrapper\" role=\"tablist\" >\n\t\t\t\t\t\t\t\t\t<div id=\"elementor-tab-title-1561\" class=\"elementor-tab-title elementor-tab-desktop-title\" aria-selected=\"true\" data-tab=\"1\" role=\"tab\" tabindex=\"0\" aria-controls=\"elementor-tab-content-1561\" aria-expanded=\"false\">Overview<\/div>\n\t\t\t\t\t\t\t\t\t<div id=\"elementor-tab-title-1562\" class=\"elementor-tab-title elementor-tab-desktop-title\" aria-selected=\"false\" data-tab=\"2\" role=\"tab\" tabindex=\"-1\" aria-controls=\"elementor-tab-content-1562\" aria-expanded=\"false\">Transcript<\/div>\n\t\t\t\t\t\t\t<\/div>\n\t\t\t<div class=\"elementor-tabs-content-wrapper\" role=\"tablist\" aria-orientation=\"vertical\">\n\t\t\t\t\t\t\t\t\t<div class=\"elementor-tab-title elementor-tab-mobile-title\" aria-selected=\"true\" data-tab=\"1\" role=\"tab\" tabindex=\"0\" aria-controls=\"elementor-tab-content-1561\" aria-expanded=\"false\">Overview<\/div>\n\t\t\t\t\t<div id=\"elementor-tab-content-1561\" class=\"elementor-tab-content elementor-clearfix\" data-tab=\"1\" role=\"tabpanel\" aria-labelledby=\"elementor-tab-title-1561\" tabindex=\"0\" hidden=\"false\"><p>Using Elementor, you can easily add a dynamic lightbox for videos and images on your WordPress website or blog. In this video, we&#8217;ll go over all the settings and options so you can set up your own dynamic lightbox in minutes.<\/p><\/div>\n\t\t\t\t\t\t\t\t\t<div class=\"elementor-tab-title elementor-tab-mobile-title\" aria-selected=\"false\" data-tab=\"2\" role=\"tab\" tabindex=\"-1\" aria-controls=\"elementor-tab-content-1562\" aria-expanded=\"false\">Transcript<\/div>\n\t\t\t\t\t<div id=\"elementor-tab-content-1562\" class=\"elementor-tab-content elementor-clearfix\" data-tab=\"2\" role=\"tabpanel\" aria-labelledby=\"elementor-tab-title-1562\" tabindex=\"0\" hidden=\"hidden\"><p>hi guys today I&#8217;ll show you how to use<br \/>the nifty dynamic media lightbox we can<br \/>use this lightbox for images and videos<br \/>in this example we&#8217;ll create a button<br \/>that opens a cool video in a lightbox<br \/>but this also works with headlines icons<br \/>or any other widget link so let&#8217;s walk<br \/>through all the features I&#8217;ve imported a<br \/>page template from our library<br \/>now let&#8217;s change the text on this button<br \/>here to check out my show real turn the<br \/>text here I&#8217;ll change it now and the<br \/>link click the dynamic icon and under<br \/>actions choose lightbox click on the<br \/>field again to open its settings next to<br \/>type you see two options video and image<br \/>click the video and paste in a link I&#8217;m<br \/>pasting a youtube link but you can also<br \/>use Vimeo or dailymotion if you like now<br \/>publish the page and check it out as you<br \/>can see your video pops up in a lightbox<br \/>cool now let&#8217;s test an image so click<br \/>inside the field again to open its<br \/>settings and choose image now just click<br \/>the plus and choose an image from your<br \/>library I&#8217;ll go with this one update the<br \/>page and check it out<br \/>clicking on the button opens the image<br \/>in a lightbox as well well there you<br \/>have it don&#8217;t forget to subscribe to our<br \/>YouTube channel to receive more videos<br \/>and tutorials see you later<\/p><\/div>\n\t\t\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Overview Transcript Overview Using Elementor, you can easily add a dynamic lightbox for videos and images on your WordPress website or blog. In this video, we\u2019ll go over all the settings and options so you can set up your own dynamic lightbox in minutes. Transcript hi guys today I\u2019ll show you how to use the [&hellip;]<\/p>\n","protected":false},"author":8,"featured_media":4126,"comment_status":"closed","ping_status":"open","sticky":false,"template":"elementor_theme","format":"standard","meta":{"footnotes":""},"categories":[5],"tags":[41],"class_list":["post-2421","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-dynamic-design","tag-guides-tutorials"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v26.8 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>How to Add a Dynamic Lightbox - Academy<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/elementor.com\/academy\/how-to-add-a-dynamic-lightbox-to-your-wordpress-website\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"How to Add a Dynamic Lightbox - Academy\" \/>\n<meta property=\"og:description\" content=\"Overview Transcript Overview Using Elementor, you can easily add a dynamic lightbox for videos and images on your WordPress website or blog. In this video, we\u2019ll go over all the settings and options so you can set up your own dynamic lightbox in minutes. Transcript hi guys today I\u2019ll show you how to use the [&hellip;]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/elementor.com\/academy\/how-to-add-a-dynamic-lightbox-to-your-wordpress-website\/\" \/>\n<meta property=\"og:site_name\" content=\"Academy\" \/>\n<meta property=\"article:published_time\" content=\"2021-06-22T06:23:59+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2023-02-21T14:09:01+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/elementor.com\/academy\/wp-content\/uploads\/2021\/06\/Add-a-Dynamic-Lightbox.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"1921\" \/>\n\t<meta property=\"og:image:height\" content=\"1080\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Hodaya\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Hodaya\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"2 minutes\" \/>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"How to Add a Dynamic Lightbox - Academy","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/elementor.com\/academy\/how-to-add-a-dynamic-lightbox-to-your-wordpress-website\/","og_locale":"en_US","og_type":"article","og_title":"How to Add a Dynamic Lightbox - Academy","og_description":"Overview Transcript Overview Using Elementor, you can easily add a dynamic lightbox for videos and images on your WordPress website or blog. In this video, we\u2019ll go over all the settings and options so you can set up your own dynamic lightbox in minutes. Transcript hi guys today I\u2019ll show you how to use the [&hellip;]","og_url":"https:\/\/elementor.com\/academy\/how-to-add-a-dynamic-lightbox-to-your-wordpress-website\/","og_site_name":"Academy","article_published_time":"2021-06-22T06:23:59+00:00","article_modified_time":"2023-02-21T14:09:01+00:00","og_image":[{"width":1921,"height":1080,"url":"https:\/\/elementor.com\/academy\/wp-content\/uploads\/2021\/06\/Add-a-Dynamic-Lightbox.jpg","type":"image\/jpeg"}],"author":"Hodaya","twitter_card":"summary_large_image","twitter_misc":{"Written by":"Hodaya","Est. reading time":"2 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/elementor.com\/academy\/how-to-add-a-dynamic-lightbox-to-your-wordpress-website\/#article","isPartOf":{"@id":"https:\/\/elementor.com\/academy\/how-to-add-a-dynamic-lightbox-to-your-wordpress-website\/"},"author":{"name":"Hodaya","@id":"https:\/\/elementor.com\/academy\/#\/schema\/person\/ff9f2661f3df53ae5842a9ad15853d1c"},"headline":"How to Add a Dynamic Lightbox","datePublished":"2021-06-22T06:23:59+00:00","dateModified":"2023-02-21T14:09:01+00:00","mainEntityOfPage":{"@id":"https:\/\/elementor.com\/academy\/how-to-add-a-dynamic-lightbox-to-your-wordpress-website\/"},"wordCount":309,"publisher":{"@id":"https:\/\/elementor.com\/academy\/#organization"},"image":{"@id":"https:\/\/elementor.com\/academy\/how-to-add-a-dynamic-lightbox-to-your-wordpress-website\/#primaryimage"},"thumbnailUrl":"https:\/\/elementor.com\/academy\/wp-content\/uploads\/2021\/06\/Add-a-Dynamic-Lightbox.jpg","keywords":["Guides and Tutorials"],"articleSection":["Dynamic Design"],"inLanguage":"en-US"},{"@type":"WebPage","@id":"https:\/\/elementor.com\/academy\/how-to-add-a-dynamic-lightbox-to-your-wordpress-website\/","url":"https:\/\/elementor.com\/academy\/how-to-add-a-dynamic-lightbox-to-your-wordpress-website\/","name":"How to Add a Dynamic Lightbox - Academy","isPartOf":{"@id":"https:\/\/elementor.com\/academy\/#website"},"primaryImageOfPage":{"@id":"https:\/\/elementor.com\/academy\/how-to-add-a-dynamic-lightbox-to-your-wordpress-website\/#primaryimage"},"image":{"@id":"https:\/\/elementor.com\/academy\/how-to-add-a-dynamic-lightbox-to-your-wordpress-website\/#primaryimage"},"thumbnailUrl":"https:\/\/elementor.com\/academy\/wp-content\/uploads\/2021\/06\/Add-a-Dynamic-Lightbox.jpg","datePublished":"2021-06-22T06:23:59+00:00","dateModified":"2023-02-21T14:09:01+00:00","breadcrumb":{"@id":"https:\/\/elementor.com\/academy\/how-to-add-a-dynamic-lightbox-to-your-wordpress-website\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/elementor.com\/academy\/how-to-add-a-dynamic-lightbox-to-your-wordpress-website\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/elementor.com\/academy\/how-to-add-a-dynamic-lightbox-to-your-wordpress-website\/#primaryimage","url":"https:\/\/elementor.com\/academy\/wp-content\/uploads\/2021\/06\/Add-a-Dynamic-Lightbox.jpg","contentUrl":"https:\/\/elementor.com\/academy\/wp-content\/uploads\/2021\/06\/Add-a-Dynamic-Lightbox.jpg","width":1921,"height":1080},{"@type":"BreadcrumbList","@id":"https:\/\/elementor.com\/academy\/how-to-add-a-dynamic-lightbox-to-your-wordpress-website\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Elementor","item":"https:\/\/elementor.com\/"},{"@type":"ListItem","position":2,"name":"Academy","item":"https:\/\/elementor.com\/academy\/"},{"@type":"ListItem","position":3,"name":"Dynamic Design","item":"https:\/\/elementor.com\/academy\/dynamic-design\/"},{"@type":"ListItem","position":4,"name":"How to Add a Dynamic Lightbox"}]},{"@type":"WebSite","@id":"https:\/\/elementor.com\/academy\/#website","url":"https:\/\/elementor.com\/academy\/","name":"Elementor Academy","description":"Page Builder for WordPress","publisher":{"@id":"https:\/\/elementor.com\/academy\/#organization"},"alternateName":"https:\/\/elementor.com\/academy\/wp-content\/uploads\/2021\/02\/Elementor-Logo.png","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/elementor.com\/academy\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/elementor.com\/academy\/#organization","name":"Elementor Academy","alternateName":"https:\/\/elementor.com\/academy\/wp-content\/uploads\/2021\/02\/Elementor-Logo.png","url":"https:\/\/elementor.com\/academy\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/elementor.com\/academy\/#\/schema\/logo\/image\/","url":"https:\/\/elementor.com\/academy\/wp-content\/uploads\/2022\/11\/e-logo.svg","contentUrl":"https:\/\/elementor.com\/academy\/wp-content\/uploads\/2022\/11\/e-logo.svg","width":490,"height":85,"caption":"Elementor Academy"},"image":{"@id":"https:\/\/elementor.com\/academy\/#\/schema\/logo\/image\/"}},{"@type":"Person","@id":"https:\/\/elementor.com\/academy\/#\/schema\/person\/ff9f2661f3df53ae5842a9ad15853d1c","name":"Hodaya","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/elementor.com\/academy\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/324f2d5cff44331b747d766f10e31793b1e29ad4f98f129d409760191f88ccc5?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/324f2d5cff44331b747d766f10e31793b1e29ad4f98f129d409760191f88ccc5?s=96&d=mm&r=g","caption":"Hodaya"},"url":"https:\/\/elementor.com\/academy\/author\/hodaya\/"}]}},"_links":{"self":[{"href":"https:\/\/elementor.com\/academy\/wp-json\/wp\/v2\/posts\/2421","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/elementor.com\/academy\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/elementor.com\/academy\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/elementor.com\/academy\/wp-json\/wp\/v2\/users\/8"}],"replies":[{"embeddable":true,"href":"https:\/\/elementor.com\/academy\/wp-json\/wp\/v2\/comments?post=2421"}],"version-history":[{"count":1,"href":"https:\/\/elementor.com\/academy\/wp-json\/wp\/v2\/posts\/2421\/revisions"}],"predecessor-version":[{"id":9468,"href":"https:\/\/elementor.com\/academy\/wp-json\/wp\/v2\/posts\/2421\/revisions\/9468"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/elementor.com\/academy\/wp-json\/wp\/v2\/media\/4126"}],"wp:attachment":[{"href":"https:\/\/elementor.com\/academy\/wp-json\/wp\/v2\/media?parent=2421"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/elementor.com\/academy\/wp-json\/wp\/v2\/categories?post=2421"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/elementor.com\/academy\/wp-json\/wp\/v2\/tags?post=2421"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}