[Resolved] Create homepage

[Miguel]

Good afternoon:

Currently, I have a website created with the Herald theme. It has a built-in front page editor, and I would like to recreate it in GeneratePress. I know it can be done with Elementor, but I don’t want to invest in that plugin, but do it all in the context of GeneratePress. I attach you privately the link of my current website. I’d like to more or less replicate, although it doesn’t have to be exactly the same.

I’ve read about using GenerateBlocks, but I find the whole process very unintuitive. Or maybe I’m not doing it right. But I can’t create a page that contains the elements I need. And I don’t know if I should edit it and add blocks from the ones included in GenerateBlocks or if I should create different GeneratePress ‘elements’.

I would also like to avoid using the site importer that comes with GeneratePress, because I also find too complicated to modify everything that doesn’t fit with my design. But if this is the best option, I might have to go for it.

Please, could you give me some guidance?

Thank you. Best regards.

[David]

Hi there,

ok, one question first.
On your current site, you have Post Carousels. That is not currently a feature of GenerateBlocks.
Is that something you require for the rebuild ?

[Miguel]

Hi David, and thanks for your quick assistance. If is possible to get something similar, it would be great, but it’s not essential. I would like, in any case, to get a relatively flexible way to design the homepage.

[David]

Without the carousels… i would work with a static Home page and build it with GenerateBlocks and particularly the Query Loop Block.

Getting Ready:

The current site has the basic theme setup:

1. Customizer > Site Identity -> Add logo.
2. Customizer > Layout > Container -> Container Width: 1400px
3. Customizer > Layout > Primary Navigation -> Location: Below Header

You should also set the Colors and Typography here, and where possible let the content inherit those.

The Home Page – the set up:

1. Use the Layout / Disable Elements meta boxes to remove Sidebars and Titles etc.

https://docs.generatepress.com/article/layout-metabox-overview/

Building the page

1. Add a GenerateBlocks (GB) Grid Block to the page. Choose the 2 column option.

This will add a structure like this:

Where you can select the grid item containers to set there % widths for desktop , tablet and mobile.

2. Now in the first column Container Block you can add a Query Loop block for your lists of posts.
But to save you some time you can copy some of the Free ( or Pro if you have the Pro plugin ) patterns from here:

https://generateblocks.com/library/?pattern-category=query-loop&pattern-type=free

2.1 For each Query Loop you add, the sidebar settings will show the Parameter where you can add Paramters eg. Taxonomy -> Category --> A specific term

2.2 To change the number of Columns , inside the Query Loop you will find a Grid and inside that a Post Template block, select that and set its Width like you do for the Grid column cotnainers.

That should get you started.
Let me know how you get on – we can advise any further steps you may need.

[Miguel]

Hi David,

I really appreciate the instructions you have provided. But I see that it is difficult to get it just as I would like it to be.

I think it’s almost obligatory to use a paid plugin like Elementor to design a home like this. I don’t think it would be easy to create a slider or allow the user to use arrows or pagination to see more content from a section, for example. Nor to use a common sidebar on the front page for the whole website, as we currently have.

Do you know of an alternative that I could use that would be simpler?

Thanks.

[Leo]

Do you know of an alternative that I could use that would be simpler?

No – David’s solution is the best we can recommend here.

Looks like he’s spent a considerable amount of time to write out the step-by-stey solution and mentioned that we can advise any further steps you may need – have you actually attempted it and got stuck somewhere?

If you’ve tried and absolutely don’t like the solution then perhaps Elementor is a good alternative for you.

[Miguel]

Hi, Leo,

We are very grateful for your and David’s assistance. The instructions were very helpful, but we didn’t get what we wanted, so in the end we opted for Elementor. However, we have kept these instructions in case we need them in the future. I’m sorry if I sounded ungrateful, but it wasn’t the intention at all. We don’t know any better support work than what you offer.

[Leo]

No problem at all.

Just let us know if you’d like to give his solution another shot 🙂

[Author]

Posts