- Engage C&M
- Brand
- Campus Communications
- Media & News
- Social
- Web
- Events Calendar
Design & Build
CLF4 allows you to design and build webpages based on your specific content needs. To begin, review the principles of designing in AEM for basic layout best practices. Then start building your pages by selecting one of the page templates listed under page types. Finally, add components to build your custom layouts.
Design principles
An overview for using the tools in AEM to design a CLF4 website
CLF4 Sample site
A sample site in AEM with examples of pages, components and styles
AEM Components and Styles for CLF4
Note: For all other components or for instructions using the components in CLF3 or CLF2 please refer to the AEM help pages.
COMPONENTS
Components are the different "content containers” in AEM that are placed within a webpage to build your website content. These components include things such as text boxes, images, lists, columns, etc.
How to add a component to your page
- To add a component, you will need to locate the component in the sidekick.
- Drag and drop the component onto the page in the desired location
- Then you can work with that component to add or modify your content.
Tip:
- You can duplicate a component and its content if you do not wish to recreate it. To duplicate, right click on the component and select copy. Right click in the editable area in AEM and select paste. This should copy and paste your duplicate into the area.
Class Styles
Each component’s style can be customized, within the parameters of the SFU brand, by applying a class name to it. These class names are part of the CSS (cascading style sheets) web language used to define the look and feel (fonts, colour, etc.) of the component.
How to add a class style to your components
- To add a style class, drag the component on the page
- Edit the component by right clicking on it
- Find the CSS Class field, and apply the class name in the text field
- To find a specific CSS class name to use for each component you can browse or search the List of styles (above)
TIP:
- You can add more than one class at a time by adding a space between the class names.
- Make sure not to include commas or colons at the end of the class name as this will interfere with your class name.
- Note that this field is case sensitive.
- See list of all class styles
