Control panes
Master the three right-side control panes — Content, Styles and Element — and the effects the Styles pane can apply.
Control panes overview
The three right-side control panes in Site Designer: Content, Styles and Element.
Content pane
The first control pane, divided into Elements, Components and Symbols — where you add the content of your site.
Design pane
The Design pane has two sub-tabs — Element for selectors and Style for all CSS visual controls.
Effects pane
Add transitions, hover effects, animations, and CSS filters to elements using the Effects pane.
Hover effects and transitions
Add smooth color, scale, and movement transitions to elements on hover using the Effects pane.
Mouseover effects on background images
Create Ken Burns and zoom-in effects on container background images using CSS transitions and transforms.
CSS filters and blend modes
Apply visual effects like blur, grayscale, and sepia to images, and blend elements with mix-blend-mode.
Smooth scroll behavior
Enable smooth scrolling for anchor links and create a polished single-page navigation experience.
Elements Tree
The DOM tree in the top half of the Element pane: select, reorder, search, and reveal hidden elements.
CSS preview pane
The CSS pane shows the computed CSS rules for the selected element — helpful for debugging and learning.
Element pane
The third control pane: the page inspector tree, element property fields, per-element custom code, and a CSS preview.