Custom Post Block/Design

Hello,

I’m re-designing my website and looking to create a custom homepage that uses different types of blocks to show posts (either latest, or specific to a category or tag), and I’m struggling to find a way to do this with X and Cornerstone. I find that there’s elements and/or element customization missing for this.

Let me show you some examples of what I mean:

All of the above examples are different ways/forms of showing posts, and I can’t find any way to replicate it using X or Cornerstone. I’ve also tried The Grid and Essential Grid and haven’t been able to do this.

I’ve seen that there are some third party plugins for Gutenberg which allow some kind of custom blocks, but I’m using Cornerstone, and not Gutenberg for my pages.

I’ve seen that some other themes do offer functionalities like this in-built, two examples:
(please delete the links if it’s not allowed to show these here)

I’ve been using X for a long time, and Pro on a second site, and really like it, and would if possible avoid switching to a different theme. I just find that X seems to be missing these kind of dynamic elements for more blog/news/magazine style websites.

If you can point me in the right direction on how to create blocks like the ones shown above, I would highly appreciate it. Maybe the functionality is already there, and I’ve just not found it.

Thank you so much!

Hello @Lunatic_Zorr,

Thanks for writing in! At the moment, we only have the recent posts element that allows you to insert the latest post items or from the specific category. You can only display it vertically or horizontally. We do not have any other layouts that you can choose on. If you wait for a little longer, you can utilize the upcoming layout builder feature that will be exclusive to the Pro theme. You can check it out here:

Best Regards.

Hi @ruenel,

Thank you for your reply. Thank you for pointing out the upcoming layout builder. I hadn’t seen that. But, looking at the link you provided, some questions come up:

  • Why will it be exclusive to the Pro Theme? That seems kinda unfair towards X Theme users.
  • Looking at the page you linked, it seems to be a builder for static content/pages. I don’t see any example or template on the screenshots that seems to relate to how posts are displayed. Is this going to be possible with the builder? Will it be possible to replicate post lists/blocks like the examples I’ve shown in the first post?

If it’s not possible with X or Pro to create post lists and/or block like the ones shown in my previous post, do you know which would be the best way to achieve this? Any third party (non Gutenberg) X/Pro compatible plugin/addon that can achieve this?

Looking at the examples/demos and showcase for X and Pro, I also don’t see any news/magazine/blog style templates or sites (I think there’s ethos magazine, but that just one type of post list by default). Are X/Pro not really meant for these kind of websites?

EDIT:

Also, I think it would be awesome if the Blog Index style could be changed/selected independently of the stack used. For example, make it possible to use the Ethos Magazine Blog Index layout in other stacks. Why limit that?

Kind Regards,
Kevin.

Hey Kevin,

Pro is especially helpful for professionals or those who want maximum control over all options that’s why the new Layout Builder is included in Pro only just like the Header and Footer builder while X is a great choice for designers, content builders or developers that prefer to have more stylized choices built-in that provide a starting point in order to get a website built quickly.

I believe you still can achieve the similar layouts by using either Essential Grid or The Grid elements. You can checkout the demos here https://demo.theme.co/essential-grid/ and here https://demo.theme.co/the-grid/

You can also visit their official documentation sites here https://www.themepunch.com/support-center/essential-grid/ and https://theme-one.com/docs/the-grid/

Hope this helps!

Hi @nabeel,

Thank you for your response, and for the clarification on the Layout Builder. As I understand it it’s mainly a business decision. That’s fine, Theme.co build these amazing themes, and they obviously have their reasons and markets to reach.

Can you provide any example that looks similar to the screenshots I posted in my first post? The examples on the links you provided don’t seem to looks anything like it.

Taking my screenshots 1, 2, 3 and 4 for example. With Essential Grid and The Grid, I’ve not been able to get text either on the right or left of the photo, only above, or below.

Taking screenshots 5 and 6, the four posts on one side and one big post on the other side could maybe be achieved by creating two grids (a four post two column grid and a one post grid) and having them in a two column section. But, having to create two grids for this is just adding work where some other themes have this in-built and without any third party plugin.

Screenshot 7, would maybe be possible as the previous, using two grids. But 8 and 9 not so sure.

The thing is, the first 4 screenshots are in my opinion the most important ones, the ones that allow the most flexibility, but I see no way of creating them using either The Grid or Essential Grid.

Kind Regards,
Kevin

Hello Kevin,

Thanks for your feedback.

Your examples 1, 2, and 3 can be achieved by modifying the default blog index of the stacks (integrity, renew, ethos or icon) with custom CSS and template modifications. This will only apply to the blog index. You cannot add the changes or modifications as part of your static homepage.

Examples 4 can be easily added to your homepage by utilizing the Recent Posts elements.

Examples 5 and 6 can be added with the help of the dynamic content to display the featured image and the post title by inserting an image and a text element. The recent posts element can then accommodate the 4 post items next to the highlighted post item.

For example 7,8 and 9, this can be achieved with the help of the Grid or the Essential Grid plugin. You may check out the grid examples here:

Though the examples are not the same as what you have shown, it can be achieved by creating your own grid or by editing the grid skin to make it similar to the examples.

Hope this helps.

Hi @ruenel

Thank you for your response.

That is what I was fearing. Having to do code and CSS changes to get a custom blog index. Because that would affect the whole of the blog index. I was thinking of having 2 or more blocks of Post lists using different designs like the ones shown. As in, use one type for CategoryA, another type for CategoryB and so on.

Really? I’ll give it a try again. I tried using dynamic content and also the recent posts element and wasn’t able to do so.

I’ve imported all the Demos and Praia shows a big photo on the left and 4 posts on the right and more posts below. But trying to use it and adapt it I can’t find a way of showing that image big. It shows all posts the same size. Any idea?

Hello @Lunatic_Zorr,

You may need to check your Grid settings. Use the “Masonry” setting and make sure that one of your images is bigger than the others so that it will display in a masonry style.

Hope this helps.

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.