Adobe Experience Manager Sites Basics

Transcript

Now, I’d like to hand the call over to your first presenter, Shelby Britton, product marketing manager with Adobe. Shelby, you now have the floor.

Hi everybody, thanks for joining on this a strange day out of a strange couple of weeks. I appreciate you joining, it looks like most of you are joining from home. Welcome to today’s webinar. Let’s get going with just a brief overview of Sites. It looks like a lot of you have a wide range of experience, from basic, to advanced, in various different roles, so it’ll be an interesting session. But definitely, please keep asking your questions. I’m here in the left-hand side of the layout. I may turn this into a chat in a moment. We could all use some interaction with people. So instead of having it a moderated question and answer, I may turn that into a chat, so just be looking for that. But regardless, we’ll answer all your questions today as we go along here with our presentation. For those of you that are not quite as familiar with Sites, to give you a quick idea, an overview, it will handle not only your websites, but it is an omni-channel solution for your content management needs and delivery. We can handle any channel that you need to send content to, from email to mobile apps, to internet of things. And we can personalize all the experiences that you are putting out there. So we’re going to get into today. Authoring is the first thing you’ll be learning today. We’re going to get into omni-channel experiences later in the series. We may touch on personalization a little bit. And we will touch on a few faster time-to-value features. This would include your core components, style system, templates, things like that. So stay tuned to learn about the various different value areas that we can provide for you throughout this series of five webinars that we’re going to be doing. And they each kind of build on each other and different areas of the product that you’ll be learning throughout these five days. Today is Authoring; We’re going to be going through content searching, how to find your content really easily, how to manage changing content, how to collaborate on that content because it’s always changing, and manage your version. Like I said, we’ll be talking about Omni-channel, how to both author content meant to go anywhere, as well as deliver it anywhere. And then finally, we’ll be talking about how to use AEM sites for your global websites, your multi-lingual and multinational sites. So those are the things you can look forward to. If you have not signed up for all five days, or you see an event there that you didn’t sign up for, I’m going to go ahead and post the link to that website here in the Q&A pod on the left hand side in just a moment. So with that, I will turn it over to today’s presenters, Luis Durante from , and he’s going to take you through all of your learning points today. Thank you, Luis Luis, you may be on mute still.

Thank you, Shelby, for the introduction. You’re welcome. Sorry about that. I was muted for a second there. Okay, so…

So exactly as Shelby said, this series is going to take us through a few of the topics that are related to AEM Authoring. Mainly, today, we’re going to be hovering over basic and fundamental authoring concepts that you need to have in place in order to begin to find your way around AEM as an author, and as a user of AEM. It’s useful content, not just for content authors, but in general, anyone who wishes to understand AEM, like project owners or project managers, even developers who are first getting their first insights into AEM, okay? So today we’re going to be working with a reference site from Adobe, which is called We.Retail. We.Retail is a global brand retailing apparel and equipment for outdoors activities, and they are a multinational company. So it’s a fictitious, hypothetical company that we’re going to be using for the tasks that we’re going to use to learn some of the basic concepts today, okay? So the first task that we’re going to be doing is going to be meant to showcase the page editor mainly, but also deal with basic handling and navigation within AEM, and also learning about some of the components and component libraries that come with AEM out of the box, okay? We’re going to look into that. Then, we’re going to jump to our second task, which is going to be focused around the concept of pages themselves, how to use templates, to build new template, to create new pages. And we’re going to also touch upon some items such as file systems. We’re also going to talk about content insights a little bit, just to mention that. Okay. So before we actually dive into AEM itself, let’s first have a look at the requirement for the first step. So We.Retail, as an adventure or expeditions types of apparel and equipment distributor or a retailer, they have different departments that cater to different demographics. So they have the women landing page, okay? And their authors are tasked with this work.

They have to create a landing page or modify the current landing page for women so that they can have an Adventure Picture of The Week. And this picture is going to be changed every week by the authors. And the idea here is for us to learn what components we can use to build this Adventure Picture of The Week that We.Retail is going to use to feature the products that fans of the company, of the brand, are using and are sharing with their pictures. So let’s go ahead and go into AEM.

All right, so as you know, AEM is a web application, therefore you need to have your web browser in order to be able to access.

