Containers in the 10Web Website Builder allot exceptional flexibility when it comes to positioning elements within them. Navigate to the Items section under the Layout tab to access these controls.
Direction
The Direction setting lets you decide the arrangement in which the elements within your container will be showcased.
Row: Elements are oriented horizontally.
Column: Elements stand vertically.
Row Reversed: Elements are displayed horizontally but in the opposite sequence.
Column Reversed: Elements are set vertically, but the order is inverted.
Justify content
Start: Elements align to the container's beginning or top boundary.
Center: Central alignment of elements within the container.
End: Elements are positioned at the container's end or bottom boundary.
Space Between: Uniform spacing throughout the container, starting with the first item and concluding with the last.
Space Around: Equal gaps are maintained both among the elements and between the initial, and final items and the container boundaries.
Space Evenly: Uniform spacing is ensured between elements and the container's edges.
Align items
Align Items aids in determining the alignment of elements on their central axis, based on the choice made in the Direction option.
Start: Elements align at the container's left.
Center: Elements centrally align within the container.
End: Elements position at the container's right.
Stretch: Elements expand to span the entire container width or height.
Elements gap
Here, you can adjust the spacing between individual elements, be it widgets or other containers. The units available are pixels (PX), percentages (%), or Viewport Width (VW).
Note:
The default gap between elements is 20PX. However, this can be modified by heading to Site Settings > Layout.
Wrap
The Wrap feature determines if the elements inside will stay confined to a single row or if they overflow to subsequent rows.
Wrap: If items exceed the container's width, they transition to the next line.
No Wrap: All elements are constrained to a single horizontal line.
Note:
Dive deeper into options related to organizing elements within containers by checking out the Advanced tab.
What’s next
Now armed with insights on organizing widgets within a container, immerse yourself in the intricate settings available under the Layout tab.