Getting started with AEM

Size: px

Start display at page:

Download "Getting started with AEM"

Adam Gibson
5 years ago
Views:

Getting started with AEM First Steps Login (Editorial interface) Interface Overview Browsing pages and assets Create or edit a new page Edit a page Digital Asset Management (DAM) Asset folder

1 Getting started with AEM First Steps Login (Editorial interface) Interface Overview Browsing pages and assets Create or edit a new page Edit a page Digital Asset Management (DAM) Asset folder structure Importing assets Edit metadata Site Management Website structure in AEM General folder structure Content structure Editing pages Page types (Templates, Components) Create a new page Edit your page

2 First Steps

Login (Editorial interface) To log into AEM please start a web browser and use following URL: http://author-aem.arvato.

3 Login (Editorial interface) To log into AEM please start a web browser and use following URL: The Login screen appears: Figure 1- AEM Login Screen Please use the Username (usually your RACF user) and the Password you received.

Interface Overview The following screenshot shows the main navigation elements. Menu For content management the most relevant Menu options are Sites and Assets.

4 Interface Overview The following screenshot shows the main navigation elements. Menu For content management the most relevant Menu options are Sites and Assets. Under Sites you find the complete Website-structure. It s the entry point to create and edit your web pages. Assets is the entry point to the Digital Asset Management (DAM) where you can import and organize digital assets for the Website and edit their meta-data. Content area Depending on your selection in the Menu, the content area shows the available elements, mainly pages and assets. You can navigate through the site or asset structure, select elements and start actions on them by clicking Items in the Toolbar. Toolbar By clicking items in the Toolbar you can start certain actions with selected elements in the Content area (mainly pages and assets). The set of available icons is varying depending on the selected elements in the Content area. Content navigator Pages and assets are hierarchically organised in a folder structure (like in Windows explorer). The Content Navigator always shows you the parent folder and by clicking it you can navigate one level higher.

5 Browsing pages and assets As mentioned the Website with all its pages and also the assets are organised hierarchically in a folder structure. When you choose Sites in the Menu you see the root folder arvato.com. By clicking on the root folder arvato.com you can open the folder and you see the page-structure below. Please note that a folder in the structure you see under Menu option Sites usually represents a web page but there are some exceptions. You can switch between 3 different layouts of the Content Area by clicking on the Layout Icon at the far right in the Toolbar. The most usefull layout is the List Layout which shows the page structure in a tree view (like in Windows explorer).

6 Navigating Assets works very similar to page navigation. On root level you find only one folder called arvato. Clicking one level deeper you find 3 subfolders for Images, Videos and Documents.

7 The images you see on the folder icons represent the last images (resp. video or document) that were imported into that folder. As in page navigation you can choose switch to tree view layout by clicking the Layout Icon.

8 Digital Asset Management (DAM)

thematically. Please note, that a folder "Migration" is located under "Images", "Videos" and "Documents" root folder.

9 Asset folder structure On the main level we distinguish the asset type, namely "Images", "Videos" and "Document". On the next level and all sub-levels (Screenshot shows subfolders under folder Images) the folder structure is organised thematically. Please note, that a folder "Migration" is located under "Images", "Videos" and "Documents" root folder. This folder contains all assets provided by the "Pilot units" for the automated migration of the Solution-, Service- and Cases-pages.

10 Importing assets When it comes to management of the digital assets one of the most important tasks is to import new assets into the system. There are different ways to import assets into AEM. The most convenient way is to move them from you Windows explorer (or Mac Finder) into AEM via drag & drop. First of all click on Assets in the Menu and choose the target folder in which you want to import your assets. Then mark your asset-files in the Explorer and drag them on empty area in of the Content Area. Alternatively you can click the Upload Asset icon in the Toolbar and an upload dialogue will open in which you can choose your files.

11 Edit metadata

12 Site Management The website's content is organised hierarchically in form of folders, comparable to a file system on PCs. There is a general folder structure whose function is to partition the content for specific purposes (e.g. separate Corporate content from Solution Group specific contnet). Underneath the general folder structure the actual content structure is located containing all the web-pages to be published to the live system.

13 Website structure in AEM

General folder structure In the following the general folder structure and one of its main purposes - the ability to share content - is described. Level 0: Root folder arvato.

These are pages that are supposed to be shared across diffenrent sub-sites, namely the Corporate site, Market- and Solution Group-subsites.