So in my case, I have a local AEM environment running on my machine, so I have the advantage of not having to go to some other URL, but most cases, you’re actually going to be going to a URL that is shared to you by your product administrators, or project administrators, within your implementation. So most of you are going to use the Author production environment, or an Author staging environment, okay? In any case, you’re going to be given your user credentials. In my case, I’m just going to use the admin user; admin and admin, which is the default admin user within AEM. When you first log in, what you will notice is that you will have the main navigation showing up. The main navigation will give you access point, or an access point into the different consoles that are used to manage the different modules of AEM. For instance, AEM Sites, which is the one that we are focusing in today, that we’re also going to be touching upon during this webinars series on the experience fragments and assets as well. But mostly, we’re going to be focused on Sites throughout the series. This is going to be the main focus, with some touches on some of the other modules. So for now, let me show you how you can work with this main navigation. So you can, if at any given time, you’re on some other console in AEM and you feel lost, and you don’t know how to get back to the screen, just remember click on the upper left corner. You have these logo button, you’ll click on that. It will overlay the main navigation on top of whatever it is that you’re looking at that point, and then you can, from there, go to the different consoles. All right, if you need to remove this overlay of the main navigation, just click on the close button here in the upper right corner, and then you will be back to where you were before. So now, without any further ado, let’s go inside the Sites console, okay? So when you go into a Sites console, you will see the first level of the hierarchy of pages and nodes that make up websites within AEM. So for instance, we can see here, We.Retail, this will be the route page of the We.Retail site, as we hover over it and it gets highlighted, I am able to click on it. And if I see this arrow next to it, I know that you can actually expand it and you can begin to see the hierarchy emerge. Now We.Retail happens to be a multinational, multilingual company, therefore it’s content hierarchy, or webpage hierarchy, within AEM reflects that aspect of the company. Now, we’re going to be focusing in more detail on that aspect of We.Retail on the fifth webinar of this series, which is multinational, multilingual site management in AEM using multi-site management, but for now, we’re going to focus on this area of the We.Retail site, which is language matters. So we have a We.Retail language matters, and now we want to find that page that we’re supposed to work on this task. So for that, I will quickly go over the task again, we have to find a woman landing page within that We.Retail site. So I’m going to go through We.Retail language masters, , and then find the different language matters. And within English, I’m going to look for women, all right? So here’s the women page, all right? When you have hover over the label with the title of the page, you’ll notice it gets highlighted, but when you select it, you actually see that becomes completely highlighted, okay? But it’s not until you actually hover over the thumbnail that you will see this check mark appears. When you click on that check mark, then the page will get selected so that you will get this action bar at the top of the screen, which gives you the different actions that you can do to this particular page. In this case, what I want you to do is edit the page. So I’m going to click on the edit button and this will bring up the page editor. So when the page editor comes up, the first thing that you want to make sure of is that you are on the right editing mode, okay? Here, at the upper right corner, you can see there’s the edit mode. Okay, make sure you’re on that mode, all right? We’re going to touch up on some other of the modes later during the webinars. But additionally, I want you to notice, or make sure, that you are editing the right page. For that, notice the fact that the name of the page is right here on the address bar. We have content, We.Retail language masters EN, women dot HTML. So the name of the page appears here on the URL, in the address bar. And you also see the title of the page here on the top sensor. Additionally, the second thing that you have to notice here, when you go into the page editor, is that this is a page editor that allows you to work in a what-you-see-is-what-you-get type of modality. So you can basically drag and drop components onto a page, and you can edit components that are already on the page by opening their edit dialogs. So for instance, what we want to do right now, which is add an image component for the Adventure Picture of The Week, what we’re going to do is go ahead and click on the side panel here, on the upper left corner. And then, what you’re going to see is that the site panel comes up. When you click on this again, we’ll toggle it off and back on. Then the side panel has three tabs. First, you have the assets, you have the components tab, and you have the content tree tab. We’re going to focus on the components tab right now, and we’re going to use the image component first in order to add these components for the Adventure Picture of The Week, all right? Notice that you can find a component either by scrolling down the list, or you can also use the filter. So for instance, I can use the filter and type in “image,” then I would get the image component right there. Additionally, I can also use another approach. Let me remove the keyword for a moment. You can notice that below the titles of the components, you have these subtitles. These represent the component group into which these components have been organized. So if you look at this dropdown at the top, you can use these to filter the components by component group. So I can also filter it by the retail component group, so I will get components just from within that group. So I’m going to now go ahead and drag-and-drop the image component by clicking on it here. As I drag-and-drop, notice how these arrows, these blue arrows, show up around the components that are already on the pages. Notice that this gives you a notion, a hint, as to where, in relation to the other components, this component is going to end up. So let me drop it right there, at the top. All right, and now I’m going to add an image. For that, I’m going to select the component. Notice that there’s this blue frame around the component, not just around the image component, but around every one of the components on the page that can be edited by authors. If I click on any component, then I select it for performing actions on it, for example, opening the edit dialog. In this case, I’m selecting it, clicking on this wrench item, which is the configuration dialogue, or edit dialogue, click on that, and now I have the edit dialogue for this component, the image component. So for me to actually add an image here, I have this place holder, but I’m going to use the media library of AEM, which is the AEM assets module. So we’re move on to the other tab that we have here, which is the assets tab, okay? Within the assets tab, I can also find images or… Not just images, but any digital asset that I may have in the media library. In this case, I’m going to look for an image here, using the filter “women.” I’m going to look for that image that I’m interested in, and just grab it and drag-and-drop onto the placeholder on the dialogue. All right, once I’m done, I’m going to go ahead and click on the check mark. So now I have a component, an image component, on the screen. All right, so the second thing that we want to have here is a title for our Adventure Picture of The Week, and also some texts. First, I’m going to add the title tool to the page for that, then we’re going to go back to the component step and look for title. Okay, there we go. Just drag it on top of the image that you already have here. Notice that these components are stacking up one on top of the other, depending on where you put them on the page.

