How-Tos

How to make a creative mixed blog archive layout?

In TheGem’s pre-built blog archive templates you can find extended blog layouts with mixed grids, lists, sliders etc. It is always useful to create interesting blog layouts thus increasing the engagement of your website visitors.

As said above, you can combine any grids and lists within your blog archive. In order to avoid posts duplication and maintain the correct posts hierarchy we recommend to use “Offset” setting. This setting helps to displace or pass over the specified number of posts inside the selection.

Let’s say you wish to create a blog archive layout with a prominent featured posts slider in the hero section, which includes 3 latest posts from this blog category, followed by 4x blog grid with 8 posts and 1x blog list at the end of a page:

1. Add “Featured Posts Slider” in the first section of your template, select “All posts from blog archive” in “Source” and limit the number of posts to be shown by entering “3” in “Max. number of posts in slider”

WPBakery:

Elementor:

2. Add “Posts Extended Grid” in the second section, select “4x Columns” and enter “3” in “Offset” field of this blog extended grid to pass over the first 3 posts already added in featured posts slider above; additionally disable the pagination

Elementor:

3. Add “Posts Extended Grid” again, select “List Style” in “Skin” field, enter “11” in “Offset” field to pass over the first 11 posts already used in featured posts slider and first blog extended grid; additionally select the pagination type you wish

That’s all. In this way you can combine different blog elements, grids, lists and sliders within one and the same blog category, making your blog archive look awesome.


You might be interested in enhancing your blog categories templates with additional sections like “popular posts”, “recent posts” etc. In order to do this, you can simply add any of the blog elements to your blog archive template (like blog grid, blog list, blog slider) and make the matching selection in “Source” and “Sort Order” settings.


For example you wish to show 6 recent posts from all blog categories in a 3x grid. Just add the “Posts Extended Grid” to your blog archives template, select “Categories” and “All” in “Source” and as a Sort Order select “Date”. In “Pagination” section limit the number of posts to show to “6”. That’s all.

WPBakery:

Elementor:

In the same way you can use different settings in “Source” and “Sort Order” to display popular posts, random posts, posts by some author etc.


How to add Google AdSense?

Adding Google Adsense to your blog archive template is easy. Just use “HTML” content element, add it to your blog archive and paste the AdSense code.

WPBakery:

Elementor:


How to add a sidebar?

If you wish to add a sidebar, you can add a column and populate it with the needed content elements. Alternatively, you can add a “Sidebar” element to your blog archives template and select the sidebar to be displayed (you can manage default sidebars via Appearance -> Widgets in your WordPress admin; also you can customize the content of the sidebar per blog archive by using “Customize” setting in “Category Widgets” section of archive’s page options.

WPBakery:

Elementor:

Custom sidebar:

Global settings:


How to make a column sticky?

WPBakery:

Elementor: