Configurer l'apparence globale
Paramètres
Écrit par
Andrew
publié le
20.1.2022
Symbole horloge
15
min

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 ».

Console Otto : page d'accueil, onglet Paramètres entouré dans le menu de gauche



2. Cliquez ensuite sur « Gérer l'apparence de mon site ».

Console Otto : page Paramètres, entrée Gérer l'apparence de mon site entourée


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.

Console Otto : Gérer l'apparence de mon site, onglet Global et section Mon logo avec le logo Shadowz




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.

Console Otto : section Mon logo de l'onglet Global, logo Shadowz chargé

5. C'est dans la deuxième section que vous téléchargerez le Favicon. Les spécifications techniques sont indiquées en dessous.

Console Otto : section Mon favicon, favicon S rouge chargé et spécifications de format et de taille

Le favicon apparaît notamment dans l'onglet du navigateur.

Onglet de navigateur du site shadowz.fr affichant le favicon S rouge de Shadowz



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.

Console Otto : section Couleurs, sélecteur de couleur HEX ouvert sur Ma couleur principale

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.

Console Otto : section Fond de site, fonds Clair ou Sombre pour le tunnel de souscription et le reste du site

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.

Tunnels de souscription Shadowz sur fond sombre et QueerScreen sur fond clair, étape Création de compte



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.

Console Otto : section Bouton d'action, intitulé du bouton de lecture, radius et aperçu du bouton Bande-annonce

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.

Console Otto : section Flèches de défilement, apparence Flèches + fond, couleur des flèches, couleur de fond et radius


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.

Plateforme Shadowz : rangées de vignettes avec flèches de défilement rouges à fond rond



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é.

Console Otto : section Barre de progression, couleur #C40000 et aperçu du lecteur

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.

Plateforme Shadowz : bloc Reprendre la lecture, posters avec barre de progression rouge



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.

Console Otto : section Format par défaut, choix Poster ou Vignette et case Afficher la durée du contenu

* 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.

Console Otto : format Vignette, métadonnée Catégories sous le titre et barre de mise en forme du texte

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.


Console Otto : section Visuels génériques, images de remplacement Shadowz pour chaque format de visuel


Dans le prochain tutoriel, nous aborderons l'onglet Header & Footer.

RETOUR à la home
Un terme n'est pas clair pour vous ?
J'explore le Lexique Otto
Mascotte de Otto, pieuvre avec un tableau blanc