Also notice that when you use the title component, the default behavior of that component, it is going to use the title of the current page that you are editing, in this case, “women.” We didn’t set it, but it’s actually deriving it from the title of the page. But we can actually, in this component in particular, use as a special feature within AEM, which is called the in-place editor, in-place editing feature, which you can access by clicking on this pencil icon. This will allow you to edit the text of the title without actually having to open the dial, okay? So I could change this to Adventure Picture of The Week, right? Then click outside of the blue frame. Now, I have that title there, and I haven’t had… I didn’t have to actually open the dialogue. Next, I want to change the type of title that I have here. So this heading is not good for what I want to have here, I want to use a different type of heading. So I can click here on the configuration, or the configure dialogue. In this case, I am going to open the dialogue for the title component, and I’m going to choose a different type of heading. I’m going to change it from H1 to H3, okay? And then I’m going to click on the check mark, all right? So now I have the title, all right? And the last component that I want to add here is the text component. Now, in this case, instead of dragging and dropping from the side panel’s components tab, I’m going to use the “add component” action, which you can access from within any of the components that are already on the page.

By selecting them, looking at the action bar, and you can see this insert components action. Now, where the component that you select is will determine where the new component that you’re going to add will be. So that means if I click on the “insert component button” here, that means that the component is going to be stacked up above the featured products title that you’re seeing there. So that’s always the case, wherever you go on the page, you will see that button, right? And that will allow you to add a component above the currently selected component. So I’m going to select this feature products component, and then click on the plus icon so I can add a new component here. It’s going to be a text component. Let me filter for that.

All right, there we go. And I’m going to select it now. So the text component, just like the title component, also allows you to perform in-place editing as well. But in this case, I’m going to use a configuration dialog so we can see all of the different options here that we have. I have a rich text editor here, which allows us to add any text and format it with rich text editing options. Let me just grab some demo text here, put it over here. And here you can do boldings, italize the text, you can do bullet pointing, indenting or outdenting paragraphs or lines. You can also create links from here, either to internal targets within AEM or to outside URLs, okay? And you can also change the formatting for different areas of the text, okay? Additionally, you can also switch to full screen mode for the page, so that for the rich text editor, you click on toggle full screen here. Now, you get a full screen view of the text editor. Let me get out of this. And now…

I’m sorry, let me actually add the text.

All right.

Okay. Okay yeah, so make sure that you click on the check mark so it actually saves the text.

All right, so one important thing to keep in mind is that in AEM, once you edit the page, everything that you’re adding to it is actually already there on the page. So there’s no save button that you can see around here, it is already there on the page. But for your peace of mind, this is an authoring environment and we’re going to be talking about how you move these pages to an actual publishing environment. All right, additionally, I want to mention the fact that you have here, at the bottom of the page, these very special component. This is the layout container. The layout container is the keystone of the components within AEM because this is the one that allows you, as a content author, to drag-and-drop components onto a page.

