The Advanced tab in 10Web Builder offers plenty of settings and customization options. This tab allows you to fine-tune the appearance, add custom CSS, control responsiveness, and configure advanced features specific to the selected widget or container. The Advanced tab includes the following options:
Layout
- Margin: Set the margin of the selected element in PX, EM, REM, VW or %. You can set values for top, right, bottom, and left margins. Positive values increase space, while negative values decrease space.
- Padding: Set the padding of the selected element in PX, EM, REM, VW or %. You can set values for top, right, bottom, and left padding. Positive values increase space, while negative values decrease space.
- Width:
Auto: Width is automatically determined by the content.
Full Width: Spans the full width of the container (100%).
Inline (Auto): Inline elements automatically adjust their width based on content.
Custom: Allows you to set a specific width value. Use the slider or enter a value in PX, %, or VW to adjust the element’s width within the column.
- Align Self: Aligns the element within its container. Options include start, center, end, and stretch. This is particularly useful in a flex container to control the alignment of individual items.
- Order: Specifies the order of the widget within a flex container. Allows you to change the order of the widget relative to other items in a flex container. Lower values appear first.
- Size: The flex grow/shrink property specifies how the item will behave relative to the rest of the flexible items inside the same container. You may select between Non, Grow, Shrink or Custom. If Custom option is enabled, settings for Customer Glex Grow and Flex Shrink will appear:
Position
- Default Position: The element is in its natural state, positioned merely by the natural flow of the page. This is the default position of all elements.
- Absolute Position: The element is positioned based on its first parent element that has a specified position. You can manually set the exact X and Y positions (horizontal and vertical) for precise placement.
- Fixed Position: The element is fixed in a custom position even when the page is scrolled. It stays in place relative to the user’s viewport.
Additional Controls: If either Absolute or Fixed are selected, the following options become available:
Horizontal Orientation: Sets the horizontal reference point for the absolute positioning, with either Start or End choices.
Offset: Changes the horizontal reference point by the amount of the offset.
Vertical Orientation: Sets the vertical reference point for the absolute positioning, with choices of either Start or End.
Offset: Changes the vertical reference point by the amount of the offset.
- Z-Index: Specifies the stacking order of the widget. A higher z-index brings the widget forward in the stacking order, potentially overlapping others with lower z-index values.
- CSS ID: Assigns a custom CSS ID to the widget. Allows you to target the widget with custom CSS rules.
- CSS Classes: Assigns custom CSS classes to the widget. You can add multiple classes, enabling advanced styling through custom CSS rules.
Motion Effects
- Scrolling Effects: Set Scrolling Effects to On to choose from a variety of animations and interactions that can occur when the user scrolls through the page.
- Mouse Effects: Allows you to add effects based on mouse movement. Options include tilt and track. These effects create an interactive experience as users move their mouse over or across the widget.
- Sticky: Makes the widget sticky during scrolling. This is useful for creating headers, footers, or sidebars that stay visible while the rest of the page scrolls.
- Entrance Animation: Adds an animation effect when the widget comes into view. You can choose from various entrance animations such as fade in, zoom in, bounce, flip, and more. The animation triggers when the widget becomes visible on the user’s screen.
Transform
- Rotate: Rotates the element around its center. You can specify the degree of rotation. Positive values rotate clockwise, while negative values rotate counterclockwise.
- Offset: Shifts the element from its normal position. Allows you to move the element horizontally and vertically by specifying offset values.
- Scale: Adjusts the size of the element. You can increase or decrease the size of the element by specifying scale values. A value of 1 represents the normal size.
- Skew: Tilts the element along the horizontal and vertical axes. Specify skew values for the X and Y axes. Positive values skew in one direction, while negative values skew in the opposite direction.
- Flip Horizontal: Mirrors the element horizontally. Flips the element as if viewing it in a mirror along the vertical axis.
- Flip Vertical: Mirrors the element vertically. Flips the element as if viewing it in a mirror along the horizontal axis.
Background
- Normal/Hover: Allows you to customize the background of your widgets in both their normal state and when hovered over.
- Background Type: You can choose between Classic or Gradient.
Classic: Uses a solid color as the background. You can choose a color for the background from the color picker.
Gradient: Applies a gradient as the background. You can define a gradient by selecting two or more colors and adjusting the gradient type, angle, and position.
Border
- Normal/Hover: Allows you to customize the border of your widgets in both their normal state and when hovered over. The following options can be set independently for both states:
Border Type: Select the style of the border, choosing from none, solid, double, dotted, dashed, or grooved.
Border Radius: Rounds the corners of the widget. You can set a value for the border-radius to create rounded corners. Higher values result in more rounded corners.
Box Shadow: Adds a shadow effect to the widget. You can set values for box-shadow parameters like color, blur, spread, and position to create a shadow effect around the widget.
Mask
- Mask: If you enable the Mask toggle, you’ll be presented with additional options to define a mask for your widget:
Shape: Select the shape of your mask from the dropdown list. Choose one of the preset shapes or upload a custom SVG shape.
Size: Select Fit, Fill, or Custom for the size of your mask.
Position: Determines the position of the mask within the widget. Top, Right, Bottom, Left, and Center options are available.
Repeat: Choose the repeat option to determine if and how the mask pattern should repeat.
Responsive
- Hide On Desktop: When enabled, the element will not be visible to users accessing your website on desktop devices.
- Hide On Tablet Portrait: When enabled, the element will not be visible to users accessing your website on tablets in portrait orientation.
- Hide On Mobile Portrait: When enabled, the element will not be visible to users accessing your website on mobile devices in portrait orientation.
Custom CSS
- Add your own custom CSS: This enables you to add custom CSS code to the element. You can input CSS rules directly into this field to override or extend the default styles applied by 10Web Builder. This can include styling for colors, fonts, sizes, margins, padding, and more.