In order to choose the look and feel of an app, Twixl offers the concepts of 'grid styles' and 'item styles' to determine how your content is presented to app users.
Grid styles are assigned to Collections and can be different for different collections. Item Styles are assigned to Content Items and they will define how content items will be displayed in the selected grid for the collection your content item is in.
You can access these interface design elements via Platform > Design.
1. Grid Styles
The grid style determines how the content of a collection in browse mode will be displayed on a 'grid' in your app. In this grid, each content item can be displayed using a particular size. Check the screenshot below of a grid that uses 6 columns (a 'grid style'), and where each item on that grid spans a specified number of columns. Different collections in your app can have different grid styles applied to them. Learn more about Grid Styles.
2. Item Styles
The appearance of the content item cells in your browse pages will be determined by the Item Style selection. Item Styles are defined in Design > Item Styles where you can add new item styles by clicking on '+' and selecting a template from the list. You can later adjust the style to match your requirements.
As you can see, a couple of template examples are:
- A title and a subtitle for an article
- A title on an image background
- An image to the left or right of a title & subtitle
- And many more …
After selecting, you can continue to further adjust your Item Style.
3. Other interface elements
In the design section, you can find more elements that can enhance the user experience:
- App Interface: where you define how the overall elements (like navigation bar, search page...) in your app will look like.
- Background Images: in addition to defining a background color for your collection in browse view, you can also use an image as the background for the thumbnails of your content items.
- Custom Fonts: Twixl also supports the use of custom fonts in your app so the fonts you use in the item styles match your corporate style or the look and feel you want.
Make sure to install the Twixl app on your mobile devices before you start working on grid and item styles. That way you can immediately check how changes to your design look like in the app on your device. More information about the Twixl app here.