Crashes, No Sound, or Screen Glitches?
Random freezes, missing sound and display glitches usually trace back to one bad driver. Find and replace yours safely.Free scan · under a minuteWindows Errors? Fix Them Before They Spread
Repair common Windows errors and clear accumulated junk for a smoother, more stable PC - no reinstall needed.Free scan · no reinstalliTechGuides is reader-supported. When you buy through links on our site, we may earn an affiliate commission. As an Amazon Associate I earn from qualifying purchases. Learn more
You can build a polished, archive-style landing page in WPBakery with a page heading, search, category navigation, a featured two-post grid, and additional topic grids. The most maintainable approach is to create one reusable card in Grid Builder, then use separate Post Grid queries to decide which posts appear in each section.
This creates a normal WordPress Page. It does not automatically replace your theme’s native category, tag, author, or date archive templates. Those archive URLs continue to use the active theme’s template hierarchy.
What this WPBakery archive page actually is
A WPBakery archive-style page is a curated landing page, usually assigned a title such as Blog, News, or Resources. You control its structure, wording, featured posts, categories, and visual hierarchy directly in the page editor.
What’s actually slowing this PC down?
Pick the symptom - the matching free tool is one click away.
It is different from a native WordPress archive. Native category, tag, author, and date URLs are generated through the theme’s archive templates. Building a page with WPBakery does not, by itself, change those templates or make every archive URL use your new design. If you need to redesign native archives, use a theme or template system that explicitly supports archive-template customization.
#1 Best Overall
The method below follows WPBakery’s current tutorial pattern, published August 13, 2026, while keeping the layout flexible for your content. The tutorial recommends WPBakery 9.0 or later for the interface shown, but labels can differ between installations. See the WPBakery archive-page tutorial and check the controls in your installed version.
Plan the page before opening the builder
A realistic content plan prevents empty cards and makes responsive testing meaningful. Have published posts available before you build. On a staging site, create enough representative posts to fill both the featured area and at least one topic section.
Recommended page anatomy
- Page heading: an H1 such as Blog or Resources.
- Short description: one or two sentences explaining what readers will find.
- Search: a WordPress search form that submits a value named
s. - Category navigation: links to category archive URLs.
- Featured section: a heading and a two-column grid containing two selected posts.
- Topic section: a heading, a link to that category’s archive, and a three-column grid containing three posts.
This is an example structure, not a required template. Add or remove sections according to the way your site is organized, but keep the heading hierarchy sensible: one H1 for the page, H2 headings for major sections, and H3 headings for individual post titles when the card template outputs headings.
Quick wins for a faster PC:
Repair Windows errors before they cause bigger problemsFix Now →Scan for outdated or missing drivers - takes under a minuteDriver Scan →Clear out junk files and repair common Windows errorsFree Scan →Create the WordPress page and top section
- In the WordPress dashboard, open Pages → Add New.
- Enter a title such as Blog or Resources.
- Open the page in WPBakery.
- Add a row and a column for the archive heading and introductory description.
- Add another row or elements for search and category navigation.
Keep the introduction short. The page’s primary job is to help visitors find posts, so the grid should begin without a large block of marketing copy.
Add the search form
WPBakery’s tutorial allows a standard WordPress search form through Raw HTML or a search element supplied by your theme or an addon. The important behavior is that the form submits a query value named s to the site’s WordPress home URL. Configure the action to your own home URL rather than copying a domain from an example.
<form method='get' action='YOUR-WORDPRESS-HOME-URL'>
<label for='archive-search'>Search posts</label>
<input id='archive-search' name='s' type='search'>
<button type='submit'>Search</button>
</form>Replace the example action with the actual home URL used by your WordPress installation. Test the form on the front end: enter a distinctive word from a published post, submit it, and confirm that WordPress opens search results rather than reloading the page without a query.
Add category navigation
Create text links or buttons that point to the relevant category archive URLs. These are navigation links, not necessarily live filters on the current page. Clicking one normally takes the visitor to a separate category archive route, where the active theme controls the archive layout.
Recommended Free Tools
Use descriptive link text, keep the number of categories manageable, and verify that each link opens the intended archive. If a category has no published posts, either add content or omit it from this landing page.
Build one reusable post-card template
The card design should be created once and reused. Post Grid controls which posts are queried and how many are displayed; Grid Builder controls the appearance of each individual item. Separating those responsibilities lets you change a query without rebuilding the card and lets one visual design serve several sections.
Open Grid Builder
- Add a Post Grid element to a temporary row, or open Grid Builder from the WPBakery dashboard menu.
- Use the Post Grid item-template control to open Grid Builder.
- Start from a predefined design or create a template from scratch.
- Give the template a clear name, such as Archive Post Card.
- Save and publish the template so it can be selected by multiple grids.
The exact control labels can vary by WPBakery version. The official Grid Builder documentation explains the template workflow and its reusable states.
Recommended card contents
A practical archive card contains, in this order:
- A linked featured image.
- The publication date.
- A linked post title.
- A short excerpt.
- Post categories.
Use a consistent image ratio or fixed visual height so cards align when source uploads have different dimensions. Keep the title link prominent and make sure the excerpt does not push cards to dramatically different heights on desktop.
Do these 3 things before closing this tab:
1Fix the driver behind crashes, sound loss and screen glitches2Repair Windows errors before they cause bigger problems3Scan for outdated or missing drivers - takes under a minuteUnderstand Grid Builder states
Grid Builder defines a Normal state for the default card appearance. A Hover state appears when an animation preset uses hover behavior. An Additional area can place content around those states. You do not need an elaborate animation; a clear image, readable title, date, excerpt, and category metadata are more important for an archive.
When the saved template is edited, cards using that template inherit the change. This is why one shared template is preferable to separately styling every Post Grid.
Configure the featured two-post grid
- Add a new row below the top section.
- Insert a Post Grid element.
- Choose an individual-post or list-of-IDs source, depending on the labels in your version.
- Include the two posts you want to feature.
- Set the layout to two items per row.
- Select the saved Archive Post Card item template.
- Choose the gap, display, and ordering settings that match your design.
- Save the page and preview the front end.
Use the featured grid for posts that deserve emphasis, such as an editorial introduction, a current guide, or two cornerstone resources. A list-of-IDs source gives you deliberate control over exactly which posts appear. If your installation labels the source differently, use the equivalent individual-post or selected-post option.
The official WPBakery content-element documentation lists the broader Post Grid controls: data source, category, tag and custom-taxonomy narrowing, total items, display style, filters, columns, gaps, included posts, custom query, items per page, order, sorting, offset, exclusions, and item template. Some controls appear only after you choose a particular source or display style.
Add a category section and a second grid
- Add a row beneath the featured grid.
- Insert an H2 heading naming the topic.
- Add a button or text link to that category’s archive.
- Place a second Post Grid below the heading and link.
- Reuse the saved Archive Post Card template.
- Set the source to posts and narrow the query by the chosen category.
- Set the example to three items and three columns.
- Preview the result at desktop and mobile widths.
The two grids can share one card design while using different queries: the first selects two specific posts, while the second selects posts associated with a category. This is the central advantage of separating Grid Builder from Post Grid.
Post Grid settings that matter
| Setting area | What it controls | Typical use on this page |
|---|---|---|
| Data source | Where the grid gets content | Selected posts for the featured grid; posts for a category grid |
| Category, tag, or custom taxonomy | Query narrowing | Limit the topic section to one category |
| Total items | Maximum number of posts returned | Two featured posts or three topic posts |
| Columns | Items shown across a row | Two columns for featured content; three for the topic section |
| Included posts | Explicit post selection | Choose the exact featured articles |
| Order and sorting | Which item appears first | Set a deliberate editorial or date order |
| Offset and exclusions | Skip or remove matching posts | Avoid duplicates when expanding the page |
| Items per page | How many items a paged display can show | Use only when your selected display style supports the desired pagination behavior |
| Item template | Card appearance | Select the saved Grid Builder card |
Do not assume that a category link is a filter control, or that selecting a category automatically changes the native category archive design. The link and the grid query are separate functions.
Style the page without breaking the card system
Use page-specific CSS or an element-level extra class for styling that belongs only to this archive page. Useful targets include the search field, category buttons, image corners, section spacing, and card text.
Rank #4
Use stable classes
Assign meaningful extra classes such as archive-search, archive-category-nav, archive-featured-grid, and archive-topic-grid to the relevant rows or elements. Then keep the CSS scoped to those classes so another page’s grid is not changed accidentally.
Make the responsive behavior intentional
- Reduce the featured grid from two columns to one on narrow screens.
- Stack the three-column topic grid cleanly on mobile.
- Keep the search input and button usable without horizontal scrolling.
- Allow long post titles to wrap instead of clipping.
- Use consistent image dimensions or an object-fit rule so cards do not jump in height.
- Check that hover-only information is still available to keyboard and touch users.
WPBakery’s editor view is not a substitute for a front-end check. Save the page, open the published or preview URL, and test the actual layout at desktop and mobile widths.
Test every part of the published page
- Heading structure: confirm there is one page H1, sensible H2 section headings, and card titles that follow the hierarchy you intended.
- Search: submit a known term and confirm the request contains
sand opens working WordPress results. - Category links: click every category link and verify the destination archive.
- Featured query: confirm exactly the two selected posts appear and no unintended post replaces one.
- Topic query: confirm every displayed post belongs to the selected category.
- Links: test featured images, titles, category links, buttons, and archive links.
- Images: check cropping, loading, alt text, and alignment.
- Responsive layout: verify two-to-one column reduction for the featured grid and clean stacking for the topic grid.
- Empty and short content: inspect cards with short excerpts, long titles, missing featured images, and unusual category names.
- After template edits: revisit every grid that uses the saved card to ensure the shared change looks correct everywhere.
Native WPBakery route versus optional PostX route
The native route is sufficient for the described page: rows, Post Grid, Grid Builder, and page-specific CSS. An optional PostX route is useful only when you specifically want to design a saved template in PostX and embed that template in WPBakery.
| Decision factor | WPBakery Post Grid plus Grid Builder | PostX saved-template embedding |
|---|---|---|
| Additional setup | Uses the WPBakery workflow already described | Requires installing and activating PostX, then enabling its Saved Templates and WPBakery Page Builder addons |
| Card design location | Grid Builder | PostX saved template |
| Query control | Directly configured in each Post Grid | Depends on the embedded PostX template and its available controls |
| Best fit | Sites wanting direct WPBakery control and one reusable card | Sites already using PostX or preferring one of its template workflows |
| Embedding step | Select the saved Grid Builder item template | Publish the PostX saved template, add a PostX Template element in WPBakery, and select the saved template |
For this archive page, start with the native WPBakery method. Choose the PostX route only when its separate template workflow solves a specific need on your site.
Independent reader supportYour contribution helps us test, update, and keep practical guides available for everyone.Common problems and fixes
The grid shows the wrong posts
Check the data source first, then review included posts, category or taxonomy restrictions, exclusions, offset, ordering, and total items. A shared card template changes appearance; it does not change the query.
The category section is empty
Confirm that the selected category contains published posts and that the query is not also constrained by an incompatible tag, taxonomy, offset, or exclusion. Preview the category archive link separately.
Best Value
The search form reloads without results
Inspect the form’s method, action, and input name. The form must submit a value named s to the WordPress home URL. Test the front-end HTML rather than relying only on the WPBakery editor preview.
Cards have uneven heights
Use a consistent image ratio or height, limit excerpt length, and give titles enough room to wrap. Avoid forcing a fixed card height that cuts off text on mobile.
The editor labels do not match the tutorial
WPBakery labels vary by version and selected source or display style. Look for the equivalent Post Grid controls and consult the current content-element reference. The tutorial’s exact interface is recommended for WPBakery 9.0 or later.
The Tool Desk
Outbyte Driver Updater FREEFix the driver behind crashes, sound loss and screen glitchesFind Drivers →Outbyte PC Repair FREERepair Windows errors before they cause bigger problemsFix Now →Pagination is not available where expected
Pagination-related controls depend on the selected Post Grid source and display style. Review the items-per-page and display options available for that configuration, then test the resulting front-end behavior. Do not describe a static two- or three-item example as a paginated archive unless you have verified pagination on the actual site.
WPBakery license and project cost
Because this workflow is built around WPBakery, its license is the directly relevant software cost. On October 13, 2026, WPBakery’s official license page listed a one-site lifetime license at $82 USD, along with five-site and ten-site lifetime plans, one year of support, and a 15-day refund policy. Prices, plan contents, and refund terms can change, so confirm the current details on the official WPBakery license page before purchase.
No physical accessory, replacement part, consumable, or printed manual is required to create this page. The work is performed in WordPress with the WPBakery plugin and your existing theme, posts, images, and hosting environment.
Final implementation checklist
- Publish enough posts to make both grids realistic.
- Create a normal WordPress Page and open it in WPBakery.
- Add the H1, description, search form, and category navigation.
- Verify the search form submits
sto your WordPress home URL. - Create and save one Grid Builder card template.
- Build the two-post featured grid with a selected-post query.
- Build the category grid with a category-narrowed query and three columns.
- Apply page-specific classes and responsive styling.
- Preview the front end and test every link, query, image, and breakpoint.
- Remember that the page does not replace native category, tag, author, or date archive templates.
The result is a maintainable archive-style landing page: Grid Builder owns the reusable card design, while each Post Grid owns its own content query. That division lets you add sections, change featured posts, or refresh styling without rebuilding the page from scratch.
Quick Recap
Product prices and availability are accurate as of the date/time indicated and are subject to change. Any price and availability information displayed on Amazon at the time of purchase will apply.
