Skip to main content
HelpHelp IndexHelp-Getting-StartedHelp-Masterclass

Design Editor

The Stornaway design editor for buttons and overlays lets you add your own branded questions, text boxes, CTAs, links to sales resources and more!

🎨 Use the design editor to customize colors, fonts and style settings - keeping your project on brand!

Edit the size, color, shape, and font of your buttons and other on-screen elements directly in your project, with our design editor.

Design these elements on a project, Island, variant and individual button levels.

Change the button appearance for standard buttons, hover states and after the button has been clicked.

Keep your interactive Stornaway on brand for your company, your audience and your story.

✨ Get this feature during your 7-day free trial of Stornaway – then unlock its full creative power by upgrading to any of our subscription plans.

Try now: sign up for free →
Interactive Tour - created using Stornaway's Design Editor - A young woman with long brown hair smiles and clasps her hands together while standing outside a modern glass building on a sunny day. She is wearing a white T-shirt under green overalls and a smartwatch. Two interactive buttons labeled “>> Skip ahead” and “Back to menu 🏠” appear on the left side of the image, indicating it was made using Stornaway’s interactive video design editor.
Custom buttons in Stornaway - A colorful educational graphic with six subject panels. The top row has “Languages” on a green background with words for “Hello” in various languages, and “Mathematics” on a blue background with math symbols. The middle row shows “Geography” on a yellow background with a pink world map, and “Physics” on a purple background with Newton’s cradle spheres. The bottom row has “History” on a teal background with ancient columns, and “Biology” on a yellow background showing lab equipment like flasks and pipettes.
A 360-degree panoramic view of a modern hospital patient room, labeled "360 Patient Room – Task 14, Module 5.4." The room is bright and sterile with white floors and walls. It contains a hospital bed in the center, surrounded by medical equipment, monitors, workstations, and seating for healthcare staff. Overhead surgical lights are positioned above the bed. The room is equipped with various cabinets, a computer, and other essential medical devices. At the bottom of the image, a prompt asks viewers to rate their confidence (1–5) in having everything needed for a patient.

👉 How to use the design editor to customize your styles - for the whole project

To customize the buttons for the whole project:

Go into your project and on the top bar, click Settings > Project Design

Here, you can edit the font, buttons, questions and titles of your entire project.

The font tab refers to the font for your whole project – any questions or titles/descriptions on screen will use this font.

Use the Button Style tab to fully modify the look for your buttons

    • There are options for font, size, color, border (thickness, color and visibility), the roundness of the button and options for bold, italic, strikethrough and underline.
    • You can also apply settings for buttons that are hovered over and clicked on in this settings panel.

The questions tab lets you format the look of your onscreen questions.

    • There are options for font, size, color, border (thickness, color and visibility), the roundness of the button and options for bold, italic, strikethrough and underline.

The title tab lets you create custom styles for your onscreen titles and descriptions.

🤩 Changes will apply instantly in the preview player – so you can test and tweak until it looks just right.

A Stornaway custom styles lesson screen titled “Lesson 2: Health and Safety.” The image shows a warehouse worker wearing a white safety helmet, glasses, and a green vest, operating a forklift. The text asks: “Using machines in the store room — Why is it important to use lifting machines (like pallet jacks or forklifts) in a storeroom?” Three answer options are displayed: “To lift heavy loads safely and prevent injury,” “To increase noise levels in the workplace,” and “To reduce the need for organizing shelves.” A yellow box in the top left shows the score: “Your score: 23/25.”

👉 Get more granular! Edit individual Islands, Variants and Choices!

You can get even more specific about what each Island, variant and button within your project looks like.

Open the Island settings panel and use the “Design X” options to open the design editor panel and customise the different on-screen elements of your project.

🔧 What You Can Customize

You can customize your Stornaway projects to match your brand and project.

The different elements are:

  • Font
  • Font size
  • Text decorations – bold, italic, underline, strikethrough
  • Text color
  • Text alignment
  • Text wrapping
  • Padding
  • Background color
  • Border width
  • Border radius
  • Border color

đź‘€ Get inspired! Get ready to create your own custom call-to-action buttons

✨ Tip: Consider contrast and readability (especially for mobile users).