And these components, as you are adding components onto it, these components begin to stack up one on top of the other, all right? And you can have one or more within a particular page. We’re going to discuss that later. Now, additionally, I want to also mention that when you go to the side panel, you also have these additional setup components, that we haven’t used, but if you want to learn more about those components, we do have a core component library. So if you notice, when we went to the image components or any of the other components, there are some other settings, like the metadata that we see here. If you need to learn more about that, we have, within AEM, our component library for which Adobe has created component library sites that you can use within AEM. So you can use it as a reference to learn about core components. These are what we call the core components within AEM. This is a list of production-ready and customizable components that you can extend or use for your particular implementations, okay? And as a whole, components in general, they make up the building blocks of pages, okay? They are the ones that make it possible for a page to be edited in a what-you-see-is-what-you-get type of approach. Additionally, with the layout container that we were just discussing, it also allows you to contain or define what are the components that are allowed to be added to a page, or contained within that page. So you can control content governance on pages. You can also define layout by determining how many layout containers you’re going to have on the page, and of which size each, for example. And you also can control, within the layout containers, how they respond to different screens’ widths. All right, so let me now move on to the actual core component library site that is used to reference it-- Luis, as you’re moving on… Can I interrupt you just for a quick second? Sorry to stop you. I have a bunch questions about the version. Can you just clarify what version you’re working with for folks? Oh, that is correct. So good question. This is AEM 6.5, okay? Running on the latest . Running on the latest service pack.

All right, so on the upper side of the page editor, you’ll notice the patient formation dropdown; gives you these view in admin button. So if you need to go back to the Sites console, this is an option of how you can get back. Click on the view in admin button, and then you will be back on the view of the Sites console. And notice that the parent of the page that we’re currently editing is highlighted right now. “English.” So the page that were anything was “women” and English is highlighted. But what we want to look at right now is the core components library. At the very root of the hierarchy, you have core components. This library will allow you to showcase the different components that come with AEM out of the box, so you can actually learn how they work, what they provide to you as a basis for you to work on top. Okay, so I’m going to select the thumbnail, click on the thumbnail so you can select it and click on edit. All right. And then the component library menu page comes up.

Now, in this case, on the menu page, what I want to be able to do is I don’t want to edit the menu page itself, I just want to use it as a viewer of this component library, understand how these components work, to be able to actually go into these components and use them and actually navigate through this library, I have to do something different. Notice I am currently on the edit mode, which is what we had on the previous page, but I have to switch to a different mode, so these links that you see here become enabled. Otherwise, you will see the blue frames that will allow you to edit these placeholders, these grid buttons, to be edited. So I don’t want to edit these grid buttons. What I want to do is actually navigate through the site, so the link needs to be enabled. For that, I have to switch into preview mode, okay? And now, I can actually click on the different links. So I’m going to go ahead and open one of these, for example, Carousel. All right, and when I am on the Carousel component, on the Carousel components detail information page, I can see the description of the component and I can also see this component as it has been set up for different combinations of configurations.

So for instance, you can see the Carousel setup with slides, with image components. You can also see it set up with slides with feature components here. Additionally, you can see what the internal properties of these components are. This is very useful for the developers. Also, you can see what the markup is. So you’ll get an idea of how it renders. We can also have a look at the JSON representation of the component.

But if I want to actually play with the component here, I have to go back to edit mode because, right now, I do have the Carousel component here set up in different ways. So I can actually switch to edit mode, all right? And now I can go to one of these different combinations of how it is configured. First, image slide. So if I go over here and I cover over the Carousel, notice the blue frame around the image. This would be the actual image component, that is the slide of the Carousel. That if I cover a little bit outside of the frame, you’ll see the blue frame of the Carousel itself. If I click on that, now you can see the action bar for the Carousel. And among the different options that you have here, you have, for instance, this one, which allows you to switch and select the order of the different flights. So you can change the components order just by dragging and dropping within the list, in the order that you want them to be. So you go to the… Also to the Carousel’s configuration page.

From here, you can also see the items that have been set up.

And you can also see different editions of how it has been set up. In this case, instead of image components, what we have is teaser components.

All right, so let’s now go back to the Sites console. And now, we’re going to look at the second tab that we have at hand.

Let me quit here on view in admin. All right, so additionally, you could also, just as well, just go back to the tab so you don’t fill up your browser with a lot of tabs. So I could just go ahead and go to the tab where I was working on before, like this one. If I need to close the action bar, I just click here on the upper right corner. So I am back on the Sites console. And now, let’s have I look at the second task and the requirements of it. All right.

So on this task, we want to create-- We’ve got a question on what you were actually just showing, if you don’t mind. I catch it because it’s related to what you were just doing. Greg asks, “Would that affect each usage of that component?” Sorry, are we talking about the Carousel component? I’m going to have… Greg’s typing again. Maybe he can… Yes, he says yes.

