Do you want your website’s Blog page to stand out from the rest? Do you want it to be more interactive and stylish than anyone else’s in this industry? Then, I have good news for you. In this post, we’ll show how Elementor can help create an attractive design that makes it easy for users on your site to interact with all of your latest blog content!
Traditionally, most blog pages are in grid style, where each blog post is laid out inside a block, arranged in rows and columns, following the same set format throughout.
However, what if I tell you another way – a more modern approach to designing a post grid uniquely with two different layout designs.
Displaying blog posts in two different styles can be challenging if you do not know how to code. But no longer! With AnyWhere Elementor Pro’s Posts Blocks Advanced widget, you can create an attractive post grid for your website without touching any lines of code. The Advanced Post Blocks give you more layout styles, like Smart Grids and CheckerBoard, to enhance the power of the standard Grid layouts.
Key Takeaways: What You’ll Learn
- Understand the difference between Smart Grid and Checkerboard layouts in Elementor.
- Learn how to create two block layouts using AE Templates.
- Discover how to implement advanced blog grids using the Post Blocks Advanced widget.
- Explore configuration settings like query sources, layout styles, and pagination.
- Enhance your blog’s visual appeal and user interaction without writing code.
What are Smart Grids & Checker Boards
Smart Grids
Smart Grids are an enhanced version of the Grid structure with non-uniform grid layouts. It is itself a collection of multiple layout modes.
Each smart grid layout has one featured block that is larger in size. You will have a choice to load a separate Block Layout for this particular featured block. Also, smart grids are usually useful for Desktop Layouts. So on tablet and mobile devices, you can show them as a standard grid layout by defining the column count for the table. The image below will give you an idea of what SmartGrid design is:
Checker Board Layout
Checker Board Layouts are similar to standard grid layouts but with an option to use a different layout of alternate post items.
You can imagine it as a chessboard. So you have two block layouts arranged in a grid format. The below image will give you an idea of what the CheckerBoard design is:-
How To Implement Smart Grid & CheckerBoard in Post Blocks
To add a Smart Grid and Checker Board design to your normal Grid structure, we need two separate layout designs to represent in blocks, so first we need to create them.
Step 1: Create a Primary Block Layout(layout 1)
- Go AE Template, and under the AnyWhere Elementor Settings, you need to do the following configurations.
- Under the Render Mode, select the Block Layout option, and then in Preview Post, enter the name of the post you want to preview in the Layout.
Once done, edit this Template in Elementor editor and use appropriate widgets to get the Posts’ Content.
Once you are satisfied with the layout design, hit the Publish Button.
Step 2: Creating Secondary Block Layout (Layout 2)
Similarly, like above, we need to create another alternate layout to present the posts in two different fashions.
After you have both the block layout ready with you, it’s time to implement your design in live. For this, we will use the AE- Post Block Adv widget of Anywhere Elementor Pro.
Step 3: Adding Post Grids on Page / Template
Create a Page or template and edit it with Elementor, and then AE widgets, locate the AE- Post Blocks Adv widget, and add it to a container.
Configuring the Post Blocks Adv
After adding the widget, we need to configure it:
Setting Up Layout
- Under the Skin option, select the Grid layout option.
- Then select the block layout(layout 1) that we have created above.
- Next, under the Grid Layout, select the Smart Grid or Checker Board layout.
- On choosing the Smart Grid option, you will see a few layout styles; select any grid style, and then under the Secondary Block Layout option, select the alternate block layout 2 that we have created.
- To display the blocks seamlessly, enable the masonry option. To give navigational control, allow the Navigation option.
Setting the Query Parameters
In the Query setting option under the Source, select Post, Pages, or Custom Post Type, etc., whose post you want to display. Here, I have selected the Current Archive in the source.
Moreover, to give Facet filtering to the Posts, enable the FacetWP option under the Facet option. Next, you will get more control options if you want to apply Pagination and Overlay to the blocks.
FAQs on Post Blocks in AnyWhere Elementor
What are Smart Grids in Elementor?
Smart Grids are advanced grid layouts with one large featured post and multiple smaller ones. They offer visual hierarchy and help highlight important content, perfect for modern blog pages.
What is a Checkerboard layout?
Checkerboard layouts alternate between two different post block designs (like a chessboard). This creates visual diversity and breaks the monotony of uniform grids.
Can I create these layouts without coding?
Yes! With AnyWhere Elementor Pro, you can create Smart Grid and Checkerboard layouts entirely using the drag-and-drop Elementor interface.
Is this layout mobile responsive?
Yes. You can customize column counts for tablets and mobiles, or fallback to standard grid layout when using Smart Grids for better responsiveness.
Conclusion
And that’s it! You’ve just built a powerful, interactive blog layout using Smart Grid and Checkerboard styles. Ready to transform your archive pages? Try it today with AnyWhere Elementor Pro and create layouts that truly stand out.
Check out the Demo Implementation of Smart Grid & Checkerboard Layouts in Post Blocks.