14 General folder structure In the following the general folder structure and one of its main purposes - the ability to share content - is described. Level 0: Root folder arvato.com The Root-folder arvato.com contains all pages of the website. It ist just a technical folder and does not represent a concrete page. Level 1: Subfolders under root folder arvato.com. The 3 subfolders have the following purposes: Folder "Global": Contains the Global Content Pool. These are pages that are supposed to be shared across diffenrent sub-sites, namely the Corporate site, Market- and Solution Group-subsites. Folder "Solution Groups" contains the landing pages of the Solution Groups and all their subpages. Folder "Markets" contains the landing pages of the Markets (Countries) and all their subpages. Level 2: Subfolders under Global, Solution Groups, Markets Level 2.1: Subfolders under Global The following subfolders are located under "Global". There are 2 types of Content in the Global-subfolders Pages - they are located in Subfolder "Contents" Structured data (Contacts, Locations, Statements) Subfolder Contents (pages to be shared) As already explained the "Global" folder contains content that is supposed to be shared with the Corporate site, Market- and Solution Group-subsites. Therefore it is also called the Global Content Pool. All pages located in this Pool can be accessed by Editors from Corporate Communications and from the Solutions groups and markets. Editors from Corporate Communications and from the Solutions groups can pick up pages and copy them

15 to their own Solution Group sub-sites (resp. the Corpoate site). The copied pages are so called Live copies. That means that when the original page in the Global Content Pool is changed, these changes can be automatically transfered to all copies ( Live copies). If a Solution Group decides to have an own version of the page, the inheritance can be cancelled and from that moment it is an independent page that can be changed on Solution Group Level. Editors on Market-Level have basically the same option to pick up Live copies but with one difference. They can only get a Live Copy of a page after an Editor with rights to edit content in the Global Content Pool grants access. Granting access to a page means to rollout the page to a Shar e-folder (e.g. "UK Share" for market UK). Editors on Market-Level can then pick up the page from the Share-folder and roll it out to their Market sub-site. Please note, that content in the Global Content Pool cannot be published for it is just a pool containing content to be shared. The following graphic outlines in which directions content can be shared: Subfolders for Structured Data (Contacts, Locations, Statements) The Structured Data in the Global Content Pool can be accessed from every Editor regardless of wether he is responsible for a Market or Solution Group sub-site or for the Corporate site. 3 types of Structured Data is stored in the Global Content Pool: Contacts - Contact-Persons with their name, position and contact data (phone, fax, etc.) Locations - arvato Locations with their addresses, contact data (phone, , website) and Geo-location (Google maps format) Statements - A pool of statements to be used mainly on Solution pages (Solutions, Services, Cases, Industries) Subfolder "Corporate" The content located under subfolder "Corporate" is not part of the Global Content Pool. This folder contains all pages of the Corporate-site of arvato.com. It has the same page-structure as the Solution Group- and Market folders (located one level higher in the hierarchy - see Level 2).

