---
title: "Learner Interface: Changing the Course Page Layout"
slug: "learner-interface-changing-the-course-page-layout"
updated: 2024-12-17T14:34:00Z
published: 2024-12-17T14:34:00Z
canonical: "support.smarteru.com/learner-interface-changing-the-course-page-layout"
---

> ## Documentation Index
> Fetch the complete documentation index at: https://support.smarteru.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Learner Interface: Changing the Course Page Layout

The layouts available depends on a [page's **Available Layouts** setting](/v1/docs/page-configuration-for-course-pages#available-layouts) .

The available layout options for a course page are displayed at the top of the page.

![Interface gráfica do usuário, Aplicativo Descrição gerada automaticamente](https://cdn.document360.io/7efaadab-fef6-4186-806a-2ca14c9ce9ea/Images/Documentation/learner-interface---changing-the-course-page-layout-image-jj55s93y.png)

| **Icon** | **Description** |
| --- | --- |
| ![](https://cdn.document360.io/7efaadab-fef6-4186-806a-2ca14c9ce9ea/Images/Documentation/learner-interface---changing-the-course-page-layout-image-gfb4vjql.png) | The [tile view](/v1/docs/learner-interface-course-tile-view) displays the courses in a grid layout. Because of the interface's reactive design, the layout and size of the course images will adjust as the size of the page changes. ![Tile View 20241127](https://cdn.document360.io/7efaadab-fef6-4186-806a-2ca14c9ce9ea/Images/Documentation/Tile%20View%2020241127.png) |
| ![](https://cdn.document360.io/7efaadab-fef6-4186-806a-2ca14c9ce9ea/Images/Documentation/learner-interface---changing-the-course-page-layout-image-0784s7x9.png) | The [list view](/v1/docs/learner-interface-course-list-view) displays the courses in a linear format. ![List View 20241127](https://cdn.document360.io/7efaadab-fef6-4186-806a-2ca14c9ce9ea/Images/Documentation/List%20View%2020241127.png) |
| ![](https://cdn.document360.io/7efaadab-fef6-4186-806a-2ca14c9ce9ea/Images/Documentation/learner-interface---changing-the-course-page-layout-image-s3xp1wed.png) | The [calendar view](/v1/docs/learner-interface-course-calendar-view) displays a calendar and color codes the courses by their due date or session start date. ![Catalog - Calendar 20240729](https://cdn.document360.io/7efaadab-fef6-4186-806a-2ca14c9ce9ea/Images/Documentation/Catalog%20-%20Calendar%2020240729.png) |

## Related

- [Learner Interface: Courses ](/courses-1.md)
- [Learner Interface: Course Calendar View](/learner-interface-course-calendar-view.md)
- [Learner Interface: Course List View](/learner-interface-course-list-view.md)
- [Learner Interface: Course Tile View](/learner-interface-course-tile-view.md)
- [Learner Interface: Default Learner Interface](/learner-interface-default-learner-interface.md)
- [Page: Configuration](/page-configuration.md)