Components: how to create content?
Text paragraph component
Text paragraph is the body text field. A text paragraph can include the basic formatting options:
Title = heading h2
Subtitle = heading h3
|First cell (header row)||Second cell (header row)|
|Fourth cell||Fifth cell|
|Sixth cell||Seventh cell|
- Bullet points
- Bullet 2
- Numbered lists
- Number 2
Quotes can be used to highlight a sentence that someone has said. The sentence needs to be short, max 120 characters with spacings. A quote can include an image. Below are examples of quotes with and without an image.
This is a quote without an image
This is a quote with an image
Highlight components can be used similarly to quotes to emphasise a short text piece or a sentence (max 120 characters with spacings). Highlights have two theme options: Blue and Yellow. Below are examples of both themes. Kindly note, that the Highlight component is not to be used for titles or sub-titles. This, because your content won't be included in searches and, therefore, wont' reach the targeted audiences. The search engines favour the set formattings: Heading 1 (i.e. the main title), Heading 2, and Heading 3.
Listing is a text component where you can add titles/categories and add information about them. The component has two display modes: accordion and double column. Accordion is a type of menu where the user can click the categories opening up more information on the topic. Double column shows all the information straight without clicking in two columns, the title/category on the left and text on the right. You can edit the titles of the items, the descriptions, the links and link texts. Below is an example of listing with two items in both display modes (listing, double column). The items can include the basic formatting.
The category of a listing column item (double column)
The description of the listing element.
The category of a listing column item (double column)
The description for the second item.
Image with text
Image with text component presents a specific content in an engaging way.
In services, Image with text has two Media placements: Media on right and Media on left. Below is an example of both. It is recommended to use both placements if you use multiple of these components.
This is the Image with text component with Media placement: Media on right.
This component can include the basic formatting described above.
This is the Image with text component with Media placement: Media on left.
A Single image component can be used to add an image between text paragraphs. This component does not include text paragraphs, only the image and a caption (if needed).
In services, single images look like the image below:
On article pages, images have three size options: Large, Medium and Extra Large. The image below demonstrates the differences between the sizes.
Media gallery component is a set of images grouped into a gallery. It includes a description of the gallery and each of the images can have a caption. An example of a gallery is below.
This a description for the Media Gallery component. It can include the basic text formatting.
Media Slider can be used to present multiple images or text pieces around a specific topic. Sliders include a description of the component on the left (for example H2 heading, normal text with links) and the picture/information slider on the right – content can be swiped via arrows.
Sliders have three possible display modes: small, medium and large. The S version automatically formats the picture into a round shape whereas the M version surrounds the picture with a round shape. The L version doesn't format the pictures to a round shape.
Below are example images of sliders with display mode small, medium and large:
Video clip component integrates a video from an external or internal source to the article.
Video clips look like the video below.
Attachments can be added to an article through the attachment component. Below is an example of an attached article. When you add a new attachment, the file "Name" field is shown:
Social media component includes a title, a text piece and external URLs to social media channels. You can edit the title and text to fit your page. Example below.
Horizontal divider can be used to separate two text paragraphs with a horizontal line. Below is an example of a horizontal divider.
Quicklinks can be used to offer the most relevant links on the page. The component includes titles for the links and a small description. In addition, you can add an image for the links.
In Quicklinks, always use 3 links, the component won't work with less or more. Only use this component once per page. Below, you can find an example of Quicklinks component.
The icons (small yellow images) can be found at aalto.fi. Find the best icon for your need: add image to your quicklink item – you'll find all icon options by typing: "icon". There are currently 30 different icons.
Single liftups present another internal website through the main image and lead text. Single liftups have three possible display modes: small, medium and large. Below are examples of these.
HUB description presents the HUB with a text piece and an image. It can have two sizes: medium and large. This component is only used in HUBs. The image below presents the two size options.
Hero magazine is used only as main image on aalto.fi front page and landing pages for the Aalto schools.
Keep the title engaging and short.
If you want to add certain research group's members, take a look at the guide:
It's easy to add department's personnel by using People liftups component. Here's an example on how to do it:
- Log in to Aalto People and find the department's page
- Copy from the URL the department's ID number (take a look at the picture below): 47178
3. Go to new aalto.fi. Add the component People liftups and paste the ID number to the field: Aalto People organisational unit ID:
4. Finally, click on "Save" and the department's people liftups component should be ready:
Adding people one by one
You can add contact details of Aalto University people if their contact details are available on Aalto People database: use People Liftups component, click on "Select profiles", type in the surname of the person and click on "Apply". After selecting the person, you can add more contact details: