Web Export
  • Introduction
  • Getting Started
  • Install the Plugin
  • Create or open a project
  • Export the Artboard
  • Export Artboard Dialog
    • File Name
    • Subdirectory
    • Page Title
    • Web Page Template
    • Expected HTML Output
    • Stylesheet Name
    • Artboard Stylesheet template
    • Expected Stylesheet output
    • Script Page options
    • Images
    • Export Folder
    • Server
    • Alternative Fonts
    • Scale to fit
    • Centering the page
    • Styles Inline
    • Style via Classes
    • Markup Only
    • Outline Elements
    • Keyboard Navigation
    • Add Data Name
    • Add Image Compare
    • Auto Refresh
    • Export type
    • Reset Artboard
  • Addressing Export Issues
  • Messages Console
  • Export types
    • Export to a Single Page
    • Export to Multiple Pages
    • Export Artboards and show by size (media query)
    • Export to a Slideshow
  • Keyboard Shortcuts
  • Responsive Pages
  • Dynamical page that grows in height
  • Modifying Individual Elements
  • Elements and Sub Elements
  • Styling elements
  • Element Options
    • Id field
    • Tag Name
    • Styles
    • Classes
    • Attributes
    • Hyperlink
    • Width and Height Size
    • Background
    • Markup Inside
    • Markup Before and Markup After
    • Text Ids
    • Text Tokens
    • Row Layout
    • Column Layout
    • Overflow
    • Script Template
    • CSS Template
    • HTML Template
    • Layout Section
      • Layout Position types
      • Layout Position Location Types
      • Layout sizing options
    • Centered, Constraint and Anchored Positioning
    • Debug Element
    • Show Outline
    • Export as Image
    • Export as String
    • Export element
    • Displayed
    • Auto Export
    • Export (artboard)
    • Show Markup
    • Show CSS
    • Show Property Changes
    • Reset All Property changes
    • Navigation Buttons
  • Changed Properties
  • How to section
    • Creating a hover menu
    • Centering a page or element
    • Showing Overlays
    • Embedding an HTML page
    • Linking to pages or views
    • Creating a download link
    • Creating List items
    • Embedding Fonts
    • Adding Hover Effects
    • Styling Hyperlinks
    • Showing elements by size
    • Creating a Fixed Header
    • Make a Stretchable Line
    • Blend Modes
  • Creating Code Blocks
  • How Exporting Works
  • Single Page Application API
  • Element Tokens
  • Template Tokens
  • Setting up a server
  • Putting your site online
  • Code Block Snippets
    • Adding a cursor over on hover
    • Go to next or previous artboard with swipe gesture
  • Other Features
    • Gradients
    • Blend Modes
    • Form Elements
  • Learning by Videos
  • WordPress Integration
    • Summary
    • Export the main page
  • Example Packages
  • Web Developers
  • Non Web Developers
  • Debugging
  • Version
  • Support
    • Forums
    • Discord Channel
  • License
  • Feature and Bug Reports
  • Related Plugins
Powered by GitBook
On this page

Was this helpful?

  1. Export Artboard Dialog

Export type

Export multiple pages or single page

PreviousAuto RefreshNextReset Artboard

Last updated 4 years ago

Was this helpful?

The Export Type gives you a way to export multiple artboards at the same time. By default only the selected artboard is exported. With this option you can export all artboards or a range of artboards and then you can choose to export those to the same page or multiple pages.

Use the dropdown list to select from selected artboard, selected artboards or all artboards.

After you chose if you want to export one artboard, multiple artboards or all artboards then chose in what way you want them exported. Do you want to export the artboards to a single page or to multiple individual pages.

Multipage Export

Multiple page export creates a page for each artboard you are exporting. If you have 10 artboards selected and choose Multiple pages you will end up with this in the export directory.

artboard1.html
artboard2.html
artboard3.html
artboard4.html
artboard5.html
artboard6.html
artboard7.html
artboard8.html
artboard9.html
artboard10.html

Settings you have selected to not apply to all pages when you export to individual pages. Set the settings on each page when exporting multiple pages.

Single Page export

Single page application adds a view on one single page for each artboard you are exporting.

If you have 3 artboards selected and then export to Single Page Application then you will have one page and then 3 views inside of that page.

artboard1.html

artboard1.html:

<html>
<body>
   <div id="artboard1">
   </div>
   <div id="artboard2">
   </div>
   <div id="artboard3">
   </div>
</body>
</html> 

When you view the Single Page Application page in the browser all the artboards will be hidden except the selected artboard (the artboard selected in the Export Artboard dialog).

Settings you have chosen are applied to all selected artboards unless those artboards have their settings that are different than the default. In other words if you have Artboard Red and Artboard Blue selected and enable scaling then both artboards will have scaling enabled. If you turn scaling off in Artboard Blue then it will not have scaling enabled. It's like CSS. The options are inherited from the selected artboard unless that artboard specifically chooses a different setting.

Single Page Application with Media Queries

This option is the same as Single Page Application but it allows you have multiple artboard views for mobile, desktop and tablet and shows or hides views automatically.

Single page showing multiple versions of a page:

Single page showing multiple views and multiple versions of each view:

If you have 1 artboards selected with 3 views (one for mobile, tablet and desktop) and then export to Single Page Application with Media Queries then you will have one page and then 3 views inside of that page.

artboard1.html

artboard1.html:

<html>
<body>
   <div id="artboard1_mobile">
   </div>
   <div id="artboard1_tablet">
   </div>
   <div id="artboard1_desktop">
   </div>
</body>
</html> 

You could have multiple views in the same page with multiple size versions. The view that is automatically shown is dependent on the size of the browser.

If you have 2 artboards and each has mobile, tablet and desktop views and then export to Single Page Application with Media Query then you will have one page and 6 views inside of that page.

artboard1.html

artboard1.html:

<html>
<body>
   <div id="artboard1_mobile">
   </div>
   <div id="artboard1_tablet">
   </div>
   <div id="artboard1_desktop">
   </div>
   <div id="artboard2_mobile">
   </div>
   <div id="artboard2_tablet">
   </div>
   <div id="artboard2_desktop">
   </div>
</body>
</html> 

Selecting Multiple Artboards

To select multiple artboards, select them on the paste board (design view) or open the Layers panel and select the artboards. The last artboard selected is the one that will be the main selected artboard that contains the properties or export options.

Exporting to multiple pages or exporting to a single page CHANGES how automatic are created. You can get around this by manually entering hyperlinks.

You show or hide other artboards by making to them. You can also use the and show or hide views using Javascript.

You can create your own custom URL structure using the URL hook function

When you have multiple views that are shown by media query use hyperlinks and to show the view you want while the mobile, tablet or desktop view will automatically be shown based on browser size.

hyperlinks
hyperlinks
JavaScript API
Javascript API
hyperlink states
LogoMedia queries - CSS: Cascading Style Sheets | MDN