Create and/or Edit a Delphinium Layout

You can use the Layout Editor to create and edit a Delphinium layout for a course.

Note: The Layout Coach can modify the the Layout Editor user interface to recommend components that will work well with your course and block components that are incompatible. We recommend that you use the Layout Coach before creating or editing a layout, especially if you are a new Delphinium user.

Open the Layout Editor

Note: If this is the first time you are loading a Delphinium page in a course, and you have chosen to copy a layout template or create a layout from scratch, the Layout Editor will open automatically after you complete the Layout Coach.


Click the Delphinium Tools in the top right corner of a Delphinium page. The Tools window will open.

Click the Layout tab, then click Edit Layout. The Layout Editor will open.

Tour of the Layout Editor User Interface

The Layout Editor consists of the following major areas:

  1. Nested row and column cells

  2. Component tiles

  3. Tabs

  4. Action menu

  5. "Include Gradebook" checkbox

Each of these areas are described in detail below.

Note: To keep the Layout Editor interface less cluttered, many of the buttons are hidden until you move the mouse near them. Some users prefer to make all of the buttons visible all of the time. You can do this by clicking the Show Hidden Buttons check box at the top of the page.

Row and Column Cells

Layout cells are used to organize Delphinium components on the page. Components are displayed inside of a cell. Layout cells come in two varieties:

Row Cells

Row cells display their contents centered horizontally. If the contents of the row are wider than the screen, the contents will wrap down below the first contents. If you mouse over a row, it will display a red outline and a red arrow pointing to the right will appear in the top left corner.

Column Cells

Column cells display their contents vertically, stacked one below the other. If you mouse over a column, it will display a green outline and a green arrow pointing down will appear in the top left corner.

Cell Settings

When you mouse over a cell, a "cell settings" icon will appear in the top left corner of the cell.

Click the Cell Settings icon to open the "Edit Cell" box. The following settings are available:

  • Change the cell type: row or column

  • Add a cell inside the current cell: at the top or bottom for a column, to the left or right side for a row

  • Move a cell: up or down for a column, left or right for a row

  • Remove the cell and all of its contents

    • Note: You cannot remove the first cell in a tab

Responsive Design

Delphinium pages use responsive design. This means that the layout for a Delphinium page automatically adjusts depending on the size of the screen. This allows Delphinium to reconfigure itself so that it looks good and is usable on a smartphone, tablet, and computer screen. A Delphinium layout consists of nested row and column cells. These cells will shift their placement depending on the size of the screen.

Smart Phone

Tablet

Nesting Cells

You can create complex layouts by "nesting" cells. This means putting cells inside of other cells. See "Cell Settings" above for how to "Add a Cell" inside a cell. When you add a cell inside another cell, the cell type is automatically alternated. For example, if you add a cell inside of a row, the new cell will automatically be configured as a column, and vise versa. You can use the cell settings to change the cell type to a row or column.

Components

Delphinium components are used to display Canvas data in motivating and engaging ways. Some components are designed to show Canvas content and assignments, others focus on displaying student progress and status in the course, and others are designed to add game-like engagement to a course.

Component Tiles

In the Delphinium Layout Editor, components are represented by "Component Tiles". Components are grouped into the following categories:

  • Content components display information about Canvas modules and assignments, they also display information about student progress

  • Progress components display information about student progress in assignments

  • Dashboard components display information related to the course like time to course end and % of assignments completed

  • Game element components add game-like experiences to courses

  • Description components add text-based information to a layout

Adding Components to a Layout

You can add one or more components to a cell to display components in a layout.

Dragging a component to a cell

Component tiles can be dragged into cells to display components within your layout. Click on a component tile and drag it over a cell. As you are dragging, the tile will appear in blue below the mouse.

When the dragging tile is over a cell, a "target box" will appear to indicate where the component will be inserted when you release the mouse. The target box is a box with a blue dashed border. If there are other components already in the cell, they will shift up or down to make room for the target box. You can use the target box to ensure that the component is inserted where you want it in the cell.


When you release the mouse, the component UI will be loaded into the cell.

Note: When you add most components to a cell, Delphinium will automatically add a title component too with default text. See below for how to remove the title component. See the title component tutorial for how to edit it.

Note: If you add multiple components to a column cell, the layout will automatically add space between them to make the layout more attractive.

Moving Components in a Layout

After you add components to a cell, you can drag them to change the order of components within a cell, or to move the component to another cell.

Mouse over the component until the mouse changes to the "move" cursor, a cursor with arrows pointed in all four directions. Then click and hold the mouse button down to begin dragging the component. While you are dragging, a transparent image of the component will appear under the mouse.

Drag the component to the new location you want to move it to. As you are dragging, other components will shift up and down or left and right to make room for the new component location. This will help you know where the component will be moved to.

When the component is displayed in the target location you are moving to, release the mouse and the component will be moved to the new location.

Remove a Component

When you mouse over a component in a cell, an "X" will appear in the top left corner. Click the X to remove the component from the layout.

Resizing a Component

You can adjust the size of some, but not all components, to better fit your layout design.

Components that can be resized include a double-line gray border to the right side. When you mouse over this border, the cursor will change to a two sided arrow.

Resize the component by clicking the double-line border and dragging to the left or right. This will make the component narrower or wider. This may also cause the contents of the component wrap to a new line.

Tabs

You can improve the usability of your Delphinium layouts by organizing components on different tabs. Each tab contains its own set of row and column cells and can be used to organize and display components.

Create a Tab

Click the + symbol next to the last tab to create a new tab. The create a tab dialog will appear.

Add the text to appear in the tab in the Tab Name field.

Click the Icon drop-down select box to select an icon for the tab.

Click Save.

A new tab will be added to the tab bar.

Edit a Tab

Click the Edit Icon to on the right side of a tab to edit it.

You can change the text to appear in the tab in the Tab Name field.

You can click the Icon drop-down select box to select a different icon for the tab.

Use the left and right Move buttons to shift the tab position in the tab bar.

Click Remove to remove the tab from the tab bar.

Click Save.

Your updates will be displayed in the tab bar.

Action Menu Bar

The action bar contains functions used when editing a layout. Each function is described below

  • Save - Save any changes you have made while editing the layout

  • Save and Reload - Save any changes you have made while editing the layout and reload the page so you can see your changes in the layout view mode

    • The first time you save and reload a Delphinium layout, it will take longer to reload because it is pulling data about the course from Canvas

  • Cancel - Return to the layout view mode without saving any of your changes

    • If you cancel the layout editor the first time you load Delphinium in a course, you will need to refresh the page and begin the process of selecting a layout again

  • Layout Coach - Launch the Layout Coach where you can answer questions about your course and receive template recommendations and customize the layout editor for your course to suggest preferred components and block components that are incompatible with your course

  • Help - View a list of tutorials for working with layouts

  • X - Close the layout editor and return to view mode without saving any of your changes

Using the Layout Coach with the Layout Editor

After you select options in the Layout Coach, you have the option to return to the Layout Editor to build a layout from scratch. By answering the Layout Coach, the Layout Editor will be configured to do the following:

  • Lock components that are incompatible with your course (lock icon)

  • Recommend components that will work well with your course (thumb icon)

  • Configure settings for some components like Gradebook and Grade tracker to work well with your course (star icon)

You can override the recommendations of the Layout Coach by selecting Unlock All Components in the Layout Editor.