Components: how to create content?

Here you can find the components that can be used on aalto.fi. This component, that you're reading now, is called Lead text. The lead text is a short introduction, in two to three sentences, of the article and displayed in the beginning of a page. A Lead text component always starts any content on the aalto.fi website.

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

Regular text with bold and links. Link can also be presented with link highlight style which adds a small blue line under the link = link highlight style

A table (the caption of the table)
First cell (header row) Second cell (header row) 
Fourth cell Fifth cell
Sixth cell Seventh cell
  • Bullet points
  • Bullet 2
  1. Numbered lists
  2. Number 2

Quotes

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

Quote source
Aalto University / donate

This is a quote with an image

Quote source

Highlights

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

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. 

Aalto-yliopisto / Unto Rautio

Title

This is the Image with text component with Media placement: Media on right.

This component can include the basic formatting described above.

Aalto-yliopisto / Unto Rautio

Title

This is the Image with text component with Media placement: Media on left.

Single image

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:

Aalto-yliopisto Väre Grönlund Nisunen INSIGHT Kuva: Mikko Raskinen

On article pages, images have three size options: Large, Medium and Extra Large. The image below demonstrates the differences between the sizes.

Single image sizes

Media Gallery

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.

Media Slider

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:

Slider - small
This is a Slider component with a Display mode: Small. It can include the basic formatting described above.
Slider - medium
This is a Slider component with Display mode Medium. It can include the basic formatting described above.
demo: slider / large
This is a Slider component with Display mode Large. It can include the basic formatting described above.

Video clip

Video clip component integrates a video from an external or internal source to the article.

Video clips look like the video below.

Attachments

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:

Liftups guidelines and examples

Liftups combined; learn how to use them to visualise and highlight content.

Click to guidelines
Screenshot of the different components used as liftups at aalto.fi
aalto.fi / automatic news article liftup, relates to

Social media

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

Horizontal divider can be used to separate two text paragraphs with a horizontal line. Below is an example of a horizontal divider. 

Quicklinks

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

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.

Screenshot of how to show an image in the Single liftup component.

Automatic research output

This can be used if you want to add research outputs on your page, for example a research group's outputs. 

Find the instructions here

HUB description

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. 

Example of HUB description component: medium
Example of HUB description component: large

Hero magazine

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.

Hero Magazine

People liftups

If you want to add certain research group's members, take a look at the guide:

Research group: how to create and how you can add your research group members to a page by creating an automatic feed?

Department's people

It's easy to add department's personnel by using People liftups component. Here's an example on how to do it:

  1. Log in to Aalto People and find the department's page
  2. Copy from the URL the department's ID number (take a look at the picture below): 47178
example – People liftups, departments

3. Go to new aalto.fi. Add the component People liftups and paste the ID number to the field: Aalto People organisational unit ID:

example 2 – people liftups, departments

4. Finally, click on "Save" and the department's people liftups component should be ready:

example 3 – people liftups, departments

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:

Get to know some of our Aalto University people:

Robert Salven

Robert Salven

Communications Services
Senior Manager, Digital Communications
Jaakko Salavuo

Jaakko Salavuo

Communications Services
Communications Director
Kati Hagros

Kati Hagros

IT Services
Chief Digital Officer
This service is provided by:

Communications Services

Did you find what you were looking for? If not, please contact us.
  • Published:
  • Updated:
Share
URL copied!