Site Designer Guide
element-pane inspector attributes custom-code href

Element pane

The Element pane is the third of Site Designer’s control panes. It is organised into three stacked parts.

The Element pane
  • The top part gives a page-inspector view: a tree-like overview of every element on the page. It’s a fast way to select and reorder elements, and to toggle the visibility of hidden ones. That tree is covered in detail in the Elements Tree.
  • The middle section shows the Element Property fields, where you configure elements that need to link to a resource — pictures, videos — or apply custom attributes for your framework.
  • The bottom part previews the CSS rules applied to the selected element. See the CSS preview pane.

Element Properties

Customise CSS, JS, and various other properties on a per-element basis here. You can apply the source for Link, Picture and Video elements, insert custom markup into HTML elements, connect social media buttons to your accounts, or configure interactive elements. Framework-specific attributes are also assigned from this panel.

With the exception of inline links — which are configured with the Text Editor — every link element (Text Links, Picture Links, Container Links, Button Links) is configured under Element Pane → Selected Element Properties → HREF.

Links can point to another page in your project, a third-party web address, another location on the same page, or a document.

  • Href — the link destination. Use an external address like https://www.example.com, or an internal one. To link to another page in the project, remove the # symbol and type the page name; existing pages autocomplete. To link to a region on the current page, format it as #ID-Name.
  • Automatic encoding — enabled by default. If you enter characters that are invalid in URLs (like spaces), it fixes them for you. Disable it only if you need specific code in your Href.
  • Title — provides additional information on hover, to help describe the purpose of a link.
  • Target — specifies where the linked document loads. Self opens it in the same page (the default). Blank opens it in a new window or tab. Parent and Top are less frequently used, and relate to iframes: Parent opens the document in the parent frame, Top in the full body of the window.

You can organise custom CSS or JS on a per-element or per-container basis, rather than per page.

Head Code for the Element — on export, Site Designer includes this code in the <head> section of the HTML file. You can also include a link to an external stylesheet or script.

  • CSS pasted here must be wrapped in <style> tags.
  • JS pasted here must be wrapped in a <script> tag.
  • For an external file, include the <link href> tag for a stylesheet, or <script src> for a script.

The coloured Paste buttons wrap your clipboard contents in the correct tags automatically.

Footer Code for the Element — for performance, JavaScript is best placed in the footer, right before the closing </body> tag. Two reasons: scripts that modify the DOM will find it ready, and script execution blocks page rendering, so putting it at the end lets visitors start reading sooner.

Content, Before, and After code

Three further code fields let you inject markup at specific positions relative to the element:

  • Content Code — unlocks customised settings and features for the element; for example, this entry can display server errors.
  • Before Code — adds content or styling that appears immediately before the element in your layout. For example, displaying PHP server errors.
  • After Code — adds content or styling that appears immediately after the element. For example, with custom PHP, displaying the date and time.

Custom code demonstration

Using the custom coding capabilities on the Element makes it easy to inject your own scripts, or borrow from other sources. CodePen offers a wealth of scripts for adding complex features to a design. In this demonstration, a CodePen animation is copied into Site Designer in a few clicks.

Copying a CodePen animation into Site Designer
  1. Add an HTML Element to the canvas and go to the Element pane.
  2. From CodePen, copy the HTML and paste it into Element pane → HTML for this Element.
  3. From CodePen, copy the CSS and paste it into Element pane → Head Code for this Element, using the Paste CSS button.
  4. From CodePen, click Settings → JS and grab the resource file URL only, pasting it into Element pane → Footer Code for this Element as a link, using the Paste URL button.
  5. From CodePen, copy the JS and paste it into Element pane → Footer Code for this Element, using the Paste JS button.
  6. Hit Preview to see the animation running.

Data attributes and ARIA

The Element pane’s Attributes section is also where data-* attributes and ARIA roles are applied — the hooks that tie an element to a framework’s JavaScript. That has its own article with four worked tutorials: see custom framework attributes.

More resources