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.

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.

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.

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.

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.

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.

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.