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. How to section

Linking to pages or views

Link from page to page or view to view

PreviousEmbedding an HTML pageNextCreating a download link

Last updated 5 years ago

Was this helpful?

The hyperlink field provides a way to create a link from your current view to another page or view.

When you create a Prototype in Adobe XD you are creating links from one artboard to another.

You can create links to other pages manually or you can create links via prototype.

When you export to the web with Web Export any element that has an interaction to go to another artboard will be linked by default to another page or view.

The links that you create in Prototype mode that are created during export are called Inherited links or prototype links because you did not manually assign them or enter them.

The inherited prototype links have a different icon than manual links.

You can detach the prototype links by using the detach or clear link button.

The link that's created will be a link to a page or a link to a view.

In other words the links to artboards will point to "page2.html" or "goToView("page2")" depending on if you have Multipage or Single Page selected in the Export Artboard dialog.

To open the page in a new browser window set the hyperlink target to "_blank".

Sometimes you may not want a link to be wrapped around an element for styling reasons but be a link element itself.

You can change this by selecting the element, changing it's tag name to "a" for anchor and then entering the hyperlink attributes in the attributes field. If you manually create a link remove any automatic links set in the hyperlink field by erasing the field or using the detach link button.

Creating hyperlinks - Learn web development | MDN
Detach link is on the right
Logo