Modifying Your App’s Theme

If your app is created and the content is added…
How do you change its look and feel? 

I.    Main navigation 
In Main navigation/Layout, click one of the available layouts. 

Screen Shot 2017-03-23 at 10.07.02

You can configure different parameters in the settings, depending on the layout. For example, you can choose the Drawer layout for your starting screen, show icons and text, or icons only.

Screen Shot 2017-03-23 at 10.07.02Or, if you select the Grid layout, you can change the number of icon columns/rows, grid alignment, and scrolling style.

Screen Shot 2017-03-23 at 10.21.56

II.   Home screen background
Scroll down to:
  • Change the home screen background [Note: this option is not available in the Drawer layout]
  • Change how the parallax effect (a technique that adds depth to screen animation) is applied

Screen Shot 2017-03-23 at 10.41.03

III.  Icons
Click on the Icons tab to change your icons.

 

Screen Shot 2017-03-23 at 10.47.26

You can change any icon in your navigation. Choose between icons provided in the builder or upload your own.

Screen Shot 2017-03-23 at 10.49.10

IV.  Screens layout
You can also change the layout of each of your screens. For any of your menu items, click on the layout and pick the one you prefer.

Screen Shot 2017-03-23 at 10.56.37

V.   Color scheme
Now, let’s configure your theme and color scheme to match your brand. Click on Style in the main menu. Now click Change Theme.

Screen Shot 2017-03-23 at 12.13.45

Choose between various predefined themes. Fast preview different mock ups before you apply a theme to your app. Once you are ready to select your theme, click on Apply Theme.

Screen Shot 2017-03-23 at 12.15.45

Fine tune your theme. Change the basic color scheme, or the colors and fonts of elements such as buttons, separators, navigation bar… You do this by clicking Customize theme in the Style menu.

Screen Shot 2017-03-23 at 12.16.49

VI. Preview
Click Preview here in the preview panel to see the app in the browser.

Screen Shot 2017-03-23 at 12.17.57Screen Shot 2017-03-23 at 12.24.16Screen Shot 2017-03-23 at 12.28.56