Alternative layout to a sidebar

Hi Sean,

I don't think the mobile layout shown on the image is doable as there is no means to distribute the sidebar contents in between the main content elements.

There's also no way to do things the other way around, chopping the_contents in between the sidebar contents because the_contents() come as one whole value. (one can attempt to chop the content w/ PHP string functions but this will be very difficult to pull of because the contents of each page will vary.)

While one can attempt to do this with scripting (by fragmenting the DOM and appending it on the desired location on mobile), this complex customization is outside of our scope, unfortunately.

Hi Elvin,

Thanks for this information and explaining why it isn't easy/feasible to distribute the sidebar content in between the main content.

What if a sidebar wasn't used, and instead, just GenerateBlock containers and grids were used? Would that make it easy to have a right column on desktop (that acts like a sidebar), and on mobile, the right column's content could be moved (with css) to be in between the main column's content?

If not, I'm wondering if the following would be a good solution, or if it would cause duplicate content on the page since one location (sidebar or block) would always be hidden on all devices:

• On desktop, have a sidebar that is visible with content. In between the main content, the sidebar content would be duplicated in individual blocks and placed at the desired location on the page where it should display on mobile devices. These blocks would be hidden on desktop using the "Hide on desktop" option in GeneratBlocks.
• On mobile, hide the entire sidebar and display the "duplicated" blocks in the main content.

I have a feeling the last option would cause duplicate content on each page since it would probably only be hidden (vs not loading and not being in the source code), but figured I'd see what the GP team had for thoughts, as you guys always have great insight and recommendations!

What if a sidebar wasn’t used, and instead, just GenerateBlock containers and grids were used? Would that make it easy to have a right column on desktop (that acts like a sidebar), and on mobile, the right column’s content could be moved (with css) to be in between the main column’s content?

I picture the layout being done like this:

[ ( main content ) ( sidebar ) ]
[ ( main content ) ( sidebar ) ]
[ ( main content ) ( sidebar ) ]
[ ( main content ) ( sidebar ) ]

Where [] are Grid blocks and () are grid's column container blocks. With grid columns equal in width w/o any dividers between columns to make an illusion of vertical flow.

This way, on mobile, the grid column containers will stack like this similar to the mockup.

[ ( main content ) 
( sidebar ) ]
[ ( main content ) 
( sidebar ) ]
[ ( main content ) 
( sidebar ) ]
[ ( main content ) 
( sidebar ) ]

But this introduces multiple issues like alignment constraints. The sticky won't work as well because there won't be any vertical space to move around on because we've laid it out in grids to be able to distribute the sidebar in between main content in stacking manner on mobile.

I have a feeling the last option would cause duplicate content on each page since it would probably only be hidden (vs not loading and not being in the source code), but figured I’d see what the GP team had for thoughts, as you guys always have great insight and recommendations!

Yeah I get what you mean. You basically have to make duplicate contents of the sidebar in between the blocks on the main content's area and do hide-on-desktop and/or hide-on-mobile for them.

The problem with this is, you'll have to do this on every page. This is going to be a pain especially if this has to be done every time you create a post.

But I guess this is fine if you only intend to create this on 1 or 2 static pages.

Thanks so much Elvin! For the last option, would there be any SEO issues with having duplicate contents on the page? Would hiding it on a device make it "no exist" to Google and others, or would it still exist on the page source and have a negative impact on SEO and performance?

Hi there,

elements with CSS display: none are still output in the source code, and search engines still see it. SEO impact wise, shouldn't be an issue as it common place that duplicate content is generated for difference device sizes, eg. Desktop Navigation and Mobile Navigation. But if the content you're duplicating / hiding are adverts then you need to check the guidelines on how to do that correctly.

Thanks for elaborating on this David. It's good to know this shouldn't be an issue for SEO. I'll have to look to see what the recommendations are for advertisements, as we will probably be duplicating some of those in addition to other content. I appreciate you pointing me in the right direction!

Glad we could be of help