Your achievements

Level 1

0% to

Level 2

Tip /
Sign in

Sign in to Community

to gain points, level up, and earn exciting badges like the new
BedrockMission!

Learn more

View all

Sign in to view all badges

SOLVED

box or column control in aem 6.5

sreedobe
Level 4
Level 4

I have two buttons - aem core component.

button1, button2 these needs to be laid out "side by side" or "left aligned" or "right aligned" or "centered".

 

Does a core container component achieve above scenario? If not , please suggest some ways to achieve above scenario.

 

Thanks,

Sri

 

1 Accepted Solution
shelly-goel
Correct answer by
Community Advisor
Community Advisor

@sreedobe 

You would not be able to get this functionality as-is in any of the Core Components, and would have to do some customization. 'Button' component displays a single button. 'Teaser' component have the option of adding multiple buttons (CTA) as needed through a multi-field. You can either extend Button component to take button input as multi-field similar to Teaser or simply add necessarily styles (to Teaser component's policy) to display buttons left/ right or center aligned.
Teaser component: https://www.aemcomponents.dev/content/core-components-examples/library/page-authoring/teaser.html
Applying Styles: https://helpx.adobe.com/experience-manager/kt/sites/using/style-system-core-components-tutorial-deve...

Tough you could also leverage grid/ layout for placing the button as per the need, it has it's constraints of that the buttons cannot be aligned on a same image (if needed) and requires more grid/ css/ styling work.

View solution in original post

3 Replies
shelly-goel
Correct answer by
Community Advisor
Community Advisor

@sreedobe 

You would not be able to get this functionality as-is in any of the Core Components, and would have to do some customization. 'Button' component displays a single button. 'Teaser' component have the option of adding multiple buttons (CTA) as needed through a multi-field. You can either extend Button component to take button input as multi-field similar to Teaser or simply add necessarily styles (to Teaser component's policy) to display buttons left/ right or center aligned.
Teaser component: https://www.aemcomponents.dev/content/core-components-examples/library/page-authoring/teaser.html
Applying Styles: https://helpx.adobe.com/experience-manager/kt/sites/using/style-system-core-components-tutorial-deve...

Tough you could also leverage grid/ layout for placing the button as per the need, it has it's constraints of that the buttons cannot be aligned on a same image (if needed) and requires more grid/ css/ styling work.

View solution in original post

KiranVedantam1992
Community Advisor
Community Advisor

Hi @sreedobe,

 

You can achieve your use case by utilizing the concept of layout in editable templates.

 

Open your template and go to the layout mode

Add 2 parsys and arrange them according to your requirement

Place 2 buttons in those parsys and author them as per your requirement

 

Note: These changes affect the pages that are using the template already.

 

KiranVedantam1992_0-1609139044432.png

 

 

Thanks,

Kiran Vedantam.