How do I use columns?

1. Use resizable columns
2. Adjust the width of each column
3. Add or remove a column from an existing row
4. Align elements in a row

Once you start designing, add a row with the number of columns you need. Then, from the side panel, you can adjust the size of the existing columns by dragging the divider. You can also add or delete columns from the existing row.

Click on + Add new action to add a new column inside the row.

• The New Column is always added on the far right, with a default size of 1. At the same time, the nearest column on the left is reduced accordingly.

  • If the left column is already at the minimum width, the next available column will resize instead.

  • When the max number of columns is reached, the + Add new option disappears.

Click the Delete action in the top-right of Column structure area to remove it.

Here’s how it works:

• When a column is deleted, the nearest columns on the left will inherit its width.

  • If the deleted column is the first on the left, the right column will inherit the width.

• The Delete action will not be visible if there is just one column.

• The order of the columns cannot be changed.

• If you accidentally delete a column use the undo feature to restore it.

• It is not possible to specify the width in pixels, only in column numbers.

Take the following steps to create space between columns within a row:

1. Enter your Funnel in the Funnel Editor
2. Click on a row within the editor
3. Navigate to the Column Settings section of the Row Properties located on the right-hand side of the screen
4. Navigate to the Gap inbetween option
5. Enter a pixel value to dictate the spacing between columns within the row

You successfully adjusted space between columns in a row.

Say, for example, you have a two-column row. In one column, you have an image, and in the other column, you have text. Oftentimes, the content in each row will have different heights. This may cause unwanted empty space below the column with less content.

The entire row will always inherit the height of the taller column. In this example, the images are not as tall as the text in the other column. As a result, the text content takes up the entire height of the row. However, the image sits near the top of the row with a lot of white space beneath it. This is due to the default setting of top alignment.

Perhaps you want an equal amount of empty space above and below the image. You can use middle vertical alignment to accomplish this. If you would rather the image renders at the bottom boundary of your row, you can use bottom alignment.