LogoLogo
HomepageResellerPricingSign in
  • AppMachine
  • πŸ“ƒProduct Updates
  • πŸ‘·Build your app
    • Preview your app
    • App templates
    • App Settings
    • Update payment method
    • Cancel subscription
  • ❔General App Building FAQ
  • How to
  • 🧱Blocks
    • πŸ” Admin
    • πŸ“„Blank Page
    • πŸ“žCall
    • 🏒Contact
    • πŸ“Contact Us
    • 🧾Coupons
    • πŸ“ƒCustom Form
    • πŸ“§Email
    • πŸ—“οΈEvents
    • ❔FAQ
    • 🌐Facebook
    • πŸ•‘Hours
    • ℹ️Information
    • πŸ“£Intro
    • β˜•JavaScript
    • πŸ”’Lock
    • 🎧Music
    • πŸ“°News
    • πŸ“ƒPDF
    • πŸ—ΊοΈPOI
    • πŸ‘₯People
    • πŸ“·Photos
    • 🏬Products
    • πŸ“©Push Messages
    • πŸ“»Radio
    • β†ͺ️Submenu
    • 🐦Twitter
    • πŸ‘¨β€πŸ’»URLs
    • πŸ–₯️Web Page
    • πŸ“ΊVideo
    • πŸ“±WhatsApp
  • πŸ“ƒData
    • Appmachine Data
    • Delete (test) data from Custom Form
    • Google Sheets
    • Web services
  • πŸ–ŒοΈStyle your app
    • Theme
    • Home Screen
    • FAQ Style
  • 🎨Style your screens
    • Elements
  • Share your app
    • ✈️Publishing your app
      • Technical Setup Quick Start Guide
      • Update your app
      • Unpublish an app from the app stores
    • 🌐Web App Publishing
      • Hosting on custom domain
    • 🍏Apple App Store
      • iOS developer account
      • App Store Connect API keys
      • Link your app
      • New app record in App Store Connect
      • App privacy details
      • Edit Store information
      • Fix App publish issues
      • Push certificates
      • App Store Connect app status overview
      • App Store Review Guidelines
      • Publish app Unlisted
      • Accept updated License agreement
      • Apple App Store FAQ
      • iPad
      • Enterprise
        • Setup your Enterprise app
        • Create iOS Distribution Certificate
        • Create App ID
        • Create Mobile Provisioning Profile
        • Downloading and installing an Enterprise app
    • 🍐Google Play
      • Create a Google Developer Account
      • Setup your Android app
      • How to request a Google Maps API Key
      • Test your Android app before publishing to Google Play
      • Upload your Android app to Google Play Store for the first time
      • Update Android app (short)
      • Update an Android app (extended)
      • Data safety details on the Google Play Store
      • Sell your app in Google Play Store
      • Create Google merchant account
      • Force Store Update for your Android App
      • Authorise an additional user to your Google Play developer account
      • What if my app is suspended by Google?
  • App details
    • πŸ•΅οΈGoogle Analytics
      • Google Analytics setup overview
      • Setup iOS analytics
      • Setup Android analytics
      • Inviting a new Google Analytics user
    • πŸ”₯Firebase
      • Create Firebase project
      • Locate Firebase Server key
      • Renew Firebase Server Key
      • Register iOS app
      • Register Android app
      • Enable Cloud Messaging
      • Enable Google Analytics
      • Google Analytics via Firebase
    • πŸ“¨Push notifications
      • Setup Apple Push certificate
    • πŸ§‘β€πŸ€β€πŸ§‘User management
      • Create Apple Sign In key
      • Setup Azure Active Directory
      • Create Facebook App ID Secret
    • 🐦Twitter API keys
    • πŸ”Privacy policy
    • πŸ‘©β€πŸ”§Your Account
      • Account Settings
      • Account FAQ
      • Payment FAQ
    • πŸ“±Admin CMS
  • Developers
    • πŸ‘©β€πŸ’»JavaScript
      • Develop locally
      • SDK
        • Core
        • JS Data
        • Media
        • Navigation
        • Notification
        • User
      • CLI
        • CLI Token and Secret
        • Errors
          • CONFIG_PROPERTIES_INVALID
          • CONFIG_VALUES_INVALID
          • ENTRY_FILE_NOT_FOUND
          • OUTPUT_DIRECTORY_IS_EMPTY
          • OUTPUT_DIRECTORY_NOT_FOUND
          • TOKEN_SECRET_NOT_PROVIDED
          • TOKEN_SECRET_NOT_VALID
      • Migrate from old Custom JS
    • πŸ’»Web services
Powered by GitBook
On this page
  • Navigation styles
  • New Navigation styles
  • Menu, Text, Icon, & Icon Background Settings
  • Top Image
  • Design

Was this helpful?

  1. Style your app

Home Screen

Your Home page is a user's first impression of the app. AppMachine has made styling this screen very easy.

PreviousThemeNextFAQ Style

Last updated 2 years ago

Was this helpful?

In the Content tab, you can configure the home screen of your app by selecting the Blue Home block in the list of blocks. As the color settings of the homescreen might differ from the generic theme of your app, you see a Design tab on the right side of the screen to configure the colours and styling for the Home screen. If you want to change the styling of the rest of your app, select the green Theme block at the top of the list of blocks.

Navigation styles

Designing a home screen starts with selecting the best Navigation style for your app. Once you've chosen a template and generated your first app, you will see the settings for the blue Home block. This block controls the settings and design of the first screen of your app. In the Settings tab on the right, you can choose a top image, a navigation style, and usually some further styling options depending on the navigation style you've chosen. In the screenshot, you can see which navigation styles we have available in the platform.

Run through the available navigation styles to select the style that best fits your app's needs. For the business app above, here are the different navigation styles compared to one another.

New Navigation styles

We have added new navigation styles for NEW apps. With existing apps you will only see the new navigation styles for the Submenu block.

There are five menu types, each with different layouts, and the option to choose no menu layout.

  1. Tab bar

  2. Tabs

  3. Sliding

  4. List

  5. Icons

You can switch between layouts and choose from different options, like show icons or show block labels. The tab bar layouts also have the option to be detached from the bottom of the screen.

Menu, Text, Icon, & Icon Background Settings

Depending on the selected navigation style, you may be able to further adjust the design of the selected menu. For example for the advanced icon menu you can upload your own icon backgrounds.

To change the color settings of your icons in the Icons menu, navigate to Settings > Items and change these two settings to your desired colours.

Top Image

Once you've chosen and perfected your navigation style, go ahead and add a top image. A logo for your event or business would do nicely here.

Design

Design settings for your Home block can be changed in the Design tab. Design settings wil differ significantly from those in the rest of your app. If that is the case, this is the section to change those settings. For more information about the general design settings of your app, please read: Theme

πŸ–ŒοΈ
Your app's blue "Home" block
See which navigation styles are available in the app.
Upload you own icon backgrounds
Change the icon and text colors of the Icons menu.