Interactive medical training scenario. A patient named Maya sits in a clinic room with text on screen showing her symptoms: “Persistent headache.” Two interactive choice buttons allow the user to either “Ask about the nature of the headache” or “Ask about lifestyle and stress levels.” created with the using the Stornaway Design Editor.
Screenshot of a project titled “The Business of Interactive Video series.” - created with the using the Stornaway Design Editor. The background shows a wooden dock leading over a lake at sunset. Blue text boxes highlight examples of interactive training videos — including TEFL slide-based learning, cybersecurity training, and police training scenarios. The Stornaway.io logo is in the top right corner with a note that says “Over to you, let's answer your questions.”
Custom buttons in Stornaway - A colorful educational graphic with six subject panels. The top row has “Languages” on a green background with words for “Hello” in various languages, and “Mathematics” on a blue background with math symbols. The middle row shows “Geography” on a yellow background with a pink world map, and “Physics” on a purple background with Newton’s cradle spheres. The bottom row has “History” on a teal background with ancient columns, and “Biology” on a yellow background showing lab equipment like flasks and pipettes.
A 360-degree panoramic view of a modern hospital patient room, labeled "360 Patient Room – Task 14, Module 5.4." The room is bright and sterile with white floors and walls. It contains a hospital bed in the center, surrounded by medical equipment, monitors, workstations, and seating for healthcare staff. Overhead surgical lights are positioned above the bed. The room is equipped with various cabinets, a computer, and other essential medical devices. At the bottom of the image, a prompt asks viewers to rate their confidence (1–5) in having everything needed for a patient.
Interactive Tour - created using Stornaway's Design Editor - A young woman with long brown hair smiles and clasps her hands together while standing outside a modern glass building on a sunny day. She is wearing a white T-shirt under green overalls and a smartwatch. Two interactive buttons labeled “>> Skip ahead” and “Back to menu 🏠” appear on the left side of the image, indicating it was made using Stornaway’s interactive video design editor.
A digital course information card titled “Mathematics for Everyday Thinking.” It lists what learners will study: number skills (fractions, decimals, percentages), geometry (shapes, area, perimeter, angles), data handling (charts, graphs, statistics), problem solving and logical reasoning, and real-life maths (budgeting, shopping, travel). The background shows a person writing mathematical equations on a chalkboard. Created with the Stornaway Design Editor.
Screenshot showing a welcome screen titled “Hello, let's get started in Stornaway.” - created with the using the Stornaway Design Editor. The scene features an ocean with birds flying in front of a large moon. Black clickable boxes offer options like “Check out our platform features,” “Resources, knowledge and support,” and “Projects to inspire you.” On the right, there are buttons for learning more about Stornaway.io and joining a Q&A webinar.
A Stornaway custom styles lesson screen titled “Lesson 2: Health and Safety.” The image shows a warehouse worker wearing a white safety helmet, glasses, and a green vest, operating a forklift. The text asks: “Using machines in the store room — Why is it important to use lifting machines (like pallet jacks or forklifts) in a storeroom?” Three answer options are displayed: “To lift heavy loads safely and prevent injury,” “To increase noise levels in the workplace,” and “To reduce the need for organizing shelves.” A yellow box in the top left shows the score: “Your score: 23/25.”
A yellow quiz feedback screen created using Stornaway’s design editor shows the question result: “You answered: A – Angiectasis.” It states the answer is incorrect and provides the correct one: “B. Angiogenesis.” An explanation below clarifies that angioplasty combines angio- (vessel) and -plasty (surgical repair), and angiogenesis means the formation of new blood vessels. A blue button labeled “Next question” appears at the bottom, with a “Recap topic” button on the left.

🧩 Want to Use a Custom Font?

Support for uploading custom fonts is coming soon – available for Enterprise and Custom plans.

This will allow you to:

  • Match your brand exactly

  • Use licensed or proprietary fonts

  • Create a fully bespoke look and feel for your project

📬 Interested? Get in touch with us to find out more or to request early access.

⬆️ Upload your own buttons

Want total control over the look of your buttons? You can upload custom button images to fully match your project’s style, branding, or creative concept.

Find out how!

💪🏼 Ready to get started on your interactive journey?

Get started today for free
Discover more features