Okay, yeah, so what I was showing you here, I hope I’m understanding the question correctly, but what you are looking at here is just a sample of usage of the Carousel. And in this usage sample, you can see how it is configured when using the image components of the slide. So you can see that you have the image here, of the slide. So this would be one of the images there. But if I wanted to configure one of the other slides, I would switch and go here, and now I could configure this image and I could change that. But this will only affect this sample of the Carousel within the demo site. So the components, they are managed, depending on how you’re using them. In many cases, you manage them directly on the pages where you are using them, unless you’re using some other features, such as experience fragments, that we’re going to be discussing later. Okay, and he was talking more about the… He says okay, but he was saying if you edit the component in the library, would it affect each usage of that component? No, no. This library is just for referential purposes. It’s not connected to your site in any sort of way. It’s so that you can learn how these components work out of the box so that you can leverage them, all right? Okay, sounds good, thanks. Thanks for answering questions as we go. We want it to be interactive and make sure everybody’s getting their questions answered. Thank you. All right, so the second task, as I was mentioning previously, involves creating a brand new page from scratch. But we’re going to use a template, and we’re going to see that there are some components that will be there on the page just by virtue of the page being based on a particular template. For instance, the page is going come with a header, with navigation, some toolbar options here at the top.

We’re going to see a hero image component that is empty, and a folder component at the bottom. And then, you’re going to see the layout component, which is key here, right? Because that’s where you, as a content author, would be dragging and dropping components into. And this is where we’re going to, we’re going to create, for We.Retail, the expedition landing page. And in this landing page, they intend to showcase, through different stories and articles that are written by their expeditionaries, or team of expeditionaries, in order to showcase some of the products. So we want to show a list of articles and next to it, we’re going to show a couple of teasers to promote the different categories of products that are being used on those expeditions. So that’s the whole idea in this task, so let’s go ahead and get started with it.

Going back now to a Sites console, I have to navigate, once again, through the hierarchy in order to find the location where I want to create the expeditions page. So I’m going to create the expeditions landing page right here, as a peer of women, men and experience, there’s going to be a child of English. So for me to be able to do that, I have to make sure that I highlight the English page. That means I click on the title, so that it’s highlighted, then I can use the create button. When I use the create button, as this page is highlighted, what the result will be is that the newly created page will be a child of this currently highlighted page, which is selected there.

So make sure it’s selected, or highlighted, click on create, then on the drop-down, click on the page button. Next, you’re presented with a list of options in terms of templates that you can use.

So with the templates, you get the basic page layout, so it will determine where, within each page, based out of that template, you will have the header, the footer, the hero image, or any other components that you want to deem structural to the pages. So there are components that are structural to a page, that means they have to be there within a particular location. They should not change their location or their position within the page. These are structural components that are set up on an AEM template. That’s determined by the template and also where, specifically in the layout. The template also determines which components may be added to the layout containers within… The layout within those pages are based on the template. That means with the templates, you can control the configuration of the layout containers, as to which components are allowed. So once again, this is a piece of content governance that will help you out, all right? Now, let me go into the actual task for it. Let’s go back for the… To the wizard, for the page creation wizard. Here, we’re presented with a list of templates, and I’m going to take one of these templates, I’m going to pick the hero page template. Once I select it, click on the next button. So on the next on the page creation wizard, you will have the basic properties of the page that can be set up here. The only property or field that is mandatory, as you can see, is the title. It’s the only one that has the asterisk next to it. The other ones can be left empty. So let me type here, “Expeditions,” right? That’s going to be the name of the page. But I want you also to notice something: Even though I’m not going to fill up the name, that doesn’t mean that the name will not be provided. What will happen is that the name will be derived. This is because AEM require the name. The name is how the page will be addressed within the URL. So if we go back, for a moment, to the “women” page that we were looking at before, notice how “women,” the name of the page is here as part of the URL. So as we are going over this page creation wizard, if we leave this name empty, what will happen is that AEM will derive that name from the title. What will happen is that it will lowercase any uppercase letters, and if, for instance, you have spaces, like that, it will add hyphens instead of the spaces. It will replace the spaces with hyphens, okay? I’m going to leave this one like that and then I’m going to click on “create,” and then on “done.” And now, we can see the effect of having created the new page within the hierarchy.

