L'onglet « Paramètres » regroupe au sein d'Otto de nombreuses options pour configurer votre service. Dans ce tutoriel nous allons nous intéresser à la partie « Gérer l'apparence de mon site ». Ici vous retrouverez les différentes options qui permettent de personnaliser l'aspect visuel de votre plateforme, notamment les éléments d'Interface Utilisateur (ou Éléments UI) tels que : logo, favicon, couleurs, boutons, flèches, format par défaut et visuels génériques.
1. Sur la page d’accueil d’Otto, commencez par cliquer sur l’onglet « Paramètres ».
2. Cliquez ensuite sur « Gérer l'apparence de mon site ».
3. Vous arriverez sur le premier onglet « Global ».
La configuration que vous choisirez ici pour vos éléments sera celle proposée par défaut sur le reste de votre back-office, mais vous aurez toujours la possibilité de modifier l'affichage de ceux-ci au cas par cas par ailleurs.
4. La première section vous permet de télécharger le Logo principal de votre service. Il est conseillé de télécharger une version « horizontal » du logo et en HD, car celui-ci apparaîtra notamment sur le header de votre plateforme.
Le logo doit être télécharger au format .png avec une chaîne alpha (le fond transparent). Il se peut que vous deviez ajouter des marges en haut et en bas du logo, vous pourrez consulter les consignes ici, Page 3.
5. C'est dans la deuxième section que vous téléchargerez le Favicon. Les spécifications techniques sont indiquées en dessous.
Le favicon apparaît notamment dans l'onglet du navigateur.
6. Dans la section Couleurs, vous aurez la possibilité de paramétrer les 3 couleurs par défaut de votre service. Pour savoir comment celles-ci seront utilisées, vous pouvez consulter le détail de chaque emplacement sur la droite.
Pour choisir la couleur, il suffit de survoler le rectangle avec votre souris pour faire apparaître le pop-up. Ensuite, cliquez sur la couleur de votre choix, ou entrez le code hexadécimal (#FFFFFF) correspondant à la couleur de votre charte. ATTENTION, ce code doit être composé de "#" + 6 caractères afin qui soit correct.
Vous pourrez modifier ces couleurs plus tard si besoin dans l'Animation.
7. Pour le Fond de site, vous pouvez modifier indépendamment le fond du Tunnel de souscription du Reste de votre site. Vous avez le choix entre un fond clair ou un fond sombre.
Pour rappel, le Tunnel de souscription est la partie où l'utilisateur crée son compte, choisit son abonnement, et procède au paiement de celui-ci.
8. La section Bouton d'action vous permet de configurer davantage l'apparence des différents boutons que les utilisateurs peuvent actionner sur votre plateforme : les boutons de lecture sur les pages contenu/série, le bouton « Je m'abonne », ou encore le bouton « Je crée mon compte » dans le tunnel de souscription.
Pour ces boutons, vous pouvez choisir le radius, c'est-à-dire si les coins du bouton sont ronds ou carrés. Vous pouvez également personnaliser l'intitulé du bouton de lecture et de bande-annonce sur votre site.
* Pour rappel, les couleurs de ces boutons dépendent des couleurs Primaire et Secondaire que vous avez paramétrées à l'étape 6.
9. Les Flèches de défilement sont celles qui permettent de faire défiler vos rangées de contenus.
Dans cette section vous avez la possibilité de choisir entre flèches simples, flèches avec fond ou point de défilement, avec les couleurs correspondantes. Finalement, si vous avez choisi la version avec fond, vous pouvez définir la couleur et le radius de cette dernière.
10. La section Barre de progression permet de choisir la couleur de la barre qui s'affiche lorsque la lecture d'un contenu a commencé.
Elle apparaît notamment sur les fiches de vos contenus/séries, ainsi que sur le bloc "Reprise de lecture" sur votre page d'accueil.
11. La section Format par défaut, vous permet de paramétrer le format par défaut de vos contenus sur votre plateforme. Vous avez le choix entre le format « Poster » et « Vignette ». Ce choix impactera notamment la Page Catalogue, les Fiches contenus/séries et l'affichage des résultats de recherche sur votre service.
* Nous verrons plus tard, dans la partie "animation" qu'il est possible d'animer votre Page d'accueil en créant des rangées avec d'autres formats de visuels.
Vous pouvez également choisir les métadonnées que vous souhaitez afficher sous chaque contenu. Cliquez sur le bouton « Ajouter une métadonnée », et sélectionnez dans le menu déroulant une métadonnée que vous avez créée auparavant (cf Section Paramètres > Gérer mes métadonnées). Ensuite vous pourrez mettre en forme, en choisissant la taille et l'affichage du texte (gras, italique).
Enfin, vous avez ici la possibilité d'afficher la durée de vos contenus sur le visuel, en cochant la case « Afficher la durée du contenu sur les visuels ».
12. La dernière section concerne les Visuels génériques de votre plateforme. Ces visuels apparaîtront sur votre service lorsqu''un emplacement de visuel sera vide. Nous vous recommandons d'y intégrer une image sobre, qu'elle soit unie, avec votre logo ou avec un placeholder simple.
Dans le prochain tutoriel, nous aborderons l'onglet Header & Footer.