Adobe Experience Manager Sites Basics

Transcript

Hello, everyone, and welcome. Thank you for joining today’s session, Adobe Experience Manager Site Builder Webinar Series. Our session today is called Never Waste Time Finding Content Again. My name is Dawn Smith, and I will be your host for this session. If you haven’t already, please take a moment to respond to the polling questions on the screen. Today’s session is approximately 60 minutes in length and is being recorded for future on-demand viewing. During the presentation, you may enter questions at any time in the Q&A pod on the left-hand side of your screen. We will address your questions as we go along and also as time permits. Joining us today is Luis Duarte, Adobe Certified Architect and authorized instructor for AES and AM. Luis, you now have the floor. Thank you, Dawn. Thanks for the introduction. Can you hear me? Yes, we can. Thank you. All right. So thanks, everyone, for joining us. Today is our second day of the AM Site Skill Builder Webinar. This is offering basics. Our first webinar was last week. I wanted to point something out. Last week we did have a little bit of trouble, technical issues and difficulties with the sharing of the presentation and the sharing of the screen. We ended up having to cancel it. But we have a recording of the first webinar already for you to look at. So if you want to, if you haven’t actually seen that, we have placed that, we have gone ahead and placed that link here on Adobe Connect for you to look at. So if you look at the resources on the bottom left corner of your screen, there’s one that says Webinar 1 Recording. So you can go back to that after this if you find time and get the very basics which is covered on the first day. Today we’re going to get started with our second day. Just here a quick reminder of AM, AM Sites, so the workspace manager’s sites, how it is a solution that accelerates the creation management and delivery of experiences that are personalized at all different touch points that you may have at different channels. So basically AM is the piece that puts together the content that you need in order to compose experiences. Okay? So that’s something that you create on your Creative Cloud. Okay? So all of those tools, Photoshop and Fireworks and InDesign, all those tools that we have on Creative Cloud, all of that can be used within AM to compose and manage great experiences that then you can deliver across multiple channels. Okay? And the delivery of those experiences can be personalized in AM through the integration with other Adobe solutions such as Adobe Sensei, Adobe Target in order to be able to provide more personalized experiences. Okay? Here are the key value pillars of AM. So we want to provide experiences for omnichannel situations. We want to allow you to have a faster time to value in terms of how quick you can get your content created and delivered. We want to optimize the experiences on a personalized basis using AI, artificial intelligence. And we want to be able to provide the means for you to leverage cloud infrastructure. Okay? Especially in the case where we have AM as a cloud service, which is something that came out this year, AM is regularly integrated with many services, other services from Adobe which you can get also along with AM. Okay? That’s also as you can also integrate into AM if you are not doing the AM or you don’t have AM as a cloud service through different integrations. So day one was offering basics. That was basically getting the fundamentals of how you deal with the AM editor. Okay? The page editor, which is what you see is what you get type of editor. Today we’re going to go a little bit more into items of navigation, getting used to the other consoles within AM that previously we just touched in passing. Okay? So without any further ado, let me go into the meat of today. So we have first what we did last time, it was a couple of tasks. If you look at that recording, you’re going to be able to check out that on the first one, we did some basic authoring and handling of the AM page editor, dragging and dropping components onto a page, opening the dialogues to add content to those components on a page. We learned that the components are the building blocks that make up a page. Okay? So pages are basically a composition of multiple components that are laid out on a template. Okay? We also learned about templates on our second task when we created a page based out of a template, we created this expeditions page. Okay? And on that expeditions page, we used a list component, a couple of feature components. We also looked at the style system and we also did mention a little bit in passing in the content insight feature as well. Additionally, we also tackled or talked about the AM core components, which is the library of components that comes with AM out of the box. And we also looked at the library of components that is delivered in an independent development stream from AM, but is constantly getting updated and you can use different versions of the core components and these are basically compatible. You can have the use different versions along one another without any problems. So, let me now jump into today’s topic. So, we’re going to look at how we can optimize content for different screen devices. So, we’re still going to be dealing a little bit with the page editor. Okay? We’re going to have a look at the responsive layout and add another component, also the carousel component. The whole deal here with task one is creating different breakpoints for different device screen widths. Okay? Then on task two, we’re going to learn more about the navigation UI in the sites console. We’re going to learn about how to find our way through the sites console, the different views that we have there, the admin UI rails. We’re going to look at the page properties. We’re going to look at some basic page operations. Then on the last task, we’re going to look at how we can add assets to AM, how we can create tags and tag assets and use that as a strategy to allow authors to find assets easily when they are composing experiences on pages. We also briefly look at some bulk operations. And that’s going to be today. So, let’s go ahead and get started. Our first task, as I mentioned previously, is creating different breakpoints, that means different views or layouts for different types of devices. So, basically here on the left, we have a desktop view of this is the expeditions page, the one that is done on webinar one of this series. Okay? Where we ended up with a list component, a couple of teasers. Okay? Hero image component. What we want to do here is look at how we can get different layouts for different types of screen widths. And how AM, the AM page editor helps us with that. Let me now go ahead and log into AM so we can start finding our way through what we need to do. Okay? So, this is the main navigation, just as a reminder, in AM, whenever you don’t know where you are and you want to find yourself back to the screen, all you have to do is click on the upper left corner, I will be experience manager, this will bring back the navigation. You want to close the navigation, just click here, we’ll get you back to where you were before. Okay? Now, let me go into the sites console, which is where we are focusing our attention right now. The sites console, we have the hierarchy of pages that make up the sites in AM and I’m going to navigate to that expeditions page that was created on webinar one of the series so you can see that as I navigate through the levels, begin opening up, when I get to English, which is here basically the home page for the English edition of the site, I can now scroll down here and find this expeditions page. I’m going to select it and open it for editing. By clicking on the thumbnail, I am basically selecting it. Now I have the action bar here at the top and now I can click on this edit button. This will open up the page editor. Once again, this is what you see is what you get type of editor. What I want to do now is just briefly a reminder that these components that we have here were dragged and dropped. We have the list and the two teasers were dragged and dropped onto the page while being on the edit mode. The fact that we were able to drag and drop them was made available by this little component here. This drag component here, this is a component called a layout container. This layout container is the one that is making it possible for us to drag and drop components onto the page. Okay? And it’s going to be key for what we’re going to do just about now. So I’m going to now switch over to the layout mode. Now if you click here on this drop down, you will see that the page editor in AM has several different modes. Okay? We have already for the preview mode on the previous seminar and the edit mode. But now we’re going to look at this layout mode. When we go into layout mode, what we get is basically the ability to change how these components are going to behave for different screen widths. Okay? First thing I want you to notice is the fact that we have here at the top what is called the device emulator. Which is basically a way for us to emulate screen widths and create and edit layout for the different screen widths. Right now I’m looking at the desktop screen width. If I go here, at the marking of around 775 or something like that, or 760, that would be the screen widths of iPad retina. So we can author or layout for that screen width. And it will be valid for all screen widths that go from around 425 up to 760. And these markings that we put here, we can configure them. So it depends on your implementation theme to determine what… You can tell them what exactly you want to use as a reference in terms of what you want to author layouts for. So here we have desktop, iPad retina, iPhone, Galaxy S7. So I’m going to now go ahead and go back for a moment into the presentation so we can look at the actual task at hand. So we have three views I want to compose. So we have one for the desktop, one for the tablet, and one for our mobile phones. So what I want to do is make it so that in the case of the desktop, the list is going to be on the left-hand side column, and we’re going to have the two teasers next to it. And this is going to take up more than half of the screen width, while the two teasers are going to take up a little bit less than half. So that’s it. In the case of tablet, this is going to be different. The teasers are going to be below the list, and they’re going to be one next to the other. And in the case of mobile phones, everything is going to be stacked up on top of the other components. So you have the two teasers, and then on top of that we have the list component, and here we’re going to add a carousel component at some point. So let’s go back and start doing this. Okay. First I have to make sure that I am on the desktop layout mode, on the desktop screen width, sorry, while I am on layout mode. Now when I scroll down and click on any of these components, like for example on this one, you will see that these two circles come up on either side of the component. These are the handles that we are going to change the width that this component is going to take up from the screen. Now the width that we’re measuring here is basically the width of this layout container that we have here. Okay? So this layout container provides a responsive grid that allows us to change the width of the components that are placed within it. So by default, this component will have a width of 12 columns. Okay? So what I’m going to do is I’m going to make this list component take up seven columns. Okay? So that’s four, five, six, seven, all the way up to here. Okay? So I can make room for another column here where I’m going to let these two teasers go in. How am I going to let those two teasers in? So for that I’m going to use a behavior of the components which is called float. Okay? So when I grab this one and make it, for example, five or six columns wide, okay? Six, that would be six. Okay? Half. You will notice that the component is remaining on this row. The reason for that is because on this one we are already taking up seven columns, so we only have five left. If I make this one six columns wide, then this one will not fit, so it cannot float up to the upper row until I make it slim enough so it will fit. So I’m going to make it one column less wide. And now it’s five columns wide and has floated up to the upper row, as you can see. Okay? Right next to the article list. I’m also going to do the same for the second teaser, so make it five columns wide, that’s four and five. All right? Now you can see that we have the two teasers right there next to the list component. All right. The next thing is going to be iPad retina. So I’m going to click here so I can see how the content looks like right now. So right now it is going to basically inherit whatever I put on the desktop. So all of these other widths, unless I change them, are going to inherit whatever you have on the desktop. So if I go to iPhone, for example, it’s also going to have that. So the list component is going to make it fit somehow. And then you have the other column with the two teasers. But for the iPad retina, as well as the iPhone or other phones that have screen width within that range, we want to make sure that this is different. So for the iPad retina, if we go back here, what we want is the two teasers to be below the list. Okay? So let me go back here. In order to achieve that, I am going to undo this default behavior of the components floating up when they have room on the upper row. So we just saw that on the previous one. If they floated up as soon as they got enough room to fit on the upper row, but I cannot undo that default behavior by clicking on this action that says float to new line. When I click on float to new line, it will basically override that default behavior of basically floating up whenever there’s room. So now the teaser has come down. Okay? And I’m also going to make the other teaser come down as well. So that now I can make sure that I make them be one next to the other. So I’m going to make these two take up half of the responsive grids width, which would be six columns. Okay? So that would be four, five, six. Okay? And this one is going to take up also half. Okay? And now you can notice that they will not float up. This one didn’t float up to be on the upper row because this is currently pushed. So it’s basically overriding that default behavior. So when I push this, the default behavior again is going to be that this component is going to disappear from this row. It’s basically as if it goes to the left of the screen, and then it shows up on the upper row from the right coming up here. Okay? So I’m going to do that. Okay? There it is. Now the two are next to each other. And I’m going to also make this lit component take up the full width. Okay? As you can see, we are ready with what we’re supposed to have on the iPad. Okay? Now I’m going to move over to iPhone. This is for iPhone or any other phone that goes within that range. So I’m going to go ahead and make it the way we want. In this case, everything should be stacked on top of each other. All the components should be stacked on top of each other. So I’m going to achieve this by basically pushing these two out. Now I’m going to do it by making this one take up the full width. Okay? I do that. Okay? So I now have pushed the two teasers out of that. But right now they are one next to the other, each one taking up five columns. And that’s not what we want. We want this one to take up the full width. We want to do that. This one is going to push the other one out. And this one is going to take up the full width. All right? Okay. So now we have done the first part of composing this layout. So now we can see that if we go to the desktop, we have the two components, the three components laid out in the way that we want for desktop. We also have them laid out in the same way or in the expected way for the iPad and also for iPhone. They are all stacked up one on top of the other. Now, if you wanted for some reason to undo any of these layout configurations that we just did, then you could use an undo for the layouting. So for that, you have to make sure that you select the layout container. And in order to select the layout container, you have to make sure that you are hovering on the right location. Because if I’m hovering here, of course, what I’m selecting is the list component. But I can make sure that I select the layout container by clicking on this button. This is the parent selector. Basically, if there’s multiple components that are parents of this component in terms of containment. So there are other components that contain other components and then these components contain other components. We can use this parent action, which is available not only in layout but also in edit mode, to be able to make sure that we select the containing parent. Okay? If there’s more levels, then it’s going to give you a dropdown to select. And then once the layout container is selected, you will see this button here, which is basically the revert breakpoint layout. So this will revert all of the layouting that we just did for the desktop. I don’t want to do that for time constraints. But just wanted to make sure that you are aware of that. Okay. So now that we have this, let’s suppose that WeRetail marketing team, WeRetail is a company that runs this site, they decide that they want these teasers to be easily viewable when you are on the mobile phone view. Right now you have to scroll all the way down in order to be able to see the teasers and they want to make sure that these teasers are here at the top as well. But they also want to make sure that they don’t take up too much real estate at the top of the screen. So that people can quickly look at the teasers without scrolling too much down, they can immediately go and see the articles. So the solution here will be to use the carousel, the core component carousel. For that we’re going to go back into the edit mode. Go to edit mode. Okay. Notice that I am right now on edit mode. Even though I am on edit mode, notice that the device emulator is still on. I can switch it up by clicking on this button if I want to. I don’t want to because I am still working from the perspective of multiple breakpoints so I am going to keep that open. And what I am going to do now is that I am going to add a carousel component. And this carousel component I am going to add by opening the site panel, clicking on this button. Then go to the middle tab which will open the component selector where I can find the component. Here it is, the carousel, within the We retail group. And I am going to drag and drop it here at the top. Okay. So it will show up there. Press the screen. Right there. So there is my carousel component. There it is. Let me just drag and drop it here. There it is. Okay. So this is the core component carousel. Now the core component carousel is very interesting because it itself has a layout container within itself. That means that you can configure it in such a way that you could have any component, any type of component be a slide for the carousel. As opposed to typical behavior of a carousel component that people would create for AM previously where each slide would basically be a fixed component that maybe had an image and some text on top of it or something like that. Right now you can basically configure it to allow you to drag and drop any component, whatever suits your requirements. So what I am going to do now, instead of dragging and dropping components from here and author them from scratch, I am going to reuse these teasers because I have already authored them. So I am going to just take them and group them together and then I am going to copy and paste them both into that layout container. So in order to do that I am going to select one, then click on this button which is the group button and then click on the other one. Notice that the group button is selected. That’s one way of doing it. Also another way of doing it is you press the command key and click on one of these. Notice it is selected. I am holding the command or the control key if you are on Windows. I am basically selecting both of them. And now I am scrolling all the way up. I am going to now select this layout container and paste the two teasers over here. So now I have both teasers here at the top on the carousel. Let me now go back into layout mode so we can see what we have here. So we can see that on desktop. We also have the carousel now on iPad. We have the carousel. On iPhone we have the carousel. Now let’s suppose that marketing decides that maybe having the carousel on desktop and iPad is maybe a little bit too much because they already have the teasers easily accessible in these two views so they decide that they want to hide it here. So the way we can do it is once again by using the layout mode. But in this case we are going to go into layout mode without actually changing the mode here. But rather while still being on edit mode I am going to select the carousel. Make sure that I hover in such a way that the lower right corner of the frame says carousel so that is selected. Then click on it. And here I have the action bar with all the action options that I have there. But here at the extreme right I have this option. This will make the layout mode kick in just for this component while still being on edit mode. If I wanted to get out of edit mode for this component I can just click on this X. But what I want to do is use this action of the layout mode which is hiding it. I am going to hide this component so it is no longer there. Now if I go to desktop it is also hidden. If I go to iPhone the problem now is that it may also, let me refresh this. You have to make sure that it doesn’t hide it for the one that you actually wanted. So there it is. So it didn’t hide it here. We did hide it on the other two views. Okay. All right. Okay. So, that was it for this task. So we just went through the layout mode. We were able to use it to create two columns for the desktop. We learned about the device emulator. We also had a look at how we could add the core component carousel. We also had a look at the shortcut to the layout mode from the edit mode without changing which takes us a lot of time. We were also able to see how we can hide a component for a particular screen width or a break point. Okay. So that was task one. So let’s now move on to our second task. So, one of the things that we did previously, we created this page, expeditions. We already have the expeditions page. And if you notice on the navigation, okay, we have expeditions here at the end. But the whole idea of the expeditions that the retail marketing team has is that expeditions will eventually substitute the experience page here. So that means that experience should no longer show up and expeditions should show up at the beginning of the list in the navigation. So, how can we go about achieving this task? Let me now go back into the sites console. So, if you want to go into the sites console, from here, from the editor, you can click on this dropdown. This is the page information dropdown. And then click on view in admin. This is going to open the sites console. Already pointed on the page that is parent to the page that you’re currently editing. Okay. In this case, English is the parent of expeditions. That’s why this one is already highlighted. And what I want to do is make a change in the order. So what I want you to know is that there is a relationship between the order in which these pages appear here on this list and how they show up here on the navigation. Okay. They are basically in the same order that you have them here. Okay. Now, how can we change then the order of these pages here? For that, we have to switch to a different view of the sites console. On the upper right corner, we have this view switcher where we can go to this list view. Okay. And on the list view, we get different rows. And for each row, we have a page. So notice that we are currently on the English page and we’re seeing all the child pages of English. And on the extreme right of each one of these rows, we have a handle. We can grab any of these pages by a handle and move them. Okay. So I’m going to move expeditions to the top. Okay. All right. Notice that I’m still on English. I haven’t changed my location. I’m still reading the English or I’m working on the order of the child pages of English. The only thing is that now expeditions is at the top. So basically the first one and then experience is the second one. So if I go to a navigation and review what just happened, we should see expeditions at the beginning of the navigation. The second, there it is. There we have it. So expeditions is at the beginning. Okay. But that’s not the only thing I was asked to do. Okay. I also want to make sure that experience no longer shows up. Okay. So how can I go about doing that? So you could either say, okay, you just delete it. I select it and then delete. And it will no longer show up. But that’s not the best approach. And we’re going to learn that delete is actually not a basic page operation. It’s a more delicate operation in AEM, which actually is preferably left to other authors. So you should keep these off limits in many cases, in most cases. So what we’re actually going to do is not delete, but rather hide. Okay. Hide from the navigation. In order to do that, I’m going to select this page here. And I’m going to open the pages properties. So on the action bar here at the top, you can see that we have several buttons. And we have properties. And all of these, not all of them, but most of them have a keyboard shortcut. So I can either click on the button or just press the keyboard shortcut button, this is P for properties. And it will open the properties of the experience page. And now what we’re looking at here are the basically meta properties of the page. You have the title, if they are title associated, you can associate them. What I’m going to do now is basically a status setting for the page, which is hiding in navigation. So right click on that, hide in navigation, save and close. Okay. It’s still here. I can still see as an author that the page exists. But if I go to the actual page here, Expagios, you will see that experience will no longer show up on the navigation. Give it a second. There you go. So you can see that we only have experience, expeditions, men, women, and so on. So basically we are hiding that page. Another reason why we chose to hide it is because when we created this component over here, we created this component with such a way that it is referencing that list of articles. So you can see you have a parent page, content related, language, masters, experience. And we are basically listing the child pages of experience. And if we had deleted that page, we would have deleted also the child pages and we would have deleted the reference. This article would no longer show the articles. That’s another reason. All right. Let me go back here to the sites console again. So one other thing that I wanted to point out is the fact that you can also perform some basic operations such as copying a page. Let’s suppose that we wanted to start moving some of those articles from expeditions to experience. But at the beginning we just want to do a copy, not actual move operation. Let’s just copy one of those articles that is here within experience. We have a list of articles here. I want to copy one of these ones so I will exit below expeditions. So I’m going to click on the thumbnail. Notice I’m still on the list view. And then I’m going to click on copy. So here at the top, you can either do command C or control C or click on copy. Okay. Notice now that we have the paste action here at the top right. And also if I want to go back one level while being on the list view, it is useful to use this red computer in the middle center or upper center of the screen. Click on this, you get a drop down that will show you how you got to where you are right now. So I’m going to now go one level up, English. Now I see the child pages of English. Now I’m going to go into expeditions and I’m going to paste that page here. So basically I just did a copy and paste. So now this key terrain page is under both. It’s under experience and under expeditions. Okay. Let me go back one level up. So an additional view that you have here on the sites console is the card view. Okay. So if I switch over to card view, I’m also still looking at the child pages of English. Only this time we’re seeing them on the card view. And notice that here we get a little bit less information than on the list view. But still we get a bit of enough information, especially status information like, for example, you can see that this page is hidden by looking at this little icon here. You can see whether they’re published or not. Okay. But if we go to the list view, we can potentially see more information. So not just what you have here, but this can be customized. So if you click here where it says view settings, you can configure this so that the list view will show the meta data that you want. Okay. Now, you can make it so that, for example, if in your implementation, pages have a custom property or custom piece of meta data, category or something like that, or something that is specific to you, and you know that all pages have that and you want that to show up here on this list of columns, you can make it so that this can be customized so that you can add that particular property here. Okay. All right. So one last thing I want to do is if we go back here to the expeditions page, I want to be able to change the navigation in such a way that expeditions will show up not here, the text expression doesn’t show up like that, but rather I want it to show up as EXP. So EXP instead of expeditions. How do I go about doing that? So once again, I am taken back now to the page properties. Only this time I’m going to the page properties by using the page information dropdown. So click here on the page information dropdown, open the properties, and this is basically the same properties that you would see if you were to open them from the site console. Only we’re doing it from the perspective of the page editor. Okay. So these are basically the meta properties, the information about the page. Okay. So you know the page has components on it that render the content that you see on the page. But the page itself has information about the page, like the title of the page, tags that describe the page. But additionally, you have multiple titles. For example, you can have a subtitle, navigation title, a page title, okay, a main title. So one piece of information I want to point out right now is the navigation title. So I want to make this EXP. So the navigation component is smart enough to go through a precedence order in order to choose what to show as a title on the navigation. So its first option will be to look at the navigation title property. If that’s not there, then it’s going to try with the page title property. If that’s not there, then it’s going to try the main title of the page. Now the main title of the page is what will always show up on the site’s console when you’re navigating and offering the page. Okay? But for site visitors, when they’re navigating through the site, what they see in the navigation is whatever you put here on EXP. Unless it’s empty, then it’s going to fall back until it finds a viable title to put. Okay? So I’m going to use EXP, save and close. All right? And there it is. Okay? EXP. So I modified a property of the page. All right. So one last thing that I want to point out here regarding the site’s console is that besides these list views, card and column that you have here, we also have other ways to view the content. So for that, let me point out what we have here on the upper left corner. Here’s the admin UI rail selector. This is a drop down. These are the admin UI rails. If you open one of these, this will open up a rail on the left. For example, if I go into content tree, this will open a content tree of AEM. So AEM, as I mentioned before, exists within a hierarchical tree of nodes and the site pages are organized in a hierarchical tree. On a tree. Okay? So you can see we have retail and this is the hierarchy. Now if you’re on list view or card view, it might be a little bit more difficult to graph the hierarchy because you get a kind of flat view of whatever you are currently or wherever you are currently on. So you’re on English, you see the child pages of English. But you’re not seeing the hierarchy. But if you use the content tree view, you can then start navigating through the different levels. And see what’s in there. What’s in each level. Okay? So that’s pretty useful. Additionally, you have other admin UI rails. For example, you have the timeline. So if I select one of these pages, like for example, women, which is one of the pages that was edited on webinar one, and then go to timeline, you can see that there’s a bunch of events that have been locked here on the timeline that have occurred on that page. Okay? At the timeline. We’re going to look into more detail on the next webinar on the timeline. And then we have references, which we’re going to talk into more detail in more detail on the fifth webinar of this series. But here’s basically a way for you to see which references are related to this page. So for example, if there are other pages linking to this page, you can see incoming links, borrowed and lent content, for example, which you can configure components to update this sort of information. You have live copies, language copies, launches. We’re going to cover these types of things on the upcoming webinars. For now, it’s basically references. All right? So we’ve basically finished that, too. We’ve finished what we said how to do. We also added the change to the navigation title that we expected to be EXP. Okay? We looked at the different views, card view. We looked at page properties, having navigation, how we could work with other important page properties like alternative titles. We saw there were descriptions, tags, and other properties about the page. We also had a basic operation, copying a page from one location to another within the tree. And we also had a look at the fact that there are keyboard shortcuts for most operations on the admin UI, sorry, on the site console action toolbar. And we had a look at the UI rails. Okay? So our last task today is classifying and searching for content using tags. Okay? This will also involve a little bit of the assets media library or the assets module of AEM. Because the whole idea here is that we want to put ourselves in a hypothetical situation. Okay? So let me go back here to the expeditions page. So when we offered this page, we already knew which images to drag and drop onto the components. We drag and drop this hiking image with the background of a mountain, this equipment image, this image with these trousers. Okay? So how did the author know or how did I know that those were the images that had to go there? Well, I just knew it. All right? But that’s not a good enough answer. In a real life situation, you will have different teams. Maybe a team is offering the pages and another team is the one that is maybe producing all of these images that they get from the expeditionary that they hire to create all of this content. And someone else may be working on the assets on the images and uploading them into AEM, making sure they are ready and all of that. And how would you as an author know which images to pick? Okay? So this is where we can use tagging. For that, first let me go back into the site also and I’m going to show you the media library, how you can navigate through the media library or the assets module. Okay? Then we’re going to add an asset and then we’re going to start tagging assets. Okay? So first, navigation. Okay? Remember main navigation? You click on this, get the main access to the different consoles of AEM. The assets console is your gateway into the assets module. Within that, you get a submenu. You’re going to want to go into the files menu. This will give you the hierarchy of folders that contain assets. So I’m going to switch the view. Just like with the size console, in the assets console, you can switch the view. I’m going to column view because this will give me a nice hierarchical view. So I’m going to drill into retail English experiences. Okay? On this one, I’m going to go ahead and add a new file. So I’m going to click here. While being on these experiences, Western Australia by campervan, for example, I’m going to go ahead and click on create file. Okay? Now I’m going to pick an image here that I can upload. Click open. Okay? Upload. So this is now uploading that image as uploaded. If I go into card view, you can see it in more detail. Okay? You can also see the list view here as well. All right? So what I want to do now is start tagging images to make it so that an author of a page such as the expeditions page will know that he should be able to use, for example, this image or some other images that are maybe scattered across the folder hierarchy within the assets module. So how do I go about doing that? First thing that I need to do, I have to create a tab that will relate to this. Okay? I can tell the authors of the page, hey, just filter the assets by this tab. Okay? So how do I create that tab? Now once again let’s go here and click on the upper left corner so we get the main navigation. We move from the main navigation tab to the tools tab. Okay? And on tools tab you will see we have different options. We have the general section. Under the general section you will see this tagging. Okay? I want to point out that this tools tab and most of what you see here is going to be of limits to most authors. So the whole idea is that, for example, if you’re thinking about tagging, you want tags to be managed by a specialized team that understands your content and knows how to categorize the content properly. Okay? So if I go into the tagging console, click on that, so I have here the tagging console. The first level that you see here is the namespaces. Okay? And within each namespace you can create a hierarchy or a tree of tags. Okay? And these tags have to be unique within each namespace. Notice also how the behavior of this console is very similar to the sites console as well. You drill in and then you can use the create button to create a new one. For example, I want to create a new tab which is going to be the expeditions tab. The expeditions tab is what we’re going to tell authors to use in order to know which assets to use. Okay? So I’m selecting retail. While that is highlighted, I’m going to click here on create. Create tag. And I’m going to call this tag expedition. Okay? The title of the tag is how we see it in the navigation, but the actual name is the name of the tag. And the tag, all tags in AM will have a path within content. CQ column tags. In this case we’re on the retail namespace. So retail slash expedition. Okay? When I click submit, this will have created that expedition tag. Additionally, you can localize a tag. If I select it, okay, on the action that you get here at the top, you can click on edit. Okay? And I could, for example, add a localization for Spanish, for example, and then we would have a localized version of the tag for Spanish versions of the site. Okay? So now I have my tag. Now I’m going to begin to use the tag. All right? For that I’m going to go over here. Main navigation. Okay? And assets. And files. Okay? So what I want to do now is show you this action here. We have the search, the Omni search action or function. This will allow you to search throughout all of AM by location. So notice right now I’m on the assets location. Okay? If I remove this, okay? You see you get a list or a categorized list of locations. You have assets, you have sites, you have projects. So if I start typing here like location, you get all of the different locations. So I can go back to locations. So notice that since I was on the assets console, this was already preconfigured to show me the location assets. Okay? This is the Omni search. So I can type in keywords here to start searching for assets. So I’m going to type in, for example, hiking. So this is me as one of the people who are working on the images, deciding which are the images that are supposed to be tagged with Expeditions. So I’m going to pick this one, for example, and this one. By the way, I can also switch the view. Make it a card view, for example. I’m going to pick this one, too. So I got those three for hiking. Let’s suppose that I want to also tag a few other ones. Let’s look for equipment, for example. Equipment. And I’m going to tag this one. And this one. Okay? And let me close this so I can get the Omni search again. Let me search for, for example, mint. I’m going to tag this one. This one. Okay? All right. So how do I actually tag them? I didn’t actually tag them. I just selected them. Okay? So I apologize for that. So I’m just selecting them and not tying them. So select them, like I just did. Then open the properties. And then on the properties of the asset, you will see a tags property. And I’m going to tag them with retail and expedition. Okay? Select. Save and close. Mint. Okay? So now both assets got tagged. If I go back to hiking, for example, and tag the ones I had selected. Okay? And tag them as well with the expedition tag. Right? Correct. Save and close. All right. Now if I go back to the expeditions page, let me refresh. Okay? Now I can start working with the assets in a more intelligent way. If I go to the site panel, remember site panel, open it by clicking on this. Then go to the assets tab. And I can click on the select tab. So right now I’m the operating team working on the expeditions page. And I have been instructed to use the expeditions tag, for example. So I’m going to filter whatever the asset finder shows me by expedition. Okay? So now all the tags that I see here are just the ones that I tagged with the expedition tag. If I make this wider, I can see more complete view of the assets that are visible. Okay? All right. Let me see what else we have missing. Okay. So one last thing that I wanted to mention before we go to Q&A is the fact that after having done this tagging of multiple assets, okay, we just did a bulk operation. Basically we selected multiple assets and tagged them all at once. You can do that also with pages. So I go to sites, okay, open the content only rail so that only the content shows up. Retail. Okay. And the language masters. Let me switch the view to column so we get a hierarchy. Okay. And what I wanted to do is show you how you could, for example, tag multiple pages at once. I could select all of these pages by clicking on select all. Okay. Then open the properties. And what I can do now is basically modify or update all of these properties that you see here in bulk for all the currently selected pages. Right now what I’m going to do is just select tags and make it so that we are pointing to the expedition tag. Okay. Now all of these pages are tagged with expedition. Okay? All right. So one last thing is we have this filter admin UI rail. We click on it. And this will basically open the only search but only pre-filtered to the current location. So we were currently under the retail language masters EN experience. So that’s what we are looking at. Okay. But if I want to use this, I could use the tag. Okay. So let’s say I want to make it so that it will show me the whole retail, the whole language masters English, for example. All of this. That path. Okay. So I’m pre-filtered by that path. And then I’m going to use the tag expedition to show me just those pages that I just tagged. All right. Okay. So we just did our actual task three. We just finished task three. So I mislabeled this one. We explored the media library UI. We added an asset. We saw how we could tag assets by opening the asset properties. And we did that in bulk by selecting multiple assets after searching for them. We also looked at the tag manager creating a tag that we later used to tag items with. We used the OmniSearch, we used the asset finder, and basically you searched by tagging the asset finder in the page editor. Okay. We also learned that you can perform bulk operations such as tagging multiple pages at once or changing the description at once for multiple pages. Okay. All right. So we have some time for Q&A left. So let me have a look at any questions that we have here. I’ll try to go through the most I can. Okay. So if there’s any kind of catalog for the components available that we can see in advance, absolutely. So depending on the version of AEM that you’re looking at, the library might be a little bit different. But you have this core components library here. This is the core components library. This gives you, without leaving AEM, if you have a local installation of AEM or maybe an installation that is not production, this is going to be available there. Okay. And here you can see if you open this, it will give you a library of all the different core components. Okay. So the core component library evolves on a separate lifecycle from AEM. Okay. So it’s a project of its own. And they’re constantly making these component libraries better and creating new versions of these components. So notice how as I hover over them, you get a version. So this is V1 and things like that. Okay. So these have versions. All right. These are the core components. And you can use that as a reference. But this is also available on the Adobe AEM documentation site as well. Let me have a look at any other questions here. All right. Do we use layout while offering or for testing folks to check issues in different views? Okay. So it could be either of those two possibilities that do it. So you could either make it so that authors get the ability to actually alter the layout just like we just did. Okay. Or that you don’t allow that. Okay. But in either case, you can test how content will look for different breakpoints. That’s not going to be needed. So you can change the screen and see how the content is going to look on different breakpoints. Okay. These authors are supposed to make sure breakpoints is working. Okay. For users on all platforms. Okay. Once again, so Russ Martin is asking whether the author is the one who should make sure. So this is completely up to your content strategy and how you’re going to decide to work. Okay. So if you are going to have authors that are trained enough to work with the layout container and offer different breakpoints and you are fine with that, you can use that. Okay. In some other cases, the breakpoints have already been prebaked. As you saw, for example, the lead component, without us doing anything, it just automatically was showing up on a single row when we looked at it on the phone. That is because the components themselves, they have support for responsiveness. Okay. For different widths. But if you want to change where they locate based on the location of the other ones with layout, you can use the layout for that. But you could also make it so that in your strategy, you need to the developers to be the ones in charge of that and you just offer for desktop or for mobile and then just use the layout to test whether what the developers did is working correctly on the different widths. Peter Nash is asking do it. Okay. I think he’s already answering. Tatiana Abid. If you want to change the order of the navigation pane, okay, you do it manually for each type language. Luis, I’m sorry to interrupt. I think we have time for maybe one more question that we can wrap up. Okay. Okay. Okay. So Peter is also responding to Tatiana here. So in principle, you have to if you have a list of pages, if you reorder them, it’s going to affect only that particular list. Okay. You have to go to the different languages. Unless you’re using multi site manager and if you change the order on the blueprint, okay, and then you roll out the whole hierarchy back into the live copies, those live copies are going to get that. But live copies are typically on the same language as the root. Okay. So it would be multiple nationalities in that case, but locales, but non-explanatory languages. So last one would be how can I disallow authors to access the responsive grid. So you would have to disallow access to the for example, everything in AGM is hierarchical tree of nodes. So if you see the edit drop down, okay, with the layout option there, you can make it so that layout thing is hidden. Okay. And they cannot actually open the editor in that mode. Okay. But still you can open the emulator and change the different language without actually changing the layout. Okay. Okay.