Please read our student and staff community guidance on COVID-19
Skip to main content Skip to navigation

Edit page layout

The layout editor uses columns and rows (similar to bootstrap) to create flexible layouts.

We recommend the use of 2 (1:2 ratio) or 3 equal columns. Best practice for accessibility suggests designing primarily for mobile device screens.

Access the page layout editor

Standard pages
  1. Select a page from Pages and Collections
  2. Turn on editing.
  3. Select  Settings at the top of the page
  4. Expand the Layout section.
Profile page
  1. Open the profile page
  2. Turn on editing.
  3. Select  Edit layout at the top of the page.
Dashboard page
  1. Go to your dashboard (click on Warwick at the top left)
  2. Select  Edit dashboard
  3. Select  Edit layout at the top of the page

Using the page layout editor

The editor gives access to a selection of pre-set page layouts, from the simplest single area page (1 column by 1 row), to layouts containing multiple rows - each of which can contain a different number of columns.

  1. Click the radio button to select a layout to apply to the page.
  2. Click the Save button to save the layout choice. This can be changed at any time.

Custom layout

If the pre-created templates do not match requirements, create a custom layout.

  1. Choose the number of columns for the first row (1 to 5).
  2. Add any number of new rows and set the number of columns.
  3. Set the column layout for each row in terms of percentage of the window width e.g. with 3 columns you can choose 15%, 70%, 15% (2 narrow columns on each side of a wide central column), or 33%, 33%, 33% (3 equal columns) etc.
  4. Remove rows using 'remove this row'
  5. Click Create new layout to save the layout to the available items in the editor, and apply it to the page by clicking Save at the bottom of the page.

Add and remove columns on the page

Use the Add column (  and   ) and Remove column  buttons for quick changes to the layout whilst on a page.

When a column is removed, blocks move to the first column. They can then be moved by dragging and dropping onto the available editable regions.

You cannot add new rows to the layout using the on-page process.

See this page in the Mahara.org user guide for more information on the Page editor

Contents

Filter by tool, task or content