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 610 Bricks code tutorials with BricksLabs Pro

Related Tutorials..

Pro
Oxygen’s Focus Section in Bricks

Oxygen’s Focus Section in Bricks

These are the steps to implement Focus Section, an Oxygen’s composite element, in Bricks.
Categories:
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
Centered Image Logo in Bricks

Centered Image Logo in Bricks

Updated on 8 Mar 2023 This Pro tutorial provides the steps to add a logo image as the center menu item that shrinks when the…
Categories:
Pro
How to Hide the Header Initially and Show It After Scrolling Down in Bricks

How to Hide the Header Initially and Show It After Scrolling Down in Bricks

Hiding the header when the scroll position is at the top and reveal it after the user scrolls down.
Categories:
Tags:
Pro
Ken Burns Background Slideshow in Bricks

Ken Burns Background Slideshow in Bricks

Setting up a hero section, having images that pan and move as a background slideshow with content on top.
Categories:
Tags:
Animated Border Hover Effect Buttons

Animated Border Hover Effect Buttons

Here's how can be implemented in HTML/WordPress/Bricks. Step 1 Add this CSS in your child theme's style.css or another appropriate location: Step 2 Add a…
Categories:
Pro
How to Combine Multiple Menus into Bricks’ Mobile Menu

How to Combine Multiple Menus into Bricks’ Mobile Menu

Bricks' native 'Nav Menu' element comes with a built-in mobile menu, which shrinks the menu down to a menu toggle button to open an offcanvas…
Categories: