Let’s take a look at some of the Quick Site Creation features in Adobe Experience Manager sites. We will also look at how designers and front end developers can work together to update the look and feel of a newly created site.
In the AEM sites console, We can generate a site from a predefined site template. We can choose to import a new site template, or use an existing one. I’ll go ahead and import a basic site template provided by Adobe.
This template creates a sample Wireframe site.
We can enter the title for our site, and we can give it a name, and in just a few clicks. We now have a fully featured site that is immediately functional.
A basic site structure is available, complete with multi-lingual support. Users can immediately begin authoring. let’s go ahead and open up one of the pages. The site template provides some starter content, built with AEM core components. Core components are out of the box components, provided by Adobe, and these components allow users to edit page content in AEM in a what you see is what you get type environment.
For example, I can modify this hero teaser on the homepage.
I’ll use the components dialogue to update the title text of the hero teaser.
We can use features of the AEM style system to change the layout of our component, or at a style variation to make the background dark.
Each page in AEM is backed by page template. Page templates allow brands to create reusable layouts, to promote content consistency. Page templates also allows to set granular policies to govern the behavior of components across the site. Just like pages, page templates are configured with in-context preview. So the AEM authoring environment allows a user to edit content and make modifications to the layout. Next, let’s look at how we can update the look and feel of our site. Now a major part of any new implementation will be applying and updating the themes to match the look and feel for your brand. Adobe XD is a great tool for designers to rapidly prototype these kinds of updates. And our site template actually comes with a UI starter kit to help accelerate this process. The UI starter kit includes the different templates and pages available in our site template. The starter kit also breaks down each UI element and maps it to a corresponding AEM component. So now a designer can come in and start updating the look and feel of these different components. XD has some really powerful features, that make it possible to create relationships between different UI elements. For example, we have a functional color named accent. I’ll go ahead and update this color to a brand specific color, to match our WKND branding. Observe that we can see this change in update cascade through all the different UI elements. The update is also added to the page mock-ups. Once the designers is happy with their UI updates, we would then want to hand off this information and export it to a front-end developer, who can then make the CSS updates. Adobe XD makes this really easy by giving us the ability to export the art boards, with a shareable link.
Developer can then access this link, and see the updated styles and direction from our designer without needing to install Adobe XD on his or her computer.
This link is live, so any updates to the original XD file, will be reflected here. Now as a front-end developer, I can inspect the different properties included in the mock-ups, and make the corresponding updates in my front end theme source.
Let’s go ahead and make an update to that accent color that we saw reflected in our XD Comps.
So that’s a brief overview of some of the Quick Site Creation features of Adobe Experience Manager, and how you can use Adobe XD in a low code approach to implementing a site. Thanks for watching. -
The steps in this tutorial will take place in an Adobe Experience Manager as a Cloud Service environment. Ensure that you have administrative access to the AEM environment. It is recommended to use a Sandbox program and Development environment when completing this tutorial.
A step-by-step tutorial walks through the implementation of an AEM site for a fictitious lifestyle brand the WKND using the Quick Site Creation feature.
What are you waiting for?! Start the tutorial by navigating to the Create Site chapter and learn how to generate a new Adobe Experience Manager project using a Site Template.