All plan types
| |
Please consult this support article for a breakdown of Interface Designer permissions.
| |
Platform(s) | Web/Browser, Mac app, Windows app, and Android 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
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.
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.
FAQs
I would like to add a image when user opens an interface, is the overview layout a good option?
Though you won’t be able to add a specific image section to an overview interface layout, you can utilize the cover image and logo sections to potentially meet your needs.
If this doesn’t work for your use case, then you might consider adding a URL link to the place a necessary image is hosted in the bookmarks section of the overview page.
Lastly, you might consider utilizing a interface layout page that is configured to appear as a gallery visualization.