{"id":120067,"date":"2023-06-16T13:16:22","date_gmt":"2023-06-16T07:46:22","guid":{"rendered":"https:\/\/etemplates.wdesignkit.com\/theplusaddons\/?post_type=documents&#038;p=120067"},"modified":"2023-06-16T17:41:09","modified_gmt":"2023-06-16T12:11:09","slug":"add-3d-tilt-effect-to-elementor-gallery-listing","status":"publish","type":"documents","link":"https:\/\/etemplates.wdesignkit.com\/theplusaddons\/docs\/add-3d-tilt-effect-to-elementor-gallery-listing\/","title":{"rendered":"How to Add 3D Tilt Effect to Elementor Gallery Listing?"},"content":{"rendered":"\n<p>Want to add a stunning 3D tilt effect to your Elementor image gallery listing? With the 3D tilt effect, you can make your images come to life and create an engaging visual experience for your website visitors.<\/p>\n\n\n\n<p>With the Gallery Listing widget from The Plus Addons for Elementor, you can easily add a 3d tilt parallax effect to your gallery images.<\/p>\n\n\n\n<p><em>To check the complete feature overview documentation of The Plus Addons for Elementor Gallery Listing widget, <a href=\"\/docs\/gallery-listing-widget-settings-overview\/\" target=\"_blank\" rel=\"noreferrer noopener\">click here<\/a>.<\/em><\/p>\n\n\n\n<p><strong><em>Requirement&nbsp; &#8211; This widget is a part of The Plus Addons for Elementor, make sure its installed &amp; activated to enjoy all its powers.<\/em><\/strong><\/p>\n\n\n\n<div class=\"wp-block-buttons is-content-justification-center is-layout-flex wp-container-core-buttons-is-layout-a89b3969 wp-block-buttons-is-layout-flex\">\n<div class=\"wp-block-button has-custom-width wp-block-button__width-75 is-style-fill\"><a class=\"wp-block-button__link has-nxt-global-color-8-color has-nxt-global-color-1-background-color has-text-color has-background wp-element-button\" href=\"https:\/\/etemplates.wdesignkit.com\/theplusaddons\/pluslisting\/#image-gallery-wgts?utm_source=tpae&amp;utm_medium=docs&amp;utm_campaign=text\" style=\"border-radius:5px\" target=\"_blank\" rel=\"noreferrer noopener\">LIVE WIDGET LINK<\/a><\/div>\n<\/div>\n\n\n\n<p><\/p>\n\n\n\n<p>To do this, add the Gallery Listing widget on the page, and select the appropriate listing style, layout and source from the <strong>Layout<\/strong> and <strong>Content<\/strong> tab, respectively.<\/p>\n\n\n\n<p>Once you\u2019ve added images to your gallery, go to <strong>Style<\/strong> &gt; <strong>Extra Options<\/strong> and turn on the <strong>Tilt 3D Parallax<\/strong> toggle.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img fetchpriority=\"high\" decoding=\"async\" width=\"332\" height=\"797\" src=\"https:\/\/etemplates.wdesignkit.com\/wp-content\/uploads\/sites\/55\/2023\/06\/gallery-listing-tilt-3d-parallax.png\" alt=\"gallery listing tilt 3d parallax\" class=\"wp-image-120068\" srcset=\"https:\/\/etemplates.wdesignkit.com\/theplusaddons\/wp-content\/uploads\/sites\/55\/2023\/06\/gallery-listing-tilt-3d-parallax.png 332w, https:\/\/etemplates.wdesignkit.com\/theplusaddons\/wp-content\/uploads\/sites\/55\/2023\/06\/gallery-listing-tilt-3d-parallax-125x300.png 125w\" sizes=\"(max-width: 332px) 100vw, 332px\" \/><\/figure>\n\n\n\n<p>You can manage the effect from the <strong>Tilt Options<\/strong>.<\/p>\n\n\n\n<p>Now if you hover over the image, you\u2019ll see a 3d tilt parallax effect.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" width=\"1254\" height=\"540\" src=\"https:\/\/etemplates.wdesignkit.com\/wp-content\/uploads\/sites\/55\/2023\/06\/gallery-listing-tilt-3d-parallax-demo.gif\" alt=\"gallery listing tilt 3d parallax demo\" class=\"wp-image-120069\"\/><\/figure>\n\n\n\n<p>Also, read <a href=\"https:\/\/etemplates.wdesignkit.com\/theplusaddons\/docs\/add-parallax-effect-to-elementor-gallery-listing\/\" target=\"_blank\" rel=\"noreferrer noopener\">How to Add Parallax Effect to Elementor Gallery Listing<\/a>.<\/p>\n","protected":false},"author":25,"featured_media":120070,"parent":0,"comment_status":"open","ping_status":"open","template":"","format":"standard","docs":[563,526],"class_list":["post-120067","documents","type-documents","status-publish","format-standard","has-post-thumbnail","hentry","docs-gallery-listing","docs-plus-listings"],"acf":[],"_links":{"self":[{"href":"https:\/\/etemplates.wdesignkit.com\/theplusaddons\/wp-json\/wp\/v2\/documents\/120067","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/etemplates.wdesignkit.com\/theplusaddons\/wp-json\/wp\/v2\/documents"}],"about":[{"href":"https:\/\/etemplates.wdesignkit.com\/theplusaddons\/wp-json\/wp\/v2\/types\/documents"}],"author":[{"embeddable":true,"href":"https:\/\/etemplates.wdesignkit.com\/theplusaddons\/wp-json\/wp\/v2\/users\/25"}],"replies":[{"embeddable":true,"href":"https:\/\/etemplates.wdesignkit.com\/theplusaddons\/wp-json\/wp\/v2\/comments?post=120067"}],"version-history":[{"count":0,"href":"https:\/\/etemplates.wdesignkit.com\/theplusaddons\/wp-json\/wp\/v2\/documents\/120067\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/etemplates.wdesignkit.com\/theplusaddons\/wp-json\/wp\/v2\/media\/120070"}],"wp:attachment":[{"href":"https:\/\/etemplates.wdesignkit.com\/theplusaddons\/wp-json\/wp\/v2\/media?parent=120067"}],"wp:term":[{"taxonomy":"docs","embeddable":true,"href":"https:\/\/etemplates.wdesignkit.com\/theplusaddons\/wp-json\/wp\/v2\/docs?post=120067"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}