So notice that the page is right here, as a child of English as we expected. And also notice that the title is “Expeditions” with uppercase E, but the subtitle here is the actual page name. If I highlight by clicking on the title, notice here on the URL, on the address bar, “Expeditions” is the name of the page. And also, if I want to edit it, if I select it by clicking on the thumbnail and then clicking on edit once I’m back on the page editor, what we will notice is that the URL is still holding that name that we derived from the title. So that’s a pretty important piece of information right there. Oka, additionally, when you first come into a page that has just been created, it’s empty. It’s based out of the hero page template, that means it has certain structural components on it already. For instance, the toolbar and this hero image, as I mentioned previously. What we want to do next is actually begin to edit this. What we’re going to do here is, first, in order to be able to differentiate between components that you can edit but come from the templates such as these hero image versus components that you can edit, but will come from the content author, as he or she drags and drops them into a layout container. So, first, I’m going to add an image here to the hero image component. So for that, I’m going to go ahead and click on the sub… Sorry, on the side panel.

So it opens. Next, I’m going to switch to one of the other tasks. Specifically, to the I’m not sure you’re already there on the assets tab, and I’m going to filter here by the word “hiking.” Let me scroll down here a bit.

There it is. I’m going to use this image for the hero image component. So one thing that you probably notice here is that I didn’t actually open the dial up in order to add the image in this case. So this is allowed because there is a feature within AEM which allows you, for certain components such as images, to operate on them without opening the dialogue. Similar to what we had with the in-place editing with the title. We didn’t open the dialogue, yet we were able to edit the title. In this case, I dragged and dropped the image right onto the placeholder of the hero image components, and the dialogue, I didn’t have to open it. But that doesn’t mean that I don’t have a dialogue, I still have a dialogue. If I click on it, you can see there’s the dialogue. It has its properties, it has the assets. Let me go ahead and close these ones. Next, what we’re going to do is add the other component that we need here, which is the list component. For that, we’re going to leverage the… We read their list component. Remember, I mentioned that components are grouped. So I’m going to filter these out by group… By the We.Retail group, and you will notice that there’s a We.List from We.Retail group. And I want to mention here that this list component, that I’m going to just grab and drag-and-drop onto a page, right in the layout container.

This live component is from the We.Retail reference site, but it is basically just extending the core list component. It doesn’t have much additional to that. So it’s pretty much an out-of-the-box component.

So what I want to show you here is when you click and select it, and you open the edit dialogue, there’s different ways in which you can build these lists. The first approach is using child pages, that means you have to select a parent page. And then, the child pages of that parent page will be used as the items of the list. You can also use a fixed list where you select individual pages that you want to be there on the list. You can also use a query so that the query is performed, and then the results are used within the list, and you also have tags. So you can basically perform a search based on tags, or AEM will search based on tags and it will display those pages that match based on the tags. I’m going to use child pages now, in this case. Next, I’m going to select the parent page, which is going to be… I’m going to go into the We.Retail side. So see, these are the articles, the Expedition articles, that I want to look at and I want to showcase. I’m going to drill into the English edition and then I’m going to look at this experience page. Notice the child pages of these ones, these are old articles. So I’m going to select “Experience” as the parent here. Notice that when you are doing this sort of operation with Pathfinder, you have to actually click on the thumbnail so the button here at the top gets enabled, the select button, all right? Click on that, now we have it. You can also alter to child depth, or the list, I’m going to leave it at one. “View order,” I’m going to pick “last modified date” and I’m going to use the descending order, and set up a max of six items.

And on the second tab, I’m going to do a couple of things. First, I’m going to switch from default to article, and I’m going to use the “show date” option here. So I will show the date and also, it will link the items. So I’m going to use link items, show date, and type article. Now I’m going to click on the check mark, and now I have a list of pages here that actually represents articles within the experience page that we are pointing to. But also notice that this still doesn’t look the way we want. We want it to look like this. So what could we do? You could, for example, have some sort of way to allow the author to change the style of the component. And you could have your implementers implement that methodology in order for them to be able to change the style, but that wouldn’t be ideal because then, every component or every implementation would have its own way of doing that, and it’s a pretty standard thing that comes up, changing the style of a component. So Adobe in AEM6… In AEM 6 4 actually added the style system. The style system allows, for any component that you have on the screen, to change its style. Let me refresh here for a moment. So in order to do that…

Okay. In order to do that, we have to select the component, and when the action bar comes up, all right, you will see this paintbrush icon. When you click on that, it will give you some options. Some options are related to the layout, so how you want the list to be laid out. So I can pick block or grid. So if I pick block, it’s going to look like this. If I pick grid, it’s going to look like that, so it’s more similar to what we were looking for. And then what do I want to display? That’s also another option that I have here from the styles. So this is what we call this style system. So I’m going to select image and date, so both are shown.

