# Web Export

## Web Export

- [Introduction](https://velara-3.gitbook.io/web-export/master.md): Instructions for using Web Export for Adobe XD
- [Getting Started](https://velara-3.gitbook.io/web-export/getting-started.md): Getting started overview
- [Install the Plugin](https://velara-3.gitbook.io/web-export/install-the-plugin.md)
- [Create or open a project](https://velara-3.gitbook.io/web-export/alignment.md)
- [Export the Artboard](https://velara-3.gitbook.io/web-export/export-the-artboard.md): How to export an artboard to a web page
- [Export Artboard Dialog](https://velara-3.gitbook.io/web-export/export-artboard-dialog.md): Dialog to export artboard
- [File Name](https://velara-3.gitbook.io/web-export/export-artboard-dialog/page-name.md): The name and extension of the exported page
- [Subdirectory](https://velara-3.gitbook.io/web-export/export-artboard-dialog/subdirectory.md): The subdirectory field in the export folder
- [Page Title](https://velara-3.gitbook.io/web-export/export-artboard-dialog/page-title.md): The page title is the title of the page
- [Web Page Template](https://velara-3.gitbook.io/web-export/export-artboard-dialog/page-template.md): The web page tempate
- [Expected HTML Output](https://velara-3.gitbook.io/web-export/export-artboard-dialog/expected-html-output.md): Compare exported HTML with previous exported HTML
- [Stylesheet Name](https://velara-3.gitbook.io/web-export/export-artboard-dialog/stylesheet-name.md): Name of the external stylesheet
- [Artboard Stylesheet template](https://velara-3.gitbook.io/web-export/export-artboard-dialog/stylesheet-template.md): The artboard stylesheet contents
- [Expected Stylesheet output](https://velara-3.gitbook.io/web-export/export-artboard-dialog/expected-stylesheet-output.md): Expected output
- [Script Page options](https://velara-3.gitbook.io/web-export/export-artboard-dialog/script.md): Page JavaScript
- [Images](https://velara-3.gitbook.io/web-export/export-artboard-dialog/images.md): Images options
- [Export Folder](https://velara-3.gitbook.io/web-export/export-artboard-dialog/export-folder.md): The folder to export to
- [Server](https://velara-3.gitbook.io/web-export/export-artboard-dialog/server.md): The location of the server for creating a server hyperlink shortcut
- [Alternative Fonts](https://velara-3.gitbook.io/web-export/export-artboard-dialog/alternative-fonts.md): Specifying page fonts
- [Scale to fit](https://velara-3.gitbook.io/web-export/export-artboard-dialog/scale-to-fit.md): Scale contents to fit
- [Centering the page](https://velara-3.gitbook.io/web-export/export-artboard-dialog/centering-the-page.md): Centering the page
- [Styles Inline](https://velara-3.gitbook.io/web-export/export-artboard-dialog/styles-inline.md): Setting where styles are defined
- [Style via Classes](https://velara-3.gitbook.io/web-export/export-artboard-dialog/style-via-classes.md): Styling via Classes
- [Markup Only](https://velara-3.gitbook.io/web-export/export-artboard-dialog/markup-only.md): Exports only the markup structure
- [Outline Elements](https://velara-3.gitbook.io/web-export/export-artboard-dialog/outline-elements.md): Show outline around all page elements
- [Keyboard Navigation](https://velara-3.gitbook.io/web-export/export-artboard-dialog/keyboard-navigation.md): Use forward and back keys in single page slideshow
- [Add Data Name](https://velara-3.gitbook.io/web-export/export-artboard-dialog/add-data-name.md): Adds additional information to the exported HTML
- [Add Image Compare](https://velara-3.gitbook.io/web-export/export-artboard-dialog/add-image-compare.md): Adds artboard snapshot to the page
- [Auto Refresh](https://velara-3.gitbook.io/web-export/export-artboard-dialog/auto-refresh.md): Check for page changes and reload
- [Export type](https://velara-3.gitbook.io/web-export/export-artboard-dialog/export-type.md): Export multiple pages or single page
- [Reset Artboard](https://velara-3.gitbook.io/web-export/export-artboard-dialog/reset-artboard.md): Reset the export settings
- [Addressing Export Issues](https://velara-3.gitbook.io/web-export/addressing-export-issues.md): Address issues during export
- [Messages Console](https://velara-3.gitbook.io/web-export/messages-console.md): Messages that are shown after export
- [Export types](https://velara-3.gitbook.io/web-export/export-types.md): A list of the types of supported export types
- [Export to a Single Page](https://velara-3.gitbook.io/web-export/export-types/export-to-a-single-page.md): Export multiple artboards to one page
- [Export to Multiple Pages](https://velara-3.gitbook.io/web-export/export-types/export-multiple-artboards.md): Exporting all or selected number of artboards
- [Export Artboards and show by size (media query)](https://velara-3.gitbook.io/web-export/export-types/media-query.md): Create multiple versions of the same page at different sizes
- [Export to a Slideshow](https://velara-3.gitbook.io/web-export/export-types/slideshow.md): View artboards as a slideshow
- [Keyboard Shortcuts](https://velara-3.gitbook.io/web-export/keyboard-shortcuts.md): A list of keyboard shortcuts
- [Responsive Pages](https://velara-3.gitbook.io/web-export/responsive-pages.md): How to create responsive pages
- [Dynamical page that grows in height](https://velara-3.gitbook.io/web-export/dynamical-page-that-grows-in-height.md): A page using normal flow to allow it to grow in height
- [Modifying Individual Elements](https://velara-3.gitbook.io/web-export/modifying-individual-elements.md): Modifying individual elements
- [Elements and Sub Elements](https://velara-3.gitbook.io/web-export/elements-and-sub-elements.md): Elements and sub elements
- [Styling elements](https://velara-3.gitbook.io/web-export/styling-elements.md): Setting element styles
- [Element Options](https://velara-3.gitbook.io/web-export/element-options.md): Description of element properties
- [Id field](https://velara-3.gitbook.io/web-export/element-options/id-field.md): Id of an element
- [Tag Name](https://velara-3.gitbook.io/web-export/element-options/tag-name.md)
- [Styles](https://velara-3.gitbook.io/web-export/element-options/untitled.md): Setting styles
- [Classes](https://velara-3.gitbook.io/web-export/element-options/classes.md): Add classes to your elements
- [Attributes](https://velara-3.gitbook.io/web-export/element-options/attributes.md): Attributes of the element
- [Hyperlink](https://velara-3.gitbook.io/web-export/element-options/hyperlink.md): Linking to other web pages
- [Width and Height Size](https://velara-3.gitbook.io/web-export/element-options/size.md): Setting the size of the element using width and height
- [Background](https://velara-3.gitbook.io/web-export/element-options/background.md): Rectangles inside of groups can be used as a background or as sizing
- [Markup Inside](https://velara-3.gitbook.io/web-export/element-options/markup-inside.md): Defining your own HTML
- [Markup Before and Markup After](https://velara-3.gitbook.io/web-export/element-options/markup-before-and-markup-after.md)
- [Text Ids](https://velara-3.gitbook.io/web-export/element-options/text-ids.md): Give spans of text an id
- [Text Tokens](https://velara-3.gitbook.io/web-export/element-options/text-tokens.md): Replace tokens with other values
- [Row Layout](https://velara-3.gitbook.io/web-export/element-options/row-layout.md): Define layout rules for items in a group
- [Column Layout](https://velara-3.gitbook.io/web-export/element-options/column-layout.md): Define vertical layout rules for items in a group
- [Overflow](https://velara-3.gitbook.io/web-export/element-options/overflow.md)
- [Script Template](https://velara-3.gitbook.io/web-export/element-options/script-template.md): Modifying the script template
- [CSS Template](https://velara-3.gitbook.io/web-export/element-options/css-template.md): A template for CSS for the selected element
- [HTML Template](https://velara-3.gitbook.io/web-export/element-options/html-template.md): HTML template
- [Layout Section](https://velara-3.gitbook.io/web-export/element-options/layout-section.md): Change the default size, position and layout of an element
- [Layout Position types](https://velara-3.gitbook.io/web-export/element-options/layout-section/position-types.md): Change the layout of an element
- [Layout Position Location Types](https://velara-3.gitbook.io/web-export/element-options/layout-section/position-location.md): The properties used to position an element
- [Layout sizing options](https://velara-3.gitbook.io/web-export/element-options/layout-section/sizing-options.md): The properties used for setting the size
- [Centered, Constraint and Anchored Positioning](https://velara-3.gitbook.io/web-export/element-options/untitled-1.md): Anchor elements to a specific position
- [Debug Element](https://velara-3.gitbook.io/web-export/element-options/debug-element.md): Debug the selected element
- [Show Outline](https://velara-3.gitbook.io/web-export/element-options/show-outline.md): Add an outline to your element
- [Export as Image](https://velara-3.gitbook.io/web-export/element-options/convert-to-image.md): Export elements as images
- [Export as String](https://velara-3.gitbook.io/web-export/element-options/export-as-string.md): Export an element markup into a variable
- [Export element](https://velara-3.gitbook.io/web-export/element-options/export.md): Chose if an element is exported
- [Displayed](https://velara-3.gitbook.io/web-export/element-options/displayed.md): Change the display of the element
- [Auto Export](https://velara-3.gitbook.io/web-export/element-options/auto-export.md): Export on each change
- [Export (artboard)](https://velara-3.gitbook.io/web-export/element-options/export-1.md): Export from the Element Options panel
- [Show Markup](https://velara-3.gitbook.io/web-export/element-options/show-markup.md): Show the markup of the selected element
- [Show CSS](https://velara-3.gitbook.io/web-export/element-options/show-css.md): Show CSS of the selected element
- [Show Property Changes](https://velara-3.gitbook.io/web-export/element-options/show-property-changes.md): Show property changes
- [Reset All Property changes](https://velara-3.gitbook.io/web-export/element-options/reset-all-property-changes.md): Reset all property changes
- [Navigation Buttons](https://velara-3.gitbook.io/web-export/element-options/navigation-buttons.md): Buttons to move from element to element
- [Changed Properties](https://velara-3.gitbook.io/web-export/changed-properties.md): Seeing changed properties
- [How to section](https://velara-3.gitbook.io/web-export/how-to-section.md)
- [Creating a hover menu](https://velara-3.gitbook.io/web-export/how-to-section/creating-a-hover-menu.md): Creating a hover menu
- [Centering a page or element](https://velara-3.gitbook.io/web-export/how-to-section/centering-a-page-or-element.md): How to center a page or element
- [Showing Overlays](https://velara-3.gitbook.io/web-export/how-to-section/showing-overlays.md): Overlays display above an artboard view
- [Embedding an HTML page](https://velara-3.gitbook.io/web-export/how-to-section/embedding-an-html-page-in-an-iframe.md): Embedding an HTML page in the artboard view
- [Linking to pages or views](https://velara-3.gitbook.io/web-export/how-to-section/linking-to-pages-or-views.md): Link from page to page or view to view
- [Creating a download link](https://velara-3.gitbook.io/web-export/how-to-section/creating-a-download-link.md): Creating a download link
- [Creating List items](https://velara-3.gitbook.io/web-export/how-to-section/creating-list-items.md): Create Lists using Repeat Grids
- [Embedding Fonts](https://velara-3.gitbook.io/web-export/how-to-section/embedding-fonts.md): How to embed fonts
- [Adding Hover Effects](https://velara-3.gitbook.io/web-export/how-to-section/adding-hover-effects.md): Hover effects
- [Styling Hyperlinks](https://velara-3.gitbook.io/web-export/how-to-section/setting-hyperlink-styles.md): Setting styles for hyperlinks
- [Showing elements by size](https://velara-3.gitbook.io/web-export/how-to-section/showing-elements-by-size.md): Show elements by size of viewport
- [Creating a Fixed Header](https://velara-3.gitbook.io/web-export/how-to-section/creating-a-fixed-header.md): Create a header that stays in position when the container is scrolled
- [Make a Stretchable Line](https://velara-3.gitbook.io/web-export/how-to-section/make-a-stretchable-line.md): How to make a stretchable line
- [Blend Modes](https://velara-3.gitbook.io/web-export/how-to-section/blend-modes.md): Blend modes example
- [Creating Code Blocks](https://velara-3.gitbook.io/web-export/creating-code-blocks.md): Code blocks are elements that contain code or styles
- [How Exporting Works](https://velara-3.gitbook.io/web-export/how-exporting-works.md): Going from Adobe XD to HTML
- [Single Page Application API](https://velara-3.gitbook.io/web-export/single-page-application-api.md): The API for the single page application
- [Element Tokens](https://velara-3.gitbook.io/web-export/element-tokens.md): Tokens supported in the element templates
- [Template Tokens](https://velara-3.gitbook.io/web-export/template-tokens.md): These are the tokens you can use in your page template
- [Setting up a server](https://velara-3.gitbook.io/web-export/setting-up-a-server.md): How to setup your local test environment
- [Putting your site online](https://velara-3.gitbook.io/web-export/putting-your-site-online.md): How to put your page online
- [Code Block Snippets](https://velara-3.gitbook.io/web-export/code-block-snippets.md): A collection of code snippets to add to your project
- [Adding a cursor over on hover](https://velara-3.gitbook.io/web-export/code-block-snippets/adding-a-cursor-over-on-hover.md): Make a cursor show over an element
- [Go to next or previous artboard with swipe gesture](https://velara-3.gitbook.io/web-export/code-block-snippets/go-to-next-or-previous-artboard-with-swipe-gesture.md): Add gestures to your page to go forward and back
- [Other Features](https://velara-3.gitbook.io/web-export/other-features.md): These are other features
- [Gradients](https://velara-3.gitbook.io/web-export/other-features/gradients.md)
- [Blend Modes](https://velara-3.gitbook.io/web-export/other-features/blend-modes.md)
- [Form Elements](https://velara-3.gitbook.io/web-export/other-features/form-elements.md): How to create a form
- [Learning by Videos](https://velara-3.gitbook.io/web-export/learning-videos.md): Videos showing features and how to guides
- [WordPress Integration](https://velara-3.gitbook.io/web-export/wordpress-integration.md): How to create a theme for WordPress
- [Summary](https://velara-3.gitbook.io/web-export/wordpress-integration/summary.md): Steps to create a Wordpress Theme
- [Export the main page](https://velara-3.gitbook.io/web-export/wordpress-integration/export-the-main-page.md): Export the main page
- [Example Packages](https://velara-3.gitbook.io/web-export/example-packages.md): Working example projects for Web Export
- [Web Developers](https://velara-3.gitbook.io/web-export/web-developers.md): Note to web developers
- [Non Web Developers](https://velara-3.gitbook.io/web-export/ui-ux-and-designers.md): A page for not web developers
- [Debugging](https://velara-3.gitbook.io/web-export/debugging-a-page.md): Debugging a page or a project
- [Version](https://velara-3.gitbook.io/web-export/version.md): How to check what version you are using
- [Support](https://velara-3.gitbook.io/web-export/support.md): Support
- [Forums](https://velara-3.gitbook.io/web-export/support/forums.md): Discussion forums
- [Discord Channel](https://velara-3.gitbook.io/web-export/support/discord-channel.md): A link to the Discord Channel
- [License](https://velara-3.gitbook.io/web-export/license.md): Commercial usage
- [Feature and Bug Reports](https://velara-3.gitbook.io/web-export/feature-requests-and-bug-reports.md): How to requests new features
- [Related Plugins](https://velara-3.gitbook.io/web-export/related-plugins.md): Related plugins