Web Export
Search…
Web Export
Introduction
Getting Started
Install the Plugin
Create or open a project
Export the Artboard
Export Artboard Dialog
Addressing Export Issues
Messages Console
Export types
Keyboard Shortcuts
Responsive Pages
Dynamical page that grows in height
Modifying Individual Elements
Elements and Sub Elements
Styling elements
Element Options
Changed Properties
How to section
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
Other Features
Learning by Videos
WordPress Integration
Example Packages
Web Developers
Non Web Developers
Debugging
Version
Support
License
Feature and Bug Reports
Related Plugins
Powered By
GitBook
Creating Code Blocks
Code blocks are elements that contain code or styles
Code blocks are simply elements that contain code or styles.
Once you create a code block you add it to an artboard and that code is added to your exported page.
For example, if you wanted to make the page background black you could add the CSS to the code block:
1
<style>
2
body {
3
background-color: black;
4
}
5
</style>
Copied!
To create a code block:
1.
Add an any element to the artboard. I recommend a Text field.
2.
In the Element Properties dialog or panel expand the Markup Inside field
3.
Enter the markup, code or style you want to add to the page
4.
Click OK
5.
Add it to the desired artboard
Optionally you can make this a component and reuse it across multiple artboards and projects.
And optionally, you can set the tag name to "none" to prevent the enclosing tag to be exported.
Example Project
​
https://github.com/velara3/xd-examples/tree/master/web-export/examples/code-blocks
​
Previous
Blend Modes
Next
How Exporting Works
Last modified
10mo ago
Copy link
Contents