When you build your app with Zappter, the UI is clean, sleek, professional, and distinctive. But when you need to own a design that speaks your brand-language or want to be completely unique among others, Zappter has a tool to do that task, the Designer.
Admin > Customize > Content. Click to edit the app. Once in, select the Design icon.
Designer opens the content populated with Zappter standard UI elements or the UI elements of the selected template of your app without any design customizations.
Layers & Explorer: Represents each UI element of the app. The UI elements, Background, Header, Space, and Bottom Bar are common and mandatory. Others are those you have put onto your content to your needs such as e-commerce, category, etc.
Style properties: Here is where you set/customize the styling (CSS) of the UI element selected in the Layers & Explorer
Did you know that you also use right-clicks while customizing? To quicken your tasks, take advantage of right-click context menu options throughout the Designer.
Layers & Explorer
This represents each UI element of the screen. It represents two types of elements, 1) Common elements 2) Elements from your current design.
Common elements: Background, Header, Space, Bottom bar, because these are available for any design (mandatory)
Other elements: UIs such as your e-commerce, bookings, texts, or anything you have put on your content to satisfy your requirement.
UI elements get highlighted as you hover the mouse on them. Below are common UI elements discussed above:
Background & Header:
Space & Bottom Bar:
You can change the colors & fonts or any other attribute of any elements in the style properties. However, avoid using style properties to change the common UI elements' Colors & Fonts here, and follow the appropriate options discussed in the Header, Background, Bottom Bar section. It helps to change them dynamically at any time without going through redesigning or using UI customization.
The other four UI elements marked below are, Featured Products, Organic Limes, Passion Fruits, and -these are user-created content to the needs.
Steps to Customize a UI Element
Below, a standard UI of an 'article' UI element, highlighted in Layers & Explorer for further understanding of four crucial steps involved in the customization:
1. Set on the inheritance for the UI element. Organic Limes in this sample.
Favorite: Makes a UI element favorite
Inheritance: When you customize a UI element, say article, for instance; you want to make sure that all article UIs in the future will look like the one you customize. This is achieved by marking it with "inheritance" on (when the tiny pyramid-like button is yellow, meaning "inheritance" in on. When it's grey, you haven't enabled inheritance)
Reset / Restore: When you customize a UI element, there might be situations you will need to restart everything from a fresh standard UI. This is used for that purpose
Open button: For a few UI elements like category this option comes up since category UIs can contain other elements inside them
Expand button: Expands the UI element to reveal each of the objects inside it
2. Expand the parent UI element using the 'Expand' button, and you will see all child UI elemtns that make up this single UI element, the article in this sample case.
3. Change the style properties of any elements by highlighting it and setting the style on the right. In the below sample, 'picture' is a child UI element of parent element, Organic Limes.
To customize the objects, see the section, UI Style Properties that explains more on styling properties.
Example: Below is a simple style changes applied to change standard UI of the 'article' to customized design:
Article width 100% auto
Border radious 0 to 50%
Shadows blur 10 added 50% black colour
Photo width 60%
Photo margin from left 20%
Button container 100%
Button container margin from bottom 10px
4. When you're done with style customization, save changes. From here onward, whenever you add the UI element (article in our example) on your content, it will have a customized UI because of inheritance; it is to make sure consistency throughout the app.
UI Style Properties
This section is about using Zappter Designer to set CSS style attributes. If you're familiar with CSS styling, you may skip this section.
To simplify understanding, a few properties at a time are discussed, and then the next few.
The Layout - Hidden, Block, Inline: Keep as defaults
Alignment: Alignment of the selected object within its parent container
Size: The width and the height of the selected object within its parent container. Default is 50px for the picture of the category, for example. Below the width is set to 46% to take nearly half the size of the parent's width
But if you make 2 objects on the same row to more than 50%, it will push one of the objects below. This is because other objects within the container are also taking space
Make sure to change the widths of other objects so that all of them collectively come within 100% of the parent's width
Colors: Avoid setting colors with this option as Zappter provides a feature where you can set the colors dynamically. See the 'Colors & Font' section for more detail
Background image: Set a background image for an object, if that is applicable. Please make a note and change the below setting:
Position: Position of the object in relation to its parent container
Typography: You can change the fonts dynamically with Zappter, please see the colors & font section for more detail. If you assign a font here, it won't be effective if you change them dynamically as explained in the section
However, you can still set the font size and the other styling here.
Padding: This is the space between an object's content and its border
Margin: This is the space outside of the object or it's the space in between objects
Border Radius: This is the radius of the corners of the object. In the article example, the border-radius of the picture has been set 50% on all sides to make the picture look rounded
Reduce it to 0 (zero) to have sharp edges to look box.
Border: It adds a border to the object
Shadow: Giving a shadow effect to the selected object:
Upper Bar, Background, Bottom Bar
Customize the Upper Bar
Admin > Design > App Upper bar:
Tabs under Settings
Cart: Customize the shopping cart
Menu: Customize the menu
Tabs under design
Logo: Display/hide the logo
Customize the Background
Admin > Design > Colors:
Popups: Customize the app popups
Customize the Bottom Bar
Admin > Design > Bottom Bar:
Tabs under Settings
General: Display/hide the bar
Login: Customize the text and behavior of login screen
Register: Enable/disable self-registration for users
Forgot password: Customize the background image on forgot password screen
Profile: Customize the profile screen
Home Button: Customize the home button
Orders: Customize the orders icon in the bottom bar
Payments: Enable managing credit cards with the profile
QR-Codes: Enable/disable and customize QR Code option in bottom bar
Chat: Enable/disable and customize the chat behavior
Profile QR-Code: Enable/disable profile QR codes
Tabs under Design
Colors: Set the bottom bar color, and the color for default icon and active icon
Popups: Customize popups colors, and specify if they are modal
Fonts & Colors
When customizing the UI, generally, you only set the font size. And, then you select the font and its size in this option. It makes sure the simplicity and the freedom you have whenever you decide to change your font and font color without going through entire customization.
Admin > Design > Font:
Scan through the list of available fonts, and activate it. The simulator on the right, instantly reflects your changes
Add New Fonts
1. Click on the '+ New Font' button.
2. Either you can upload a saved web-font or convert the conventional font to a web-font using this option:
Newly added Web-Font:
Convert a regular font:
Disclaimer: 'Transfonter.org' is an external source. Below interface and the steps explain may not be the same.
Use the 'Add Fonts' button to add your regular font file
Use the 'Convert' button to convert it to Web-Font, it also downloads the font's zip file
Use the 'Upload Web-Font' option to upload the saved font file