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?

Element Options

Description of element properties

PreviousStyling elementsNextId field

Last updated 3 years ago

Was this helpful?

The Element Options (shown below) and the Element Options (also shown below) shows a list of properties that can modify the look and feel of the selected element.

When exporting an artboard, Web Export translates the graphics on the artboard into HTML code. In other words, it converts an artboard element like this:

Into code like this:

It goes from a visual graphic design in XD to HTML code.

That HTML goes from code back into a visual design when loaded into a browser.

The Element Options form is a way to add, modify, update or remove the HTML, CSS and JavaScript code that is exported.

Depending on the type item you have selected in Adobe XD there may be a few more or a few less options shown.

Any element that has been modified from its default state will show visual indicators next to the properties that have changed.

In the image below, there is one property that has been changed. It is shows a blue border next to it:

If we click on the Show Changes button we can see the names of the properties that have changed:

We can reset all changes to the selected element by using the Reset Changes button:

The following list describes each field and links to more details.

-------

Copy - Copies the URI to the exported page (only shows after export)

URL - Opens a link to a page that shows the URI to the exported page

- The identity attribute or id defines a unique name of an element.

- The tag name and sub tag name fields allow you to define the tag names of the exported elements.

- Additional styles provide a way to define or modify the styles of an element.

- Additional classes provide a way to define a group of styles or properties for one or more elements.

- Additional attributes provide a way to set the attributes of an element to adjust or configure their behavior.

- Set hyperlinks on elements to visit different pages.

- Set the different width and height sizing options.

- Use a rectangle as a background for a group

- Markup inside is a powerful way to set your own HTML.

- Markup before and after provides a way to add HTML before and after an element.

- Find a range of text and give it an id

- Find and replace text in a text group

- Sets horizontal layout rules to items inside of a group

- Sets horizontal layout rules to items inside of a group

- Determines how items are aligned inside of a layout group

- Determines how items are spaced inside of a layout group

- Determines how items are wrapped inside of a layout group

- Determines how an individual item is aligned inside a layout group

- Select an element to show it's styles on hover

- Opens a form to enter custom JavaScript

- Opens a form to enter custom CSS

- Opens a form to enter custom HTML

- Set whether content that is larger than it's original size shows scrollbars, is hidden or is visible.

- Options for how to layout, size and position the selected item or it's descendants

- Set an element to anchor to the left, top, bottom, right edge of its container or if it is centered horizontally or vertically in its container. Also known as anchors or .

- If checked the element the markup is exported as a string in JavaScript.

- If checked the element is converted into a static image of what it looks like in the artboard

- Shows helpful information for developers.

- Adds an outline around the element when the page is viewed in the browser.

- If unchecked then the element is not displayed. Element is still exported.

- If unchecked then the element is not exported at all

- Automatically export on each change

- Export the selected or first artboard

- Show the markup of the selected item

- Show the CSS of the selected item

- Shows the properties that have changed from default settings

- Resets any changes made to the element back to the default state

Identity
Tag Name
Styles
Classes
Attributes
Hyperlink
Size
Background
Markup inside
Markup before and after
Text ids
Text tokens
Group Row Layout
Group Column Layout
Group Layout Alignment
Group Items
Group Wrap
Self Alignment
Hover Effects
JavaScript
CSS
HTML
Overflow
Layout Section
Positioning
constraints
Export as String
Export as Image
Debug Element
Show Outline
Displayed
Export
Auto Export
Export
Show Markup
Show CSS
Show Property Changes
Reset Property Changes
dialog
panel
Element Options dialog for Text Elements
Element Options dialog for Group Elements
Element Options panel for a group (with labels)
Element Options panel for a group (without labels)
Show Changed Properties