Editing Component-Specific Styles

Every museum exhibit and interactive display has its own visual personality. Zibit's component-specific styles let you go beyond global typography and color choices to define exactly how each type of component looks and behaves — whether that's a button that pulses on hover in a children's science gallery, a bold headline style for a timeline exhibit, or a subtle image treatment for an art museum kiosk. The Style Editor gives you a dedicated space to set these defaults once and apply them consistently across every moment in your project.

Exploring Component Style Buckets

Scroll down past the global Styles sections — Typography, Colors & Scheme, Shadows & Effects, and Animations & Transitions — and you'll reach the component buckets: Basic Components, Interactive Components, Layout Components, and Views Components. Each bucket groups related components together so you can quickly find and customize the right one for your exhibit.

Click any bucket heading — or use the shortcut buttons Basic, Interactive, Layout, and Views — to jump straight to that group. Inside each bucket you'll find individual component sections like Basic: Text, Basic: Image, or Interactive: Timeline, where you can fine-tune how each component looks across your entire project.

The Style Editor page scrolled to show four component bucket headings — Basic Components, Interactive Components, Layout Components, and Views Components — along with individual component sections such as Basic: Text, Basic: Image, and Interactive: Timeline listed beneath them. — Component buckets in the Style Editor group every component type for easy access.

Customizing Styles by Component Category

The Style Editor organizes component styles into four category buckets — Basic, Interactive, Layout, and Views. Each bucket contains the specific components that belong to it, so you can fine-tune how individual elements like text, images, buttons, or timelines look across your entire project. Click any category tab — Basic, Interactive, Layout, or Views — to expand its components and start editing.

For example, if your museum exhibit uses a lot of interactive timelines, head to Interactive Components and adjust the Interactive: Timeline and Interactive: Timeline Event styles to match your brand. Any changes you make here apply globally to that component type across all moments — and you can always come back and revise them later.

The Style Editor panel showing four component category tabs — Basic, Interactive, Layout, and Views — with an expanded list of individual component style sections such as Basic: Text, Basic: Image, and Interactive: Timeline. — Component styles are grouped by category for easy navigation.

Styling Individual Component Types

The Basic Components section of the Style Editor lets you define default styles for each core component type — Text, Image, Video, Audio, 3D Model, Header, Icon, and more. Each component type has its own style list, so you can set consistent defaults that apply across your entire project whenever that component is used in a moment.

Scroll through the left panel to find the component type you want to customize, then click its name to expand its style options. Any changes you make here become the baseline look for that component — perfect for ensuring your museum's brand stays consistent across every screen and display in your experience.

The Style Editor panel showing the Basic Components section expanded, with a list of component types including Text, Separator, Image, Video, Audio, 3D Model, Header, and Icon, each available for individual style customization. — Each basic component type has its own style list in the Style Editor.

Add a Text Component Style

You're now in the Style Editor under the Basic: Text section. This is where you define reusable text styles — think of them as named presets like "Exhibit Title" or "Caption Label" that you can apply to any text component across your project.

Scroll through the existing variants to see what's already defined. When you're ready to create a new one, click "Add component style" to open a new style entry. Any styles you create here can be updated at any time, and changes will automatically flow through to every component using that style.

The Style Editor panel showing the Basic: Text section, with a list of existing text component style variants and an option to add a new component style. — The Basic: Text section in the Style Editor, where you manage reusable text styles for your project.

Styling Individual Components

The Style Editor gives you fine-grained control over how each component type looks across your project. Use the left panel to navigate between component categories — Basic, Interactive, Layout, and Views — then select a specific component like Basic: Text or Interactive: Button to open its style settings.

For each component, you can define styles for its Default, Hover, and Active states using the property groups — Background, Typography, and Border — so your interactive components respond visually to touch or cursor input. Any changes you make here apply project-wide, keeping your exhibit's look consistent across every moment.

The Zibit Style Editor panel showing component categories on the left, including Basic, Interactive, Layout, and Views sections, with Typography, Colors and Scheme, Shadows and Effects, and Animations and Transitions configuration areas visible. — Use the Style Editor to define how each component type looks in its default, hover, and active states.

Styling the Hover State

With the Hover state tab selected, you can define exactly how a component looks when a visitor moves their cursor over it — completely independent of its Default and Active styles. This is where you add visual feedback that makes interactive elements feel polished and responsive, whether that's a color shift on a button or a subtle shadow on an image.

Adjust any combination of Colors, Typography, Shadows & Effects, and Animations & Transitions to create the hover appearance you want. Changes here won't affect how the component looks at rest or when pressed — each state is isolated, so you can experiment freely.

The Style Editor panel open to the Hover state tab, showing color, typography, and effects options for a selected component's hover appearance. — The Hover state tab lets you style components as they appear when visitors interact with them on screen.

You've now got the tools to fine-tune how every component type looks and behaves across your project. Consistent, well-crafted component styles make your exhibit feel polished and intentional — and because these settings live in your style set, they're easy to update any time. Here are some great ways to keep building on what you've learned:

Explore interactive component states — revisit your button and link styles to define focus and disabled states, ensuring your experience is accessible to all visitors.
Create a second style set — duplicate your current style set and experiment with a completely different visual direction without touching your live project.
Apply component styles across displays — check how your component styles render on different display configurations, like portrait kiosks versus landscape video walls.
Combine component styles with collections — link a collection to a moment and see how your text and image component styles carry through dynamically generated content.
Share your style set across projects — if you're building a suite of experiences for the same institution, reuse a style set to keep branding consistent across every project.