Designs and the Designer

You are reading the AEM 6.2 version of Designs and the Designer.
This documentation is also available for the following versions:  AEM 6.3  AEM 6.1  AEM 6.0  AEM 5.6.1  AEM 5.6  CQ 5.5  CQ 5.4 

You will need to create a design for your website and in AEM, you do so by using the Designer.

Note

For more information about Web accessibility, see AEM and the Web Accessibility Guidelines.

Using the Designer

Your design can be defined in the designs section of the Tools tab:

file

Here you can create the structure required to store the design, then upload the cascaded style sheets and images required.

Designs are stored under /etc/designs. The path to the design to be used for a website is specified using the cq:designPath property of the jcr:content node.

file

Note

All the changes that are made on a page in design mode are persisted below the design node of the site and are automatically applied to all pages that have the same design.

What you will need

To realize your design you will need:

CSS

The Cascading Style Sheets define the formats of specific areas on your pages.

Images

Any images that you use for features such as backgrounds, buttons.

Considerations When Designing Your Website

When developing a website, it is highly recommended to store images and CSS files under /etc/design/<project> so you can reference your resources based on the current design like described by the following snippet.

<%= currentDesign.getPath() + "/static/img/icon.gif %>
        

Code samples are intended for illustration purposes only.

The preceding example offers severals benefits:

  • Components can have a different look/feel based on each site using a different design path.
  • Re-design of the website can be simply done by pointing the design path to a different node at the root of the site from design/v1 to design/v2.
  • /etc/designs and /content are the only external URLs that the browser sees protecting you of an external user getting curious about what is under your /apps tree. The above URL benefits also aid your System Administrator to setup better security because you are limiting the exposure of the assets to a few distinct locations.

Any questions?

Have a question about this or any other AEM topic? Ask our Community.
Learn more about AEM topics on our help hub.
Was this helpful?

By submitting your feedback, you accept the Adobe Terms of Use.

Thank you for submitting your feedback.