Creating an eye-catching, dynamic website is essential to engaging visitors and keeping their attention. One effective way to add visual interest to your site is by implementing an image marquee. A marquee scrolls images horizontally or vertically, creating a smooth, flowing visual element. In this blog post, we will guide you through the process of implementing an image marquee in WordPress using Elementor and the Qi Addons for Elementor plugin. Follow these step-by-step instructions to enhance your website with this stylish feature.

Step 1: Install and Activate Elementor

Before you can use Qi Addons for Elementor, you need to have the Elementor plugin installed and activated on your WordPress site.

1. Go to the WordPress Dashboard.
2. Navigate to Plugins > Add New.
3. Search for “Elementor”.
4. Click “Install Now” next to the Elementor plugin.
5. Activate the plugin once the installation is complete.

Step 2: Install and Activate Qi Addons for Elementor

Qi Addons for Elementor is a powerful plugin that extends Elementor’s functionality with a variety of widgets and design elements, including the image marquee.

1. Go to the WordPress Dashboard.
2. Navigate to Plugins > Add New.
3. Search for “Qi Addons for Elementor”.
4. Click “Install Now” next to the Qi Addons for Elementor plugin.
5. Activate the plugin once the installation is complete.

Step 3: Add an Image Marquee to Your Page

With both Elementor and Qi Addons for Elementor installed and activated, you can now add an image marquee to your page.

1. Navigate to Pages > Add New (or select an existing page) in the WordPress Dashboard.
2. Click “Edit with Elementor” to open the Elementor editor.
3. In the Elementor editor, click the “Add New Section” button to create a new section.
4. Search for “Marquee” in the Elementor widget panel.
5. Drag and drop the “Qi Image Marquee” widget into your newly created section.

Step 4: Configure the Image Marquee

Once the widget is in place, you can customize its settings to achieve the desired look and functionality.

Image Source

1. Click on the “Image Source” tab in the widget settings panel.
2. Upload images from your media library or add image URLs.
3. Arrange the images in the order you want them to appear.

Marquee Settings

1. Navigate to the “Marquee Settings” tab.
2. Adjust the direction (left to right, right to left, up, or down).
3. Set the speed of the marquee to control how fast the images scroll.
4. Enable or disable the loop option to determine whether the marquee should continuously scroll.

Style Settings

1. Go to the “Style” tab in the widget settings panel.
2. Customize the image spacing to control the distance between images.
3. Adjust the height and width of the marquee to fit your design needs.
4. Set border, box-shadow, and other style options to enhance the appearance of the marquee.

Advanced Settings

1. Click on the “Advanced” tab to access more settings.
2. Configure margin, padding, and other advanced design options.
3. Add custom CSS if you need additional customization beyond the available options.

Step 5: Preview and Publish

After configuring the image marquee to your satisfaction, it’s time to preview your work and make any necessary adjustments.

1. Click the “Preview Changes” button to see how the marquee looks on your page.
2. Make any adjustments if needed by returning to the Elementor editor.
3. Once you are happy with the results, click the “Update” or “Publish” button to make the changes live on your site.

Conclusion

Implementing an image marquee in WordPress Elementor using the Qi Addons for Elementor plugin is a straightforward process that can significantly enhance your site’s visual appeal. By following these steps, you can create a dynamic and engaging scrolling image feature that captures visitors’ attention and adds a professional touch to your website. Experiment with different settings and styles to find the perfect look for your site, and enjoy the added visual interest that an image marquee provides.