Adding Pages

When we left our Adapt course, we had just finished getting our kitty squared away in her Graphic component and had previewed the course. This time, close the preview window (I know I said not to. Help me out here! It’ll make what’s to come a little less traumatic).

Back in the Page editor, click the Back to course structure link in the sidebar. Now on the menu editor page, locate the Add Page button, and click it to add a new Page to our course. Simple huh? Editing the page at this point works the same as editing the previous page. But don’t open the page yet!

Before you do anything else, click the Preview Course button!

Sorry! Don’t get upset. Things aren’t as bad as they seem. I wanted you to see this particular error because it can be fairly common and fairly frustrating in a large course.

That structure we talked about in Thinking in Adapt isn’t just conceptual: It’s mandatory. Every Page must have an article, articles must have at least one block and blocks must have at least one component.

When we added a new page, Adapt created the page with one article and one block, but no component. Because a block exists in the course with no component, Adapt can’t build the course, so you can’t preview or download the course. Thus, the error.

In the error message, Adapt tells you that there is an error in the course, and that the “block ‘Block title’ missing component”. Now all you have to do is find the block with the title “Block title” and make sure it has a component, or delete the block and/or article if you don’t need it.

This is where naming your articles and blocks with meaningful titles becomes important. In this example, Adapt auto-created a block with the title “Block title” when the new page was created. But it’s easy to get into the habit of just creating blocks and then removing the title, ignoring the default title text.

From experience, having 10 pages with 20 or so blocks each all named “Block title” makes it astoundingly difficult to find the missing component.

Adding a Blank

Open up your new page and click the Add Component button. From the list of components, choose Blank. You should now be able to preview the course with no problem.

Blank is a strange little component. It essentially does nothing — Even if you add a title or body text it won’t show up in the course. So why have it?

One situation could be that you have a lot of Article text to present to the user, but you don’t need components. Blank is also useful if you want to have a component in one column, but want to leave the other column blank.

Blanks are also extremely useful when combined with the Parallax Articles extension that allows you to place large images in the background of articles. If you’ve read an article on Medium, you may have noticed their amazing banner images that break up pages, often separating topics. Those banners offer readers a break — a miniature cogitative reset — before continuing to a new topic.

When you preview the course again, you’ll notice that Adapt has added another “block” to the menu page. Every page you add to the course will appear on this page as another block. Menus and submenus appear the same way.

Speaking of submenus, let’s add one.

With this page working, click Back to course structure to return to the Menu editor.

If it’s not clear from the UI, Adapt allows you to create as many pages as you want. Just keep clicking Add page.

Adapt also lets you break your pages up into subsections using Submenus. Locate the Add submenu button and give it a click.

A new subsection will be added to the list of pages. Clicking the newly added submenu will reveal another section, allowing you to add pages and more submenus to your subsection. Double clicking the submenu will open a form similar to the Edit page form where you can change the Title, add a Page Body, Menu Item te— I mean, Body, and other settings.

Adapt allows you to add as many levels of submenus as you want. The page will scroll horizontally as you add menus that continue off-screen.

Double click the new subsection and name it something meaningful and Save it (I named mine “My Subsection”). Back at the Menu editor, click the Add Page button in the newly expanded subsection. Double-click the new page item you just created, then edit the settings for this page, giving it a meaningful title (I named mine “My Subsection Page” again because I lack imagination).

Once you’ve saved your changes, click the Add Component button and add a component — Stick with a Blank component for now to save time.

With that done, click Preview Course.

When the preview tab opens, you’ll see that the subsection you created is displayed in the same way pages are in the menu. Clicking the View button on the subsection opens another menu similar to the initial menu, with the added back button at the top left of the course and displaying the page we added to this subsection.

Which brings up the only issue we found with submenus: There isn’t much to differentiate it from the main menu. We’re in the process of investigating whether there may be a way to create some additional detail in the submenus to help with that, but in the mean time, adding graphics can help provide some visual feedback to the user that they’re in a new place.

Still, if you need the added structure for your course, submenus get the job done.

This introduction to Adapt is almost complete. In the next section, we’ll detail the most important settings for your course.