12th Jul '22
/
12 comments

Click-type Infinite Scroll in Bricks Builder

This Pro tutorial provides the steps to set up "click to load more" posts using Infinite Scroll JS in Bricks builder.

Step 1

Edit your Template/Page with Bricks and add a list/grid of posts using either the Posts element or Query Loop.

In this example, let's use the Query Loop using CSS Grid as detailed in our previous tutorial here.

Step 2

Add a Pagination element alongside and below the Query Loop parent element.

Select the element represented by your Query Loop.

Set the Pagination element's Display to none.

Add a Container under the Pagination.

Add a Code element inside the Container having:

This is a BricksLabs Pro tutorial.

For full access login below or create your BricksLabs Pro account

Get access to all 630 Bricks code tutorials with BricksLabs Pro

Related Tutorials..

Pro
Custom WordPress Dashboard Page in Bricks

Custom WordPress Dashboard Page in Bricks

Updated on 10 Jul 2024 This Pro tutorial provides the steps to replace all the meta boxes of the WordPress admin dashboard page with the…
Categories:
Tags:
Pro
New Ribbon for Posts in Bricks

New Ribbon for Posts in Bricks

This Pro tutorial provides the steps to display a "New" ribbon for posts that were published in the last x days in Bricks. Update: Added…
Categories:
Tags:
Pro
Responsive iframes in Bricks

Responsive iframes in Bricks

This Pro tutorial provides the steps to add responsive iFrames in Bricks. Step 1 Edit your Page/Template with Bricks. Add a Code element having this…
Categories:
Tags:
Width and Height of Mobile Hamburger Toggle in Bricks

Width and Height of Mobile Hamburger Toggle in Bricks

Looking to change the size of Bricks hamburger toggle in the mobile menu? The default width value of 20px can be changed by selecting the…
Categories:
Pro
Floating Bottom Div when Scrolling Down in Bricks

Floating Bottom Div when Scrolling Down in Bricks

Creating a floating call to action element that reveals only as the user scrolls down.
Categories:
Tags:
Pro
Image Banner as Query Loop Posts Grid’s Last Item in Bricks

Image Banner as Query Loop Posts Grid’s Last Item in Bricks

In the comments section of How to Insert Element(s) Between Query Loop Posts in Bricks tutorial, a site member asked: This is fantastic! Is there…
Categories:
Tags:
Pro
Search Results Template in Bricks

Search Results Template in Bricks

Updated on 26 Oct 2023 This Pro tutorial provides the steps to set up a search template in Bricks with these features: Step 1 Create…
Categories: