WeWeb Documentation

Div ​

A Div is a simple wrapper used to contain other elements.

Adding a Div to a page ​

To add a Div, drag and drop it onto the editor. In WeWeb, a div defaults to a flexbox layout but can be configured as a grid.

Adding elements to a Div ​

Drag and drop elements inside Divs to add them.

Example of dragging

Sizing a div ​

Like other elements in WeWeb, the sizing can be done from the sizing panel.

The default height and width are set to automatic. For a div, this means it will take the full width available to it, and the height of it's children content.

Div sizing is managed through the sizing panel. You can adjust the sizing using the following properties:

  • width: Sets the width of the Div. By default, it takes the full width available.
  • height: Sets the height of the Div. By default, it adjusts to the height of its child content.
  • max-width: Defines the maximum width the Div can expand to, preventing it from growing beyond this value.
  • min-width: Defines the minimum width the Div must maintain, ensuring it doesn't shrink below this value.
  • max-height: Sets the maximum height the Div can reach, limiting its expansion vertically.
  • min-height: Sets the minimum height the Div must maintain, ensuring it doesn't shrink below this value.

Spacing in a div ​

Padding and margin are CSS properties that can be applied to a div to control spacing.

  • Padding: This property adds space inside the div, between the content and the border. It can be set for all sides or individually for top, right, bottom, and left.
  • Margin: This property adds space outside the div, between the border and surrounding elements. Like padding, it can be set for all sides or individually for top, right, bottom, and left.

Styling a div ​

The following properties can be used to enhance the visual appearance of a div:

  • Borders: This property allows you to define the thickness, style, and color of the border surrounding the div. It can be applied to all sides or individually to the top, right, bottom, and left.
  • Outline: Similar to borders, outlines are drawn outside the border edge of the div. They do not take up space or affect the layout, and can be used to highlight or emphasize the div.
  • Radius: This property is used to round the corners of the div. You can specify a uniform radius for all corners or set different values for each corner to achieve various shapes.
  • Shadows: This property adds a shadow effect to the div, creating a sense of depth. You can customize the shadow's color, size, blur, and position to achieve the desired effect.

You can set a background color to a div, add an image or video