[Resolved] Custom home page / multiple content boxes

[Gordan]

Hi,
I’m using the Marketeer template.

The archive separates content pieces into individual boxes (HTML article elements). 1 post == 1 box – https://gpsites.co/marketer/category/uncategorized/
I’m trying to do something similar for my home page so I created a page, set it as home and went to edit with Elementor. I can easily add widgets and everything I need but the problem is all my content is in one content-box (<article>) like a page content is – https://gpsites.co/marketer/contact/

So my question is: what’s the easiest way to create multiple content boxes on the front page? Or to be more precise multiple <article> elements. Preferably so I can edit everything with Elementor. If a custom page template is needed, or some coding in general, I don’t mind 🙂

Thank you!

[Leo]

Hi there,

As far as I understand, it’s not possible to edit a page using both the default editor and Elementor.

I would assume you can create the boxes style using Elementor only though.

Have you checked with their support? They should be able to point you in the right direction 🙂

[Gordan]

Hi,

You didn’t read my question nor answer it. I didn’t even mention multiple editors in my question so I really don’t understand why are you mentioning that.

My question has nothing to do with the editor that’s used. It has to do with the way a static front page (or any page for that matter) is rendered. The markup is set up in such a way that the whole content is inside one <article> element. Hence it looks like it’s in one box. Like this example – https://gpsites.co/marketer/contact/

On the other hand content in archives is rendered in multiple <archive> elements, one for each post. Like this – https://gpsites.co/marketer/category/uncategorized/ I want to achieve that look on my front page and have multiple “boxes” populated by various static/dynamic content. Preferably edit everything with Elementor, but it’s not a necessity.

[Tom]

Hey Gordan,

There are two ways I can see:

1. Set up a custom page template, which includes multiple <article> elements. These elements would need a <div> inside them, which has the inside-article class. This is pretty advanced, as you’d need to build out the template. Where would the content come from? If it’s a dynamic source, you’d need to loop through each item to build multiple article elements (exactly like our blog).

2. Target your current HTML classes, and write CSS to match them to the standard blog post look. If you want to link me to your page with the separate columns to separate, I’m happy to help with the CSS. This is easier, as it doesn’t involve custom page templates.

This all depends on where the data is coming from. If you’re adding widgets in Elementor, I think #2 is your best bet. We can remove the standard background color/shadow, and add it to the Elementor boxes.

[Gordan]

Thank you, Tom! I was having my fingers crossed for a “we’ve already done that, here’s the code” kind of answer 🙂 I’ll do a custom page template. Since I won’t change it so often it’s not gonna be a problem.

[Tom]

No problem! Let me know if you run into any issues with it 🙂

[Author]

Posts