Containers are integral in 10Web Website Builder for organizing widgets, crafting templates, and ensuring a consistent design across your website. Knowing how to effectively manage the size and behavior of your containers is key to efficient web design.
Setting container dimensions
To modify a container's dimensions:
- Select the desired container
- Open the Layout tab
- Go to the Container settings section
- Content width: Choose between Boxed or Full Width. Boxed allows you to define the width inside the container, while Full Width ensures content extends across the entire space of the container.
- Min height: This setting is crucial for guaranteeing visibility, especially in mobile layouts.
Adjust height and width with units like pixels, percentages, or viewport dimensions, selectable in the top-right corner of each setting. Learn more about the units of measurement here.
Item dynamics
Below the sizing options, you'll find settings that govern item dynamics within the container, such as direction, justification, alignment, item gaps, and wrapping behavior.
Additional options
Tailor the container's behavior with Overflow settings and HTML tag selection.
Overflow
- Default: Items that go beyond the container's size are visible.
- Hidden: Content that spills over is hidden.
- Auto: Introduces a scrollbar for any content exceeding the container's bounds.
HTML tag customization
Assign an appropriate HTML tag from the dropdown to encapsulate your container, which is a pivotal consideration for SEO and the content's importance within the DOM hierarchy.
Note:
You can set responsive-specific HTML tags as needed.