Designs and the Designer designs-and-the-designer

Last update: Wed May 03 2023 00:00:00 GMT+0000 (Coordinated Universal Time)

Topics:
Developing

CREATED FOR:

Developer

CAUTION

AEM 6.4 has reached the end of extended support and this documentation is no longer updated. For further details, see our technical support periods. Find the supported versions here.

CAUTION

This article describes how to create a website based on the classic UI. Adobe recommends leveraging the latest AEM technologies for your websites as described in detail in the article Getting Started Developing AEM Sites.

The Designer is used to create a design for your website using the Classic UI in AEM.

NOTE

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

Using the Designer using-the-designer

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

screen_shot_2012-02-01at30237pm

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

Designs are stored under /apps/<your-project>. The path to the design to be used for a website is specified using the cq:designPath property of the jcr:content node.

chlimage_1-74

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 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 considerations-when-designing-your-website

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

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

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.

recommendation-more-help

2315f3f5-cb4a-4530-9999-30c8319c520e