One of the many areas where the first-time users of Wix Studio struggled was making the website responsive and clean. While most other website builders offer a block method of creating a website, Wix Studio has a more flexible drag-and-drop method.
Although this method is very useful in creating complex designs and fine-tuning, it has its own challenges.
Like elements may overlap or move far from each other. This problem can be solved using the stack option of Wix Studio. In this article, I will share a step-by-step guide to stacking elements in Wix Studio in the right way.
What is Stacking?
Suppose you have added an image, a text, and a button in a container. The responsive behavior of the image and text is set to scale proportionally, and the button is fixed.
When your website visitors look at your website on a device that matches your breakpoint size, they will see the exact design. However, when the device size changes, these elements might overlap or move away from each other.
This creates a problem in the responsive behavior of the website.
To make sure that these types of problems do not occur on the website, the Stack is used.
When you stack one or more elements together, they are bound together in a box and have a well defined distance among them. This distance remains without the exception of the size of the breakpoint or device. Hence, the website is responsive, and the design is consistent.
How To Stack Elements in Wix Studio?
Stacking of elements can be done either horizontally or vertically. However, it can not be done simultaneously for both orientations. If you have multiple elements in both horizontal and vertical orientations, you can create multiple stacked elements.
Here is a step-by-step guide on how to stack elements in Wix Studio. I will take the same example of image and text mentioned before in the article.
First, let us stack the buttons together. To do that, first hold the Shift key on your keyboard(Command in Mac) and select both buttons together. Once you do that, an option to stack the buttons will appear; choose it.
The orientation of the stacked elements will depend on their position. However, you can change as per your requirements.
Once done, now do the same thing with the text, image, and the entire stacked button element. Hold the Shift/Command Key and select all elements that need to be stacked. After selecting, the stack option will be visible on the screen. Choose it.
The selection of elements can also be done from the layer panel of left sidebar.
Now all your elements are stacked together. You can set the orientation as per your design requirements. For example, in the mobile editor, the buttons will be better in a vertical orientation instead of horizontally.
Please note that changing the orientation or design of the elements at a smaller breakpoint will not affect the design at a higher breakpoint. However, if elements are stacked in any of the breakpoints, it will be reflected across all breakpoints.
To further make the stacked elements responsive, set an Item Spacing from the Inspector panel and set a responsive behavior.
Frequently Asked Questions
What is Stack in Wix Studio?
Stack is binding different elements in a container, repeater item, or section vertically or horizontally. Stack is useful for making the website responsive and stopping elements from overlapping or drifting apart from each other.
How does Stacking help?
Is stack and container different?
How to add Stack in Wix Studio?
Can I change the design of Stack in mobile and tablet?
Conclusion
Thanks for reading! I hope this article will help you understand the concept of stacking in Wix Studio. If you have any further questions regarding this article or Wix Studio in general, feel free to ask in the comment below.
Make sure to check out our user form and blog for more such tutorials, tips, and trics for Wix Studio.