Frequently asked questions

Yes, you can use external CSS Grid generators like cssgridgenerator.io to create grid layouts visually, then copy the generated CSS into Webstudio's Advanced panel. These tools provide visual interfaces for creating complex grid structures that you can then implement in Webstudio using CSS Grid properties.

Yes, you can create modern templates with animations and submit them to the Webstudio marketplace. If you create templates similar to Framer's modern designs with nice animations, contact the Webstudio team (ping Oleg in DM) for review and approval. This would help attract more users to Webstudio and expand the template library.

Yes, Webstudio supports CSS Grid. You can use external tools like CSS Grid Generator (cssgridgenerator.io) to create your grid layouts and then apply the generated CSS in Webstudio. The community often shares useful tools and resources for creating complex layouts.

Currently, custom elements are only supported in the HTML Embed component, which doesn't support Tailwind CSS. However, the Webstudio team has planned support for custom elements when pasting HTML with Tailwind CSS. This will enable the use of vanilla JavaScript UI libraries inside Webstudio with full Tailwind styling support.

Support is planned. Currently colors normalize to RGB. Future work aims to add HSL (and advanced syntax like hsl(from ...)) plus better OKLCH handling with calculations.

Vimeo embed aspect ratios are defined in styles. For dynamic pages that need to handle both horizontal 16:9 and vertical 9:16 videos, you can conditionally show landscape or portrait instances based on CMS data. Add a field in your CMS to specify the video orientation, then use conditional visibility to show the appropriate embed configuration.

Currently manual: create a Stagger Animation container, copy over style tokens + advanced CSS from original element, then move children. Requested feature would add a context action to auto-wrap/preserve styles. Until then:

1. Duplicate the original element (backup)
2. Create the stagger container with identical layout props (flex/grid/etc.)
3. Move child elements into the stagger container
4. Reassign any animation subjects / triggers

This minimizes losing complex layout tokens.

Currently, there's no direct 'Replace With Stagger Animation' action in the context menu. When converting elements to stagger animations, you must manually copy all style tokens and advanced CSS from the original element to the stagger animation container. This is particularly tedious for flex or grid containers. This workflow improvement has been requested for future updates.

Hover and active states are accessible through the dropdown menu on each style property token, not in the main state selector. Look for the dropdown arrow next to individual style properties to access hover, active, focus, and other pseudo-states. If you're having trouble finding these options, check the Webstudio 101 video tutorials on YouTube for a visual guide.

Currently, Webstudio doesn't support adding multiple CSS classes like '.my_content.active' directly through the visual editor. For complex state management with multiple styles, use HTML Embed with custom CSS. Alternatively, use CSS variables set via JavaScript for simpler changes. Future updates will include CSS conditionals and container queries for cleaner state management.

For masonry layouts in Webstudio, you have several options:

1. Use CSS Grid and manually define grid-row on each item,
2. Use JavaScript libraries like Masonry.js (though this may affect Lighthouse scores and cause page jumps),
3. Wait for native CSS masonry layout support which is in discussion. For now, CSS Grid with manual row positioning is the recommended approach for performance.

To create a looping marquee effect in Webstudio, you can use Animation Groups or HTML Embed with CSS animations. For Animation Groups, add your scroll items and set the animation to loop continuously. If using HTML Embed, you can create custom CSS keyframe animations for smooth looping. Note that you cannot directly link to SVG icons from Webstudio's media manager in HTML embeds, so you'll need to use external URLs or embed the SVG code directly. Community members often share working examples of marquee implementations that you can reference.

To create different navigation styles for different pages, you need to unlink the navigation from the global slot. Copy the navigation out of the 'navbar transparent_home' slot which synchronizes navigation across all pages. Once copied out of the slot, you can style each navigation independently without affecting other pages.

To create gradient text effects in Webstudio:

