AEM component design that holds other few custom components

Avatar

Avatar
Validate 1
Level 2
rsl_lucky
Level 2

Likes

15 likes

Total Posts

30 posts

Correct reply

0 solutions
Top badges earned
Validate 1
Ignite 1
Boost 5
Boost 3
Boost 10
View profile

Avatar
Validate 1
Level 2
rsl_lucky
Level 2

Likes

15 likes

Total Posts

30 posts

Correct reply

0 solutions
Top badges earned
Validate 1
Ignite 1
Boost 5
Boost 3
Boost 10
View profile
rsl_lucky
Level 2

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)

Avatar

Avatar
Validate 1
MVP
Theo_Pendle
MVP

Likes

238 likes

Total Posts

251 posts

Correct reply

105 solutions
Top badges earned
Validate 1
Ignite 5
Ignite 3
Ignite 10
Ignite 1
View profile

Avatar
Validate 1
MVP
Theo_Pendle
MVP

Likes

238 likes

Total Posts

251 posts

Correct reply

105 solutions
Top badges earned
Validate 1
Ignite 5
Ignite 3
Ignite 10
Ignite 1
View profile
Theo_Pendle
MVP

17-05-2020

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.
 

Answers (1)

Answers (1)

Avatar

Avatar
Ignite 1
MVP
Ankur_Khare
MVP

Likes

159 likes

Total Posts

370 posts

Correct reply

58 solutions
Top badges earned
Ignite 1
Validate 10
Validate 1
Give Back 50
Give Back 5
View profile

Avatar
Ignite 1
MVP
Ankur_Khare
MVP

Likes

159 likes

Total Posts

370 posts

Correct reply

58 solutions
Top badges earned
Ignite 1
Validate 10
Validate 1
Give Back 50
Give Back 5
View profile
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.