News
Feature of the Month: Column Layout
Long pages of text, disorganized collections of materials, and important notes that get lost between paragraphs? Or just a blank space?
With the column layout in the ILIAS page editor, you can structure your course content in a clear, organized, and visually appealing way. Text, images, videos, or assignments can be arranged side by side in a targeted manner—for better navigation and more focused learning. Instructors gain more creative freedom, while students benefit from a clear structure and content that’s easy to grasp.
How does it work?
You can use the column layout directly in the page editor:
- Open a page via “Edit Page” in edit mode (e.g., in a learning module, wiki, or on a course page).
- Click on a placeholder field (+) and select “Insert Column Layout.”
- Choose a template (e.g., 2- or 3-column) or select a manually created page layout.
- Insert content such as text, images, videos, or files within the individual columns.
- Save your changes.
The column layout is based on a grid with 12 units per row. This allows you to vary the column width depending on the layout option (e.g., 2/3 to 1/3). This way, you can deliberately emphasize certain elements and take advantage of the grid’s flexibility. A column (e.g., the main block) can also be further structured internally by inserting another column layout.
Important: On mobile devices, the columns are automatically displayed one below the other. This means the layout remains responsive and mobile-friendly.
To adjust the column widths in the 12-column grid, click on the respective column layout in the edit view and select the desired column width (e.g., 4/12). The total of all column widths must always add up to 12. You can also change the order of the columns, or add or delete columns here.
Wie kann das Spaltenlayout eingesetzt werden?
The column layout is particularly well-suited for clearly structuring learning content and providing visual guidance. Some typical use cases:
- Improve Course Home Pages
Welcome messages, organizational notes, and contact information can be clearly separated. - Organize assignments clearly
The assignment is listed in the left column, while materials or downloadable files are located on the right. - Combine text and video
An introductory text is placed directly next to an embedded video. - Theory and example side by side
The explanation is on the left, and an application example or graphic is on the right. - Pros and cons'Arguments
can be compared and structured.
By using visual organization, you can reduce long blocks of text and make it easier to navigate the learning space.
What benefits does this offer for teaching?
A clearly structured layout not only enhances the visual appeal but also supports the learning process:
- Content is grasped more quickly.
- Connections become clearer.
- Learners can navigate the material more easily.
- Different types of media can be combined in a pedagogically effective way.
- The cognitive load caused by unstructured pages is reduced.
The column layout is thus a simple yet effective way to make digital learning spaces more organized and conducive to learning.
However, it’s important to remember: less is more. Too many columns or overly fragmented elements can actually make the text harder to read. Use the layout strategically to organize your content—not to overload it.