Navigate the container style tab to customize the visual presentation of items within a container.
Background settings
- Background Type: Choose the desired background type: classic, gradient, video, or slideshow.
- Color (background): Utilize the color picker to define the hue for your background.
-
Image: Tap to upload or select an image (or multiple for a slideshow) from the media library to set as your container's background.
Image Resolution: Controls the display size of the image (thumbnail, full size, or a custom size you choose).
Position: Where the image sits within the container (e.g., top left, center, etc.).
Attachment: Whether the image scrolls with the page (scroll) or remains fixed (fixed).
Repeat: How the image repeats if it's smaller than the container (no-repeat, tile, etc.).
Display Size: How the image fits the container (original size, cover the space, fit inside).
-
Scrolling Effects: These effects create dynamic changes to the container as the user scrolls down the page.
Vertical Scroll: Makes the container move up or down at a different speed than the rest of the page.
Horizontal Scroll: Makes the container move left or right at a different speed.
Transparency: Changes the container's opacity (visibility) as you scroll.
Blur: Blurs the container as you scroll.
Rotate: Rotate the container as you scroll.
Scale: Zooms in or out on the container as you scroll.
-
Motion Effects: These effects add movement and interactivity, triggered by the user's mouse.
Mouse Track: Elements within the container follow the movement of the user's mouse cursor.
3D Tilt: The container tilts slightly in reaction to the user's mouse movements, creating a sense of depth.
Important:
Each effect offers additional settings like speed, direction, and portion of the screen where the effect is active.
Background overlay settings
- Background Type: Determine the overlay background: color, gradient, or image.
- Color (background overlay): Use the color picker to select the overlay's hue.
- Image: Click to choose or upload a picture from the media library to act as the overlay for your container.
- Opacity: Adjust the slider or input a numeric value directly to define transparency.
Border settings
- Border Type: From the list, pick a style: solid, double, dotted, dashed, or groove.
- Width (border): Designate the thickness using units like px, em, or %.
- Color (border): With the color picker, finalize your border's color.
- Border Radius: Specify the border’s curve radius using units such as px, em, or %.
- Box Shadow: Click the pencil symbol to delve into shadow customization.
Shape divider settings
- Top / Bottom: Decide if it appears at the Top or Bottom of your container or both
- Type: Use the dropdown to select the look.
- Color: Customize its hue.
- Width: Define the Shape Divider's breadth.
- Height: Set its height.
- Flip: Set the horizontal direction of your Shape Divider.
- Invert: Set the vertical direction of your Shape Divider
- Bring to front: Ensure your Shape Divider overlays other elements.
Next steps
Now that you're acquainted with the Style tab's container options in the 10Web Website Builder, delve deeper into the Container’s Advanced tab settings.