How to use Tile Scroll extension by Element Pack

  • BdThemes
  • How to use Tile Scroll extension by Element Pack

Table Of Contents

How to use Tile Scroll extension by Element Pack

The Tile Scroll extension from Element Pack Pro makes it possible to design your section background with a flashy-looking image gallery and not use any widget space on the front. This is a new feature brought to you by BdThemes, your trusted web solution company.

Let’s see how this feature works.

Setting up the section in Elementor Page Editor

To use Elementor Tile Scroll, you need to create the section where you are going to apply the feature. Let’s create one right now.

Tile Scroll extension settings

Inside the Elementor page editor, create a single section and go for the Settings by clicking the icon on the top. Then from the Layout, set the section width to full and use a minimum height. Keep in mind that these steps are not required for the feature to work. We simply did it to let you see the Tile Scroll background more clearly.

Then, let’s go for a custom background for the section.

2 5 - BdThemes

For that, go to the Style tab and look into the background section. Just apply white color for the background.

Now, let’s go find the tile scroll option.

3 6 - BdThemes

Go to the Advanced setting tab and find the Tile Scroll section below. Don’t forget that you would need to activate this feature from Dashboard> Element Pack Pro> Extensions to use it, or the section will not be visible.

Once you turn on the switcher, the options inside the Elementor Tile Scroll extension will reveal.

4 5 - BdThemes

You can see two subsections Content & Style there coupled with a bunch of items inside the former. Now, let’s see the insides.

Tile Scroll Extension configurations

The extension mainly places image galleries in a stripe pattern on your display. The more the items, the more stripes you will get to place on the screen. By default, all the items aka image galleries are empty.

5 5 - BdThemes

Clicking on an item will reveal the inside where you get to change the name of the item, select images, and adjust the start-end positions.

Now, click on the images icon.

6 5 - BdThemes

Now select the images you want to display in the first tile. There’s actually no limit to the number of images you should select. But, it’s best to go for 6 at least so you get a nice view every time you scroll.

You can see the image listed inside the image gallery option.

7 3 - BdThemes

The option will show the number of images you have inserted. It’s showing six as we entered six images for the first tile of the Tile Scroll extension.

8 4 - BdThemes

Then just fill more tiles with images and use the options below to set up the start and end frames. We just copied the first one and adjusted the start-end scroll bars to apply a different effect.

Style part of the Tile Scroll Extension

In fact, the tile scroll extension provides both vertical scroll animation and horizontal scroll animation. Both appear as the background of the section without affecting the widget area.

Once you go to the Style subsection, you can see the option to change the alignment style of the extension.

9 3 - BdThemes

For this tutorial, we decided to go with the Horizontal scroll style. Just after that, we rotated the background to make it appear in a more awesome way.

10 2 - BdThemes

Just simply play with the rotate option to do that. The width adjustment is for stretching the images sideways and the height adjustment option is for stretching the images along their heights. You can minimize the images or maximize their size using these two options.

Again, you can change the grid gap to increase or decrease the image gaps as you like. There are also border options for the vertical scroll that you can use to make them appear more dynamically.

11 2 - BdThemes

Lastly, you can use box-shadow to add a different effect on the tile scroll background. The last option can also cover the whole background with the shadow and create a new level of a background of its own.

Finally, you can just throw anything on top of the background and make it look perfect. Just like how we added a title on the screen.

12 1 - BdThemes

This is how you can easily create awesome-looking sections without needing a second widget for the background.

Conclusion

You can watch this video to get the whole picture with explanations and see this demo page for live examples.

Thanks for staying up!

Take advantage of fine-tuned plugins

Get Customizable Elementor Widgets to Power Up Your Website

Take advantage of fine-tuned plugins to speed up web projects without sacrificing quality. We offer a 14-days money-back guarantee.
BdThemes is the sole owner of #1 market-leading addons for Elementor such as Element Pack Pro, Prime Slider, Ultimate Post Kit, Ultimate Store Kit, Pixel Gallery, and more useful plugins. This website is powered by Element Pack Pro and Rooten Theme.
Need any further assistance? Call Us:+880 1700 55 95 95
Our supported payment system and security badge