{"id":42,"date":"2025-06-13T08:20:08","date_gmt":"2025-06-13T08:20:08","guid":{"rendered":"https:\/\/devblog.40kts.cloud\/?p=42"},"modified":"2025-06-13T08:20:08","modified_gmt":"2025-06-13T08:20:08","slug":"how-to-highlight-the-first-post-across-two-columns-in-a-bricks-archive-without-posts-module","status":"publish","type":"post","link":"https:\/\/devblog.40kts.cloud\/index.php\/2025\/06\/13\/how-to-highlight-the-first-post-across-two-columns-in-a-bricks-archive-without-posts-module\/","title":{"rendered":"How to Highlight the First Post Across Two Columns in a Bricks Archive (without Posts Module)"},"content":{"rendered":"\n

<\/h2>\n\n\n\n

This tutorial shows how to create a two-column archive layout in Bricks Builder where the first (most recent) post spans across both columns, followed by regular posts in a grid. This is achieved using two separate query loops with custom offset<\/code> and posts per page<\/code> settings.<\/p>\n\n\n\n

Why not use the built-in Posts element?<\/h2>\n\n\n\n

Bricks Builder’s Posts<\/strong> element includes a built-in option to style the first post differently (e.g., make it span full width). However, this solution wasn’t applicable here because the layout required a fully custom structure for each post entry \u2013 which is not possible within the confines of the Posts module. Therefore, we built the archive manually using the Query Loop feature.<\/p>\n\n\n\n

1. Layout Structure<\/h2>\n\n\n\n

The archive layout consists of a container using CSS Grid with two columns. Inside the grid:<\/p>\n\n\n\n

    \n
  • The first post is displayed full-width across both columns<\/li>\n\n\n\n
  • The remaining posts are displayed normally in two columns<\/li>\n<\/ul>\n\n\n\n

    2. Implementation Using Two Query Loops<\/h2>\n\n\n\n

    2.1. Loop 1: Featured Post<\/h3>\n\n\n\n

    Create the first Query Loop and configure it to return only one post:<\/p>\n\n\n\n

      \n
    • Offset:<\/strong> 0<\/code><\/li>\n\n\n\n
    • Posts per page:<\/strong> 1<\/code><\/li>\n<\/ul>\n\n\n\n

      Add a custom class like .featured-post<\/code> to the wrapper element and apply the following CSS:<\/p>\n\n\n\n

      .featured-post {\n  grid-column: 1 \/ -1;\n}<\/code><\/pre>\n\n\n\n
      2.2. Loop 2: Remaining Posts<\/h3>\n\n\n\n
      Below the featured post, create a second Query Loop for the remaining entries:<\/p>\n\n\n\n
        \n
      • Offset:<\/strong> 1<\/code><\/li>\n\n\n\n
      • Posts per page:<\/strong> Any number (e.g., 9)<\/code><\/li>\n<\/ul>\n\n\n\n
        These posts will fill the grid in two columns.<\/p>\n\n\n\n
        3. Grid Layout via CSS or Grid Builder<\/h2>\n\n\n\n
        You can define the container as a CSS Grid manually using the following CSS:<\/p>\n\n\n\n
        .archive-grid {\n  display: grid;\n  grid-template-columns: repeat(2, 1fr);\n  gap: 2rem;\n}<\/code><\/pre>\n\n\n\n
        Alternatively,<\/strong> if you’re using a newer version of Bricks, you can configure the grid layout with the visual grid builder. This allows you to set column count, gaps, and spanning behavior visually without writing CSS.<\/p>\n\n\n\n
        \"\"<\/figure>\n\n\n\n
        <\/p>\n\n\n\n
        4. Filtering Considerations<\/h2>\n\n\n\n
        This setup works with taxonomy and meta filtering, as long as both query loops are configured identically (same post type, same query conditions). However, if you’re using AJAX filters, live search, or pagination, consider using a single Query Loop and dynamically control the layout using the {bricks\/loop_index}<\/code> tag.<\/p>\n\n\n\n
        5. Conclusion<\/h2>\n\n\n\n
        Creating a custom archive with two Query Loops in Bricks offers layout flexibility beyond what the standard Posts element provides. It’s a practical solution when you need precise control over how each post is rendered, especially when the first post requires a different visual treatment.<\/p>\n","protected":false},"excerpt":{"rendered":"
        This tutorial shows how to create a two-column archive layout in Bricks Builder where the first (most recent) post spans across both columns, followed by regular posts in a grid. This is achieved using two separate query loops with custom offset and posts per page settings. Why not use the built-in Posts element? Bricks Builder’s […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1],"tags":[],"class_list":["post-42","post","type-post","status-publish","format-standard","hentry","category-uncategorized"],"_links":{"self":[{"href":"https:\/\/devblog.40kts.cloud\/index.php\/wp-json\/wp\/v2\/posts\/42","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/devblog.40kts.cloud\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/devblog.40kts.cloud\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/devblog.40kts.cloud\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/devblog.40kts.cloud\/index.php\/wp-json\/wp\/v2\/comments?post=42"}],"version-history":[{"count":1,"href":"https:\/\/devblog.40kts.cloud\/index.php\/wp-json\/wp\/v2\/posts\/42\/revisions"}],"predecessor-version":[{"id":44,"href":"https:\/\/devblog.40kts.cloud\/index.php\/wp-json\/wp\/v2\/posts\/42\/revisions\/44"}],"wp:attachment":[{"href":"https:\/\/devblog.40kts.cloud\/index.php\/wp-json\/wp\/v2\/media?parent=42"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/devblog.40kts.cloud\/index.php\/wp-json\/wp\/v2\/categories?post=42"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/devblog.40kts.cloud\/index.php\/wp-json\/wp\/v2\/tags?post=42"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}