All posts

How to Move the "Begin" Button Below Your Cover Content in Articulate Rise

Learn how to move the Rise 360 Begin button below your cover text or table of contents—manually with JavaScript or directly in Mighty.

The Mighty teamMighty by Maestro
7 min read

Being able to reposition the Start Course/Begin button in Rise can be super useful, especially when you want to communicate important information to your learners in those first few moments of engagement. While Rise now lets you hide the Begin button—which it great—it still doesn’t allow you to reposition it.

Mighty

If you want the button to appear below your cover content, or below the table of contents, you have two paths: a manual JavaScript edit after publishing, or a much faster Mighty setting inside Rise.

Why move the Begin button?#

By default, Rise puts the Begin button near the top of the course cover page. That works fine for simple courses, but it can be awkward when your cover page includes:

  • Welcome copy or course instructions
  • A program overview
  • Required disclaimers
  • Stakeholder-approved messaging
  • A table of contents learners should scan before starting

When the Begin button appears before that content, learners can skip past the framing you intentionally placed there. Moving it lower creates a more natural reading flow: title, context, navigation, then action.

Rise does not currently include a native setting for repositioning the Begin button. So if you need this behavior, you either need to modify the published output manually or use Mighty to manage it for you.

Option 1: Move the Begin button manually after publishing#

The manual approach works by adding a JavaScript file to your published Rise output and referencing it from the course’s index.html file.

This is useful if you are comfortable editing published files. The tradeoff is that you will need to repeat or maintain the change whenever you republish the course.

1. Publish your Rise course

Start in Rise 360 and publish your course.

In the video walkthrough, John publishes the course and opens the published ZIP file. Your exact folder structure may look a little different depending on whether you publish for Web, LMS, or another destination.

The important thing is to find the folder that contains your course files.

2. Find the content folder and index.html

Inside the published ZIP, look for the content folder.

In that folder, you should see an index.html file. This is the file that loads the Rise course and its supporting assets.

If you published for LMS, your structure may be slightly different, but you’re still looking for the course’s main index.html file inside the published content.

3. Add the provided JavaScript file

You can find the JavaScript code here.

At a high level, the script does a few important things:

  • Determines whether the button should appear above or below the table of contents
  • Uses a MutationObserver to watch for the Rise cover page as it renders
  • Finds the existing Begin button
  • Hides the original button styling where needed
  • Re-inserts the button into the desired place on the cover page
  • Adjusts spacing based on the Rise theme so the result does not look oddly offset

That MutationObserver piece matters because Rise pages render dynamically. The script needs to wait for the cover page elements to exist before it can move the button—and it needs to keep working if a learner enters a lesson and then returns to the course cover.

The JavaScript file is named: move-begin-button.js. In the walkthrough, John places it at the same level as the index.html file. You could place it elsewhere, but if you do, your script reference needs to match that location.

4. Open index.html in a code editor

Next, open the index.html file in a text editor or code editor. In the video, John uses VS Code.

Scroll near the bottom of the file and find the closing body tag.

Before that closing tag, add a script reference to the JavaScript file you added.

The example shown in the walkthrough uses a script tag with the JavaScript type and the file source pointing to the new file:

<script type="text/javascript" src="move begin button.js"></script>

Save the file.

5. Test the published course locally

Open the index.html file to preview the course.

In the walkthrough, the Begin button is no longer at the top of the cover page. Instead, it appears below the cover page text and above where the table of contents would sit.

John also tests the behavior by entering a lesson, returning to the homepage, and confirming that the button stays in the adjusted location. That’s the part the JavaScript is handling behind the scenes.

A quick note of caution on the manual method#

Manual edits can be perfectly reasonable for one-off projects, prototypes, or teams with a developer nearby.

But they do introduce a few practical constraints:

  • You are editing the published output, not the Rise source course
  • You may need to repeat the edit after every republish
  • If Rise themes or markup change, the script may need maintenance
  • QA becomes especially important before uploading to an LMS

So yes, the manual path works. Just treat it like any other post-publish customization: document it, test it, and make sure the final ZIP is the one that goes to your LMS or hosting platform.

Option 2: Move the Begin button in Rise with Mighty#

Here’s the easier version: Mighty adds Begin button controls directly inside the Rise editor.

Once Mighty is enabled, you can manage the Begin button position and styling without manually editing index.html or adding JavaScript yourself.

1. Enable the Mighty Chrome extension

Open your Rise course, enable the Mighty Chrome extension, and reload the page.

After the page reloads, Mighty’s additional controls become available inside Rise.

2. Open the Theme section

In Rise, go to the Theme section.

With Mighty enabled, you will see Begin Button Options under Theme.

This is where Mighty exposes the controls that would otherwise require custom JavaScript in the published course.

3. Choose where the Begin button should appear

In Begin Button Options, you can move the button to different locations, including:

  • Above the table of contents
  • Below the table of contents
  • Back to the default position

In the video, John demonstrates moving the button above the table of contents. Since the sample course does not have the table of contents visible at that moment, the below-table-of-contents option does not visibly change much—but the setting is there for courses that use the table of contents on the cover page.

4. Adjust the button style if needed

Mighty also gives you additional styling controls for the Begin button.

In the walkthrough, John shows a few examples:

  • Change the button position
  • Make the button full width
  • Remove the border radius
  • Change the button color
  • Turn on a border
  • Change the border color
  • Change the text color

That lets you create a more tailored button treatment while staying in the Rise authoring flow.

This is especially handy when your course needs to follow a brand system and the default Rise button treatment feels a little too generic—or when stakeholders have very specific opinions about the cover page.

What happens when you publish with Mighty?#

When you publish a Rise course with Mighty customizations, the required files are included in the published output for you.

In the video, John publishes the course for LMS. The publish screen is slightly different with Mighty enabled, and the resulting ZIP includes extra Mighty files inside the SCORM content folder.

In this case, the index.html file you would have modified manually is handled automatically. When the published course is opened, the Begin button appears in the configured location with the selected styling applied. Ta-da!

Mighty can also publish the course to Review with the same kind of behavior, so reviewers see the cover page as you designed it—not a close approximation that still needs post-publish edits.

Why this matters for course navigation#

This is a small layout change, but it solves a real instructional design problem.

The cover page is the learner’s first moment of orientation. If your course starts with a message like “Here’s what to expect,” “Complete these modules in order,” or “Review the table of contents before you begin,” the Begin button should support that flow—not compete with it.

Moving the button lower can help you:

  • Encourage learners to read the intro content first
  • Keep the table of contents visible before the primary action
  • Align the cover page with stakeholder-approved structure
  • Create a more polished branded experience
  • Avoid fragile manual edits after every publish

From an accessibility perspective, you should still be thoughtful. Don’t hide the primary action so far down the page that it becomes hard to find, and make sure any custom styling keeps strong contrast and a clear focus state in the final course experience.

Manual control when you need it, editor control when you don’t#

If you only need to move the Begin button once and you are comfortable editing published files, the JavaScript method gives you a workable path.

But if this is something you want to control course by course—or if your team publishes frequently—Mighty’s Begin Button Options keep the work where it belongs: inside Rise, before you package the course.

Try it the next time your cover page has especially important intro content. Move the Begin button below the information learners need first, publish, and spend your QA time on the course—not on reapplying the same file edit again.

Try Mighty free for 30 days.

Install in Chrome, open your Rise course, and ship the interactives you couldn’t before. No credit card. Cancel any time.