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
Bedrock Mission!

Learn more

View all

Sign in to view all badges

SOLVED

AEM component design that holds other few custom components

rsl_lucky
Level 4
Level 4

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.

1 Accepted Solution
Theo_Pendle
Correct answer by
Community Advisor
Community Advisor

Hello @rsl_lucky,

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.
 

View solution in original post

6 Replies
Ankur_Khare
Community Advisor
Community Advisor

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.

 

 

rsl_lucky
Level 4
Level 4
Thanks @Ankur_Khare for the quick turnaround, it would be great if any sample package with image container with placeholder for adding components would really help.
Theo_Pendle
Correct answer by
Community Advisor
Community Advisor

Hello @rsl_lucky,

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.
 

View solution in original post

rsl_lucky
Level 4
Level 4
Thanks theop76211228 for the steps, but would be great if any sample package with image container with placeholder for adding components would really help, am working with Editable template for the first and it would help in my learning.
rsl_lucky
Level 4
Level 4
Hi theop76211228 I don't see background image on template as you mentioned on step-1.