The page icon is located on the builder bar. The following provides a quick overview of how you open and access the various parts of the page builder.
A. When you click on the pages icon on the builder bar, the pages quick menu is opened as shown in the example.
B. You can start building pages by clicking on the
C. When you first start working with the page builder, the quick menu is empty and the message "There's nothing here" is displayed.
Once you have added one or more pages for your application, you can use the pages overview list to display a list of individual pages.
D. If you have an extensive list of pages, you can use the search field to navigate to a page from the quick menu.
When you open a page, the page name (A) is displayed in the menu tab. The components tab (B) shows the components menu. You can navigate to other menus using the different tabs. For example, when you click on the settings (C) tab, the page settings menu is displayed. You can apply a specific page name or title for the page in this menu.
You can use the search field (D) or the scroll bar to navigate to specific components in the components menu. A layout component such as a column or container is required before you drag and drop other components onto the canvas for designing or building the user interface for your application.
An action button is shown in the example below on the canvas that reflects a mobile device. You can choose a device type for responsive design based on the available options (E)
An additional partials tab is available as part of the components (B) menu. The partials tab provides access to any available custom components. You can create, for example, a standardized header menu that you want to reuse on each page of your application. Once available, partials can be dragged and dropped onto individual pages as required.
You can apply the SEO description for the pages in your application on the settings page (see Settings (C) in the above example).
Testing your user interface design
You can test your interface design using the play button (A) in the builder bar. An additional tab with a simulation of the active page is displayed.
➝ Next article: Page builder component section