Using the Editor Sidebar: General, Styles and Animations

When you click an element in the Sites editor, the right-hand sidebar shows its settings split into three tabs. Knowing what lives where saves a lot of hunting.

The General Tab

This is for what the element is and does:

• Element Name lets you rename the layer, for example from "Headline" to "Hero Title".
• Element Options change by type, such as text content, button links, image alt text or form labels.
• Element Actions set what happens on click, like navigating to a URL, submitting a form or opening a lightbox.
• Typography (font, size, weight, opacity, line height, letter spacing, text transform) and color controls also sit here.

The Styles Tab

This is for layout and appearance across device sizes: Margin and Padding, Border (width, style, radius, color), alignment, and the Visibility switches that show or hide the element on desktop, tablet or mobile. Text elements also get a Text Shadow panel. At the bottom, a Custom Class field lets you tag the element for your own CSS or scripts.

The Animations Tab

Pick an entrance effect (fade, slide, bounce, zoom), set its direction and speed, or add a looping effect such as glow or rocking. Clear returns everything to none.

Collapsible Panels and Memory

Panels inside each tab can be opened or closed, and the sidebar remembers your last tab and panel states as you move between elements. New elements start with all panels open. Not every control appears for every element, because buttons, images and forms each add their own options.

Good to know: Rename your layers as you build, since clear element names make big pages far easier to navigate later.