Expand my Community achievements bar.

Enhance your AEM Assets & Boost Your Development: [AEM Gems | June 19, 2024] Improving the Developer Experience with New APIs and Events

Author customization of layout container grid size

Avatar

Level 2

Hello,

 

I'm trying to allow authors to drag multiple layout containers onto a page and allow each one to have a customizable grid size. We've been using editable templates so far but from what i'm seeing with testing/reading in the documentation it doesn't sound like that's possible unless we use static templates so design mode can be enabled. Is that correct or am I missing something?

 

https://experienceleague.adobe.com/docs/experience-manager-65/administering/operations/configuring-r...

 

Thanks

2 Replies

Avatar

Community Advisor

HI @EV909 , what i understand is you are trying to have multiple layout containers with different grid sizes on the same page, for this you don't have to deal with it at the template level.

You can allow Layout Container available in General on your Page & just author its grids size from Responsive Settings. 

 

Follow these steps given with screenshots for your reference.

 

Step 1: Drag & Drop Layout Container component on your page.

Aditya_Chabuku1_0-1658518935077.png

 

Step 2: Resize the Layout Container Component using the switch icon and add more of them as you needed.

Aditya_Chabuku1_3-1658519256593.png

 

 

Aditya_Chabuku1_1-1658519044092.jpeg

 

Step 3:  Author them accordingly.

Aditya_Chabuku1_2-1658519116563.png

 

 

Hope this Helps

~Aditya.Ch

Thanks,

Aditya Chabuku

Avatar

Level 2

Thanks Aditya,

 

Yes that is the general idea of what I'm trying to do but ideally I'd want the layout containers to still span across the entire page, just changing the size of the components within those containers. So if i had two layout containers stacked on the page with different grid sizes, it would look more like -

 

When changing the layout of a component in the first layout container:

image.png

 

When changing the layout of a component in the second layout container:

EV909_0-1658520115133.png

 

This doesn't seem possible with editable templates because there's no way to define the grid columns of the layout container component since the author doesn't have access to design mode.