Comment créer des pages personnalisées (Custom Pages)

Les pages personnalisées sont des pages vierges conçues pour créer tout type de contenu (CGU, FAQ, Guide sur l'utilisation de la communauté, etc…) que nous ne pouvons pas créer sur d'autres chaînes/sections de la plateforme, uniquement depuis l'admin.

Types de pages personnalisées (Custom Page)

Une page personnalisée ne doit pas être confondue avec une chaîne/groupe, car aucune interaction ne peut être faite sur ce type de page. Leur but est d'héberger et de présenter des informations et de les rendre accessibles à la communauté.

Voici les types de pages que tu peux créer avec une page personnalisée :

  • Une page d'accueil qui explique comment utiliser la communauté
  • Conditions d'utilisation
  • Règles de la communauté
  • Politique de confidentialité
  • CGU du concours
  • FAQ
  • iFrames… etc.

À quoi ça ressemble

172.png      

173.png

174.png

175.png

176.png

 

Créer ta "Custom Page"

Il y a deux options :

Option 1

Les admins Brand Communities peuvent créer des pages personnalisées pour toi, si ce sont des pages complexes, telles que :

  • FAQ
  • Pages d'atterrissage entièrement conçues

Maîtriser HTML/CSS/JS sera nécessaire pour créer et modifier l'une des pages personnalisées listées ci-dessus. Les admins Brand Communities seront en mesure de créer et d'éditer ces pages pour toi.

 

Option 2

Pour les pages simples impliquant uniquement du texte, telles que :

  • Conditions d'utilisation
  • Règles de la communauté
  • Politique de confidentialité
  • CGU du concours… etc.

Merci de suivre les étapes ci-dessous :

  • Tout d'abord, assure-toi d'avoir ton document sur Word ou Google Docs.
  • Travaille sur la mise en page de ton document comme tu veux qu'elle apparaisse sur la communauté :
    Ajuste la taille et la couleur de la police (si la plateforme a une police personnalisée, tu devras télécharger la police et l'installer sur ton ordinateur).
    Arial, Calibri, Helvetica, Open Sans, Roboto fonctionneront bien, donc tu n'as pas besoin d'installer de nouvelles polices si tu en as une de celles-ci.

👉 Si tu as besoin d'installer une nouvelle police, merci de suivre les étapes ci-dessous. Si ce n'est pas le cas, tu peux sauter cette partie.

  • Télécharge la police au format .oft
  • Double-clique sur le fichier
  • Clique sur "Install"
  • La police sera prête à l'emploi sur Word/Google Doc
  • Redémarre le logiciel Word/Google Doc

177.png

178.png

  • Ajuste l'espacement des lignes (pour que le texte et les paragraphes soient homogènes)
  • Assure-toi que la page n'a pas un fond blanc mais transparent
  • Style le texte en gras/italique
  • Rends la couleur du texte uniforme
  • Ajoute de la couleur aux liens
  • Ajoute des bordures, des contours si besoin

👉 Sur Word, clique sur 'File', puis 'Save As' et enregistre le document au format .html
👉 Sur Google Doc, tu peux exporter le document au format .html

179.png

  • Ouvre le fichier pour accéder au code :

Le moyen le plus simple est de faire un clic droit sur ton fichier et de sélectionner 'notepad', cela ressemblera à ce qui suit.

180.png

  • Tu peux également l'ouvrir depuis un navigateur web :
    Lorsque la page s'ouvre, fais un clic droit n'importe où sur la page
    Choisis "Inspect" en bas de la liste

181.png

  • Les outils de développement vont s'ouvrir ; maintenant tu es sur l'onglet “Elements”
  • Fais un clic droit sur la ligne de code qui commence par “<html lang ..
  • Choisis “Edit as HTML”

182.png

  • Appuie sur Ctrl + A sur ton clavier pour sélectionner tout le code.
  • Ensuite, appuie sur Ctrl + C pour le copier.
  • Va dans Admin → Rocket → Custom Pages → Add a Custom Page dans le coin supérieur droit.
  • Donne un titre à ta page.
  • Ensuite, clique sur “Source”

183.png

  • Colle le code

184.png

  • Sur ton clavier, appuie sur Ctrl + F, cherche a:link dans la page.
  • Ajoute .WordSection1 devant a:link et a:visited pour éviter que tous les liens sur la plateforme ne soient soulignés.

185.png

  • Tu peux maintenant cliquer sur Save et publier la page personnalisée.

Comment créer ton canal type "Custom Page"

Vous pouvez créer une channel "landing page" pour rediriger vers une URL externe, les FAQ ou Term & Conditions c'est uniquement en footer links du menu sou forme de custom page classique.

Pour créer un canal type custom page, vous pouvez suivre les étapes ci-dessus: 

  1. Connectez-vous à votre compte Admin back office.
  2. Cliquez sur "Config", puis sélectionnez "+Add a channel" en haut à gauche de la page.
  3. Sous "Channel Type", choisissez "Custom pages".


  4. Ajouter un parent channel (facultatif) : Si vous choisissez d'ajouter un parent channel, vous pourrez sélectionner le channel parent pour celui que vous êtes en train de créer. Seuls les channels de type "category feed" peuvent être sélectionnés comme parent channels.
  5. Ajoutez un titre, une icône de channel et un sous-titre.
  6. Ajoutez une bannière (facultatif) : Vous pouvez télécharger une bannière en version desktop et mobile, qui seront affichées dans l'en-tête de votre page.
  7. Définissez la visibilité de votre channel.
  8. Enregistrez vos modifications.

Pour plus d'informations sur la création de channels, consultez cet article : Comment gérer les activités et les groupes de discussion (chaînes) – Centre d'aide

Comment ajouter des images dans ta "Custom Page" ?

Si tu as une ou plusieurs images dans la page personnalisée, tu devras les héberger en ligne.

Pour ce faire, va dans l'onglet "Images" (Paramètres > Apparence), et fais glisser tes fichiers image ici (👉 seuls les formats JPG et PNG sont acceptés. Si tu as l'image dans d'autres formats, tu pourras les convertir dans le bon format ici par exemple https://convertio.co/fr/).

 

186.png

  • Copie l'URL de l'image

187.png

  • Va sur ta page personnalisée source, fais un CTRL + F et trouve le nom du fichier image qui était sur ton ordinateur. Si ton fichier sur l'ordinateur était nommé "Community banner.jpg" quand tu l'as enregistré, cherche "banner.jpg" car l'espace et les autres caractères spéciaux sont traduits différemment dans le code, donc tu ne le trouveras pas si tu écris "Community banner.jpg”.
  • Remplace le nom du fichier dans les crochets par l'URL de l'image que tu viens de copier (il sera normalement écrit comme ceci : src="Community%20banner.jpg"), l'image sera de la taille que tu as définie dans Word (le document).
  • Ensuite, clique sur ‘Save’.
  • Répète le processus si tu as plusieurs images.

Tu peux aussi regarder ce tutoriel de 7 minutes sur comment créer une page personnalisée.

Le lien de ta "Custom Page"

Dans la liste des pages personnalisées de l'admin, clique sur “Copy URL” :

188.png

Où lier une "Custom Page"

Voici une liste non exhaustive, mais tu peux la lier :

  • En bas du menu
  • Dans la description d'une chaîne
  • Dans la description d'un poster
  • Dans la section T&C d'un concours
  • Dans le pop-up des T&C d'un concours
  • Dans la redirection d'une carte d'accueil
  • Où il y a V-HTML (formulations qui acceptent les balises HTML, c'est rare, mais n'hésite pas à nous demander si c'est possible à tel endroit)

Lier une "Custom Page" dans le menu

  • Va dans "Admin V2 > “Config”
  • Ensuite, dans l'onglet “Channels”
  • Fais défiler vers le bas pour voir la section “Menu Links”
  • Clique sur “Add a Link” ; tu pourras ajouter le nom du lien et coller l'URL correspondante.

189.png

190.png

Lier une "Custom Page" à un concours

  1. Va dans l'onglet des concours
  2. Clique sur "Edit" pour le concours
  3. Dans la section "T&Cs", écris un texte, exemple : "Règles du concours".
  4. Sélectionne la partie du texte qui sera cliquable, et clique sur le bouton de création de lien dans le WYSIWYG (voir capture d'écran ci-dessous)
  5. Colle l'URL de la page personnalisée des T&C
    191.png
  6. Sélectionne comment la page personnalisée sera affichée
    192.png

Lier une "Custom Page" dans les instructions d'un poster

  1. Va dans “Config” > “Channels”
  2. Clique sur “Edit” sur la chaîne de ton choix
  3. Fais défiler vers le bas pour voir la section “Configuration des étapes du poster”
  4. Dans la section "Header", écris un texte, exemple : "là".
    193.png
  5. Sélectionne la partie du texte qui sera cliquable, et clique sur le bouton de création de lien dans le WYSIWYG (voir capture d'écran ci-dessous)
    193.png
  6. Sélectionne comment la page personnalisée sera affichée
    193.png

Cet article vous a-t-il été utile ?
Utilisateurs qui ont trouvé cela utile : 0 sur 0