--- title: "Base layout" slug: "base-layout" updated: 2026-01-27T20:13:42Z published: 2026-01-27T20:13:42Z --- > ## Documentation Index > Fetch the complete documentation index at: https://support.tulip.co/llms.txt > Use this file to discover all available pages before exploring further. # Base layout *This article will show you how to build repeatable step designs with the Base Layout* ## Overview **In this article, you will learn:** - **How to design apps with the Base Layout** - **How to apply Triggers to every step in the Base Layout** *Note: This topic is featured in the "[Basic App Design and Logic](https://university.tulip.co/path/tulip-essentials/basic-app-design-and-logic)" course in Tulip University* --- The Base Layout makes it easy to add text, buttons, Widgets, and formatting that will be applied to all new steps in an app. When you add widget to the Base Layout Step, they appear on every step within the app, as well as on any additional steps you may add. If you remove a widget from the Base Layout, it is removed from every Step. Follow the instructions below to add and remove elements from the Base Layout. ## To add a Widget to the Base Layout: 1. Open an app from the 'Apps' Tab. 2. Click on the Base Layout step in the bottom left of the App Editor as shown below: ![](https://cdn.document360.io/7c6ff534-cad3-4fc8-9583-912c4016362f/Images/Documentation/How%20to%20Use%20Base%20Layout_506267941.png) 1. Insert a text, variable, button or other Widget into the Base Layout 2. Confirm that the new widget is present on each step ## Removing A Widget from Base Layout on an Individual Step Let's say that you want a widget to appear on every step except for one. You need to remove the widget from the one step so you don't need to copy and paste it into each one. 1. Click on the widget and note the lack of resize handles. 2. Click on the unlock button in the Side Pane. ![](https://cdn.document360.io/7c6ff534-cad3-4fc8-9583-912c4016362f/Images/Documentation/How%20to%20Use%20Base%20Layout_506267941.png) 1. The widget is now unlocked from the Base Layout and belongs only to that step. You can add customization (change color, add a Trigger, etc.) to this individual widget and it will not affect any other step. Additionally, you may want to remove all widgets from the Base Layout at once, rather than selecting them one by one. You can do this with the "Gear" icon at the top of the {{glossary.Steps Tab}} in the Side Pane. ![](https://cdn.document360.io/7c6ff534-cad3-4fc8-9583-912c4016362f/Images/Documentation/How%20to%20Use%20Base%20Layout_229523256.png) You can also restore all Base Layout widgets after you have removed some of them. ## Using Triggers With The Base Layout You can also add [Step Triggers](/r230/docs/step-level-triggers) to your Base Layout. These Triggers run upon Steps being opened, steps being closed, or an external event from a machine or connected device. After you add these step triggers to the Base Layout, they will appear in the Side Pane and be automatically applied to every step in the app. ![](https://cdn.document360.io/7c6ff534-cad3-4fc8-9583-912c4016362f/Images/Documentation/How%20to%20Use%20Base%20Layout_189552359.png) However, once you select a different step, the triggers will not appear in the side pane, even though they are present. This means that you cannot remove these step triggers from individual steps. ## Further Reading - [App design best practices](/r230/docs/app-design-best-practices) - [Design an effective base layout](https://support.tulip.co/docs/how-to-design-an-effective-base-layout) --- Did you find what you were looking for? You can also head to [community.tulip.co](https://community.tulip.co/?utm_source=intercom&utm_medium=article-link&utm_campaign=all) to post your question or see if others have faced a similar question! **Base Layout** The **Base Layout** is the base template that all other **S****teps** will be built on top of. Establishing common navigation buttons, and a consistent app background and style across all of your app steps can expedite the training and app-building processes. ![](https://cdn.document360.io/7c6ff534-cad3-4fc8-9583-912c4016362f/Images/Documentation/Intro%20to%20the%20Tulip%20App%20Editor_511473104%201.png) **Trigger** **Triggers** are groups of logic that are tied to an app event, such as step open, timer, widget interaction, etc. App builders can add triggers to **widgets**, **machines**, **devices**, **apps**, and **steps**. **Triggers** can contain **actions**, **transitions**, and **conditions**. **Tulip University** **Tulip University**is a free resource to guide Tulip users through learning the Tulip. 30+ courses cover everything from the basics to **Connector Functions**and **Edge Devices.** Enroll in your first course at [university.tulip.co](//university.tulip.co). **Widgets** **Widgets**are the elements that make up a specific **App Step.**Widgets can display information to users, collect user input, or trigger app logic. *Common widgets include: Interactive Tables, Number inputs, Machine attribute widgets, and more.* **Step** A view your users will see within an application. **Steps** can be viewed chronologically or in whatever order best fits your process. Steps can be grouped into **Step Groups**to manage and organize your app Steps. **Widget** **Widgets**are the elements that make up a specific **App Step.**Widgets can display information to users, collect user input, or trigger app logic. *Common widgets include: Interactive Tables, Number inputs, Machine attribute widgets, and more.* **Side Pane** **(Context Pane)** The**Side Pane**is the configuration pane on the right side of the **App Editor**where steps, apps, and widgets can be configured. **Triggers**can be added to adjust widget behavior.![](https://cdn.document360.io/7c6ff534-cad3-4fc8-9583-912c4016362f/Images/Documentation/Context%20Pane.png) **Trigger** **Triggers** are groups of logic that are tied to an app event, such as step open, timer, widget interaction, etc. App builders can add triggers to **widgets**, **machines**, **devices**, **apps**, and **steps**. **Triggers** can contain **actions**, **transitions**, and **conditions**. **Steps** A view your users will see within an application. **Steps** can be viewed chronologically or in whatever order best fits your process. Steps can be grouped into **Step Groups**to manage and organize your app Steps.