Contents x
    Airtable interface layout: Overview
    • 06 Aug 2024
    • 4 Minutes to read
    • Print
    • Dark
      Light
    • PDF
    Contents

    Airtable interface layout: Overview

    • Updated on 06 Aug 2024
    • 4 Minutes to read
    • Print
    • Dark
      Light
    • PDF
    Article summary

    Plan availability

    All plan types

    • Conditional fields or groups in record details are only available on Business or Enterprise Scale plans

    Permissions

    Please consult this support article for a breakdown of Interface Designer permissions.

    Platform(s)

    Web/Browser, Mac app, and Windows app

    Related reading

    Getting started with Interface Designer - A general overview of the Interface Designer feature

    Interface layouts are the design framework within a given interface page. In this article, we will cover the Overview layout. You’ll customize the design of an interface page that will highlight key pages and other resources on a single landing page.

    Adding a new overview interface page

    1. With the interface editor open click the + sign on the left side of the screen to add a new interface or page. If you add a new interface, then you need to name the interface and pick an icon before moving to the next step.

    2. Next, you’ll be brought to the layout picker. Choose the Overview option and click Finish.

    Configuring an overview layout

    After creating a new overview layout, you will begin the process of customizing the page to fit your needs by adjusting options on the canvas or from the properties panel on the right side of the screen. This layout has two areas:

    • The main area can have text elements and bookmarks to pages within the app.

    • The sidebar area can have groups of titles, descriptions, and external URL links.

    Overview layout general page properties

    Custom cover image: To add a cover image, click Add a cover image on the top of the canvas. Then, drop a file or click browse files. Next, click Upload 1 file. Note that only 1 file can be uploaded. Your cover image will appear after uploading has been completed.

    • To remove an existing cover image, click the X button in the top left corner of the canvas.

    • As a general guideline, 1800px by 480px is suggested as the minimum for cover images, with 1800px by 512px being a good target if your image is of higher quality/size.

    • The area of the form cover image is 256px tall and the width is the width of the browser window that the end user is accessing the form from.

    Custom page icon: To add a logo, click Add a logo on the form’s canvas. Then, drop a file or click browse files. Next, click Upload 1 file. Note that only 1 file can be uploaded. Your logo will appear after uploading has been completed.

    • To remove an existing logo, click the X button in the top left corner of the canvas.

    • Logos will be limited to max dimensions of 200px by 64px. Image files that exceed these dimensions will be resized to fit but not cropped.

    Title: The default title of the layout page is Overview, but you can customize it to meet your needs.

    Description: Give a description of the page so that users know what to expect.

    Sidebar: Toggling on “Show sidebar” will provide a secondary space to add more information in addition to links to external resources.

    Text properties

    Title: The title appears as the text you choose to show.

    Description: You can optionally add a description that will appear just below the title by clicking into the “Click to add text” section. Here, you’ll find various text formatting options to help organize the content and orient end users.

    Bookmarks properties

    Bookmarks provide a way to highlight the most important pages in an interface, especially for those that have many sections and pages within them. Each bookmark group can have only up to 8 bookmarks, so be considerate when curating the right pages.

    Bookmark group properties:

    • Title: Give the group of interface pages that you are bookmarking a descriptive title.

    • Description: Optionally add a description for the bookmarks group you are creating.

    Individual Bookmark properties:

    • Page - The individual interface page that you are bookmarking. The title is inherited from the page’s name and cannot be modified.

    • Description - Descriptions are required since they provide additional context to collaborators.

    • Open in a new tab - Optionally toggle this option on to send end users into the bookmarked interface page in a new tab.

    Sidebar group properties

    If the general page properties for the overview layout you are building has the “Show sidebar” option toggled on, then you’ll be able to configure the following properties as well.

    Title - The title text shown at the top of the sidebar.

    Description - Add an optional description for the links that you are adding into the sidebar.

    Links - Unlike bookmarks, the links added in the sidebar section can be external links to other helpful surfaces outside of the interface. Each individual link you add has the following additional properties to configure:

    • Title

    • URL

    • Open in a new tab

    Limitations and dependencies

    • There’s a maximum of 8 bookmarks and external links per group.

    • Overview layout pages can’t be publicly shared.

    • Bookmarks to interface pages only show for users with access to them. If an entire group of bookmarks is not accessible to a user, then the group won’t be displayed.

    Was this article helpful?
    What's Next