This article is outdated. 

We have moved our support docs to a new location. 

Please click here to go to our new support docs.
http://docs.tadabase.io


Layouts allow you to build out a page structure that is consistent across pages in your app. Your app may have multiple Layouts each with a number of pages that utilize them. In this article, we'll introduce the Page Builder functionality with Layouts, and how to get started with customizing your layouts. 



When a new app is created without starting with a Template, the app is loaded with a Default Layout and Default Landing Page. So, let's begin by taking a look at the Default Layout in the Page Builder.


  1. The Add Layout button allows you to add a new Layout
  2. Along with your pages, your Layouts will be listed here. From this list, you may copy or delete a Layout. It should also be noted that any page nested beneath a Layout will adopt the configurations of the given Layout. 
  3. Similar to pages, there are tabs for each of your Layouts. The Content, CSS, JavaScript, and Settings tabs each have different functions. Read ahead for further information on each tab.


Let's briefly discuss the above three portions of our Layouts in the Page Builder.



When we click the Add Layout button, a very simple one-step process is initiated in order to create your new Layout. Once you provide a name for your new Layout, you are ready to customize it as needed. 


Another way that you can create an additional layout is to copy by selecting the desired Layout to be copied from the Page Builder list. The process is the same with the differences being the predefined name and the preservation of the properties of the original Layout.


In the same area as copying, you may delete a Layout. Doing this does not delete pages assigned to this Layout, but will leave all pages without any Layout assigned. If you are working on assigning Layouts or moving pages from one Layout to another, you may do this on your page's Settings tab.




Now, let's take a look at the different tabs for Layouts in the Data Builder. There are 4 tabs, content, CSS, JavaScript, and Settings. We'll start with the default tab, Content. Pictured below is the default Layout.


  1. This is where you can add to the structure of your Layout and alter the viewing settings of the Page Builder. The Add Row and Add buttons allow you to choose from a list of defined rows or specify your own column sizes for your row. The rightmost button enables fullscreen mode which allows you to expand the Layout editor to fit the size of your browser.
  2. This is a row including a column with a Menu component. This type of row is a configurable row that can include a number of Layout components. 
  3. The Page Container is a non-deletable row that always exists in your Layouts. This is the space within the Layout that each assigned page appears within.



Components that can be added to your Layout differ from the set of components that you can add to your pages.





Layouts, or Layout Templates, allow you to build a page structure that will be consistent across multiple pages of your app. So suppose you want certain pages in your app to have your logo and a menu in the header, you would build this layout and then assign that layout to whichever pages you wish. There are several types of reusable layouts you can choose from, including system components such as menus, login buttons, sign up buttons, headers, and more. etc., to apply to multiple pages on your app.


In the builder, Pages are organized by their layouts, which is why layouts are listed in bold in the list of Pages and Layouts.


To add a new layout, start by clicking on Pages, select + Add and choose Layout Template. Give your layout a name and click Save:



Once you've added the layout, add the system components you'd like to appear on the page as part of the layout, such as a menu, header, footer, login button, sign up button, etc. 


Once you've done that, you can then go ahead and assign the layout to the pages of your choosing. To assign a layout to a page, click on the page you'd like to assign the layout to, click Settings, choose the layout, and then click Save:






Say for example we added a layout with a menu and a footer and applied this layout to our page. This is the before preview of how our page will look prior to adding the layout:


Before:


And here's what our page will look like after we added the layout with a menu and footer:


After:

 



*In the builder, Pages are organized by the Layouts they are assigned to, which is why Layouts are listed in bold with Pages listed underneath the Layouts they're assigned to.


For example, any page that is assigned to our Default Layout will appear below the layout titled Default

If a page does not have a layout assigned to it, the page will appear in the bottom of the list below No Layout: