{"id":124,"date":"2018-07-03T18:08:17","date_gmt":"2018-07-03T18:08:17","guid":{"rendered":"https:\/\/docs.yithemes.com\/yith-infinite-scrolling\/?p=124"},"modified":"2024-10-23T20:06:09","modified_gmt":"2024-10-23T20:06:09","slug":"sections","status":"publish","type":"post","link":"https:\/\/docs.yithemes.com\/yith-infinite-scrolling\/premium-version-settings\/sections\/","title":{"rendered":"Sections"},"content":{"rendered":"\n

The premium version of the YITH Infinite Scrolling<\/b> allows you to have a scroll effect on different pages of your site (e.g. the blog or the product loop), with the ability to customize these settings separately.

In the Sections<\/em> tab you can create and name each section in which you want to apply the Infinite Scrolling effect. In this example, we will create a section and name it “Shop<\/strong>“.<\/p>\n\n\n\n

\"Sections\"<\/a><\/figure>\n\n\n\n

<\/p>\n\n\n\n

For each section you can customize the following options, included the CSS selectors needed for the plugin to work. You have to configure the selectors in the plugin settings, as these change based on the theme you\u2019re using and the section you want to enable the scrolling effect on (e.g. blog or product loop). <\/p>\n\n\n\n

\"Shop<\/a><\/figure>\n\n\n\n

<\/p>\n\n\n\n

\n
\n

Navigation Selector:<\/strong> The selector that contains the navigation of this section.<\/p>\n\n\n

\n
\"Navigation<\/a><\/figure><\/div><\/div>\n<\/div>\n\n\n\n

<\/p>\n\n\n\n

\n

Next Selector:<\/strong> The selector of the link that redirects to the next page of this section.<\/p>\n\n\n

\n
\"Next<\/a><\/figure><\/div><\/div>\n\n\n\n

<\/p>\n\n\n\n

\n

Item Selector:<\/strong> The selector of the single item in the page.<\/p>\n\n\n

\n
\"Item<\/a><\/figure><\/div><\/div>\n\n\n\n

<\/p>\n\n\n\n

\n

Content Selector:<\/strong> The selector that contains your section content.<\/p>\n\n\n

\n
\"Content<\/a><\/figure><\/div><\/div>\n\n\n\n

<\/p>\n\n\n\n

Event Type<\/strong><\/h3>\n\n\n\n
\n

Next, you can define an Event Type<\/em>. This is the type of pagination for the content of the specified selection. You can choose between Infinite Scrolling, “Load more” Button and Ajax Pagination.<\/p>\n\n\n\n

\"Event<\/a><\/figure>\n<\/div>\n\n\n\n

Infinite Scrolling<\/strong><\/h4>\n\n\n\n

If you choose Infinite Scrolling<\/em>, the contents of the next page are loaded scrolling the current page. Furthermore, you can decide if you want to use a default or custom loader in the Loader to use<\/strong> option.<\/p>\n\n\n\n

When you select the Default loader<\/strong>, you will find four types of loaders to choose from. This will be the loader you want to show to your customers while they are scrolling and waiting for your products to load.<\/p>\n\n\n\n

\"Default<\/a><\/figure>\n\n\n\n

In this case, we have selected Loader 2<\/strong>. It will look like this in the frontend:<\/p>\n\n\n\n

\"Loader<\/a><\/figure>\n\n\n\n

On the other hand, if you select Custom loader<\/strong>, it will override the previous one and you will be able to upload a custom loading image or enter a URL to it.<\/p>\n\n\n\n

\"Custom<\/a><\/figure>\n\n\n\n

Load More Button<\/strong><\/h4>\n\n\n\n

Another option available is the “Load more” Button<\/em>, which allows you to load the content of the next page in Ajax by clicking on the Load more<\/em> button. Here, you will find two more options to customize:<\/p>\n\n\n\n