How can we develop a custom editable template in AEM 6.4?

Avatar

Avatar

surenk

Avatar

surenk

surenk

13-08-2019

Our customer gave us a design mockup and asked us to develop a template similar (background image, over title, text on bottom) to the mockup.

How can we develop an editable template to look like a design mockup? What are the steps/process involved to bring in the HTML and CSS to the editable template?

Accepted Solutions (1)

Accepted Solutions (1)

Avatar

Avatar

jbrar

Employee

Avatar

jbrar

Employee

jbrar
Employee

14-08-2019

Go through WKND chapter 4 that covers everything you mentioned above.

[1] 4 - Style System

Answers (3)

Answers (3)

Avatar

Avatar

joeb21688728

Avatar

joeb21688728

joeb21688728

13-08-2019

Working with Editable templates and client libs are covered in this doc:

WKND Tutorial Overview

Using LESS CSS and developing components in an editable template - you can design most sites to meet your customer requirements

Avatar

Avatar

surenk

Avatar

surenk

surenk

13-08-2019

Thanks hamidk11679710

The PageProperties section at Creating Page Templates isn't detailed enough.

We built a sample project using GitHub - Adobe-Marketing-Cloud/aem-sites-example-custom-template-type: Sample for building an AEM Te...

Screen Shot 2019-08-13 at 3.36.43 PM.png

and want to apply our custom CSS (global.css) to the Editable Template and then apply individual styles to components being placed in the editable template as below:

Screen Shot 2019-08-13 at 3.42.08 PM.png

Screen Shot 2019-08-13 at 3.42.50 PM.png

Should we apply the STYLES at Component level instead at TEMPLATE level?

Avatar

Avatar

hamidk92094312

Employee

Avatar

hamidk92094312

Employee

hamidk92094312
Employee

13-08-2019

You may want to check the following doc:

Creating Page Templates