You can personalize your app's design using our Mobile App Builder, allowing you to design it according to your preferences. You can:
- Edit your mobile app Theme Explorer, color palette, and typography.
- Customize the design of your mobile screens by adding Sections and Widgets (Profile and Community screens are for preview only).
- Create onboarding screens to introduce your app features and functionality.
In this article, we will guide you through the process of customizing your mobile app design, focusing on sections, and widgets within your mobile screens, and the development of onboarding screens.
To locate the Mobile App Builder, navigate to Mobile App → Design → Edit Mobile App.
Mobile App Builder Overview
You can tailor your mobile screens to your unique style and specific requirements using our Mobile Builder. Enjoy the freedom to create and customize screens by adding sections, and widgets, adjusting colors, fonts, and more. Feel free to create and edit as many screens as necessary. While you can customize the More option, note that the Profile screen and the Community screen are for preview only.
1. Screen tab: You can change the name of the screen by clicking on the Screen Properties.
2. Edit tab: You can:
- Undo changes.
- Redo changes.
- Copy all sections of the current editing screen.
- Paste all sections that were previously copied on the current editing screen.
- Clear content (all the widgets) on the screen.
3. Design Tab: Here, you can edit the theme explorer, colors, typography, and screen layout.
You can find more information on the mobile app theme explorer in our dedicated article.
4. App tab: You can:
- Configure your app's navigation by choosing App Navigation.
Under Main screens, you can select the Home screen for your learners, or you can use different home screens based on user tags to create unique home screens tailored to their needs. - Edit the app language by selecting App language.
You can select your app's locale if you wish to auto-translate system messages that do not appear on the list.
- Exit the Mobile App Builder.
5. Add tab: You will be able to add a new screen.
6. Help tab: You can find helpful resources such as how to build your branded mobile app and contact Support.
7. AI Assistant: Utilize the AI assistant to generate or enhance text content for your mobile apps. It's important to mention that this feature is currently in beta mode.
You can also Preview the changes you are making in real time. The changes, after saving, will take place in the mobile app immediately. The end-users that have already downloaded and installed the app need to restart the app to see the applied changes.
Mobile app Sections
Screens are customizable, by adding sections and widgets similar to our website builder.
In addition, to ensure that courses are displayed in your mobile apps under the Course Section Templates → Course Cards, the courses must be added as in-app purchases. However, it is important to note that your users will be able to access the courses they are already enrolled in without requiring them to be added as in-app purchases.
You can find more information on how to add in-app purchases for iOS here, and for Android here.
Course Catalogue (Course Cards) Section
After adding the Course Catalogue (Course Cards) section, hover over and click on Edit course cards. The editing side form will appear. In the side form that appears for the Course Catalogue (Course Cards) section, you can edit a variety of settings:
→ Show courses: Initially, you can select which courses to show on your Course Cards:
- All
- My courses (shows the courses a student is enrolled in, and the order is unique to each user and based on the last visited course)
- My courses - completed
- My courses - Ongoing
- Not Enrolled (it can prompt users to purchase courses they haven't purchased yet)
- Newest
- Popular
- Free
- With certificate
- By Author
- By Category
- In Bundle
- Custom List (select custom courses to display)
- Search term
→ Section Layout: You can change the layout and choose the number of the displayed cards.
→ View All: You can enable this button for all the courses to be displayed.
→ Load More: You can enable this button for more courses to be displayed.
→ Load More Appearance: You can edit the design of this specific button.
Favorite Courses
There is also an option for a user to add a course to their favorite by clicking on the heart icon. The favorites will appear under Favorite Courses in the Profile screen.
Section Visibility
You have the option to change the visibility of each section to everyone, specific tagged users, or even nobody, if needed. You can learn more about tags, in this article.
Mobile app Widgets
You have the option to incorporate widgets into existing sections as well, like text, labels, buttons, images, counters, and more!
Variables in Sections and Widgets
You also have the option to incorporate variables into your pages, allowing for customized views tailored to each user. For instance, you can modify the initial screen to display text containing variables that dynamically incorporate the user's name.
Onboarding Screens
You can incorporate slides in the Onboarding section to acquaint users with your app's features and functionalities. It is recommended that you use the Onboarding screens, as they help users better understand your content.
Hover over the three dots on the Onboarding screen and click on Onboarding settings to start editing (you can also duplicate or delete a screen).
You can also find the Onboarding screen settings by hovering over the authoring toolbar under the title of the Onboarding screen in the middle of your screen:
You can enable:
→ Onboarding screens to be visible to your users.
→ Skip button for the onboarding screens (Note: If you decide to enable the skip button, your users will be able to continue directly to your app without checking out your onboarding slides).
→ Visibility for already logged-in users.
→ Navigation to sign up or login page after completing the onboarding.
In addition, you can add and rearrange onboarding screens on the left sidebar. After choosing an onboarding screen, you can then change the image, title, and description.
Useful Tips!
- Always be clear and precise!
- Make sure that you use the image of each slide to the fullest.
- Attract your users' attention to the visuals of the onboarding screen.
- Provide information about your app's functionality and/or purpose.
Preview
You can Preview the changes you are making in real-time. After saving, the changes will take effect in the mobile app immediately. End-users who have already downloaded and installed the app need to restart the app to see the applied changes.