1. Select your text element (span or paragraph),
2. Set a background gradient on the element,
3. Add 'background-clip: text' CSS property,
4. Set the text color to transparent. Unlike visual gradient builders in other tools, you'll need to manually type gradient CSS values. External gradient generator tools can help create the CSS code you need.

You have two approaches: 1) Wrapper approach: Wrap the entire card in a Link component (better semantics), or 2) Stretched link technique: Set the card to position: relative, add a link inside, then add an element inside that link with position: absolute and inset: 0. However, the stretched link approach can interfere with content editing access for clients. For clients using Content Editor, use a CSS solution that disables the overlay when in edit mode: body:not([tabindex="0"]) [data-card]::after { content: ""; position: absolute; inset: 0; }

A dedicated tokens manager (issue 3901) is planned: central list, search, usage counts, unused cleanup indicators. For now manual auditing is required.

Currently, there's no 'Replace with Stagger Animation' action in the context menu.

When converting elements to stagger animations, you must manually copy all style tokens and advanced CSS from the original element to the stagger animation. This is particularly tedious for containers like flex elements or grids. This feature has been requested for the action menu.

To change font weights for all headings at once in Webstudio, you need to work with the style tokens in the global root. While you can set font family and color globally, font weight typically needs to be set individually for each heading level (H1, H2, H3, etc.). However, you can create a shared token for font weight and apply it to multiple heading elements. Click on the font weight property in the style panel to access the token system. You can create a font weight token and then apply that same token to all your heading elements for consistency. This approach allows you to change the weight globally by updating the token value.

In the Craft style guide, you cannot set font weights for all headings at once through a single global setting. Each heading (H1, H2, H3, etc.) needs to be styled individually. You can click on the specific heading token in the style guide to modify its weight. While you can apply the same token to multiple elements, this may complicate usage and override individual heading styles.

To change font weights for all headings at once in Craft style guide: 1) Go to the style panel, 2) Look for the font weight token/class that headings inherit from, 3) Click on the specific token to edit it globally. While you can change H1, H2, H3 individually, using shared tokens allows you to update all headings simultaneously, though this may complicate individual heading customization.

To change the styling of links in embedded Ghost CMS content, look for the dropdown menu in the style panel when you have the Content Embed component selected. You can modify link styles including colors from there. The default bright blue link color can be customized to match your site's design.

When Context by Onx library components appear broken (showing as red error states), make sure you have the Craft Style Guide properly installed in your project. The Onx library components depend on the Craft Style Guide for proper styling and functionality. Without it, components may not render correctly or show error states.

Webstudio shows breakpoints as minimum widths, not maximum widths like many other builders. When you see '767px and lower', it means that breakpoint applies to screen sizes from 767px down to 0px. This is aligned with how Webflow handles breakpoints.

You can use external CSS Grid generators like cssgridgenerator.io to create grid layouts visually, then copy the generated CSS into Webstudio's Advanced panel. These tools provide visual interfaces for creating complex grid structures that you can then implement in Webstudio using CSS Grid properties.

Webstudio breakpoints show the minimum width for each breakpoint, while many other builders show breakpoints at maximum width. For example, if your canvas is 320px, the 767px and lower breakpoint will be applicable. This approach is aligned with Webflow's breakpoint system.

A comprehensive token management system is planned as a long-standing task (GitHub issue 3901). The planned features include: a central location to view all global tokens, visual indicators showing which tokens are used/unused for easy cleanup, usage counts next to each token, search functionality for specific tokens, and overall centralized token management to solve cleanup and organization problems.

Future grid tools may include features like perfect thirds, harmonic sequences, golden ratio grids/spirals, and auto column/row layouts - similar to advanced grid plugins in Figma but built natively into the design interface.

Planned features (issue 4249): style conditions, variants, container queries. Instead of stacking classes (e.g. .card.active.dark) you define variants + a single controlling variable. This reduces specificity conflicts and simplifies dynamic styling.