So with the style system, basically what you have is the ability to have one single component and many different renditions of that component to cater to many different requirements. So for example, a list is a very common thing or theme that you see on websites, right? But the actual underlying functionality is the thing but just the presentation is different. It makes sense to just change the style in that standard, generic way on your implementation. So that’s what we have here with the style system. Additionally, it gives you some level of design consistency, because these styles, they are managed by not just any author. These styles are… In order to get them there, there’s a product… The developers, of course, they have to come up with the backend style sheets that will power these in the back… In the backend of AEM. But also, there’s a different kind of author, which is the template author, or template editor, or which can configure which styles will show up for a particular component. We’re going to touch upon that when we talk about templates, editable templates, in one of our webinars in the series.

All right.

A question about images.

So, for example, "if somebody is designing for mobile, "will the image automatically adjust “for the mobile view and be responsive?” is the question.

That was kind of back before you were doing the list component.

Oh okay, yeah, good question. So in the case of the image component, it will adjust and you have also… There’re different ways in which you can do this. I don’t want to get too technical, but in general, I can say that it will adjust. The out-of-the-box image component does adjust, but there’s different approaches that you can follow in order to change what images you want to show, depending on the screen width, one of which we’re going to look at tomorrow… Not tomorrow, on the next webinar. But in general, yes, you can. The images do adjust, but you have to make sure that you have the right configuration within AEM so that this will work, okay? All right.

Did that help? Yes, thanks.

Okay, all right.

Let me go back. Sorry, I’m going backwards here. Let me go back here, to where I was.

All right. Additionally, one or two other couple other components here, which are the teaser components that I also…

I’m also required to adhere to the Expeditions page. So for that, I’m going to use the “add component” action here.

Insert component on the add container, so it will be below the list. And I’m going to search for “teaser.” There we go. Then with the teaser component, what we want to do is open the dialogue and we’re going to first set the image for the teaser. So on the asset staff here on the side panel, we’re going to look for equipment.

All right.

Drag-and-drop these onto the placeholder.

And the next thing that I’m doing is I’m moving on to the link and action step. And here, I’m going to use the enable call-to-actions check mark. So this teaser allows me to either have it as a link, or a call-to-action, or a combination. So we’re going to first just use this as a call-to-action, then we’re going to do the combined one on a different teaser, okay? So first I’m going to link this to the equipment’s product category page, which is this one. Equipment, click on select. And now I have the call-to-action. So basically, the call-to-action will add a button to the teaser, right here. And it will link to the… The button will link to that particular landing page.

So that’s the first one. The second one that I want to look at is a second teaser. So for that, I’m going to just use one of the other operations that we have within the layout container. So we did some of th… We have used some of these operations, but there are some other ones which are more related to the dragging and dropping, moving components around. In this case, what I want to do is do a copy and paste, so select the teaser and click on the copy, and then select the layout container again and paste. Now, I have copied that teaser, so I didn’t have to start from scratch or drag-and-drop it.

And now, I can open it, edit dialogue, 'cause it’s on the wrench icon. In this case, what I’m going to do is I’m going to change this. Instead of using call-to-actions, I’m going to, first, select the link.

We.Retail, and I’m going to promote the men product category here.

Go to products and men, click on select.

And then, here you will see the ability to grab the title either from the link page or from the setting on these components, specific components. So you can manually set the title on the component itself for the teaser, or you can get the title from the linked page. And if the page has a description, you could also get the description and it will be displayed by the teaser. In this case, it doesn’t have a description, but if I selected these, then you would see the description on the page.

All right, so now I’m going to click here on the check mark. And now, I have the second teaser. Now, an additional thing that I wanted to show you is the other operations that we have here on the… Within the layout container, we just did a copy and paste but that’s not the only one. You can also, for instance, do cut and paste as well, if you use these. Okay, so you can do cuts, and then you go to the target component on top of which you want to paste the component that you just cut. In this case, I’m going to move it over here. Okay, so that’s a way in which you can move them. Or you can also grab a component, this is a more interactive kind of operation, grab the component and move it to a different location. So these are the kinds of things that you can do. Additionally, I’m going to change the image here. I’m going to search for “Men,” and drag-and-drop these onto the page. All right, there we have it. And…

