Learn how to create rich and engaging customer experiences in Adobe Experience Manager in this 5-part webinar series. We will start with the building blocks of content authoring while introducing you to the fundamental concepts and operations. This will include sites admin features and basics of handling digital assets within AEM. In the later part of the series, discover features that can help you save time and be more efficient by re-using the content and delivering it across channels.
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 AEM. Luis, you now have the floor.
Thank you, Dawn. Thanks for the introduction. Can you hear me? Yes, we can. Thank you. All right.
Thanks everyone for joining us. Today is our second day of the AEM Sites Skill Builder Webinar for authoring, authoring 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 and we ended up having to cancel it, but we have a recording of the first webinar all ready for you to look at.
So if you want, if you - haven’t actually seen 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, it says - webinar one 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 are going to get - started with our second day. Just here a quick reminder of AEM Sites, so Adobe Experience Manager 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 on different channels. So basically, AEM 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? In tools: Photoshop and - Fireworks and InDesign, all those tools that we - have on Creative Cloud, all of that can be used within AEM to compose and manage - and create experiences that then you can deliver - across multiple channels, okay? And the delivery of those experiences can be personalized in AEM 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 AEM.
So we want to provide experiences for omnichannel situations.
So, 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 experiences - on a personalized basis using AI, okay, 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 AEM as a cloud service, which is something that - came out this year, AEM is regularly integrated - with many services, other services from Adobe which you can get also - along with AEM, okay.
You can also integrate to AEM if you are not doing the AEM or you don’t have any master cloud service through different integrations.
So day one was authoring basics.
That was basically - getting the fundamentals of how you deal with the - AEM editor, the page editor, which is a 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 AEM that previously we just - touched in passing, okay.
So without any further - ado, let me go into, 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 AEM page editor, dragging and dropping - components onto a page, opening the dialogues to our content, to those components on a page.
We’ve 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 lead component, a - couple of feature components. We also looked at the style system and we also mentioned - a little bit in passing in the content insights feature as well.
Additionally, we also tackled or talked about the AEM core components, which is the library of components that comes with AEM out of the box. We used a variety of components that is delivered in an independent - development stream from AEM, but it’s constantly getting updated and you can use different - versions of the core components. And these are basically compatible. You can have 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 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 laptop, we’re going to look at how - we can add assets to AEM, how we can create our entire assets and use that as a - strategy to allow authors to find assets easily - when they are composing experiences on pages. We’ll also briefly look - at some bulk operations and that’s going to be too late. So, let’s go ahead and get started. Our first step, 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 our desktop view of - this is the “Explorations” page, the one that is done on webinar - one of this series, okay.
Where we ended up with a lead component, a couple of features, okay. A hero image component, - and I want to look here is, look at how we can get different layouts for different types of screen widths and how AEM, the AEM’s page editor helps us with that. Let me now go ahead and log into AEM, 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 AEM, whenever you - don’t know where you are and you want to find - yourself back to this screen, all you have to do is click - on the upper left corner of Adobe Experience Manager, this will bring back the navigation. If 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 a sites console, which is where we are focusing - our attention right now. The sites console, it will - have the hierarchy of pages that make up the sites in AEM. And I’m going to now navigate to that “Explorations” 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 homepage 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. And 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 a what you see is what you get type of editor.
And what I want to do now - is, just quickly a reminder that these components that we have here were dragged and dropped. We have the leads and the two teasers were dragged and dropped onto the page while being on the edit mode. And the fact that we were - able to drag and drop them was made available by these - little components here, these drag components here. These are components called - our layout container.
This layout container is the one that is making it possible for us to drag and drop components onto a 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 dropdown, you will see that the page editor in AEM has several different modes, okay. We have already covered 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, where it’s called the device emulator, which is basically a way for - us to emulate screen width and create and edit layout for - the different screen widths. Right now I’m looking at it - at the desktop screen width, but if I go here, the - marking of around 700 and 75 or something like that, or 750, that would be the screen - width of iPad Retina. So we can author for layout for that screen width, and will be probably for all screen widths that go from around 425 up to 760, okay. And these markings that we put - here, we can configure them. So depends on your - implementation team to determine, or you can tell them, what exactly do you want - to use as a reference or what you want to offer layouts for? Okay, so here we have - desktop, iPad Retina, iPhone, Galaxy S7, okay. 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 mobile phones. So what we want to do is make it so that in the case of the desktop, the lead is going to be on - the left hand side column. And we’re going to have the - two teasers next to it, okay. 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 a tablet, this - is going to be different.
The features are going - to be below the lead 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 lead component - and here we’re going to add a carousel component at some point, okay. So let’s go back and start doing it, okay. First, I have to make sure that I am on the desktop layout mode, on the desktop screen booth, sorry, while I’m on layout mode, okay. 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 weight of the components that are placed within it. So by default, this component will have a width of two columns, okay. So what I’m going to do is, I’m going to make this lead 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 component - which is of the components, which is called, float okay.
When I grab this one - and make it for example, five or six columns wide, okay. Six, that will be six, okay, half. You’ll notice that the component is remaining on this row. The reason for that is - because on this one, we’re 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, it has promoted 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, scroll up. Now you can see that we have - the two teasers right there next to these components. 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 carry whatever I put on the desktop. So all of these other - widths, unless I change them are going to carry whatever - you have on the desktop. So if I go to iPhone, for example, it’s also going to have that. So the lead component going - to make it fit somehow. And then you have the other column with the two teasers, - but for the iPad Retina, so that 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 lead, okay. So let me go back here. And in order to achieve that, I am going to undo the 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 other row, but I can undo that default behavior by clicking on this action, - lets us float to a new line. When I click on float to new line, you basically override - that default behavior of basically floating up - whenever there’s room. So now the teaser has come down, okay. And now I’m also going - to make the other teaser come down as well. All right, 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 grid’s width, which would be six columns, okay. So of these 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. These ones didn’t float - up to be on the upper row because I deliberately pushed. So it’s basically overriding - that default behavior. When I unpush this, the - default behavior again, is going to be that this component is going to disappear from this row. It’s basically that 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 and there it is. Now the two aren’t next to each other and I’m going to also make - these little components take up the full width, okay. So now, 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. How I’m going to do it, by making these ones take - up the full width, okay. I do that. Okay, so I now have pushed - the two teasers out of that. Right now they are one into 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, if I 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 these layouts. 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 a 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 - layouting 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 lead component, okay. But I can make sure that I - select the layer 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 now 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, okay. And then once the layout - container is selected, you will see this button here, which is basically the - revert breakpoint layer. So this would revert all of the layouting that we just did for the desktop. Now okay, I want to aware for - potential time constraints, but just wanted to make sure - that you are aware of that. Okay, so now that we have - these, let’s suppose that, the We Retail marketing team, We Retail is the company - that runs this site, may decide that they want these teasers to be easily viewable when you’re 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 of the top of the screen, so that people can quickly - look at the teasers without scrolling too much down. They can easily go and see the articles. So their solution here will - be to use the carousel, the core component carousel. I mean, for that, we’re going - to go back into the edit mode, go to edit mode, okay. Knowing that I am right - now on edit mode here, even though I am on edit mode, notice that the device - emulator is still on. I can switch it off by - clicking on this button if I want to. I don’t want to, because I’m still working from the perspective of - multiple breakpoints. I’m going to keep that open. And what I’m going to do now is that I’m going to add a carousel component and this carousel component, - I’m going to add it by opening the side panel, - clicking on this button, then go to the new tab, which will open the component selector where I can find the component, - here it is, the carousel, which is within the We Retail group, and I’m going to drag and - drop it here at the top, okay.
So it will show up there. Just a second.
Refresh the screen.
Like, where is my carousel - component, there it is. Let me just drag and drop it here. There it is, okay. So we did the core component, carousel, now the core component carousel is very interesting, because it itself has that 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 AEM 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, okay. Right now you can basically configure it to allow you to drag - and drop any component, whatever suits your requirements, okay. So what I’m going to do now, instead of dragging and - dropping components from here and author them from scratch, I’m going to reuse these teasers because I have already authored them. So I’m going to just take - them and group them together. And then I’m going to - copy and paste them both into that layout container. So, in order to do that, - I’m 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, you press the command key - and click on one of these, notice it’s selected. I’m holding the command or the control key if you’re on Windows, okay. I’m basically selecting both of them. And now I am scrolling all the way up. I’m going to now select - this layout container and paste the two teasers - over here, all right. So now I have both - teasers here at the top, on the carousel, okay.
Let me now go back into layouting 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 to 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 layouting mode. But in this case, we’re going - to go into layouting mode, without actually changing the mode here. But rather, while still - being on edit mode, I’m 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, and - then click on it, okay. And here I have the action bar with all the action - options that I have there, but here on the extreme - right, I have these options. These will make the layout mode kick in just for this component while still being on edit mode, okay. If I wanted to get out of - edit mode for this component, I can just click on this X, okay. But, what I want to do is use this action of the layout mode, which is hiding it, I’m going to hide this component, okay, so it’s no longer there, okay. Now, if I go to desktop, it’s also hidden. Okay, 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, okay. So, it didn’t hide it here but 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 layouting 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. Okay, 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 breakpoint, okay. So that was task one. So let’s now move on to our second task.
Now, one of the things that we previously, we created this page, - “Expeditions,” right? 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 We Retail marketing team have is that Expeditions will eventually constitute 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 and admin. This is going to open the sites console.
Already pointed on the page that is parent to a 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 notice 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 them, the order of these pages here? For that, we have to switch to a different view of the sites console. Here in the upper right corner, you have this view switcher where we can go to this list view, okay. On the list here, we get different rows. And for each row, we have a page. So knowing 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 the 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 looking for 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 Experiences the second one. So if I go to the navigation - and review what just happened, we should see Expeditions at the beginning of the navigation. The secondaries, you have to have it, so Expeditions is at the beginning, okay. But that’s not the only thing - I was asked to move, okay. I also wanted 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 deleted. 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, it’s 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 page’s property. 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 briefly press the keyboard shortcut button, which 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 tagged, associated, you can associate them.
What I’m going to do now is basically a status tag for a page, - which is hiding in navigation. Okay, so I click on - that, hide in navigation, save and close. Okay, it’s still here. Okay, I can still see as an - author that the page exists.
Okay, but if I go to the - actual page here, Expeditions, 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 then 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 lead component over here, all right, we created a - list component in such a way that it is referencing - that list of articles. So you can see how the parent page, content/we-retail/language-matters/en/experience and where I think we’re listing the child pages of experience, okay.
And if we have deleted that page, we would have the deleted - also the child pages, and we would have deleted the reference, okay. These articles, this would no longer - show the articles, okay, 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 wanted to do our copy, not actual move operation that just copied one of those articles that live here within Experience. So we have our 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 that I’m still in the list view, and then I’m going to click on copy. So here are the top, 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; top right, okay. And also if I want to go back one level while being on the list view, it is useful to use these breadcrumbs here in the middle center or - upper center of the screen. Click on this, you get a dropdown 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 page is under both, it’s under Experience and - under Expeditions, okay.
Let me go back, one level up. So I need 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 then on the list view, but still we get a bit - of enough information, especially status information. Like for example, we can - see that these pages here by looking at these little icons here, you can see whether they’re - published or not, okay. But if we go to 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 these so - that the list view will show the metadata as 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 metadata, category or something like that, or something that is very 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 that the text “Expeditions” - doesn’t show up like that. I’d 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’m thinking - 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 sites console, - only we’re doing it from the perspective of - the author 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, - title describe the page. But additionally, you have multiple titles or perhaps 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 be 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. But 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 sites console when you’re navigating and - authoring 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 - the 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 sites console is that besides this list view, column width that you have here, we also have other ways - to view the content.
So for that, let me put - out what we have here on the extreme or the upper left corner. We use the admin UI rail - selector, this is a dropdown. These are the admin UI rails. If you open one of these, this, it 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 or on a tree, okay. So you can see we have We Retail and this is the hierarchy. Now, if you’re in this view or card view, it might be a little bit more difficult to grasp 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’ll - see the child pages of English, but you’re not seeing the hierarchy. But if you use the content review, 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, like 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 logged here on the timeline that have occurred on that page, okay, that’s the timeline.
We’re going to look into more - detail on the next webinar, on the timeline.
And then we have our references, which we’re going to dive into 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 task two, we’ve finished what we set out to do in that, we also added the - change to the navigation title that we expected to be EXP, okay. We looked at the different views: list view, card view, okay. We looked at page property, - finding navigation, how we could work with other - important page properties like alternative titles, so - that there were descriptions, tags and other properties about the page.
We also had our basic operation, - copying and pasting 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 sites console action toolbar.
And we had a look at the UI - rails, admin 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 authored this page, we already knew which images to drag and drop onto a component, okay. We drag and drop this hiking image with a 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 things. Maybe a team is authoring the pages and another team is the one that is maybe producing all of these images that they get from the Expedition area that they hired to create - all of this content.
And someone else may - be working on the app, on some of 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 sites console 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. We’ve our main navigation. You click on this, get the main access to the - different consoles of AEM. The assets console is your - gateway into the asset’s module. Within that, you get a sub-menu. You’re going to want to - go into the file’s menu. This will give you the - hierarchy of folders that contain assets. So I’m going to switch the view and just like with sites console, in the assets console, - you can switch the view. I’m going to column here, because this will give me - a nice hierarchical view. So I’m going to drill into We - 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 - camper van, 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.
And so I’ve loaded it. If I go into card view you can - see it in more detail, okay. You can also see that list - lives 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 tag that - will relate to this, okay. And then I can tell the - authors of the page, “Hey, I just filtered the - assets by this style, okay.” But how do I create that tag? 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 that we have different options, we’re - on the general section. Under the general section, you - will see the styling, okay. Now I want to point - out that this tools tab and most of the, what you see here is going to be off limits to most authors. So the whole idea is that, for example, if you were 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 a tagging - console, click on that. So I have here the tagging console. The first level that you see - here is the namespaces, okay. Within each namespace, you - then 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. Okay, you drag in, you’re drilling, sorry.
And then you can use the create - button to create a new one. For example, I want to create a new tag, which is going to be the Expeditions tag.
The Expeditions tag is - what we’re going to tell authors to use in order to - know which assets to use, okay.
So I’m selecting We 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 well, that is in the name of the tag. And the tags, all tags in AEM will have a path within - content, situ column tags.
In this case, we’re on - the We Retailing space so in this case, - we-retail/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 that group, for example, add localization for Spanish, for example, and add position for example, and then we would have a - localized version of the tag for Spanish editions of the tag, 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 these actions here. We have the search, the - Omnisearch action or function. This will allow you to search throughout all of AEM by location. So notice right now I’m on - the assets location, okay. But if I remove this, okay, you see you get a list or a - categorized list of location, 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 location. So notice that if I was - on the status console, this one’s already pre-configured to show me the location assets, okay, to do the Omnisearch. 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 Expedition. So I’m going to pick this one, - for example, and this one. By the way, I can also switch the view, make it card view, for example, I’ll pick this one too. So I’ve 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 then close these, so I - can get the Omnisearch again. Let me search for, for example, men.
And I’m going to tag this - one and this one, okay. All right, so how do we 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 tagging them. So select them, like I just did then open the properties and then on the properties of the asset, you will see a tag property and I’m going to tag them with We Retail and Expedition, okay. Select, they even close, submit okay.
So now both the 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, all right? Correct, maybe close, lovely, all right.
Now, if I go back to the - Expedition’s page, let me refresh.
Now I can start working with the assets in a more intelligent way. If I go into the side - panel, remember side panel, open it by clicking on this, then go to the assets tab, - I can put on the select tag. So now I’m the authoring 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 Expeditions page. So, I make this wider, I can see a 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. Maybe we selected multiple assets and tagged them all at once. You can’t do that also with pages, so if I go to sites, okay.
Open the content only rail, so that only a content - shows up, We Retail.
Okay, and Language Masters, let me switch the view to - column so we get a hierarchy.
Okay, and what I want to do is show you how you could, for example, tag multiple pages all at once. I could select all of these - pages by clicking on select all, then open the properties and what I can do now is basically modify or update all of these properties, properties that you see here in bulk for all the - currently selected pages. Right now, I am going to - literally just select tag, 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 can on it and basically open the Omnisearch but already pre-filtered - to the current location.
So we were currently on the we-retail/language-matters/en/experience, so that’s what we are looking at, okay. But if I want to use this, - I could use the tag, okay.
Maybe I want to make it - so that it will show me the whole We Retails, the - whole Language Matters English for example, - along that path, okay. So I’m pre-filtering by that path and then I’m going to - use the tag Expedition, that will show me just those pages that I just tagged, all right. Okay, so we just gave, - actually this is task three, we just finished task three.
So I mislabeled this one.
We 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 searched by tag in 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, 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, use 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. In here, you can see if you open this, it will give you a library of all different core components, okay. So the core component library evolves on a separate lifecycle from AEM, okay.
So it’s as if it’s a project of its own, and they’re constantly making this components library better - and creating new versions of these components. So notice how, as I cover 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 look at any other questions here.
All right, do we use layout while authoring or in for testing forks to - check issues in different views? Okay, so it could be either of those two possibilities that do it. And 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 limited. So you can change the screen width and see how the content is going to look on different breakpoints.
Okay, is author supposed to make sure breakpoint is working okay, - for this or on all platforms? Okay once again, so Ros Martin’s 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 layout container and author different breakpoints, and you are fine with that, - you can use that, okay. In some other cases, the breakpoints have already been pre-baked, - 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 layouting mode for that. But you could also make it - so that in your strategy, do you leave it to developers to be the ones in charge of that, then you just author for desktop or for mobile, and then just use the - layouting mode to test whether what their developer did is working correctly on - the different widths. Peter Nash is asking, do it … Okay, I think he already - is answering, do it. Tatiana Beat, if you want to change the order of the navigation pane, okay, you can do it manually - for each site language.
Luis, 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 there, so I’m going to . In principle, you have to … If you have a little - pages, if you reorder them, it’s going to affect only - that particular list, okay. You have to go to 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 of the route, okay. So it would be multiple - nationalities in that case, or locales, but not necessarily languages. So last one would be, how can disallow authors to - access their responsive grid? So you will have to - disallow access to the … For example, if you are use … Everything in AEM is a - hierarchy called tree of nodes. So any dropdown, 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 screen widths without actually changing - the layout, okay. - -
Become a skilled author with a deep dive into AEM’s Sites and Media Library administration UI with tips and tricks to increase your day-to-day efficiency.