Webstudio uses atomic CSS where each CSS rule contains one property, which makes CSS stop growing after reaching a certain size. This approach dramatically reduces file sizes - Webstudio.is was reduced from 160kb to 16kb CSS. Unlike traditional builders like Webflow that can generate 75,000+ characters just for grid-spans, atomic CSS prevents bloated stylesheets and improves performance.

Webstudio provides comprehensive grid management tools including a grid manager, tools to precisely control grid elements, and suggestions for additional tools like a CSS Grid generator UI. There are also external resources like cssgridgenerator.io that can be used to create CSS grids, though these would need to be manually implemented in Webstudio.

The old Text component has been removed since it was essentially just a regular div element. You should now use the Paragraph component for text content, or you can write text directly in a regular div element. The Paragraph component provides better semantic structure for text content.

Wrapping the entire card in a Link component is semantically better and more accessible. The stretched link technique (absolute positioned overlay) can hurt screen readers, may be devalued by Google, and blocks content editing access. For content editors, use CSS like 'body:not([tabindex="0"]) [data-card]::after' to only apply the overlay when not in edit mode.

Webstudio plans to add Grid UI management tools later this year. These will leverage CSS Grid under the hood, so existing grid implementations won't require migration. Currently, you can use CSS Grid through the Advanced panel with properties like 'display: grid', 'gap: 10px', and 'grid-template-columns: 1fr 1fr 1fr'. The future UI will provide visual tools for advanced grid layouts including thirds, harmonic sequences, and golden ratio grids.

The Opacity and Blend Mode controls are located in the Style panel. Look for them in the styling section when you select an element - they should appear as dedicated controls for adjusting transparency and blend modes.

CSS conditionals (new CSS spec) and container queries are cleaner approaches than traditional classes for state management. Instead of using '.my_content.active' class combinations, you can define variants upfront in the style panel and switch between them using a single CSS variable. This approach is tracked in GitHub issue 4249 and will be much cleaner than the current class-based method.

This usually happens when animations are accidentally disabled for specific breakpoints. Check the eye icon buttons in the animations list on the right panel - you may have turned off animations for desktop breakpoints while keeping them enabled for mobile. Also check if the animation subject is set correctly for each breakpoint.

Webstudio shows breakpoints at minimum width (e.g., 767px and lower) rather than maximum width, which aligns with Webflow's approach. This means when you see 767px as a breakpoint, it applies to screen sizes of 767px and smaller. This is different from some other page builders that show maximum width values. The breakpoint represents the minimum width at which those styles will be applied.

If sitemap text appears white or transparent in the Webstudio editor but renders correctly on the published site, this is likely a CSS color contrast issue in the editor view. Check that your text color settings provide sufficient contrast against the editor background. The issue is typically with editor-specific styling and doesn't affect the final published site.

This can happen when text appears white or transparent in the editor but renders correctly on the published site. This is typically a visual bug in the editor interface. The site functionality remains intact, but the editor display may need refreshing or there could be styling conflicts affecting only the editor view.

Yes, Webstudio plans to add a native Grid UI later in 2025. Currently, you can use CSS Grid by writing CSS in the Advanced panel (display: grid; gap: 10px; grid-template-columns: 1fr 1fr 1fr;). The planned Grid UI will leverage CSS Grid under the hood, so existing grid implementations won't require migration when the visual interface becomes available.

Webstudio encourages community-created templates rather than building them internally. Modern templates with animations (similar to Framer Templates) would attract more users and are welcomed. If you create high-quality templates, you can submit them to the marketplace - contact the team via DM for review and approval. The focus is on empowering the community to build and share professional templates.

Yes, style conditions and variants are planned (GitHub issue 4249) as a modern replacement for CSS classes. This would allow defining variants upfront in the style panel and switching between them using a single CSS variable, providing a cleaner approach than traditional class-based styling for state management.

Yes, a centralized tokens manager is a long-standing planned feature (GitHub issue 3901). It would allow you to view all global tokens, see which ones are used/unused with usage counts, search for specific tokens, and clean up unused tokens. This would greatly improve token management across large projects.