Blocks Widget Design Guidelines

• Grid: Every container and section comes with a built-in grid. You can choose the number of rows and columns your composition requires, and adjust their size in many different measurements.
• Box: This is the simplest of the layout tools. Every other layout tool, apart from the grid, is built on a box. Stack, repeater, flexbox, and multi-state box are all built using boxes. Note that every widget comes with a default box, containing the entire widget.
• Stack: Group several components together in a vertical arrangement, and apply collapse and expand functionality. Because it is built as a container, you can select background color and other customizations.
• Repeater: Create a list of items with the same design and layout, but different content in each. Repeaters are arranged in a flex layout that automatically reorganizes content when it’s resized.
• Flexbox: Add your content to a flex layout of your choice. The items inside a flexbox are containers. This allows you to drag and attach any element to an item, and it will move with the item when the flexbox is resized.
• Multi-State Box: You can show different content for different situations in the same container box, displaying one state at a time.For example, you can create a loading state, or a "thank you: state. Choose the amount of states your box should have, design them, and give them IDs that you will later use in your code.

• Variety of content: Presets allow you to offer your user different designs and layouts. Presets use the same code and panels. User overrides can be saved when changing a preset.
• Fluid & Responsive: Presets can be created to fit smaller screens in case your main preset is not responsive enough.
• Hidden elements: You can choose which elements to hide on a specific preset, by clicking Don’t display. Elements we add/delete will be added/deleted across presets.

• No reparenting between presets: Reparenting is attaching an item to another container or dragging it out of its container. This is not available between presets, meaning this change will be applied on all presets.
• No content change between presets: Just like in breakpoints - images, text, and videos cannot change from one preset to another.
• Several elements cannot change between presets: For example -
  • An SVG’s shape and color.
  • Layout of a native gallery.
  • Layouts of all inputs.
• Overrides between presets (in the Wix Editors): When adding the widget to your Editor and making overrides (editing the design), those customizations will follow to the next preset or will be reset (according to desired behavior). We can’t select certain overrides to follow, (such as font-family) and other overrides to reset (font color), it’s all or nothing.

You can make some changes in a preset that only impact the current preset. Other changes impact all of them. Read more about changes that impact your current preset, versus changes that affect all of them.

Keep your widget as fluid as possible in all presets, even if using different presets for different breakpoints. Fluidity will allow the user who installs your application on a site to get a better behavior when they resize their app on a specific breakpoint. This is because different websites might have different breakpoints and you cannot predict the breakpoint of every website.

Use the Blocks option to insert one widget into another widget when you build a complex composition. This gives you the ability to suggest inner-widget presets. This allows more customization combinations for your user. It also simplifies the structure and the work on stage. Learn more about Nested Widgets in Blocks.