Carousel Tutorial
-
Upload
my-app-editor -
Category
Technology
-
view
144 -
download
0
Transcript of Carousel Tutorial
![Page 1: Carousel Tutorial](https://reader036.fdocuments.in/reader036/viewer/2022062523/58eea6061a28ab03268b4683/html5/thumbnails/1.jpg)
To start editing your app, make sure you are on the ‘App’ view of the platform. This is located in the middle of your header bar.
![Page 2: Carousel Tutorial](https://reader036.fdocuments.in/reader036/viewer/2022062523/58eea6061a28ab03268b4683/html5/thumbnails/2.jpg)
Go to the ‘features’ tab on the navigation panel to start customising out your content.
![Page 3: Carousel Tutorial](https://reader036.fdocuments.in/reader036/viewer/2022062523/58eea6061a28ab03268b4683/html5/thumbnails/3.jpg)
Once the ‘Features’ tab has been selected the app panel will appear with a list of the features that are already applied to your app. On the top right of the panel there is a ‘Manage’ button, click this to access the features menu where you can pick and choose which features you would like on your app.
![Page 4: Carousel Tutorial](https://reader036.fdocuments.in/reader036/viewer/2022062523/58eea6061a28ab03268b4683/html5/thumbnails/4.jpg)
Once pressed, your feature library will appear.
![Page 5: Carousel Tutorial](https://reader036.fdocuments.in/reader036/viewer/2022062523/58eea6061a28ab03268b4683/html5/thumbnails/5.jpg)
Press the ‘add’ button on the Carousel feature to add it to your app. Press ‘Close’ once you’ve finished.
![Page 6: Carousel Tutorial](https://reader036.fdocuments.in/reader036/viewer/2022062523/58eea6061a28ab03268b4683/html5/thumbnails/6.jpg)
Select the ‘Carousel’ tab now located on your app panel.
![Page 7: Carousel Tutorial](https://reader036.fdocuments.in/reader036/viewer/2022062523/58eea6061a28ab03268b4683/html5/thumbnails/7.jpg)
For a detailed description of what the ‘Carousel’ feature does hover over the question mark button
![Page 8: Carousel Tutorial](https://reader036.fdocuments.in/reader036/viewer/2022062523/58eea6061a28ab03268b4683/html5/thumbnails/8.jpg)
Click the customise button to change the name or the icon
of your carousel feature.
![Page 9: Carousel Tutorial](https://reader036.fdocuments.in/reader036/viewer/2022062523/58eea6061a28ab03268b4683/html5/thumbnails/9.jpg)
To chose an icon or to upload your own custom icon press
the ‘Browse’ button.
![Page 10: Carousel Tutorial](https://reader036.fdocuments.in/reader036/viewer/2022062523/58eea6061a28ab03268b4683/html5/thumbnails/10.jpg)
Choose an icon from the list provided, or to upload your own icon press the ‘Upload custom icon’ tab.
![Page 11: Carousel Tutorial](https://reader036.fdocuments.in/reader036/viewer/2022062523/58eea6061a28ab03268b4683/html5/thumbnails/11.jpg)
To upload your custom icon drag and drop your 60 x 60 pixel image into the blue area, or press browse to find your icon manually. Press
set when you have chosen your icon.
![Page 12: Carousel Tutorial](https://reader036.fdocuments.in/reader036/viewer/2022062523/58eea6061a28ab03268b4683/html5/thumbnails/12.jpg)
If you would like a background for your carousel feature upload a 640 x 996 pixel image
![Page 13: Carousel Tutorial](https://reader036.fdocuments.in/reader036/viewer/2022062523/58eea6061a28ab03268b4683/html5/thumbnails/13.jpg)
Press ‘Save’ once you have finished customising your features name and icon.
![Page 14: Carousel Tutorial](https://reader036.fdocuments.in/reader036/viewer/2022062523/58eea6061a28ab03268b4683/html5/thumbnails/14.jpg)
Choose what item type you would like from either feature, content or website
![Page 15: Carousel Tutorial](https://reader036.fdocuments.in/reader036/viewer/2022062523/58eea6061a28ab03268b4683/html5/thumbnails/15.jpg)
If you choose ‘Feature’ choose the tab you want to link to this item. Add an image or drag and drop it into the blue dotted area
to upload it
![Page 16: Carousel Tutorial](https://reader036.fdocuments.in/reader036/viewer/2022062523/58eea6061a28ab03268b4683/html5/thumbnails/16.jpg)
As seen here, The News feature was selected and an image added.
![Page 17: Carousel Tutorial](https://reader036.fdocuments.in/reader036/viewer/2022062523/58eea6061a28ab03268b4683/html5/thumbnails/17.jpg)
If you chose 'Content', select the feature you’d like to show content from.
![Page 18: Carousel Tutorial](https://reader036.fdocuments.in/reader036/viewer/2022062523/58eea6061a28ab03268b4683/html5/thumbnails/18.jpg)
In this example the News Feature was selected. This automatically picks up the content added onto that
tab.
![Page 19: Carousel Tutorial](https://reader036.fdocuments.in/reader036/viewer/2022062523/58eea6061a28ab03268b4683/html5/thumbnails/19.jpg)
If it’s a website you’re going to add, please add it into the Website tab
![Page 20: Carousel Tutorial](https://reader036.fdocuments.in/reader036/viewer/2022062523/58eea6061a28ab03268b4683/html5/thumbnails/20.jpg)
Press 'Save' once you’ve finished
![Page 21: Carousel Tutorial](https://reader036.fdocuments.in/reader036/viewer/2022062523/58eea6061a28ab03268b4683/html5/thumbnails/21.jpg)
Keep adding Carousel by clicking on the ‘Add’ button and following the previous steps. You may also move them around, by using the ‘Change
Order’ button.
![Page 22: Carousel Tutorial](https://reader036.fdocuments.in/reader036/viewer/2022062523/58eea6061a28ab03268b4683/html5/thumbnails/22.jpg)
Preview AppTo view your new app feature download the Putti Preview App and navigate to your Carousel tab.
![Page 23: Carousel Tutorial](https://reader036.fdocuments.in/reader036/viewer/2022062523/58eea6061a28ab03268b4683/html5/thumbnails/23.jpg)
The items will scroll by automatically after a few seconds
![Page 24: Carousel Tutorial](https://reader036.fdocuments.in/reader036/viewer/2022062523/58eea6061a28ab03268b4683/html5/thumbnails/24.jpg)
Tap each item and you’ll be taken to the Feature and Content that you earlier pointed this item to.