Download - Links Tutorial
![Page 1: Links Tutorial](https://reader036.vdocument.in/reader036/viewer/2022062412/58a20b271a28ab40098b5ae9/html5/thumbnails/1.jpg)
To start editing your app/website feature, you can be on either the ‘App’ or ‘Web’ View located on the top Header Bar.
![Page 2: Links Tutorial](https://reader036.vdocument.in/reader036/viewer/2022062412/58a20b271a28ab40098b5ae9/html5/thumbnails/2.jpg)
Access the ‘Features’ tab on the App Panel
![Page 3: Links Tutorial](https://reader036.vdocument.in/reader036/viewer/2022062412/58a20b271a28ab40098b5ae9/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: Links Tutorial](https://reader036.vdocument.in/reader036/viewer/2022062412/58a20b271a28ab40098b5ae9/html5/thumbnails/4.jpg)
Select the ‘Links’ feature. ‘Add’ the feature and then move it to where you would like it to be placed on your app panel.
Press ‘Close' once you’ve finished.
![Page 5: Links Tutorial](https://reader036.vdocument.in/reader036/viewer/2022062412/58a20b271a28ab40098b5ae9/html5/thumbnails/5.jpg)
Select the ‘Links’ tab now located on your app panel.
![Page 6: Links Tutorial](https://reader036.vdocument.in/reader036/viewer/2022062412/58a20b271a28ab40098b5ae9/html5/thumbnails/6.jpg)
For a detailed description of what the ‘Links’ feature does hover over the question mark button
![Page 7: Links Tutorial](https://reader036.vdocument.in/reader036/viewer/2022062412/58a20b271a28ab40098b5ae9/html5/thumbnails/7.jpg)
Click the customise button to change the name or the icon
of your links feature.
![Page 8: Links Tutorial](https://reader036.vdocument.in/reader036/viewer/2022062412/58a20b271a28ab40098b5ae9/html5/thumbnails/8.jpg)
To chose an icon or to upload your own custom icon press
the ‘Browse’ button.
![Page 9: Links Tutorial](https://reader036.vdocument.in/reader036/viewer/2022062412/58a20b271a28ab40098b5ae9/html5/thumbnails/9.jpg)
Choose an icon from the list provided, or to upload your own icon press the ‘Upload custom icon’ tab.
![Page 10: Links Tutorial](https://reader036.vdocument.in/reader036/viewer/2022062412/58a20b271a28ab40098b5ae9/html5/thumbnails/10.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 11: Links Tutorial](https://reader036.vdocument.in/reader036/viewer/2022062412/58a20b271a28ab40098b5ae9/html5/thumbnails/11.jpg)
Press ‘Save’ once you have finished customising your features name and icon.
![Page 12: Links Tutorial](https://reader036.vdocument.in/reader036/viewer/2022062412/58a20b271a28ab40098b5ae9/html5/thumbnails/12.jpg)
To start adding links click the ‘Add’ button.
![Page 13: Links Tutorial](https://reader036.vdocument.in/reader036/viewer/2022062412/58a20b271a28ab40098b5ae9/html5/thumbnails/13.jpg)
Select the Type of link you would like to upload; Email, Phone, Website or Map.
![Page 14: Links Tutorial](https://reader036.vdocument.in/reader036/viewer/2022062412/58a20b271a28ab40098b5ae9/html5/thumbnails/14.jpg)
Enter the caption and then add in the required fields (depending on the type of link you pick). If you choose map,
enter in your address into the ‘Map’ section.
![Page 15: Links Tutorial](https://reader036.vdocument.in/reader036/viewer/2022062412/58a20b271a28ab40098b5ae9/html5/thumbnails/15.jpg)
Choose to keep the default icon, pick from the Preset list or add your custom icon by dragging and dropping your 140 x140 pixel
image into the blue dotted area.Hit ‘Save’ once you’re finished
![Page 16: Links Tutorial](https://reader036.vdocument.in/reader036/viewer/2022062412/58a20b271a28ab40098b5ae9/html5/thumbnails/16.jpg)
Keep clicking the ‘Add’ button to insert more links.
![Page 17: Links Tutorial](https://reader036.vdocument.in/reader036/viewer/2022062412/58a20b271a28ab40098b5ae9/html5/thumbnails/17.jpg)
You’ll be able to change the order of the links, by clicking on ‘Change Order’ on the top left. Move the links around using the
buttons on the left and drag and drop them to their new placing; then click ‘Update New Order’.
![Page 18: Links Tutorial](https://reader036.vdocument.in/reader036/viewer/2022062412/58a20b271a28ab40098b5ae9/html5/thumbnails/18.jpg)
Along each link, you’ll see an ‘Edit’ and ‘Delete’ button. Press ‘Edit if you would like to make changes to your link, or
to remove it completely press the ‘Delete’ button
![Page 19: Links Tutorial](https://reader036.vdocument.in/reader036/viewer/2022062412/58a20b271a28ab40098b5ae9/html5/thumbnails/19.jpg)
Preview AppTo view your new feature for your app download the
Putti Preview App and navigate to your links tab.
![Page 20: Links Tutorial](https://reader036.vdocument.in/reader036/viewer/2022062412/58a20b271a28ab40098b5ae9/html5/thumbnails/20.jpg)
Email exampleAfter you tap the ‘Email Us’ section, you’ll be able to
type in your email and then send.
![Page 21: Links Tutorial](https://reader036.vdocument.in/reader036/viewer/2022062412/58a20b271a28ab40098b5ae9/html5/thumbnails/21.jpg)
Webpage exampleWhen you press the website link you will be taken
directly to the url.
![Page 22: Links Tutorial](https://reader036.vdocument.in/reader036/viewer/2022062412/58a20b271a28ab40098b5ae9/html5/thumbnails/22.jpg)
Phone exampleTap the ‘Call Us’ section to make a call instantly.
![Page 23: Links Tutorial](https://reader036.vdocument.in/reader036/viewer/2022062412/58a20b271a28ab40098b5ae9/html5/thumbnails/23.jpg)
Preview WebsiteIf you have chosen to have a responsive website then
make sure you have completed the ‘Layout’ section of the CMS (under ‘Web’ View). Click ‘Preview’ on the top header
bar to view the Links tab on your website.
![Page 24: Links Tutorial](https://reader036.vdocument.in/reader036/viewer/2022062412/58a20b271a28ab40098b5ae9/html5/thumbnails/24.jpg)
Preview WebsiteOnce you’ve accessed your website navigate to your links tab. Your links tab will appear in different places depending on the layout or template you’ve chosen.
![Page 25: Links Tutorial](https://reader036.vdocument.in/reader036/viewer/2022062412/58a20b271a28ab40098b5ae9/html5/thumbnails/25.jpg)
Preview WebsiteClicking on a website link will redirect you to that
website. You can even list social media sites on the Links tab.
![Page 26: Links Tutorial](https://reader036.vdocument.in/reader036/viewer/2022062412/58a20b271a28ab40098b5ae9/html5/thumbnails/26.jpg)
Preview WebsiteIf you've entered an address, clicking on that link will
point you to that exact location on Google Maps.
![Page 27: Links Tutorial](https://reader036.vdocument.in/reader036/viewer/2022062412/58a20b271a28ab40098b5ae9/html5/thumbnails/27.jpg)
Preview WebsiteLastly, if it's a telephone number, then clicking on it will prompt you to make a call via your phone dialler or by
other calling applications if you've enabled them on your phone settings.