Skip to main content Skip to footer

Voxel Guides

Creating a Sleek Combined Single Post and Preview Card Layout – The "Seek" Design in Voxel Theme

This article explains how to build a clean, efficient combined single post and preview card layout in the Voxel WordPress Theme, inspired by the Seek Jobs website.

Motivation: Inspired by Seek

Seek is a Jobs website with a straightforward design that pairs detailed job listings with concise preview cards. This layout allows users to quickly browse listings and access full details without confusion or excessive navigation. The goal was to replicate this streamlined experience within the Voxel theme.

The Concept

  • Combined View: Display the full single post content alongside a scrollable list of preview cards.
  • Consistent Styling: Uses CSS variables for fluid spacing, typography, and border radius, helping to maintain a simple, consistent design.
  • User-Friendly Navigation: Sticky elements to keep important details in front of your users.

See it working here (not on mobile)

Unleash Dynamic Data with Voxel!

voxel-logo
.
With Voxel’s design flexibility, the possibilities are endless. Get Voxel here!

How to Build it – Elementor Template Details

Step 1: Create Two Preview Card Templates

A regular preview card design – used for selecting the post (left-hand side), but has a link to a query parameter containing the post ID.

eg. Link: ?‘your-query-var’=@post(id)
Link: ?article=@post(id)

The second preview card – A complete single-post design built into a preview card (right-hand side).

Nothing too special here, just paste your single post template into a custom preview card template.

Step 2: Design your Archive Template with Two Post Feeds

On your archive template, design a two-column grid with the right-hand column sticky and 100vh max height.

Add post feeds into the left and right columns.

The left-hand post feed will use the regular preview card design that has the query parameter link.

The right-hand post feed will have the Data source set to Manual selection, display 1 post, 1 column layout.

Step 3: Configure the Right-Hand Post Feed Data Source

Configure the Manual data source from dynamic tags of a Site Query parameter, referencing the parameter defined in the preview card.

eg. Choose posts > @site().query_var(‘your-query-var’)

Post source = @site().query_var(article)

So, Post source = Preview card – postID.

Known Issues

  • No native visit tracking: Because the single post is displayed in a post feed, the user never visits the single post page – hence cannot be tracked using Voxel native analytics.
  • Page reload time: Depending on your website server or visitor location, the page reload time will vary.
  • Loss of preview card scroll position: As the page is reloaded, the scroll position of the preview cards is lost on each refresh.
  • Only for larger screens: This layout is not intended for mobile. The mobile design consists of standard preview cards that link to the single post.
  • Pagination lost on page reload: Issue when you have a large number of feed items.
  • Image Lightbox not triggering: Cannot expand/zoom in images.
  • Minor formatting issue: Seems to have lost borders of Table elements…

Next Steps

Want to implement this sleek “Seek” layout on your Voxel site? Follow the steps above to build it yourself, or contact me to hire a professional and get it done quickly and correctly.

More Articles

How to Group Taxonomies by Parent and Child on Single Post Template Voxel Theme

Displaying parent categories with their child categories grouped underneath in Voxel is difficult and not directly supported by default term feed options. To achieve this, you need to use a term loop workaround that allows child terms to be looped inside a parent term preview. The steps below show how to do this using native […]

Voxel Framework – Voxel Theme Features for Bricks and Gutenberg Users

Voxel Framework is a new WordPress plugin in development that brings Voxel’s features to Bricks Builder and Gutenberg. While Voxel can create custom post types, taxonomies, and custom fields — and supports powerful dynamic data, conditional logic, and visibility rules — its real value goes far beyond content structure. Details below are speculative based on […]
Previous Next