In the 10Web Website Builder, the Advanced tab is your gateway to an array of options that further refine the design and layout of your containers.
Margin
Margin defines the external space around the element, adjustable in PX, EM, %, REM, and VW. You can unlink these values for individual side adjustments by clicking the chain icon.
Padding
Padding sets the internal space within the element, with values in PX, EM, %, REM, and VW. The chain icon allows for individual side customization.
Width (Widgets only)
The width determines the horizontal space an element takes up.
Default: The element uses the default width behavior specified in the plugin settings or inherits the width from the theme's styling rules
Full Width (100%): The element stretches across the full width of its container.
Inline (auto): The element takes up only as much space as needed.
Custom: You can define a specific width using the slider or input fields in PX, %, or VW.
Note:
The Inline (auto) setting is not applicable to Containers, which instead relies on the Container's Direction property.
Align Self
This property allows you to override the container’s default alignment for individual items.
Flex-start: Aligns at the start of the container.
Center: Centers in the container.
Flex-end: Aligns at the end of the container.
Stretch: Stretches to fit the container.
Order
Order can be used in responsive design to rearrange elements based on screen size:
Start: Default ordering.
End: Reverses the order.
Custom: Enables manual input for order preference.
Learn about the intricacies of the Order property in our comprehensive guide.
Size
Flex grow/shrink properties define how an element resizes relative to others in the same container:
None: No flex resizing.
Grow: Allows the element to grow.
Shrink: Allows the element to shrink.
Custom: Specify values for flex-grow and shrink manually.
Detailed insights into the Size property are available in our specialized resource.
Position
This setting is for precise control over the element’s positioning:
Default Position: Follows the normal document flow.
Absolute Position: Positions relative to the nearest positioned ancestor.
Fixed Position: Remains fixed within the viewport during scroll.
With Fixed and Absolute positions use the options:
Horizontal Orientation: Defines how the element should be positioned horizontally.
Vertical Orientation: Specifies how the element should be positioned vertically.
Note:
The sticky scrolling effect allows an element to remain in place during scroll but within the confines of its parent section. In contrast, Fixed positioning keeps an element stationary relative to the browser's viewport, regardless of scrolling.
Z-Index
Manipulate the stacking order of elements with the Z-Index; higher values bring elements to the front over lower values.
CSS ID & Classes
Assign unique CSS IDs for scripting or anchor linking and CSS Classes for applying specific style rules.
Important:
Do not apply “#” before the CSS ID and “.“ CSS classes.