# Containers

The **Container** widget is an essential building block that can help you design responsive funnel steps. Containers, transparent by default, are fully customizable. When used in conjunction with the Box tool ([see below](#adding-boxes)), you can group elements and create intricate presentations, like a pricing table.

## Adding a Container widget

The first step is to place a widget on the canvas. In this example, we place one **Container** widget in a row cell.&#x20;

Containers are empty boxes that have many customization features such as padding, margins, background color, borders, and more. Containers can hold other widgets, like text, heading, and images.

To place a widget on a blank canvas:

1. Go to the center of the Section and click the plus (+) icon one time.
2. Select the number of columns for the row.
3. Click the plus (+) icon in a row cell. A blue line connects the cell to the side panel.
4. Click a widget. We select **Container** in this example.
5. The editor places the widget inside the cell and displays the settings panel. &#x20;

<figure><img src="/files/8s3dOzN5FoV91EQpWkSQ" alt=""><figcaption><p>Adding a Container.</p></figcaption></figure>

### **Adding boxes**

Boxes are a feature of the **Container** widget. The Box tool lets you stack (horizontally and vertically) multiple elements and provides incredible design flexibility. Add precise margins and padding, set text or image alignment, define custom widths for side-by-side boxes, and more.

Start by placing one or more boxes inside a **Container** widget.

1. Click the **Container** widget on the canvas.
2. On the left panel, click **Add new box**.

* Funnelish creates two boxes inside the container cell. By default, the widths are equal. You can change box width on the side panel.

<figure><img src="/files/atmiV9QjPsSyVco7BY8Z" alt=""><figcaption><p>Adding New Box.</p></figcaption></figure>

*Inserting and deleting boxes*

* To insert another box, click the **Add new box** button.
* To delete a box, click the ellipsis next to a box name and then click Delete box.

### **Orientation**

You can also set up your boxes orientation from the left side bar.

<figure><img src="/files/Ydsnr09OJVb8Ptezk3PW" alt=""><figcaption><p>Changing Boxes Orientation.</p></figcaption></figure>

### Add widgets to boxes

The next step is to add a widget to a box.

1. Click a box cell one time.
2. On the side panel, click a widget.
3. Customize widget settings.
4. Repeat for all boxes.
5. Click **Save changes**.
6. Click **Preview**.

In this example, we place one element in each box and then customize margins and padding. We also center-align the headline and left-align the button.

![Add elements to boxes](/files/UDfTVA9eQmA1PE1lbOIk)

You can also control container size and location by configuring custom margin and padding settings.

![Container margin and padding settings](/files/ge8ueVoRIRLqdTrnrdyJ)

Continue to add boxes, elements, and design features.&#x20;

### Wrap up

The screenshot below shows a price table made with containers and boxes.

![Price table made with containers and boxes](/files/ijCOuXVvNTD5Mnua1R2B)


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.funnelish.com/start/funnel-builder/containers.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.