So we have done our Expeditions page. The next thing that I want to talk about here is content insights.

This is a special feature within AEM.

It relies on integration of AEM with Adobe Analytics and BrightEdge, which is in an SEO recommendations tool. So with wave analytics, you will get the reports, such as page views, how much time spent, bounce rates, those kinds of things on the pages within AEM. Without leaving AEM, you can actually use these content insights reports.

And with BrightEdge, you will get the SEO recommendations. In order to have these, then you have to actually integrate AEM with Adobe Analytics, and then you will be able to see the reports. Once you have it integrated, the way you wish you would see that is, while being on the Sites console, if you select any of any page, then you will see an action here for the content insights for that particular page.

Okay, so I recommend that you guys take a look at this one as well, which is a very useful one. And this is what we just went through. We navigated the hierarchy, we learned about the components or the page structure and hierarchy of a website within AEM. We learned about the page editor. We used the search to filter and find components, and also find assets in the side panel. We learn how interact with the page for dragging and dropping and moving components around within the layout container.

We also used the rich text editor, or showed you how you can rich text editor there with the text component. We went over, quickly, this core component library. On the second task, we took a look at how you can create components based out of a template, and the concept of templates themselves, and the reuse of content from other pages that we did by using the list components. So we borrowed content from that list of articles by pointing to them. And then, we also have a look at how we can apply the style system of AEM to get different visual variations of the components.

And this, four and five, we’re going to cover them on our second webinar, which is we’re going to look at the responsive grid more in detail, and in different operations, such as responsive layouting. And we’re also going to be looking at publishing pages, and some other items that will come up on the second webinar.

So that’s it for today. If you guys have any further questions, please go ahead and make them. We still have around five minutes to go over them.

Thank you, Luis. I just changed the layout to the final holes. And for folks that have questions, I’m going to put up the chat here. If you have questions for Luis, please enter those. He can take a moment to answer your questions. And definitely, if there are things that you think we’re not going to cover in the next few sessions that he mentioned, and you would like us to, if you could put that in the poll on the bottom and let us know, we can create some sessions for you that will cover the things you’re most interested in.

Regarding recordings, we’re going to send out an email with the recordings very soon.

Luis, if you could just stick around for another minute and just check the chat pod and see if there’s any questions that come in for you.

Yeah, I’m having a look at it. Okay, great. Thanks, that was great. Appreciate it.

All right, folks, thanks for joining today. We’ll do another minute with Luis. If you’ve got to go, we understand. If you have questions, stick around. Thank you all for your time today.

Yeah, there’s a question there for evaluating AEM, if there’s a downloadable demo developer version that can be used to play with, and then actually go live with. So for this, I would recommend that you talk to your engagement manager from Adobe. So you can get the JAR file. If you’re going to go and test the, the AEM 6 5 edition, the standard one, you know this year, Adobe made the announcement of the cloud, or AEM as a cloud service. And in this case, you use, what is called, the K file, which, essentially, will be the JAR file that you install and allows you to locally have an AEM instance.

But you have to verify how you can actually get yours with your engagement manager.

All right. Copy and paste content in editor dossier to automatically filter out formatting from documents you copied from.

So when you cop… Yeah, the thing is that if you’re copying into the rich text editor, the rich text editor has its own way of formatting. It uses HTML formatting, like HTML tags for that. So if what you’re copying from doesn’t conform to that format, then it will not allow you to. So there’s another… I mean, you can paste it, but you will not get the formatting. That’s what I mean by that. You do have the ability to paste just the text and the rich text editor, and then reformat it there. Additionally, we’re going to cover this on the fourth webinar, which is the content fragments and experience fragments webinars. Then, we’re going to have a look at the content fragment rich text editor, where you can import a text as well.

All right.

Cecilia Harris, “Does AEM generate short or smart URLs?” I mean, you can… I don’t know if you mean by that, sort of like, those kinds of things. So AEM, you can create vanity URLs on the pages. You can go to a page information that is not automatically generated. If there’s an automatic service to generate that, I am not aware of it. And I do have 10 years of experience with AEM and I have not seen it. So if I am missing it, I will let you know. But if you’re looking at my screen, I’m not sharing anymore, but if you go through the page properties on any page, we’re going to cover this on a further webinar. We’re going to look at page properties. You can set up vanity URLs and you can also send and those kinds of things.

And we’re going to look at that.

Okay.

All right.

All right. It looks like you’ve answered all of the questions. So with that, we’ll go ahead and wrap up today’s session. Thank you all for joining us. -