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?

Export Artboard Dialog

Dialog to export artboard

PreviousExport the ArtboardNextFile Name

Last updated 4 years ago

Was this helpful?

The Export Artboard dialog is the main portal to exporting your web page.

You can open this window by going to Plugins > Web Export > Export artboard.

The Export button will export an artboard.

Above the footer button is the messages area. Pay attention to this area. If you press the Export button and nothing happens read the messages.

There is one requirement when exporting. You must select the folder to export to.

Due to operating system limitations you have to select the folder to export to each session. This is not something that can be fixed at this time.

The dialog contains a list of options you can use to cater the exported page. This guide will walk you through each one.

The options are defined per artboard.

To export an artboard follow the Exporting Artboard.

We will go over the first section of properties:

Export Artboard Header

In the upper left hand corner is dialog name.

This describes the current action. You can click this header and it will change to "Export Artboard (live)" and the Export button label will change to "Export Live".

Any changes you make while this window is open will cause the export to happen automatically. You do not have to press the Export button each time.

There are related features called Auto Export and Export Last Artboard. Export Live is experimental.

Export Artboard Label

In the right hand corner is the name of the selected artboard and it's position in the total number of artboards.

Clicking on the text will show a list of properties for the artboard. This is mostly informational.

Artboard Navigation Buttons

Clicking on the buttons will select the next or previous artboards and update the options.

Each artboard holds its own export options. If you select another artboard the export settings will be updated to that artboard settings. There is no project settings. If you select the artboard and open the Export Artboard dialog the first artboard in layers panel will be selected.

Continue to the next section to go over each form field.