Edit a Delphinium Layout

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

Open the Layout Editor

On the Delphinium page, in Teacher or Periscope View, click the Settings icon in the top right corner of the page

The "Settings" dialog will open.


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

Tour of the Layout Editor User Interface

The Layout Editor consists of the following major areas:

Each of these areas are described in detail below.

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. Components are represented in the layout editor by gray and white graphics that mirror component shapes. Components are typically accompanied by a title. Components are placed in a layout cell

Tabs

Cells and components are organized in tabs. We recommend including only 1 or 2 rows and columns max per tab. This helps ensure that most or all components are visible at a glance and that students don't need to scroll down excessively in small screen form factors. Additional components can be grouped by theme or function on different tabs.

We also recommend organizing components so that information central to completing the class, like modules and overall grade or progress, is displayed on the first tab. Other information, like detailed progress, stats, and game elements are often best on subsequent tabs. This allows students to get the most important information first, and those students who want more information can get it at their convenience.

Create a Tab

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

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.

Click Save.

Your updates will be displayed in the tab bar.

Cells

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

Row Cells

Row cells display their components 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:

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

By default, tabs come with preconfigured cell organizations, see below. But 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.

Note: Keep in mind that students often have smaller screens and your layout will wrap if their screen is smaller than the layout. Also, students are less likely to see components that they must scroll down to see. For this reason, if you are using a large number of components, we recommend that rather than put many components on one tab, it is better to break components up into several tabs. See details below for more about tabs. On a single tab, we recommend one, or maybe two rows max, with 2 to 3 columns max nested inside of each row. Also, note that for many users, the home page is narrower than the default Delphinium page, so make sure not to add too many components when you are using Delphinium as the home page for a course.

Components Tiles

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

Adding Components to a Layout

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

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 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. 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.

When you mouse over a component, a six-dot "move" icon will appear. Click and drag the "move" icon,  a cursor with arrows pointed in all four directions will appear. Drag the component to a new location. While you are dragging, a transparent image of the component will appear under the mouse.

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 to wrap to a new line.

Action Menu Bar

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