Twixl Publisher consists of several components. This Getting Started guide is intended to help you understand the basic concepts of Twixl Publisher and to learn how to create your first Twixl app.
2. Add an app
Let’s add your first app to the Twixl platform.
- On the Twixl platform, Log in
- Click ‘Add Application’ (top right corner)
Now, you can select* what kind of app you want to add:
- Getting Started App: Select this one if you are looking at Twixl for the first time and we will show you some cool features.
- Kiosk App: Mimics a traditional kiosk with different magazines.
- New App: confident enough to start from scratch with your own design?
Next, select whether you want to publish the app in a testing or production environment. Let’s go for safe and select ‘Development’.
The last step is to identify your app.
- Give it an ‘Application Name’: How do you want to search for it?
- A ‘Bundle Identifier’: this is a reverse DNS name. More info on what this is under the text field on the platform.
- If you wish you can add some metadata and an app icon. You can also provide other people access to your application. These last fields are not mandatory and we will skip them here.
- Click ‘Add’ and your first app will appear on the Twixl platform!
* We understand our sample apps look finger licking good and you want to use these as your own. Note however that usage is limited to test purposes.
4. Design the interface of your app
The way your app will look will be determined in this section.
If you have used one of our 2 sample apps then all the work has been done for you already. Let’s walk through each of these items below…
The dropdown menu lists a lot of options. Here are some examples that have an impact on the look and feel of your app.
1. Grid Styles
- Select ‘Grid Styles’ from the dropdown menu.
- Select ‘Default’
- Now adjust the displayed items. You can use this Grid Style ‘Default’ later on in your app. Learn more about Grid Styles here.
- Metadata: can be used for referencing afterwards.
- Structure: adds the number of columns in your grid style. E.g. a grid of 4 columns will position your collections 4 in a row.
- Padding: will insert more space between your collections and the bezel of the device.
- Spacing: defines the space between each of your collections.
- Colors: be creative and give your background and text a distinct unique color.
- Background Image: by default the background will be a single coloured frame. You can, however, also select a background image that you've uploaded.
- Allowing horizontal swiping and displaying scrollbars are the last options.
About Grid Styles:
Grid styles determine how your Browse Grids will display the collections in your app on different devices. You can define different Grid Styles for tablets, phones or the browser. Learn more about Grid Styles here.
2. Item Styles
The appearance of the cells in your browse grids can be determined in 'Item Styles'. While a 'Grid Style' applies to a collection, an 'Item Style' applies to a content item.
- Open the dropdown menu
- Select ‘Item Styles’
- Click on ‘Default’
The sidebar on the left determines the options in the right side bar. The image in the middle provides a preview of how the content item will be displayed. The image is built up by layers of image and text and you can design these layers to give it a unique appearance.
Again, these Item Styles can be different for tablets, phones or the browser.
To learn more about 'Item Styles', check this article.
Integrating the styles in your app
Now these default Grid and Item Styles have been defined, you can apply them the collections in your app.
- Go back to Home of your app
- At the right of Root Collection, select ‘edit’
- In ‘Styling’ select ‘Default’ in the dropdownmenu next to 'Grid Style’ and ‘Item Style’
This means you can have all kind of unique Grid and Item Styles and give them distinctive names so you can select them in this section too.
About Root Collection and Hamburger Menu…
Consider the Root Collection as the home screen of your app. The Hamburger Menu collects the menu options in your app. You can activate or deactivate this menu.
WHAT'S NEXT?
If you master these basic skills, you can dive further into the world of Twixl Publisher. Don't forget that this site contains a lot of extra information, covering more advanced topics as well!