Exporting as a single page application website

Web Export Tips and Tricks
1

Web Export supports exporting to a single page application (since 2.2.0) and it’s not difficult to setup. Simply put, you create multiple artboards and then during export choose, “Single Page Application”.

Once the page has loaded any links will point to different states. You can also switch to different states in code.

Getting Started:

  1. Create a few artboards
  2. Select any elements (like text fields) that you want to hyper link to other pages
  3. Open the Element Options and select the page to link to using the hyperlink drop down list
  4. Open Export All Artboards dialog
  5. Select Export to “Single Page Application” or “Single page navigation (slide show)”
  6. Click Export

Once exported view the page in a browser. All of your links will link to the other pages or link to other page states.

You can also make hyperlinks show a different color by opening the page template and entering the style:

<style>
a:hover * {
   color: blue;
}
</style>

Or enter any other style changes you want to use for hyperlinks.

Attached is the example project “Cats 20th Anniversary Edition” XD example. cats-winter-edition.xd (1.4 MB)