{"id":2048,"date":"2024-03-20T06:45:00","date_gmt":"2024-03-20T06:45:00","guid":{"rendered":"https:\/\/elementor.wpxpro.com\/?p=1653"},"modified":"2026-03-13T09:04:10","modified_gmt":"2026-03-13T09:04:10","slug":"elementor-image-scroll-widget","status":"publish","type":"post","link":"https:\/\/newelementor.wpxpro.com\/index.php\/2024\/03\/20\/elementor-image-scroll-widget\/","title":{"rendered":"Create a Scrolling Image Using Elementor Image Scroll Widget"},"content":{"rendered":"\n<div class=\"wp-block-rank-math-toc-block\" id=\"rank-math-toc\"><h2>Table of Contents<\/h2><nav><ul><li><a href=\"\/#what-is-an-elementor-image-scroll-widget\">What is an Elementor image scroll widget?<\/a><\/li><li><a href=\"\/#how-to-create-a-scrolling-image-effect-within-a-mockup-using-elementor\">How To Create a Scrolling Image Effect Within a Mockup Using Elementor?<\/a><ul><li><a href=\"\/#step-1-install-and-activate-plugins\">Step 1: Install and Activate Plugins:<\/a><\/li><li><a href=\"\/#step-2-create-or-edit-a-page-with-elementor\">Step 2: Create or Edit a Page with Elementor:<\/a><\/li><li><a href=\"\/#step-3-add-a-section-and-choose-mockup-images\">Step 3: Add a Section and Choose Mockup Images:<\/a><\/li><li><a href=\"\/#step-4-configure-the-image-scroll-widget\">Step 4: Configure the Image Scroll Widget<\/a><\/li><\/ul><\/li><li><a href=\"\/#conclusion\">Conclusion<\/a><ul><\/ul><\/li><li><a href=\"\/#fa-qs\">FAQs<\/a><ul><li><a href=\"\/#how-does-the-image-scroll-widget-work\">How does the Image Scroll Widget work?<\/a><\/li><li><a href=\"\/#do-i-need-elementor-pro-to-use-the-image-scroll-widget\">Do I need Elementor Pro to use the Image Scroll Widget?<\/a><\/li><li><a href=\"\/#where-can-the-image-scroll-widget-be-used\">Where can the Image Scroll Widget be used?<\/a><\/li><li><a href=\"\/#does-the-image-scroll-widget-have-space-saving-benefits\">Does the Image Scroll Widget have space-saving benefits?<\/a><\/li><\/ul><\/li><\/ul><\/nav><\/div>\n\n\n\n<p>If you ever want to showcase your creative designs, templates, or portfolios in an image scroll, this blog is for you.&nbsp;Using the Xpro <a href=\"https:\/\/newelementor.wpxpro.com\/widgets\/image-scroller\/\">free Elementor image scroll widget<\/a>, you can create a long portfolio image scroll within Mockup with just a few clicks.&nbsp;<\/p>\n\n\n\n<p>Elementor Image scroll can allow you to showcase your long web design screenshots, templates, and portfolios within a mockup.&nbsp;<\/p>\n\n\n\n<p>In this blog post, I\u2019ll show you how to create a long image scrolling effect in Elementor without coding.&nbsp;<\/p>\n\n\n\n<p>Let\u2019s get started.&nbsp;<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"what-is-an-elementor-image-scroll-widget\"><strong>What is an Elementor image scroll widget?<\/strong><\/h2>\n\n\n\n<p>Elementor Image scroll allows you to display a portion of an image while the rest is hidden and accessible through scrolling. It&#8217;s an amazing way to present large images within a limited space, often used on websites.<\/p>\n\n\n\n<p>This widget allows users to add an image in different directions (horizontal\/vertical) to see different parts of a large image. It works with two different trigger types: one when the user hovers over the image and the other when the user scrolls up or down with the mouse.&nbsp;<\/p>\n\n\n\n<p>Moreover, this widget allows you to present long images, such as web page screenshots, panorama shots, and more, on your website. The image scroll widget is popular among various sectors, including fashion, businesses, and online stores.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"how-to-create-a-scrolling-image-effect-within-a-mockup-using-elementor\"><strong>How To Create a Scrolling Image Effect Within a Mockup Using Elementor?<\/strong><\/h2>\n\n\n\n<p>To create an image scroll on website, make sure you have Elementor and the free Xpro <a href=\"https:\/\/newelementor.wpxpro.com\/free-elementor-addon\/\">Elementor Addons<\/a> installed and activated.<\/p>\n\n\n\n<p><strong><em>Note:<\/em><\/strong> If these plugins are already installed, proceed to the next step. If not, let&#8217;s start with step 1.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"step-1-install-and-activate-plugins\"><strong>Step 1: Install and Activate Plugins:<\/strong><\/h3>\n\n\n\n<p>The first step is to download the <a href=\"http:\/\/elementor.com\" target=\"_blank\" rel=\"noopener\">Elementor<\/a> page builder and Xpro <a href=\"https:\/\/newelementor.wpxpro.com\/\">elementor addons<\/a>. You can easily download both of these plugins from the WordPress directory. Here\u2019s a quick tutorial video to install and activate these plugins:<\/p>\n\n\n\n<figure class=\"wp-block-video\"><video autoplay loop muted src=\"https:\/\/newelementor.wpxpro.com\/wp-content\/uploads\/2024\/03\/Install-Activate.mp4\"><\/video><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"step-2-create-or-edit-a-page-with-elementor\"><strong>Step 2: Create or Edit a Page with Elementor:<\/strong><\/h3>\n\n\n\n<p>After installing and activating the plugins, go to the page where you want to add a scrolling image or create a new page.&nbsp;<\/p>\n\n\n\n<p>To create a new page, navigate to the WordPress dashboard and click on \u201cPages &gt; Add New Page.\u201d If you want to edit an existing page, then go to the pages section and click on &#8220;Edit with Elementor.\u201d<\/p>\n\n\n\n<figure class=\"wp-block-video\"><video autoplay loop muted src=\"https:\/\/newelementor.wpxpro.com\/wp-content\/uploads\/2024\/03\/20240314_115918.mp4\"><\/video><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"step-3-add-a-section-and-choose-mockup-images\"><strong>Step 3: Add a Section and Choose Mockup Images:<\/strong><\/h3>\n\n\n\n<p>In the Elementor editor, we\u2019ll first add a new section where we want to create a scrolling image.<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>To add a new section, navigate to \u2018+\u201d icon in the center of the Elementor editor page, as you can see in the screenshot below:&nbsp;<\/li>\n<\/ul>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img decoding=\"async\" src=\"https:\/\/newelementor.wpxpro.com\/wp-content\/uploads\/2024\/03\/RegionSelectorWindow.png\" alt=\"\" class=\"wp-image-71309\"\/><\/figure>\n<\/div>\n\n\n<ul class=\"wp-block-list\">\n<li>Choose the appropriate column structure for your section according to your requirements. In my case, I\u2019ll select the three-column section for image scrolling.<\/li>\n<\/ul>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full is-resized\"><img decoding=\"async\" src=\"https:\/\/newelementor.wpxpro.com\/wp-content\/uploads\/2024\/03\/pasted-image-0-4.png\" alt=\"\" class=\"wp-image-71310\" style=\"width:837px;height:auto\"\/><\/figure>\n<\/div>\n\n\n<ul class=\"wp-block-list\">\n<li>First, I\u2019ll modify the alignment of the columns, as you can see in the reference video.<\/li>\n<\/ul>\n\n\n\n<figure class=\"wp-block-video\"><video autoplay loop muted src=\"https:\/\/newelementor.wpxpro.com\/wp-content\/uploads\/2024\/03\/20240314_120533.mp4\"><\/video><\/figure>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Once the section is in place, go to the Elementor widget panel and find the <strong>&#8220;Image widget.\u201d<\/strong><\/li>\n\n\n\n<li>Drag and drop the image widget into the selected columns of the newly created section. <\/li>\n\n\n\n<li>Add the mockup image of the desktop from the media library. You can add any mockup image according to your requirements.&nbsp;<\/li>\n<\/ul>\n\n\n\n<p>Here you can see a tutorial video for a visual guide on how I\u2019ve performed these steps effectively.<\/p>\n\n\n\n<figure class=\"wp-block-video\"><video autoplay loop muted src=\"https:\/\/newelementor.wpxpro.com\/wp-content\/uploads\/2024\/03\/20240314_140325.mp4\"><\/video><\/figure>\n\n\n\n<p>Done? Are you with me so far?<\/p>\n\n\n\n<p>Ok, let\u2019s move on to the image scroll widget.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"step-4-configure-the-image-scroll-widget\"><strong>Step 4: Configure the Image Scroll Widget<\/strong><\/h3>\n\n\n\n<p>Now let\u2019s move on to configuring the image scroll widget.&nbsp;<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>First, drag and drop the Xpro Elementor image scroll widget from the widget panel into the same section where we placed the image widget.<\/li>\n\n\n\n<li>We\u2019ll upload our long image to use in the mockup, within the image scroll widget.<\/li>\n\n\n\n<li>Once the image has been uploaded, you can customize it to set the image direction, trigger types, and scrolling speed.<\/li>\n\n\n\n<li>Moreover, you can apply the image masking, add a text badge, and overlay icon (Choose icon from the icon library). You can also insert a link to the complete image box.<\/li>\n<\/ul>\n\n\n\n<figure class=\"wp-block-video\"><video autoplay loop muted src=\"https:\/\/newelementor.wpxpro.com\/wp-content\/uploads\/2024\/03\/20240315_094749.mp4\"><\/video><\/figure>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Now, you can customize the styling (blend mode, CSS filters, height, opacity, and more) from the styling tab within the image scroll widget according to your web design.&nbsp;<\/li>\n<\/ul>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img decoding=\"async\" src=\"https:\/\/newelementor.wpxpro.com\/wp-content\/uploads\/2024\/03\/Image-Scroller.png\" alt=\"\" class=\"wp-image-71314\"\/><\/figure>\n<\/div>\n\n\n<ul class=\"wp-block-list\">\n<li>After configuring the image scroll widget, go to the advanced settings, where we&#8217;ll set the position of the image scroll widget to <strong>&#8216;absolute\u2019 <\/strong>and adjust it further in the video tutorial.&nbsp;<\/li>\n<\/ul>\n\n\n\n<blockquote class=\"wp-block-quote is-layout-flow wp-block-quote-is-layout-flow\">\n<p><strong>Why use absolute position?<\/strong> Using an absolute position for a widget in web design gives you complete control over where it appears on a page. When a widget is set to absolute position, it is positioned relative to its nearest positioned widget, which means it can be easily placed on the page.<\/p>\n<\/blockquote>\n\n\n\n<p>Here&#8217;s a quick tutorial on how to set the position and adjust the image scroll in a desktop mockup.&nbsp;<\/p>\n\n\n\n<figure class=\"wp-block-video\"><video autoplay loop muted src=\"https:\/\/newelementor.wpxpro.com\/wp-content\/uploads\/2024\/03\/20240315_095551.mp4\"><\/video><\/figure>\n\n\n\n<p>That\u2019s it!&nbsp;<\/p>\n\n\n\n<p>Have you completed the steps?<strong> <\/strong>Ok, now update your settings and preview the page.&nbsp;<\/p>\n\n\n\n<p>There, we&#8217;ve got it! <\/p>\n\n\n\n<p>In the same way as the first mockup adjustment, I have adjusted the other two mockups to see how they look.<\/p>\n\n\n\n<figure class=\"wp-block-video\"><video autoplay loop muted src=\"https:\/\/newelementor.wpxpro.com\/wp-content\/uploads\/2024\/03\/20240315_100632.mp4\"><\/video><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"conclusion\"><strong>Conclusion<\/strong><\/h2>\n\n\n\n<p>The Elementor image scroll widget is a great plugin for your website. It is easy to use and has many features that you can adjust according to your website requirements.&nbsp; You can get the <a href=\"https:\/\/newelementor.wpxpro.com\/widgets\/image-scroller\/\">Image Scroll widget free<\/a> from the free Xpro <a href=\"https:\/\/newelementor.wpxpro.com\/free-elementor-addon\/\">elementor addons<\/a>. The addons include 50+ free <a href=\"https:\/\/newelementor.wpxpro.com\/widgets\/\">Elementor widgets<\/a>, 12+ free <a href=\"https:\/\/newelementor.wpxpro.com\/extensions\/\">Elementor extensions<\/a>, pre-designed themes, and <a href=\"https:\/\/newelementor.wpxpro.com\/templates\/?tab=all&#038;version=free\">templates for Elementor<\/a>.&nbsp;<\/p>\n\n\n\n<blockquote class=\"wp-block-quote is-layout-flow wp-block-quote-is-layout-flow\">\n<p>???? Apart from that, if you want to add advanced functionality or styling options, you can buy the Xpro <a href=\"https:\/\/newelementor.wpxpro.com\/\">elementor addons<\/a> premium version, which includes 140+ <a href=\"https:\/\/newelementor.wpxpro.com\/premium\/\">elementor widgets<\/a>, premium extensions, ready-to-use templates, and <a href=\"https:\/\/newelementor.wpxpro.com\/templates\/?tab=themes&#038;version=pro\">themes for elementor<\/a>.&nbsp;<\/p>\n<\/blockquote>\n\n\n\n<p>Thank you for reading this blog till the end. I hope you got all the information about creating a long-scrolling image effect within the mockup.&nbsp;<\/p>\n\n\n\n<p>If you have any questions about the image scroll widget, let us know in the comment section. We&#8217;ll be happy to assist you.&nbsp;<\/p>\n\n\n<div id=\"rank-math-faq\" class=\"rank-math-block\">\n<div class=\"rank-math-list \">\n<div id=\"faq-question-1721985746065\" class=\"rank-math-list-item\">\n<h3 class=\"rank-math-question \"><strong>How does the Image Scroll Widget work?<\/strong><\/h3>\n<div class=\"rank-math-answer \">\n\n<p>The widget enables users to upload images and configure settings such as scrolling speed, direction, trigger type (mouse hover or mouse scroll), and many more. As visitors scroll down the page, the images move vertically or horizontally based on mouse hover or mouse scroll. It creates a dynamic visual effect.\u00a0<\/p>\n\n<\/div>\n<\/div>\n<div id=\"faq-question-1721985757117\" class=\"rank-math-list-item\">\n<h3 class=\"rank-math-question \"><strong>Do I need Elementor Pro to use the Image Scroll Widget?<\/strong><\/h3>\n<div class=\"rank-math-answer \">\n\n<p>No, you don\u2019t need to buy the Elementor Pro because the Xpro <a href=\"https:\/\/elementor.wpxpro.com\/\" target=\"_blank\" rel=\"noopener\">elementor addons<\/a> offer a <a href=\"https:\/\/elementor.wpxpro.com\/widgets\/image-scroller\/\" target=\"_blank\" rel=\"noopener\">free image scroll widget for elementor<\/a>. You can easily download its free version from WordPress.\u00a0<\/p>\n\n<\/div>\n<\/div>\n<div id=\"faq-question-1721985768152\" class=\"rank-math-list-item\">\n<h3 class=\"rank-math-question \"><strong>Where can the Image Scroll Widget be used?<\/strong><\/h3>\n<div class=\"rank-math-answer \">\n\n<p>The Image Scroll Widget can be used on various websites, including e-commerce, real estate, portfolios, technology, and many other business websites, to showcase services and products.<\/p>\n\n<\/div>\n<\/div>\n<div id=\"faq-question-1721985780117\" class=\"rank-math-list-item\">\n<h3 class=\"rank-math-question \"><strong>Does the Image Scroll Widget have space-saving benefits?<\/strong><\/h3>\n<div class=\"rank-math-answer \">\n\n<p>Yes, it&#8217;s a wonderful, space-efficient way to present multiple images or designs to showcase on the web pages. You can display images in different directions (vertically or horizontally).<\/p>\n\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n\n\n<h2 class=\"wp-block-heading\" id=\"fa-qs\"><strong>FAQs<\/strong><\/h2>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"how-does-the-image-scroll-widget-work\"><strong>How does the Image Scroll Widget work?<\/strong><\/h3>\n\n\n\n<p>The widget enables users to upload images and configure settings such as scrolling speed, direction, trigger type (mouse hover or mouse scroll), and many more. As visitors scroll down the page, the images move vertically or horizontally based on mouse hover or mouse scroll. It creates a dynamic visual effect.&nbsp;<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"do-i-need-elementor-pro-to-use-the-image-scroll-widget\"><strong>Do I need Elementor Pro to use the Image Scroll Widget?<\/strong><\/h3>\n\n\n\n<p>No, you don\u2019t need to buy the Elementor Pro because the Xpro <a href=\"https:\/\/newelementor.wpxpro.com\/\">elementor addons<\/a> offer a <a href=\"https:\/\/newelementor.wpxpro.com\/widgets\/image-scroller\/\">free image scroll widget for elementor<\/a>. You can easily download its free version from WordPress.&nbsp;<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"where-can-the-image-scroll-widget-be-used\"><strong>Where can the Image Scroll Widget be used?<\/strong><\/h3>\n\n\n\n<p>The Image Scroll Widget can be used on various websites, including e-commerce, real estate, portfolios, technology, and many other business websites, to showcase services and products. <\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"does-the-image-scroll-widget-have-space-saving-benefits\"><strong>Does the Image Scroll Widget have space-saving benefits?<\/strong><\/h3>\n\n\n\n<p>Yes, it&#8217;s a wonderful, space-efficient way to present multiple images or de<\/p>\n","protected":false},"excerpt":{"rendered":"<p>If you ever want to showcase your creative designs, templates, or portfolios in an image scroll, this blog is for you.&nbsp;Using the Xpro free Elementor image scroll widget, you can create a long portfolio image scroll within Mockup with just a few clicks.&nbsp; Elementor Image scroll can allow you to showcase your long web design&#8230;<\/p>\n","protected":false},"author":3,"featured_media":91885,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[7,13],"tags":[6,15,16],"class_list":["post-2048","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-guides","category-popular","tag-elementor","tag-elementor-addons","tag-image-scroll"],"_links":{"self":[{"href":"https:\/\/newelementor.wpxpro.com\/index.php\/wp-json\/wp\/v2\/posts\/2048","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/newelementor.wpxpro.com\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/newelementor.wpxpro.com\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/newelementor.wpxpro.com\/index.php\/wp-json\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/newelementor.wpxpro.com\/index.php\/wp-json\/wp\/v2\/comments?post=2048"}],"version-history":[{"count":1,"href":"https:\/\/newelementor.wpxpro.com\/index.php\/wp-json\/wp\/v2\/posts\/2048\/revisions"}],"predecessor-version":[{"id":91886,"href":"https:\/\/newelementor.wpxpro.com\/index.php\/wp-json\/wp\/v2\/posts\/2048\/revisions\/91886"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/newelementor.wpxpro.com\/index.php\/wp-json\/wp\/v2\/media\/91885"}],"wp:attachment":[{"href":"https:\/\/newelementor.wpxpro.com\/index.php\/wp-json\/wp\/v2\/media?parent=2048"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/newelementor.wpxpro.com\/index.php\/wp-json\/wp\/v2\/categories?post=2048"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/newelementor.wpxpro.com\/index.php\/wp-json\/wp\/v2\/tags?post=2048"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}