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?

Template Tokens

These are the tokens you can use in your page template

PreviousElement TokensNextSetting up a server

Last updated 3 years ago

Was this helpful?

The default page HTML that is used in the page is at the time of this writing shown below: 

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<meta http-equiv="X-UA-Compatible" content="IE=edge"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title><!--page_title--></title>
<!--styles_content-->
<!--scripts-->
</head>
<body>
<!--application_content-->
</body>
</html>

You can modify the and use tokens to determine where to insert page elements.

The stylesheet template and JavaScript template only support one token.

The stylesheet template supports the Styles Declaration token shown below.

The JavaScript template supports the JavaScript token shown below.

When you select the artboard and look in the element panel you can access the templates and tell if they have been modified by viewing the template icons:

Template Tokens

The page template comes with a few tokens you can use to configure the page output.

  • Page title - This is the title of the page. The token is <!--page_title-->

  • Styles declarations - This is the style rules for the page. The token is <!--styles_content--> There are begin and end tags you can also use.

  • JavaScript - This is the JavaScript used for some features. The token is <!--scripts-->

  • Application - This is the Artboard HTML. The token is <!--application_content-->

  • Body content - This is the Artboard HTML but includes enclosing body tags. The token is <!--body_content-->

  • Date - This is the current date. The token is <!--date-->

  • Year - This is the current year. The token is <!--year-->

  • Month - This is the current month. The token is <!--month-->

  • Day - This is the current day. The token is <!--day-->

  • Time - This is the current time. The token is <!--time-->

  • Generator - This is the generator. Default is "Web Export". The token is <!--generator-->

  • Generator Version - This is the version of Web Export. The token is <!--generator_version-->. The value is formatted as major.minor.build as in 3.4.5.

An example project showing how to use templates can be found .

page template
here