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

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?

Answers (3)

Answers (3)

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

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?