Container

The Container widget is a powerful tool that allows you to group and organize other widgets within a designated container. It acts as a wrapper for other elements, providing structure and layout control.

Grid Containers

Grid containers use the power of CSS Grid to create complex layouts with rows and columns. They are ideal for arranging elements in a two-dimensional space. Use Grid containers when you need fine-grained control over your layout, such as creating magazine-style grids, product listings, or complex dashboards.

Flexbox Containers

Flexbox containers focus on content flow within a single dimension (either rows or columns). They are excellent for simpler layouts. Use Flexbox containers for straightforward layouts, like navigation menus, feature lists, or single-column content.

Content Tab

Container

• Container Layout: Choose between 'Grid' and 'Flexbox' for your container layout. This will define how the items within the container are aligned and distributed.
• Content Width: Select whether the container should be 'Boxed' or 'Full Width'. 'Boxed' confines the content to a certain width, while 'Full Width' stretches it to the full width of the screen.
• Width: If 'Boxed' is selected, adjust the width of the container in pixels.
• Min Height: Set a minimum height for the container. To make the container take the full height of the viewport, use '100vh' (viewport height).

Items (Grid Layout Specific)

• Grid Outline: Toggle to 'Show' or 'Hide' the grid outline for visual aid during design.
• Columns: Define the number of columns in your grid.
• Rows: Set the number of rows in your grid.
• Gaps: Adjust the gap size between columns and rows in pixels.
• Auto Flow: Decide how auto-placement works, selecting between 'Column' or 'Row'.
• Justify Items: Control the horizontal alignment of all items within the grid.
• Align Items: Control the vertical alignment of all items within the grid.

Items (Flexbox Layout Specific)

• Direction: Choose the direction of the main axis, which can be 'Row' or 'Column', and their reverse orders.
• Justify Content: Align items horizontally within the container (for row direction) or vertically (for column direction).
• Align Items: Align items vertically within the container (for row direction) or horizontally (for column direction).
• Gaps: Specify the gap between individual items, both for columns and rows.
• Wrap: Determine whether items should wrap onto multiple lines or stay on a single line.

Additional Options

• Overflow: Control how the overflow of the container is handled, with options like 'Default', 'Hidden', 'Scroll', etc.
• HTML Tag: Select the appropriate HTML tag for your container, such as div , section , article , etc. Choosing the correct tag is important for semantic HTML structure and SEO.

Style Tab

Background

• Normal / Hover: Switch between 'Normal' and 'Hover' to set different backgrounds for each state.
• Background Type: Choose the type of background:
  • Classic (Color/Image)
  • Gradient
  • Video
  • Slideshow

Animated Gradient (If enabled)

• Animated Gradient: Toggle 'Yes' to enable an animated gradient background.
• Color: Add colors to your gradient. Click '+ Add Item' to include more colors.
• Direction: Select the direction of the gradient animation, such as 'Left', 'Right', 'Top', or 'Bottom'.
• Animation Duration: Set the duration of the animation cycle in seconds.

Background Overlay

• Background Overlay: If needed, add an overlay to your background, which can be a color or gradient, useful for improving text visibility over backgrounds.

Border

• Border Type: Choose a border type from options like 'None', 'Solid', 'Dotted', 'Dashed', etc.
• Border Radius: Set the radius for the corners of the border to create rounded edges. You can set different radii for top, right, bottom, and left.
• Box Shadow: Apply a shadow effect to the container.

Shape Divider

• Top / Bottom: Select 'Top' or 'Bottom' to apply a shape divider to that edge of the container.
• Type: Choose the type of shape divider, such as 'None', 'Clouds', 'Waves', etc. This adds a decorative transition effect between sections.