Building with Sections
Learn about the faster way to build your Adalo app with Sections.
What are Sections?
Sections are pre-designed, fully responsive user interfaces that allow you to dramatically speed up how fast you build screens in Adalo. Each Section contains several Components that are already positioned and styled to look great together. With over 150 Sections to pull from, you can mix and match Sections to create your own custom designs.
Finding a Section
To find a Section, simply hit the + button at the top left and click on the Sections tab. Sections are organized into categories so you can easily find what you’re looking for, or you can search for keywords like “calendar” or “gallery” and you’ll see related Sections.
Adding Sections to Your Screen
To add a Section to your Screen, drag it out like a component. When you drop it onto your screen, it will automatically expand to the full width of the screen. Note that Sections are designed specifically to be full-width. If you have a side navigation, the Section will automatically snap to the edge of the side navigation instead of to the left edge of the screen.
After you place a Section on your screen, you will need to set up each component inside the section to have your content instead of the placeholder content. For text components, type in your own text or use Magic Text. For lists, forms, etc., connect them to the Collection that you want to use and make sure you set up each item inside the list or form to have the data you want to see.
Section Containers
Each Section has an inner content area and spacing around the outer edges. We call the inner content area a “Container” because you add components to it and it holds them like a box. It’s important to understand how to select the various parts of a Section:
If you click on any Component inside the Container, the Component will be selected
If you click inside the Container where no Component is present, the Container will be selected.
If you click on the spacing outside the Container but inside the Section, the Section will be Selected. Click and drag here to move the entire Section.
The Section bounding box has a solid line and the Container bounding box has a Dashed line, so it’s easy to tell them apart.
Using the Spacing Handles in a Section
With a Container inside a Section selected, you’ll see some extra lines pop up around the edges of the container. Click and drag these to adjust the container width and height as well as the spacing between the container and the outer edges of your Section.
Using the handles on the left and right makes it easy to adjust any Section you drag onto your screen to fit the width of your existing content. So if you drag a Section in, and everything looks wider than your other content, simply select the container and drag one of the handles on the left or right. The container and everything inside it will adjust to your desired width.
Sections can also have minimum and maximum widths. If you find that dragging the handles "stops" at a certain point, it is probably because of the min/max width settings.
If you want to set your Container size to precise dimensions or change the minimum / maximum widths, select the Container, then click on the Layout tab in the sidebar. Inside the Advanced menu, you’ll find inputs for setting precise values for your Container width and height.
Adding Background Colors and Images
You can add background colors or images to both the Section itself and the Container. With either the Section or Container Selected, go under the Styles accordion and change “Background Type” to either “Background Color” or “Background Image”. You can also set rounding, borders, and shadow styles here to totally customize the look and feel of your Section.
Stacking Sections
To build out your screen one Section at a time, starting at the top and working your way down. Here are some tips to help you make the most out of Sections:
Important: Sections should never overlap. As your screen changes size, Sections may grow taller or shorter. In order for this to work correctly, make sure your Sections don’t overlap each other.
Sections may not look right when they’re placed side-by-side. They were designed to look consistent when stacked vertically.
When you add a Section to a screen in responsive mode, make sure to check the other screen sizes and move the Section into place on Mobile, Tablet, and Desktop before adding more Sections.
Moving Sections
When you’re moving a Section around, it’s very important to make sure that you are moving the Section and not the content inside of the Section. If you select a list for instance that’s inside of a Section, you could be dragging that out of your Section unintentionally. To make sure that you have the Section selected, look in the sidebar when you select something. Notice how it says “Section” above the title of what you have selected.
Building Your Own Sections
Can’t find the Section you need? In the Sections tab, there’s an Empty Section that allows you to create your own. This works a bit like a Group: you can drag any components you like into it, and it will hold them together. Here are some tips for building your own Sections:
If you’re building a responsive app, you’ll want to read up on how our responsive layout system works before building your own Sections.
Closely examine some non-empty Sections to see how they’re built. Select Components inside of them and look at the Layout tab to see the settings. This will help you when you need to create similar layouts.
Unless your screen is very simple, try to avoid making your entire screen one giant Section. Also avoid making things too complicated and having 50 Sections per screen. We find that the average screen should be made up of around 3-4 Sections.
Never put the following inside Sections:
Components set to “Sticky while scrolling” should never be placed inside a Section. Sticky Components need to be free of any parent objects that affect their position. One example would be the “Action Button” component, which is always set to sticky. .
Our built-in Top Navigation, Side Navigation, Bottom Navigation, and App Bar components should not be placed inside Sections. These should always live on their own and not inside other parent components.
Sections cannot be nested inside of other Sections. They should always be stacked vertically and not overlapping in any way.
Last updated
