Merci d'avoir choisi Spintoppr pour mettre en place le nouveau site web de votre club de tennis de table! Ceci est un bref guide pour apprendre à travailler avec Prismic. Prismic est l'outil utilisé dans le backend de Spintoppr pour gérer les textes et les images affichés sur votre site web.
Votre site Spintoppr est composé de plusieurs pages. Chaque page a sa propre structure: la page d'accueil est structurée différemment des autres pages. C'est ce que nous appelons la structure de la page.
Des exemples d'éléments structurels sont les bannières, les colonnes d'une page, l'alignement des images par rapport au texte, l'utilisation de couleurs et de tailles de caractères, ...
La mise en place de la structure d'un site web est une question complexe. Le site web doit donner une impression de calme, l'utilisation des couleurs doit être cohérente et le site web doit s'afficher correctement sur tous les types de résolutions (ordinateurs de bureau, ordinateurs portables, tablettes, smartphones).
La structure du site web est définie dans Spintoppr et, à quelques exceptions près, elle est statique. Cela signifie que cette structure ne peut pas être modifiée par vous. Cela peut sembler contraignant, mais cela vous évite de faire des ajustements qui pourraient affecter la cohérence de votre site Spintoppr ou qui feraient que votre site ne serait soudainement pas beau sur un smartphone.
Ce que vous pouvez bien sûr modifier, c'est le contenu des pages. Le contenu se réfère à tous les textes et images utilisés dans votre site web Spintoppr: sponsors, nouvelles, informations sur le club, déclaration de confidentialité, composition du comité, ...
Personnaliser le contenu de votre site web Spintoppr est exactement l'objet de ce manuel. Dans le prochain chapitre, nous vous montrerons comment il est facile de changer les éléments de contenu sur le site web.
Les textes et les images ne sont pas gérés dans Spintoppr lui-même, mais dans un système distinct appelé Prismic. Pour modifier le contenu, vous devez donc d'abord naviguer dans Prismic.
Pour ce faire, allez dans le panneau de configuration de Spintoppr et cliquez sur le bouton "Contenu du site Web". Vous verrez alors apparaître un écran de connexion:
Cliquez sur le bouton violet "Log in with my email" et saisissez l'adresse e-mail et le mot de passe que vous avez reçus par e-mail.
Veuillez noter qu'il ne s'agit pas des mêmes données de connexion que pour Spintoppr lui-même.
Après avoir réussi à vous connecter, vous serez dirigé vers le tableau de bord de Prismic et serez prêt à modifier le contenu. Mais avant cela, un mot sur les types de contenu.
Un type de contenu dans Prismic est un nom collectif pour les éléments de contenu qui partagent les mêmes propriétés. Les exemples de types de contenu sont les suivants: Nouvelles, Activité, Sponsor, Identité du club, ...
Il existe 2 types de contenu utilisés dans Spintoppr: les types de contenu uniques et les types de contenu multiples.
Les types de contenu uniques ne comportent qu'un seul élément de contenu. Aucun nouvel élément de contenu de ce type ne peut être créé en plus de l'élément de contenu existant. En général, ces types de contenu sont représentés un à un sur une page dans Spintoppr. Les types de contenu unique dans Spintoppr sont les suivants:
Pour plusieurs types de contenu, plusieurs éléments de contenu peuvent être créés. Ces éléments de contenu sont ensuite listés dynamiquement (et souvent triés) dans Spintoppr. Les types de contenus multiples dans Spintoppr sont les suivants :
Nous allons maintenant voir comment nous pouvons modifier et ajouter du contenu de manière efficace. Immédiatement après vous être connecté à Prismic, vous accédez au tableau de bord. Il se présente comme suit:
Le tableau de bord affiche une liste d'éléments de contenu. Chaque nouvelle, événement, sponsor, ... est représenté par un élément de contenu.
Pour chaque élément de contenu, le tableau de bord affiche le statut, le titre, le type de contenu (voir ci-dessus) et la date de la dernière modification.
À partir du tableau de bord, vous pouvez facilement:
C'est simple: utilisez la barre de recherche en haut à droite de l'écran pour rechercher un élément de contenu. Le terme recherché doit figurer dans le titre ou le contenu d'un élément de contenu pour que celui-ci apparaisse dans les résultats.
Si vous ne voulez voir que les éléments de contenu d'un certain type, vous pouvez utiliser le filtre "Type" en haut à gauche de l'écran. Par exemple, choisissez ici "Nouvelle" pour n'afficher que les nouvelles. Cela facilite souvent la recherche.
Depuis le tableau de bord (ou depuis les résultats d'un filtre ou d'une recherche), cliquez sur un élément de contenu pour l'ouvrir et le modifier immédiatement. Vous accéderez ainsi à la page détaillée de l'élément de contenu:
À partir de cette page détaillée, vous pouvez maintenant personnaliser l'élément de contenu.
En fonction de son type, un élément de contenu comporte un certain nombre de champs qui peuvent être personnalisés. Par exemple, une activité (voir l'exemple ci-dessus) possède les champs URL SEO, nom, date, heure et contenu.
Modifiez l'élément de contenu en ajustant les champs. Dès que vous effectuez des ajustements, la ligne verte en haut de l'écran devient orange:
Cela signifie que des modifications ont été apportées à l'élément et qu'elles n'ont pas encore été enregistrées. Pour les enregistrer, cliquez sur le bouton Save en haut à droite de l'écran.
IMPORTANT! Vos modifications sont maintenant enregistrées dans Prismic mais ne sont pas encore publiées sur le site web. Vous pouvez enregistrer des modifications intermédiaires si vous travaillez sur un élément de contenu mais que vous ne souhaitez pas encore le soumettre au site web.
Pour publier un élément de contenu, après l'avoir sauvegardé, cliquez sur le bouton violet Publish en haut à droite de l'écran.
Pour créer un nouvel élément de contenu (d'un type de contenu multiple) dans Prismic, cliquez sur l'icône du crayon vert dans le tableau de bord. Un menu s'ouvre alors, dans lequel vous pouvez choisir les types de contenu pour lesquels vous souhaitez créer un élément.
Sélectionnez le type de contenu souhaité. A partir de là, la procédure est la même que pour la personnalisation d'un élément de contenu (voir ci-dessus).
La personnalisation de la plupart des champs de Prismic est évidente. Dans cette section, nous discutons de quelques champs qui nécessitent un mot d'explication supplémentaire.
Les champs de texte enrichi sont des champs dans lesquels vous pouvez non seulement taper du "texte brut", mais aussi mettre en forme ce texte. En voici un exemple:
Dans l'exemple ci-dessus, "Contenu" est un champ de texte riche. Lorsque vous personnalisez ce champ, vous voyez apparaître en haut de l'écran plusieurs options de formatage que vous reconnaîtrez dans votre traitement de texte favori.
Les options de formatage sont les suivantes:
Pour personnaliser une image, passez votre souris sur l'image en question. Trois boutons apparaissent alors, vous offrant les fonctions suivantes (de gauche à droite):
En cliquant sur le premier bouton, vous accéderez à la médiathèque de Prismic. Vous pouvez y télécharger des documents et des images de votre ordinateur ou de votre portable pour les utiliser dans des éléments de contenu.
Pour ajouter un fichier, cliquez sur le bouton "Upload media" et naviguez ensuite jusqu'aux photos ou documents que vous souhaitez télécharger. Vous pouvez en sélectionner plusieurs à la fois.
Une fois les fichiers chargés, choisissez le fichier que vous souhaitez utiliser et cliquez sur le bouton violet "Ajouter à la page".
Certaines pages de votre site Spintoppr sont constituées de blocs qui se répètent un nombre variable de fois. Dans Prismic, vous reconnaîtrez ces blocs à leur fond gris clair et aux icônes permettant de modifier ou de supprimer la position d'un tel bloc.
Dans l'exemple ci-dessus (du type de contenu "Heures d'ouverture"), chaque élément répétable se compose d'un jour de semaine et d'heures d'ouverture.
À droite de chaque bloc répétable, des flèches permettent de réorganiser les éléments et une corbeille permet de supprimer un élément de la liste.
Au bas de la liste des cubes répétables, vous trouverez le bouton Add item in group qui vous permet d'ajouter un nouvel élément au bas de la liste.
Dans la plupart des cas, nous constatons que les clients sont rapidement opérationnels avec Prismic. Si vous rencontrez un problème ou si vous avez besoin d'aide, n'hésitez pas à nous contacter!