Adalo Resources
Sign Up for Adalo
Adalo Resources
Adalo Resources
  • 🚀Getting Started
  • 🎨Design
    • Designing Your App
      • Definitions and Terms
      • Creating an App
      • Using the Screen Size Switcher
      • Building with Sections
      • Alignment Tools
      • Using the Layout Tab
        • Screen Size Visibility
        • Sticky While Scrolling
        • Shared Layout Settings
        • Custom Layout Settings
      • Grouping Components
      • Responsive Navigation
        • Responsive Side Navigation
          • Side Navigation
          • Title
          • Menu Style
          • Menu Items
          • Bottom Button
          • Profile Section
        • Responsive Top Navigation
          • Navigation Bar
          • Title
          • Menu Items
          • Additional Navigation
          • Profile Image
      • Responsive Design Best Practices
    • Branding
      • Colors
      • Fonts
    • Create Component States
    • Preview Your App
    • Design Versions
    • Additional Design Resources
    • Migrating Legacy Apps
    • Legacy Builder
      • Create Component Containers
      • Positioning Components
      • Arranging and Grouping Components
      • Preview your App (Legacy Builder)
  • 🎬Actions
    • Action Basics
    • Links
    • Change Data
    • Notifications
      • Request Notification Permission in Your App
      • Trigger Push Notifications
      • Testing Notifications
      • Troubleshooting Notifications
        • Notifications Not Working on Android
        • Notifications Not Working on iOS
        • Notifications Not Working on PWA
    • Conditional Actions
    • Permissions
    • App Authentication
  • 🛠️Screens and Components
    • Screens
      • Deep Linking
      • Deep Linking With Data
      • Deep Linking Share Action
      • Deep Linking Redirection & Fallbacks
    • Screen Navigation
    • Component Basics
    • Magic Text
      • Logged-In User vs. Current User
      • How to Format Dates and Numbers
      • Sums, Counts, Averages, Min and Max
      • How to Create a Custom Math Formula
        • Complex Calculations
    • Conditions and Filtering
      • Filtering in Adalo
      • Using Conditions in Adalo
    • Changing a Component's Visibility
    • Lists
      • Sorting and Filtering Lists
      • Creating Custom Lists
      • Lists of Lists
    • Buttons
    • Toggles
    • Forms
    • Simple Components
      • Image Component
      • Text Input
      • Webview Component
        • Troubleshooting Webview
          • Webview URL not loading in Adalo App
          • Webview crashing in Native App
    • Table Component
    • Video Component
    • Marketplace Components
      • How to Add Components from the Marketplace
      • Digital Purchases for In-App Purchases
      • Sign in with Google
      • Sign in with Apple
      • Maps
      • Bar Charts and Line Graphs
      • Pie Chart
      • Google Admob
        • Troubleshooting Admob
          • Ads Not Displaying in Native
      • Calendar
      • Progress Bar
      • Star Rating
      • Stopwatch
      • Slider
      • Lottie Files
      • YouTube
      • Audio Player
        • Troubleshooting Audio Player
          • Apple App Rejection: UIBackgroundModes key
      • Deck Swiper
      • Markdown Renderer
      • Signature
      • Stripe
        • Stripe Payment
        • Stripe Subscription
        • Stripe Connect Marketplace
          • Set up your Stripe Account for Stripe Connect
          • Allow Merchants to Connect their Stripe Account to your App
          • Stripe Connect
          • Stripe Marketplace Payment
        • Configuring Stripe Test Mode
        • Stripe Custom Actions
          • Get Stripe Subscription Data
          • Get Stripe Customer Data using Email Address
        • Legacy Stripe Components (Deprecated)
          • Marketplace Payments
            • Set up your Stripe Account for Stripe Connect
            • Allow Merchants to Connect their Stripe Account to your App
            • Configure Consumer Payment to go to Merchants' Accounts
          • One-time Card Payments
          • Subscription Payments
  • 🧱Feature Templates
    • Browse, Purchase, and Manage Classes
      • Overview — Screens, Database, Layout Settings, Use Cases
      • Category List Screen
      • Classes List Screen
      • Class Details Screen
      • Purchase Screen
      • Congrats Screen
      • Admin Manage Clinics Screen
      • Admin Transactions Screen
      • Admin Create Clinic & Admin Edit Clinic Screens
    • Browse, Purchase, and Manage Events
      • Overview — Screens, Database, Layout Settings, Use Cases
    • Browse Classes
      • Overview — Screens, Database, Layout Settings, Use Cases
      • Category List Screen
      • Classes List Screen
      • Classes Details Screen
    • Classes Admin Dashboard
      • Overview — Screens, Database, Layout Settings, Use Cases
      • Admin Manage Clinics Screen
      • Admin Transactions Screen
      • Admin Create Clinic & Admin Edit Clinic Screen
    • User Chat
      • Overview — Screens, Database, Layout Settings, Use Cases
      • Conversations List Screen
      • Chat Screen
      • New Chat Modal Screen
    • Forum
      • Overview — Screens, Database, Layout Settings, Use Cases
    • Group Messaging
      • Overview — Screens, Database, Layout Settings, Use Cases
      • Messaging Screen
      • Edit Message Modal Screen & Edit Channel Modal Screen
      • Search Messages Screen & Channels Screen
    • Account Settings
      • Overview — Screens, Database, Layout Settings, Use Cases
      • Account Settings Screen
      • Success Modal Screen & Delete Account Confirmation Screen
    • Appointment Booking
      • Overview — Screens, Database, Layout Settings, Use Cases
      • Coaches Screen
      • Time Slots Screen
      • Book Appointment Screen
      • Coach Admin Screen
      • Edit Session Screen
    • Assign Tasks
      • Overview — Screens, Database, Layout Settings, Use Cases
      • My Tasks Screen, Team Tasks Screen, Completed Screen
      • Task Detail Screen
      • Edit Task Screen
    • Agree and Sign
      • Overview — Screens, Database, Layout Settings, Use Cases
      • Terms Screen
      • Agree & Sign Modal Screen
      • Signatures Admin Screen
    • Announcements & Notifications
      • Overview — Screens, Database, Layout Settings, Use Cases
      • Notifications Screen
      • Notify All & Notify One Screens
    • User Profile & Account Settings
      • Overview — Screens, Database, Layout Settings, Use Cases
      • Setup Step 1 Screen
      • Setup Step 2 Screen
      • My Profile Screen
      • Additional Screens
    • Browse Users
      • Overview — Screens, Database, Layout Settings, Use Cases
      • Browse Members & Profile Screen
    • Browse Dates
      • Overview — Screens, Database, Layout Settings, Use Cases
      • Time Slots & Workout Screens
    • Browse Home Listings
      • Overview — Screens, Database, Layout Settings, Use Cases
      • Listings Screen
      • Listing Detail Screen
      • Modal Image Gallery Screen
    • Image Carousel
      • Overview — Screens, Database, Layout Settings, Use Cases
      • Screens
    • Image Gallery Modal
      • Overview — Screens, Database, Layout Settings, Use Cases
    • User Admin Dashboard
      • Overview — Screens, Database, Layout Settings, Use Cases
    • Workout Assignment
      • Overview — Screens, Database, Layout Settings, Use Cases
    • Social Media Feed
      • Overview — Screens, Database, Layout Settings, Use Cases
    • Store with Shopping Cart
      • Overview — Screens, Database, Layout Settings, Use Cases
    • Inventory Management
      • Overview — Screens, Database, Layout Settings, Use Cases
    • Video Gallery & Upload
      • Overview — Screens, Database, Layout Settings, Use Cases
    • Restaurant Ordering
      • Overview — Screens, Database, Layout Settings, Use Cases
  • 🗃️Database
    • Database Property Types
    • Relationships
      • One-to-Many vs. Many-to-One
      • Many-to-Many
    • The User Collection
    • Collection Permissions
    • Importing Records from a CSV File
    • Download your Collection as a CSV File
    • Location
      • Getting Your Google API Key
      • Estimating Google API Usage
      • The Location Property Type
      • Location in Forms and Inputs
      • Location Magic Text and Formatting
      • Getting the User's Location
      • Latitude, Longitude, and Special Formulas
      • Comparing Locations
      • Troubleshooting Location Features
  • 🪄Settings
    • Copying vs Cloning your App
      • How to Copy and/or Delete an App
      • Cloning Apps and Making Apps Cloneable
  • 🚀Performance
    • Builder Performance Tips
    • Optimize App Performance
      • Image Optimization
      • Five Tips for Improving Your Adalo App Performance
  • ✍️Publishing Apps
    • Publishing to the Web
      • Publish to Adalo Subdomain
      • Publish to Custom Domain
      • Troubleshooting Domain Setup
        • Custom Domain is Not Secure
        • Domain Could Not be Verified
        • Error: Not Found
    • Publishing to the Google Play Store
      • Create Your Google Developer Account
      • Create your Firebase Project
      • Register Android App & Download Config File
      • Generate & Download Private Key
      • Get your Build file
      • Create New Google Play Listing
      • Upload your Build file to Google Play Listing
      • Finalize Listing and Release App
      • Troubleshooting Android Release
        • Google Play rejected the app due to data safety issues
        • Error: Android App Signed with Wrong Key.
        • Error: Version Code 'xxx' has already been used. Try another Version code.
        • Error: Package Name already exists in Google Play.
        • Error: Upload a valid app bundle.
        • Error: Existing Users Can't Upgrade to New App Bundles.
    • Publishing to the Apple App Store
      • Create Your Apple Developer Account
      • Setup Annual Payment for your Apple Developer Account
      • Create Your Apple Bundle ID
      • Create Your Adalo ‘App-Specific Password’
      • Start your Build in Adalo
      • Add Users to Your App Store Connect Team
      • Add Users to Testflight
      • Creating Screenshots for the App Store
      • Privacy and App Tracking Transparency
      • Troubleshooting iOS
        • Build Error: You have reached the maximum number of certificates
        • Build Error: You have already reached the maximum allowed number of keys for this service
        • Build Error: Distribution certificate has expired
        • Build Error: Asset Validation Failed - Invalid App Store Icon
        • App Rejected: Add Permission Text to Your iOS Build
        • Delivery warning during the app submission process: ITMS-90899
        • iOS Build Not Showing in Testflight
        • Apple Two-Factor Authentication Error
    • Publishing to the Web (Legacy Apps)
    • Uploading .APK (Legacy)
    • Publishing FAQs
    • Troubleshooting
      • Build Stuck in Queue
  • ▶️Videos
    • Getting Started
    • Full Walkthrough
    • Working with Data
    • Designing your Database
    • Custom Lists
    • Changing Component Visibility
    • Forms
    • Ordering & Payments
    • Math & Custom Formulas
    • Chat
  • 👩‍🏫Tutorials
    • How to Use Keyboard Shortcuts
    • How to Embed Video or Audio (YouTube, Vimeo, SoundCloud)
    • How to Share a Database Between Apps
    • How to Create an Empty State
    • How to Create a Search Bar
    • How to make a list your users can filter
    • How to Create a Modal/Popup Window
    • How to create a "Favorite" button (Legacy Builder)
    • How to add an Image to an App Bar
    • How to send Scheduled Push Notifications
    • Start Maps Navigation in Your Adalo Apps Using Google Maps, Apple Maps, or Waze
    • Generating Map Previews in Your Adalo App Using the Google Static Maps API
    • Special Links: Email, Text (SMS), and Phone
    • How to have a Dropdown Menu in a Form
    • How to Setup a Shopping Cart with Payments
    • How to set up a Public Profile screen for Users
    • How to Allow Users to Follow Others
    • How to have a Form Automatically Set a Relationship
    • How to add Chat to your App
    • How to Create Multi-Sided Apps
    • How to Add an "Add to Calendar" Button for Events
    • Forwarding Domain to Root Address
    • How to Create Temporary User Avatars
    • How to Set Up a Social Media List
    • How to Play Your Spotify Podcast in Adalo’s Audio Player
  • 🧩Integrations
    • The Adalo API
      • Collections API
      • Send Push Notifications via API
    • Xano
      • Setup Your Xano Workspace
      • Connect Xano with Private Swagger
      • Connect Xano to an Adalo App
      • User Signup, Login, Authentication
      • Google Sign In with Xano Database
      • Other Collections
      • Working with Data Types in Adalo and Xano
      • Counting Records with Xano
      • Lists and Pagination
      • Xano Response
      • Xano Tips and Tricks
      • Troubleshooting
    • Accessing your Record ID
    • Custom Actions
      • ✨Power Your App with ChatGPT
    • External Collections with APIs
      • Magic Text in External Collections
    • Airtable
      • Connecting to Airtable
      • Adding/Deleting Properties
      • Displaying Images
      • Working with Lists
        • Images In Lists
        • Filtering Airtable Lists
        • Magic Texts in Lists
        • Limiting the Number of List Items
        • Sorting Airtable Lists
      • Working with Forms
        • Airtable Dropdown fields & Validation
      • Working with Attachments, Images and Airtable relationship Fields
      • Relationships & Airtable Collections
      • Debugging
    • DreamFactory
    • Zapier
    • Make (Formerly Integromat)
      • Create a PDF from a record in Adalo
      • Notification in Slack when a new user registers in your Adalo app
      • Send verification email to new sign ups
      • Send a verification SMS to new sign ups
      • Send a file to Google Drive from Adalo
      • Send new files from a Google Drive folder to an Adalo collection
      • Use Google Vision for OCR an image and store the text results in an Adalo record
    • IAPHUB
    • Mixpanel
    • Troubleshooting the Adalo API
      • List inside of a List not loading
      • Error Codes
  • ⚙️Adalo Account
    • Account
      • Updating Email and Password
      • Enabling Developer Mode
    • Team Members
      • Add Team Members to Your Adalo App
    • Apps
    • Usage and Billing
      • Billing, Invoices, and Payments
      • App Actions Dashboard
    • Domains
      • Resetting SSL
  • ❓FAQs
    • General Questions
    • What can Adalo do?
    • Adalo Pricing: FAQs
    • Adalo Account: FAQs
    • Adalo Subscription Add-Ons
    • Working with an Adalo Freelancer
    • Adalo Experts
    • Adalo Affiliate Program
    • Adalo Pricing: Legacy Accounts
  • 🤔Troubleshooting
  • 📚Additional Resources
    • Adalo App Academy
      • Introduction to Apps
      • Strategy and Business
      • Design
      • Build
      • Launch & Iterate
      • Freelancers & Agencies
      • All Courses
    • App Development Cost Calculator
    • Hire an Adalo Expert
    • Adalo Forum
  • 📖Glossary
Powered by GitBook
On this page

Was this helpful?

  1. Design
  2. Designing Your App

Building with Sections

Learn about the faster way to build your Adalo app with Sections.

PreviousUsing the Screen Size SwitcherNextAlignment Tools

Last updated 1 year ago

Was this helpful?

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.

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.

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 . 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.

🎨
use Magic Text
Sections, containers, and components
Resizing the padding in a Section