Change the layout of a page

The Layout component in Zapier Interfaces allows you to organize other components horizontally, into 2 or 3 columns. This can be useful for lead generation pages, for example, where the layout can impact conversion rates.

Available on plans:

Basic

Pro

Advanced

Add the component to a page

• From any interface page, click the plus sign  at the bottom of the page. A sidebar will open.
• In the Add Component sidebar, scroll and click the Layout component. A sidebar will open.

Change the Layout component settings

The Layout component offers different settings:

• The Columns dropdown menu allows you to select either 2 or 3 columns. This determines the number of components that can be added. 
• Add a title for the component in the Title field, or leave it blank to hide the title.
• Use the field Width to adjust how much horizontal space the Layout component uses.
• Change the alignment of the Layout component on the page with the Alignment field.

Add nested components

Each Layout component can have up to three columns, where you add a nested component, i.e. any other type of component available on Interfaces. The number of components you can add depends on the number of columns you've selected, and the type of components already included. Learn more about the limitations of the Layout component.

To add a component within the Layout component:

1. From the Layout component settings sidebar, click Add component. A dialog box will open.
2. Select the component type you want to add. Depending on the number of component columns already used, some types may not be available.

Repeat these steps to fill the other columns.

Once you add a nested component, the type of the component will be shown within the field. 

• Click and hold the drag icon to move the nested component to a different position.
• Click the nested component name or the arrow to review its settings.

Limitations

When using the Layout component to structure your pages, keep in mind:

• The Layout component can have a maximum of 3 columns.
• A Table or Kanban component requires at least 2 columns. If you use one of these, you can only add one more nested component to a 3-column Layout component.
• If your Layout component has 3 components, you must delete one before you can switch from 3 to 2 columns.
• It's not possible to move existing components on your page into a Layout component.

Provide feedback and get help

You can make a feature request, provide feedback on existing features, and get help from the Interfaces team.