g. arvato.co.uk) The structure within all 3 mentions sites is basically the same. The root-pages in the page-tree are always the language specific landing pages in each language the sub-sites (resp.

16 Content structure Web-pages to be published remain on 3 different places in the Site structure: Global / Corporate - The Corporate site (arvato.com) Solution Groups / <SG-Name> (CRM, SCM, Finance, IT etc.) - The Solution Group sub-sites (e.g. finance.arvato.com) Markets / <Market-Name> (UK, France, Spain, US etc.) - The Market sub-sites (e.g. arvato.co.uk) The structure within all 3 mentions sites is basically the same. The root-pages in the page-tree are always the language specific landing pages in each language the sub-sites (resp. the corporate site) support. Example: Language specific landing pages for Corporate: Underneath each language specific root page the following sub-pages appear. These sub-pages and the whole page-structure underneath correspond to the page navigation:

17 Pages can be removed from the page navigation. In the example above the pages "Services" and "Cases" are not available in the navigation. In our web structure you can implement new pages by selecting the place (within the AEM sitemanager) and the template for the page. You have different page templates you can choose from. Each page template offers different possibilities to use components and has a different layout (see Page types (Templates, Components)). One of the basic layouts decision is the choice between a page of content type full or a page of content type with sidebar. We have 3 general types of pages: homepages solution pages special purpose pages Note: Under different branches you can only place specific page types (templates). E.g. a page of type "solution" can be placed under a page of type "solution overview", whereas a "homepage" cannot be placed there. Homepages A homepage is always in a particular language. E.g. our homepages below "corporate" are "English", "German", "French" or "Spanish".

18 Editing pages

19 Page types (Templates, Components) The AEM setup for arvato contains several pre-built page types, so called Templates. A Template defines the page layout and a page structure. Page structure means that the template defines areas within a page, where content can be placed and also wich types of content (in AEM wording: Components) are availabe for the page. Examples for components are text-components or image components. There are 3 general types of pages: Homepages - also called Landingpages, for example the arvato.com Homepage or a Solution Group Homepage Solution pages - pages where arvato's solutions are presented Special purpose pages - e.g. a "People overview page" to show the management board or a page to show press releases

Create a new page To create a new page navigate to the page under wich the new page

To add a new Solution page for example: click the Solution overview ("umbrella

Click the "+" icon in the toolbar and choose "Create Page" from the menu: Choose a

20 Create a new page To create a new page navigate to the page under wich the new page should be located in the page-tree. To add a new Solution page for example: click the Solution overview ("umbrella solution") page, in this example "Financial solutions". Click the "+" icon in the toolbar and choose "Create Page" from the menu: Choose a page templates - in this example "Solution" and click the "Next" button: A screen appears where you can edit some basic information for the page you are about to create:

21 Enter at least a Page title in the "Title" field. You can change all page properties later. Then click the "Create" Button and open the page. The new page opens in the Page Editor.

With the Content Finder you can search for assets stored in the DAM and drag them on the page.

22 Edit your page The Page Editor shows the page in the same layout as it would appear on the website after it is published. On the left side of the screen the Content Finder is located. With the Content Finder you can search for assets stored in the DAM and drag them on the page. You can switch to the Component Panel by clicking on the tab "Components". A list of avaiable Components shows up.

There are 2 types of Components: Container Components Item Components The basic principle is to place a Container Component on the page first and then place an Item Components into the Container

23 There are 2 types of Components: Container Components Item Components The basic principle is to place a Container Component on the page first and then place an Item Components into the Container Component. Some Container Components can house more then one Item Components. The Container Component type defines the items that it can contain. In the next chapter some common Container Components and there items are outlined. To place a Component on a page you have to drag it from the Component Panel and drop it on a Drop area on the page. You can identify the Dro p area by the rectangles around them. The label of the Drop area shows you wether a Container Component or an Item Component can be placed on it. Example: A Container Component called "Container with Benefits" is placed on the Drop area by dragging it from the Component Panel. A "Container with Benefits" is used to outline the advantages of an arvato solution or service for the customer by list the most important benefits for the customer. The element shows up on the page: The Container already contains 3 Item Components of type "Benefit Item". They can be edited by opening the Component Dialog. To open the Co

mponent Dialog mark it by clicking on it.

The Component Dialog shows up: In the Component Dialog you can edit the metadate of

Not only the single components you can place on a page can have properites but also

24 mponent Dialog mark it by clicking on it. A toolbar apears above the component - click the icon to open the Component Dialog. The Component Dialog shows up: In the Component Dialog you can edit the metadate of the component. Depending on the component you have different options. Not only the single components you can place on a page can have properites but also the page itself. You can the page properties by clicking the icon at the top of the Page Editor and then select the option "Properties" from the menu,

25 In the following chapter some common components with their properties and also some common page properties are outlined.

26 Common Components

27 Benefit Component Benefit Container

28 Component Benefit

29 Downloadlist

33 Facts Component Fact Container

34 Component Fact

35 Forms

43 Homepageteaser Full

44 Homepageteaser Half

45 Linklist

47 Results Component Result Container

48 Component Result

50 Text and Asset

55 Common properties This is a summary of often or always used proerties in pages and components. Page properties You can always edit or change page properties: go to the particular page enter the page properties (second icon) Component properties You can always edit or change componet properties: go to the particular page click the blue box of the page or component click the icon "Configure"

56 Page properties Titles (tab titles) Hide in Navigation Excludes the page in the navigation. So the user cannot find it within the navigation. Title The title is the main identifier of a page and mandatory. It is used in the navigation and the AEM site manager. Browser title A Browser title (optional) could be specified. Navigation title A Navigation title (optional) could be specified. Navigation

57 Content Type (tab metadata) This is the first decission in design: Do you want a sidebar layout or full layout? This is a page with sidebar. The sidebar is used e.g. to set contact information in place.

Tags are used to enable filtering in a search result.

58 Other common settings Tags (tab metadata) To support the user's search, the author should use tags for the page. Tags are used to enable filtering in a search result. The dialog to enter tags: The result shown in the search page:

60 Component properties

Web Pro Manager: General User Guide

Web Pro Manager: General User Guide Version 1.14 (7/2013) Web Pro Manager is an open-source website management platform that is easy to use, intuitive, and highly customizable. Web Pro Manager can be used