How to create infinity scroll grid

  • Hello

    Having a main blog page, I like to have the grid with infinity scroll. Is this possible or not?

    Regards,

    Simon

  • Hi Simon,

    If your blog layout is using the native GeneratePress archive layout, you can enable Infinite Scroll under Customize > Layout > Blog.

    Just make sure the Blog module is activated under Appearance > GeneratePress.

  • Dear Alvind

    I do have basically a normal page as the main blog page. I am not using an archive page, as the design is kind of limited.

    I added basically a grid the way how I like to have it. But I didn’t found any useful settings for such infinity scrolling.

  • Dear Alvind

    For Your information, I basically have done something by myself, You can check it out here, https://psrc.ch/neuigkeiten/

    But I do know that there should be something available, in a way.

  • Hello,

    You seem to have used a query loop. It’s not possible to have infinite scroll on a query loop. You would need to either use the native GeneratePress native blog or create a block element, set it as a Content Template, set it to appear on the blog archive and design one of your blog cards there.

    https://docs.generatepress.com/article/block-element-content-template/
    https://docs.generatepress.com/article/blog-content-layout/
    https://docs.generatepress.com/article/adjusting-the-featured-images/
    https://docs.generatepress.com/article/using-columns-in-the-blog/

  • Dear George

    I will try it out.

    Question, how or where do I find then the url for this main blog page?

    Regards,

    Simon

  • Hi Simon,

    When you use a Content Template, you don’t need to create a separate page for your blog — WordPress handles it automatically.

    Here’s how it works:

    1. Go to Settings > Reading in your WordPress dashboard.
    2. For “Your homepage displays”, select “Your latest posts”.
    3. If you want your blog on a specific URL (like /blog/ instead of your homepage), create a blank page called “Blog” (leave its content empty), then set it as the Posts page in that same Reading settings screen.

    Whatever page you assign as the Posts page will automatically display your blog archive — and that’s where the Content Template and infinite scroll will kick in. The URL will simply be whatever that page’s slug is (e.g., yourdomain.com/blog/).

  • Okay, and how exactly can I assign a “content” template, as I need to have this news page designed?

    I need for example a specific hero section, and then I need the blogs arranged in 2 columns.

  • Hi Simon,

    For the hero section, you’ll want to create a Block Element set element type to Page Hero and use GeberateBlocks to construct your hero. Use the Display Rules to show it only on your blog page.

    Page hero element

    For the blog layout in 2 columns, go to Customize > Layout > Blog and set the columns to 2. This controls how your post grid is displayed on the archive. You can also enable Infinite Scroll from that same section.

    Docs: https://docs.generatepress.com/article/using-columns-in-the-blog/

    If you want to customize how each blog card looks (e.g. changing the image size, moving the meta, adjusting spacing), that’s where a Content Template Block Element comes in. Create a new Block Element, set the type to Content Template, and in the Display Rules assign it to your blog page. Inside it, you design a single post card — the theme will repeat it for each post in the loop.

    Docs: https://docs.generatepress.com/article/block-element-content-template/

    Content template

    So to summarize:

    • Block Hero Element → your hero section above the posts
    • Customize > Layout > Blog → 2-column grid + infinite scroll
    • Content Template (optional) → customize the look of each individual post card
Viewing 9 posts - 1 through 9 (of 9 total)
  • You must be logged in to reply to this topic.