{"id":151459,"date":"2024-05-10T12:08:43","date_gmt":"2024-05-10T06:38:43","guid":{"rendered":"https:\/\/theplusaddons.com\/?post_type=documents&#038;p=151459"},"modified":"2026-04-09T16:51:40","modified_gmt":"2026-04-09T11:21:40","slug":"creative-image-widget","status":"publish","type":"documents","link":"https:\/\/theplusaddons.com\/docs\/creative-image-widget\/","title":{"rendered":"Creative Image Widget: Settings Overview"},"content":{"rendered":"\n<p>Do you want to add some beautiful effects to your image in Elementor? With the Creative Image widget from The Plus Addons for Elementor, you can add some creative effects to your images.<\/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:\/\/theplusaddons.com\/elementor-widget\/creative-images-for-elementor\/\" 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<h2 class=\"wp-block-heading\">Required Setup<\/h2>\n\n\n\n<ul class=\"wp-block-list\">\n<li><a href=\"http:\/\/wordpress.org\/plugins\/elementor\/\" target=\"_blank\" rel=\"noreferrer noopener nofollow\">Elementor FREE Plugin<\/a> installed &amp; activated.<\/li>\n\n\n\n<li>You need to have <a href=\"https:\/\/wordpress.org\/plugins\/the-plus-addons-for-elementor-page-builder\/\" target=\"_blank\" rel=\"noreferrer noopener nofollow\">The Plus Addons for Elementor<\/a> plugin installed and activated.<\/li>\n\n\n\n<li>This is a Premium widget, and you need the <a href=\"https:\/\/theplusaddons.com\/pricing\/\/?utm_source=tpae&amp;utm_medium=docs&amp;utm_campaign=text\" target=\"_blank\" rel=\"noreferrer noopener\">PRO version of The Plus Addons for Elementor.<\/a><\/li>\n\n\n\n<li>Make sure the Creative Image widget is activated, to verify this visit The Plus Addons \u2192 Widgets \u2192 and Search for Creative Image and activate.<\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\">Learn via Video Tutorial:<\/h2>\n\n\n\n<figure class=\"wp-block-embed is-type-video is-provider-youtube wp-block-embed-youtube wp-embed-aspect-16-9 wp-has-aspect-ratio\"><div class=\"wp-block-embed__wrapper\">\n<iframe loading=\"lazy\" title=\"How to setup Creative Image Showcase using Widget for The Plus Addons for Elementor?\" width=\"1200\" height=\"675\" src=\"https:\/\/www.youtube.com\/embed\/NAxYbZgGwmU?feature=oembed\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\" referrerpolicy=\"strict-origin-when-cross-origin\" allowfullscreen><\/iframe>\n<\/div><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\">How to Activate the Creative Image Widget?<\/h2>\n\n\n\n<p>Go to&nbsp;<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>The Plus Addons <\/strong>\u2192<strong> Widgets&nbsp;<\/strong><\/li>\n\n\n\n<li><strong>Search <\/strong>the widget name<strong> <\/strong>and<strong> turn on the toggle.<\/strong><\/li>\n<\/ul>\n\n\n\n<p><\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"1901\" height=\"655\" src=\"https:\/\/theplusaddons.com\/wp-content\/uploads\/2024\/05\/creative-image-1.png\" alt=\"from\" class=\"wp-image-178931\" title=\"\" srcset=\"https:\/\/theplusaddons.com\/wp-content\/uploads\/2024\/05\/creative-image-1.png 1901w, https:\/\/theplusaddons.com\/wp-content\/uploads\/2024\/05\/creative-image-1-300x103.png 300w, https:\/\/theplusaddons.com\/wp-content\/uploads\/2024\/05\/creative-image-1-1024x353.png 1024w, https:\/\/theplusaddons.com\/wp-content\/uploads\/2024\/05\/creative-image-1-768x265.png 768w, https:\/\/theplusaddons.com\/wp-content\/uploads\/2024\/05\/creative-image-1-1536x529.png 1536w, https:\/\/theplusaddons.com\/wp-content\/uploads\/2024\/05\/creative-image-1-600x207.png 600w\" sizes=\"auto, (max-width: 1901px) 100vw, 1901px\" \/><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\">Key Features<\/h2>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Scroll Reveal Effect<\/strong> &#8211; You can easily <a href=\"https:\/\/theplusaddons.com\/docs\/\/add-image-reveal-animation-on-scroll-in-elementor\/\" target=\"_blank\" rel=\"noreferrer noopener\">add a scroll reveal effect to an image<\/a>.<\/li>\n\n\n\n<li><strong>Image Mask<\/strong> &#8211; You can easily <a href=\"https:\/\/theplusaddons.com\/docs\/\/mask-an-image-in-elementor\/\" target=\"_blank\" rel=\"noreferrer noopener\">add a mask to an image<\/a>.<\/li>\n\n\n\n<li><strong>Multiple Effects<\/strong> &#8211; You can add multiple effects like parallax effect, tooltip, continuous animation and more on images.<\/li>\n\n\n\n<li>Image Animation &#8211; You can easily <a href=\"https:\/\/theplusaddons.com\/docs\/add-image-animation-in-the-creative-image-widget\/\" target=\"_blank\" rel=\"noreferrer noopener\">add animation to the image<\/a>.<\/li>\n<\/ul>\n\n\n\n<p><\/p>\n\n\n\n<h2 class=\"wp-block-heading\">How to Use the Creative Image Widget?<\/h2>\n\n\n\n<p>Add the Creative Image widget to the page.&nbsp;<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Content<\/h3>\n\n\n\n<blockquote class=\"wp-block-quote is-layout-flow wp-block-quote-is-layout-flow\">\n<p><em>Note: By clicking on the&nbsp;<strong>Import Presets<\/strong> button, you can import a ready-made design and customize it as per your requirements.<\/em><\/p>\n<\/blockquote>\n\n\n\n<p><\/p>\n\n\n\n<p>From the <strong>Image Style<\/strong> dropdown, you have to select the image style. Here you\u2019ll find two options &#8211;&nbsp;<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Creative Image<\/strong> &#8211; To add normal images.<\/li>\n\n\n\n<li><strong>Scroll Reveal Image<\/strong> &#8211; To add images with a reveal effect on scroll.<\/li>\n<\/ul>\n\n\n\n<p><\/p>\n\n\n\n<p>Select the option as per your requirements, let\u2019s select Creative Image here.<\/p>\n\n\n\n<div class=\"wp-block-group is-layout-constrained wp-container-core-group-is-layout-046399c3 wp-block-group-is-layout-constrained\">\n<figure class=\"wp-block-video\"><video height=\"830\" style=\"aspect-ratio: 330 \/ 830;\" width=\"330\" controls src=\"https:\/\/theplusaddons.com\/wp-content\/uploads\/2024\/05\/creative-image-content-new-1.mp4\"><\/video><\/figure>\n<\/div>\n\n\n\n<p><\/p>\n\n\n\n<p>In the <strong>Choose Image<\/strong> section, you have to add your image.<\/p>\n\n\n\n<p>Then, from the <strong>Image Resolution<\/strong> dropdown, you can set the image size.<\/p>\n\n\n\n<p>You can align the image for responsive devices from the <strong>Image Alignment<\/strong> section.<\/p>\n\n\n\n<p>Then, from the <strong>Link to<\/strong> field, you can add a custom link to the image.\u00a0<\/p>\n\n\n\n<p>You set the image width for different devices from the <strong>Max Width Image<\/strong> section.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Image Animation<\/h3>\n\n\n\n<p>From here, you can <a href=\"https:\/\/theplusaddons.com\/docs\/add-image-animation-in-the-creative-image-widget\/\" target=\"_blank\" rel=\"noreferrer noopener\">add animation to the image<\/a>.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"331\" height=\"346\" src=\"https:\/\/theplusaddons.com\/wp-content\/uploads\/2024\/05\/creative-image-image-animation.png\" alt=\"from\" class=\"wp-image-227867\" title=\"\" srcset=\"https:\/\/theplusaddons.com\/wp-content\/uploads\/2024\/05\/creative-image-image-animation.png 331w, https:\/\/theplusaddons.com\/wp-content\/uploads\/2024\/05\/creative-image-image-animation-287x300.png 287w\" sizes=\"auto, (max-width: 331px) 100vw, 331px\" \/><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\">How to Style the Creative Image Widget?<\/h2>\n\n\n\n<p>You can add different effects to the Creative Image widget from the Style tab.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"299\" height=\"1043\" src=\"https:\/\/theplusaddons.com\/wp-content\/uploads\/2024\/05\/creative-image-style.png\" alt=\"from\" class=\"wp-image-151466\" title=\"\" srcset=\"https:\/\/theplusaddons.com\/wp-content\/uploads\/2024\/05\/creative-image-style.png 299w, https:\/\/theplusaddons.com\/wp-content\/uploads\/2024\/05\/creative-image-style-86x300.png 86w\" sizes=\"auto, (max-width: 299px) 100vw, 299px\" \/><\/figure>\n\n\n\n<p><strong>Style Image<\/strong> &#8211; From here, you can add different effects to the image.<\/p>\n\n\n\n<p><\/p>\n\n\n\n<blockquote class=\"wp-block-quote is-layout-flow wp-block-quote-is-layout-flow\">\n<p><em><strong>Note<\/strong>: Most of these options work similarly to the global options available for the other widgets of The Plus Addons for Elementor.<\/em><\/p>\n<\/blockquote>\n\n\n\n<p><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Scroll Image<\/strong> &#8211; From here, you can <a href=\"https:\/\/theplusaddons.com\/docs\/add-a-scroll-on-hover-to-an-image-in-elementor\/\" target=\"_blank\" rel=\"noreferrer noopener\">add a scrolling effect to an image on hover.<\/a><\/li>\n\n\n\n<li><strong>Mask Image Shape<\/strong> &#8211; You\u2019ll see this option only when Creative Image is selected as the image type. From here, you can <a href=\"https:\/\/theplusaddons.com\/docs\/\/mask-an-image-in-elementor\/\" target=\"_blank\" rel=\"noreferrer noopener\">add an image mask to the image.<\/a><\/li>\n\n\n\n<li><strong>Super Parallax<\/strong> &#8211; You\u2019ll see this option only when Creative Image is selected as the image type. From here, you can <a href=\"https:\/\/theplusaddons.com\/docs\/\/add-a-parallax-image-in-elementor\/\" target=\"_blank\" rel=\"noreferrer noopener\">add a parallax effect to an image on scroll.<\/a><\/li>\n\n\n\n<li><strong>Mouse Move Parallax<\/strong> &#8211; From here, you can <a href=\"https:\/\/theplusaddons.com\/docs\/mouse-cursor-parallax-effects-in-elementor\/\" target=\"_blank\" rel=\"noreferrer noopener\">add a mouse move parallax effect to an image<\/a>.<\/li>\n\n\n\n<li><strong>Magic Scroll<\/strong> &#8211; From here, you can <a href=\"https:\/\/theplusaddons.com\/docs\/magic-scroll-effect-in-elementor\/\" target=\"_blank\" rel=\"noreferrer noopener\">add a scrolling effect to an image<\/a>.<\/li>\n\n\n\n<li><strong>Tooltip<\/strong> &#8211; From here, you can <a href=\"https:\/\/theplusaddons.com\/docs\/global-tooltips-settings-overview\/\" target=\"_blank\" rel=\"noreferrer noopener\">add a tooltip to an image<\/a>.<\/li>\n\n\n\n<li><strong>Tilt 3D Parallax<\/strong> &#8211; From here, you can <a href=\"https:\/\/theplusaddons.com\/docs\/\/3d-tilt-parallax-effects-in-elementor\/\" target=\"_blank\" rel=\"noreferrer noopener\">add a tilt 3d parallax effect to an image<\/a>.<\/li>\n\n\n\n<li><strong>Overlay Special Effect<\/strong> &#8211; From here, you can <a href=\"https:\/\/theplusaddons.com\/docs\/\/swiper-color-overlay-effects-in-elementor\/\" target=\"_blank\" rel=\"noreferrer noopener\">add an overlay effect to an image<\/a>.<\/li>\n\n\n\n<li><strong>Continuous Animation<\/strong> &#8211; From here, you can <a href=\"https:\/\/theplusaddons.com\/docs\/\/global-continuous-animation-widget-in-elementor\/\" target=\"_blank\" rel=\"noreferrer noopener\">add different continuous animation<\/a> effects like pulse, floating, tossing, rotating and more to the image.<\/li>\n\n\n\n<li><strong>Border<\/strong> &#8211; From here, you can add different types of borders to an image.<\/li>\n<\/ul>\n\n\n\n<p><\/p>\n\n\n\n<p>From the Normal\/Hover tab you can add different CSS effects to the Image for normal and hover states.&nbsp;<\/p>\n\n\n\n<p>In the <strong>Normal<\/strong> tab, you\u2019ll find the following options &#8211;&nbsp;<\/p>\n\n\n\n<p><strong>Border Radius<\/strong> &#8211; From here, you add a border radius to the image.<\/p>\n\n\n\n<p><strong>Box Shadow<\/strong> &#8211; From here, you add a box shadow to the image.<\/p>\n\n\n\n<p><strong>CSS Filters<\/strong> &#8211; From here, you add different CSS filters to the image.<\/p>\n\n\n\n<p>Then in the <strong>Hover<\/strong> tab, you\u2019ll find the same options for the hover state.<\/p>\n\n\n\n<p>From the <strong>Responsive Visibility<\/strong> toggle, you can select to show or hide the image for responsive devices separately.<\/p>\n\n\n\n<p><strong>On Scroll View Animation<\/strong> &#8211;&nbsp; This is our global extension available for all our widgets, this adds scrolling animation as the widget comes in the viewport. You can learn more about this from here.<\/p>\n\n\n\n<p><a style=\"box-sizing: border-box; scrollbar-width: thin; background-color: rgb(255, 255, 255); color: rgb(128, 114, 252); transition-duration: 0.3s; transition-timing-function: linear; transition-property: all; box-shadow: none; font-family: epilogue, sans-serif; font-size: 16px; white-space-collapse: collapse;\" href=\"https:\/\/theplusaddons.com\/docs\/\/on-scroll-view-animation\/\">Learn more a<\/a><a style=\"box-sizing: border-box; scrollbar-width: thin; background-color: rgb(255, 255, 255); color: rgb(128, 114, 252); transition-duration: 0.3s; transition-timing-function: linear; transition-property: all; box-shadow: none; font-family: epilogue, sans-serif; font-size: 16px; white-space-collapse: collapse;\" href=\"https:\/\/theplusaddons.com\/docs\/\/on-scroll-view-animation\/\" target=\"_blank\" rel=\"noreferrer noopener\">bout&nbsp;On Scroll View Animation<\/a><\/p>\n\n\n\n<p>Advanced options remain common for all our widgets, you can explore all its options from here.<\/p>\n\n\n\n<p><a href=\"https:\/\/docs.posimyth.com\/tpae\/advanced-tab\/?_gl=1*1ddxxa0*_ga*NDA4ODUyMjYwLjE3MDEyMzIxNzE.*_ga_WXCC3REEFQ*MTcxNjQ1OTY0My40MzcuMS4xNzE2NDU5NzMyLjYwLjAuMA..\" target=\"_blank\" rel=\"noreferrer noopener nofollow\">View Advanced Tab Tutorial<\/a><\/p>\n","protected":false},"author":2115,"featured_media":153435,"parent":0,"comment_status":"open","ping_status":"closed","template":"","format":"standard","docs":[659,527],"class_list":["post-151459","documents","type-documents","status-publish","format-standard","has-post-thumbnail","hentry","docs-creative-image","docs-plus-widgets"],"acf":[],"_links":{"self":[{"href":"https:\/\/theplusaddons.com\/wp-json\/wp\/v2\/documents\/151459","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/theplusaddons.com\/wp-json\/wp\/v2\/documents"}],"about":[{"href":"https:\/\/theplusaddons.com\/wp-json\/wp\/v2\/types\/documents"}],"author":[{"embeddable":true,"href":"https:\/\/theplusaddons.com\/wp-json\/wp\/v2\/users\/2115"}],"replies":[{"embeddable":true,"href":"https:\/\/theplusaddons.com\/wp-json\/wp\/v2\/comments?post=151459"}],"version-history":[{"count":0,"href":"https:\/\/theplusaddons.com\/wp-json\/wp\/v2\/documents\/151459\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/theplusaddons.com\/wp-json\/wp\/v2\/media\/153435"}],"wp:attachment":[{"href":"https:\/\/theplusaddons.com\/wp-json\/wp\/v2\/media?parent=151459"}],"wp:term":[{"taxonomy":"docs","embeddable":true,"href":"https:\/\/theplusaddons.com\/wp-json\/wp\/v2\/docs?post=151459"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}