AEM component design that holds other few custom components

sailaxmanr83887

16-05-2020

Hi All, needs to incorporate title & other few custom components on a background(bg-img) image. While drag & drop components they do not show up on bg-img they are coming below the image. Any inputs how to achieve using Editable template. Need to drag & drop four components on bg-img.

Accepted Solutions (1)

Accepted Solutions (1)

Theo_Pendle

MVP

17-05-2020

Hello @sailaxmanr83887,

You can do this with existing Core Components and Editable templates by using component policies for the Container component:

  1. Edit your template and add a policy configuration for the Container. In the Background tab, check the Enable background image box:
    theop76211228_0-1589700852721.png

     

  2. Now go to your page, place a Container and edit it to add a background image.
  3. You can add components in the Container which will display above the background image:
    theop76211228_1-1589700957846.png

Of course, you'll probably want to add some styles to make the result a little better.
 

Answers (1)

Answers (1)

Ankur_Khare

MVP

16-05-2020

1.Create a background image component it will act as a container.

2. Add a layout container component inside background container component using data dly include.

3. Drag and drop image container component on your template.

4. Once you drag and drop that componrnt a parsys will come where you can add policies and drag and drop required component.

5. In the outer div of imagd container add a place holder for image so that you csn content author bavkground image and on top of that all thd components will come.

Hope it helps.