If you are designing a website using Wix Studio, layout tools are one of the design elements you will use the most. Cells and containers are the most used layout tools in Wix Studio. These layout tools will help you keep your website responsive and beautiful.
In this article, we will discuss the difference between cells and containers.
Cells vs Containers - What's the difference?
The biggest difference between cells and containers is their position in the page. While the cells can only nest inside a section grid, containers can be placed anywhere on the page.
The second big difference is in their position type property. The cells in Wix Studio only support sticky position type and can not be pinned either to a section grid or page. Containers are not bounded by such limitations. They can be pinned on both pages as well as sections.
The following table will help you understand the difference between cells and containers in more detail -
CELLS | CONTAINERS |
|---|---|
Cells can only nest inside a section grid. | Containers can exist outside the section grid as well. |
Cells can only has Streach responsive behaviour | Containers can have scale proportionally, fixed, stretch, and relative width responsive behavior. |
Cells can further split into more nested cells and form complex layouts | Containers only have a 1x1 cell structure except when converted to advanced grid |
Cells can not be pinned to the page or section | Containers can be pinned to the page or section |
How to Create Cells in Wix Studio
Now that you know the difference between the cells and containers, let's discuss the right method to use the cells and containers. In this section, you will learn how to create cells in Wix Studio.
Wix Studio comes with some pre-designed simple and complex grid layouts. These layouts have cells that can be used to design advanced section grids. You can access these designs from Layout Tools>Section Grid.
To add a cell in an empty section, select the Add Cell option from the option bar. It will give you four options - to right, to left, to top, and to bottom. Depending on the layout, you can add the cells wherever you want.
To add more cells to your section, select the section and repeat the process.
How to Split Cells
You can further divide the cells into more layout grids. To achieve it, simply select the cell you want to split and select the option to split the cell either horizontally or vertically.
How to resize Cells in Wix Studio
Wix Studio offers two methods to resize your cells - Drag and Resize and Assign Specific scale.
For a fast workflow, you can simply hold the side of any cell and resize the cell. Other neighboring cells will automatically adapt to the new size of the cells.
While resizing the bottommost horizontal cell the whole section might resize as the cell and section boundary coincides. In such case, using the custom scaling is a much better option.
The best and most precise method for resizing cells is using the grid size controls in the inspector panel.
Select the section and go to the inspector panel. There you will find the rows and column size controls. By default, the size is set into percentage. You can assign a specific percentage of sections to each cell.
How to Add A Container in Wix Studio
Containers are a separate layout tool in Wix Studio. You can find them in the layout tools under the container. In Wix Studio, you have three types of containers -
Empty Containers - Containers with no effect and basic design.
Designed Containers - Pre-designed containers for fast workflow
Hover Containers - Containers with hover animation effects
Conclusion
Thanks for reading! I hope now you understand the difference between the cells and containers. Cells are used for creating a layout grid inside a section while a container is an independent layout tool that can nest any element and can be placed anywhere on the page. You can further make your container advance by using it as a CSS grid.
Try both cells and containers in your website yourself and see the difference. If you have any questions in meantime, feel free to drop them in the comment below.
Comments