Containers
Create complex designs without code
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), you can group elements and create intricate presentations, like a pricing table.
The first step is to place a widget on the canvas. In this example, we place one Container widget in a row cell.
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.
Click the plus (+) icon
- A blue line connects the cell to the side panel.
A line connects with the widget panel
4. Click a widget. We select Container in this example.
- The editor places the widget inside the cell and displays the settings panel.
Container widget inside a row cell
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.
Two boxes inside a container.
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.
Delete a box
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
You can also control container size and location by configuring custom margin and padding settings.
Container margin and padding settings
Continue to add boxes, elements, and design features.
The screenshot below shows a price table made with containers and boxes.
Price table made with containers and boxes
Last modified 1yr ago