Element Options
Description of element properties
Last updated
Was this helpful?
Description of element properties
Last updated
Was this helpful?
The Element Options dialog (shown below) and the Element Options panel (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.
-------
Identity - The identity attribute or id defines a unique name of an element.
Tag Name - The tag name and sub tag name fields allow you to define the tag names of the exported elements.
Styles - Additional styles provide a way to define or modify the styles of an element.
Classes - Additional classes provide a way to define a group of styles or properties for one or more elements.
Attributes - Additional attributes provide a way to set the attributes of an element to adjust or configure their behavior.
Hyperlink - Set hyperlinks on elements to visit different pages.
Size - Set the different width and height sizing options.
Background - Use a rectangle as a background for a group
Markup inside - Markup inside is a powerful way to set your own HTML.
Markup before and after - Markup before and after provides a way to add HTML before and after an element.
Text ids - Find a range of text and give it an id
Text tokens - Find and replace text in a text group
Group Row Layout - Sets horizontal layout rules to items inside of a group
Group Column Layout - Sets horizontal layout rules to items inside of a group
Group Layout Alignment - Determines how items are aligned inside of a layout group
Group Items - Determines how items are spaced inside of a layout group
Group Wrap - Determines how items are wrapped inside of a layout group
Self Alignment - Determines how an individual item is aligned inside a layout group
Hover Effects - Select an element to show it's styles on hover
JavaScript - Opens a form to enter custom JavaScript
CSS - Opens a form to enter custom CSS
HTML - Opens a form to enter custom HTML
Overflow - Set whether content that is larger than it's original size shows scrollbars, is hidden or is visible.
Layout Section - Options for how to layout, size and position the selected item or it's descendants
Positioning - 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 constraints.
Export as String - If checked the element the markup is exported as a string in JavaScript.
Export as Image - If checked the element is converted into a static image of what it looks like in the artboard
Debug Element - Shows helpful information for developers.
Show Outline - Adds an outline around the element when the page is viewed in the browser.
Displayed - If unchecked then the element is not displayed. Element is still exported.
Export - If unchecked then the element is not exported at all
Auto Export - Automatically export on each change
Export - Export the selected or first artboard
Show Markup - Show the markup of the selected item
Show CSS - Show the CSS of the selected item
Show Property Changes - Shows the properties that have changed from default settings
Reset Property Changes - Resets any changes made to the element back to the default state
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
