Base de connaissances

Ce guide détaille les interactions possibles entre Site Creator Infomaniak et réseaux sociaux.

Spécifier les URL de vos différents profils sociaux

Prérequis

• Accédez à Site Creator:
  • Cliquez ici afin d'accéder à la gestion de votre produit sur le Manager Infomaniak (besoin d'aide ?).
  • Cliquez directement sur le nom attribué au produit concerné.
  • Cliquez sur Personnaliser mon site:
    

Pour permettre aux visiteurs de cliquer sur les liens de vos réseaux sociaux:

1. Cliquez sur le bouton Réglages dans le menu latéral gauche.
2. Cliquez sur Médias sociaux.
3. Indiquez les adresses de vos différents profils sociaux (Tiktok, Instagram, etc.) y compris un numéro de téléphone et une adresse mail si vous le souhaitez.‍
4. Enregistrez les modifications en bas de page.

Ajouter les icônes de vos profils

Ajouter des icônes de vos médias sociaux dans le pied de page ou dans l'en-tête de votre site Web:

1. Cliquez sur le bouton Réglages dans le menu latéral gauche.
2. Cliquez sur Médias sociaux.

En bas vous pouvez spécifier à quel endroit vous souhaitez faire apparaitre les icônes correspondant aux profils que vous aurez complété plus haut.

Enregistrez les modifications en bas de page.

Ajouter un bloc de partage social

Parmi les blocs que vous pouvez ajouter au sein d'une page, un bloc propose une ligne de boutons permettant au visiteur de s'abonner facilement à vos différents médias sociaux.

Un autre type de bloc propose une ligne de boutons permettant au visiteur de partager la page sur les principaux médias sociaux:

Obtenir le code QR du site

Pour obtenir le code QR de votre site:

1. Cliquez sur le bouton Réglages dans le menu latéral gauche.
2. Cliquez sur l'icône de code QR tout en haut:

Vous pourrez télécharger le code QR correspondant à l'adresse de votre page d'accueil. Ainsi un utilisateur qui scanne votre code QR pourra facilement se rendre sur votre site.
 

Changer l'image OG de partage social

Lorsque vous partagez un lien vers votre site Web sur les réseaux sociaux, une miniature (Og:image pour image OpenGraph) y est souvent automatiquement associée:

1. Cliquez sur le bouton Réglages dans le menu latéral gauche
2. Cliquez sur Paramètres généraux
3. Cliquez sur SEO et statistiques
4. Descendez jusqu'à l'image Open Graph et choisissez l'image.

Ce guide concerne la fonction d'annulation dans Site Creator Infomaniak.

Préambule

• Aucune sauvegarde / restauration n'est possible depuis le Manager Infomaniak.
• Si p.ex vous supprimez un bloc de contenu et que vous souhaitez le restaurer, vous pouvez annuler jusqu'aux 20 dernières opérations dans Site Creator.

Annuler une opération

Prérequis

• Accédez à Site Creator:
  1. Cliquez ici afin d'accéder à la gestion de votre produit sur le Manager Infomaniak (besoin d'aide ?).
  2. Cliquez directement sur le nom attribué au produit concerné.
  3. Cliquez sur Personnaliser mon site:
     

Une fois dans Site Creator:

1. Cliquez sur le bouton   …  ‍‍‍ situé tout en bas du menu latéral gauche de Site Creator, pour développer les options d'annulation:
    
   
    
2. Cliquez sur Annuler et confirmer la restauration (les flèches à côté permettent de "naviguer" parmi les dernières sauvegardes):
     
   

Ce guide explique comment ne pas publier directement des modifications sur une page de Site Creator Infomaniak.

Préambule

• Le mode brouillon permet de ne pas publier les modifications suivantes:
  • ajout d’un nouveau bloc de contenu via le menu Contenu
  • modification visuelles ou textuels d’un bloc de contenu
  • suppression d’un bloc de contenu
• Le mode brouillon ne s’applique pas aux:
  • changements globaux de design, via le menu Design (couleurs, polices …)
  • modifications de contenu liés aux applications (questions/réponse, e-commerce …)
  • modifications des paramètres globaux, via le menu Réglages (Pages, langues …)
  • sous-pages de la page que vous dépubliez

Sauvegarder sans publier

Prérequis

• Accédez à Site Creator:
  1. Cliquez ici afin d'accéder à la gestion de votre produit sur le Manager Infomaniak (besoin d'aide ?).
  2. Cliquez directement sur le nom attribué au produit concerné.
  3. Cliquez sur Personnaliser mon site:
     

Vous pouvez passer une page en mode brouillon afin de procéder à des changements de texte ou autre dans le contenu d'une page qui ne seront pas visibles en direct, ceci jusqu'au moment où vous déciderez de remettre le site en mode de publication direct:

1. Cliquez sur le bouton    ...   ‍‍‍ situé tout en bas du menu latéral gauche, pour développer les options de publication et prévisualisation
2. Cliquez sur En Direct pour basculer vers le mode Non Publié
3. A présent, le mode jaune affiché en bas indique que toutes vos modifications (sur cette page uniquement) ne se verront pas en direct (contrairement au mode En direct / Live) mais seront sauvegardées dans un brouillon même si vous quittez la page ou l'éditeur:
   

Publier les modifications ou supprimer le brouillon

1. Quand le mode Non publié est actif, cliquer sur le bouton jaune du mode Non publié pour afficher un volet de réglage.
2. Le volet de réglage s'ouvre afin que vous puissiez:
   1. publier vos modifications,
   2. ou supprimer le brouillon en cours et revenir à l'état initial de la page.

Exemple

1. Avec le mode En direct / Live (visible en bas de l'écran) une modification est directement visible par les visiteurs de la page.
2. Avec le mode Non publié / brouillon (identifiable par un symbole jaune en bas des pages passées dans ce mode) vos modifications ne sont pas visibles en direct.
3. Quittez la page pour travailler sur une autre page, le mode revient au mode par défaut, c'est-à-dire le mode En direct car la page n'est pas la même et le mode ne s'applique qu'aux pages choisies.
4. Revenez sur la page mise en brouillon, un symbole en bas de page indique toujours le mode brouillon activé.
5. Cliquez dessus pour choisir de publier ou de supprimer les modifications et remettre la page telle qu'elle était avant vos modifications en mode brouillon.

Ce guide vous permet de découvrir rapidement les fonctions essentielles de l'assistant rédactionnel disponible sur Site Creator Infomaniak.

Préambule

• L'assistant de rédaction vous aide à composer un texte de zéro ou à partir d'éléments existants grâce à l'intelligence artificielle.
• Ce n'est pas un agent conversationnel ou chatbot ; il ne répondra pas forcément à des questions génériques ou ne dialoguera pas nécessairement avec vous.
• C'est un assistant qui vous aidera à écrire un texte sur le thème de votre choix y compris s'il doit se baser sur des éléments existants.
• Utilisez-le p.ex pour rédiger:
  • un nouveau titre qui doit contenir des éléments précis
  • un nouveau paragraphe sur un thème particulier
  • une reformulation d'un extrait de texte
  • une syntaxe grammaticale correcte
  • une traduction vers une langue étrangère
  • etc.
• Prenez connaissance de cet autre guide au sujet du modèle utilisé et des responsabilités de chacun.

Comment utiliser l'assistant ?

Prérequis

• Accédez à Site Creator:
  1. Cliquez ici afin d'accéder à la gestion de votre produit sur le Manager Infomaniak (besoin d'aide ?).
  2. Cliquez directement sur le nom attribué au produit concerné.
  3. Cliquez sur Personnaliser mon site:
     

Ensuite pour débuter l'assistant rédactionnel:

1. Cliquez sur un bloc de contenu.
2. Cliquez sur l'icône de baguette magique dans la barre d'édition pour ouvrir l'assistant:
   
3. Afin de revenir en arrière vers le choix principal une fois un type d'ajout sélectionné, cliquez sur l'icône en haut à droite:
   

Si le bloc contient déjà du contenu et que vous choisissez de reformuler un paragraphe, il vous sera possible grâce aux boutons de l'assistant de sélectionner le ton donné à votre texte (sérieux / amical) et d'ajouter ou raccourcir les formules proposées, p.ex:

Ce guide est au sujet de la mise en place, dans Site Creator Infomaniak, de l’icône affichée dans la barre des favoris d’un navigateur Web, le favicon.

Préambule

• Les formats recommandés par Microsoft pour ses navigateurs sont 16 x 16, 32 x 32 et 48 x 48.
• Apple, quant à elle, recommande que la dimension du favicon soit de 180 x 180.

Définir le favicon Site Creator

Prérequis

• Accédez à Site Creator:
  1. Cliquez ici afin d'accéder à la gestion de votre produit sur le Manager Infomaniak (besoin d'aide ?).
  2. Cliquez directement sur le nom attribué au produit concerné.
  3. Cliquez sur Personnaliser mon site:
     

Pour définir un nouveau favicon:

1. Cliquez sur le bouton Réglages dans le menu latéral gauche.
2. Cliquez sur Réglages généraux.
3. Faites défiler vers le bas jusqu'à la section Favicon:
   
4. Choisissez la favicon sur votre disque dur.
5. Enregistrez les modifications en bas de page.
6. Prévisualisez le résultat dans votre navigateur (si nécessaire dans un nouvelle fenêtre en navigation privée p.ex):
   

Ce guide explique comment ajouter et personnaliser un bouton sur votre page Site Creator Infomaniak, notamment un bouton fixe permettant le retour en haut de page.

Prérequis

• Accédez à Site Creator:
  1. Cliquez ici afin d'accéder à la gestion de votre produit sur le Manager Infomaniak (besoin d'aide ?).
  2. Cliquez directement sur le nom attribué au produit concerné.
  3. Cliquez sur Personnaliser mon site:
     

Ajouter un lien sous forme de bouton

Pour ajouter un bouton (qui conduit vers l'adresse URL de votre choix lors d'un clic dessus):

1. Rédigez le texte du bouton.
2. Sélectionnez le texte.
3. Cliquez ensuite sur l'icône du chainon pour ouvrir la partie qui vous permettra de spécifier le type de lien et les options associées:
   
4. Configurez la page de destination et l'apparence du bouton:
   
5. Enregistrez les changements pour visualiser le bouton sur votre page.
6. Cliquez sur le bouton pour revenir à l'éditeur si nécessaire.

Ajouter un bouton “Back to top”

Pour ajouter et personnaliser un bouton qui ramène le visiteur vers le haut de votre page Site Creator dès que la page défile:

1. Cliquez sur le bouton Design dans le menu latéral gauche.
2. Cliquez sur Plus de paramètres.‍
3. Activez l'option pour afficher le bouton de retour en haut.
4. Enregistrez les modifications en bas de page:
   

Rafraichissez éventuellement la page pour voir la modification:

Prenez connaissance de cet autre guide au sujet d'une solution alternative.

Ce guide concerne la gestion des formulaires qui permettent l'inscription à la Newsletter que vous gérez sur Infomaniak.

Prérequis

• Avoir l'accès au produit Newsletter.
• Avoir créé au minimum un formulaire d'inscription.

Copier le code nécessaire à l'intégration du formulaire

Pour accéder aux formulaires de votre Newsletter et obtenir le code d'intégration:

1. Cliquez ici afin d'accéder à la gestion de votre produit sur le Manager Infomaniak (besoin d'aide ?).
2. Cliquez directement sur le nom de domaine attribué au produit concerné.
3. Cliquez sur Formulaires dans le menu latéral gauche.
4. Cliquez sur le menu d'action ⋮ à droite de l'objet concerné dans le tableau qui s'affiche.
5. Cliquez sur Code d'intégration:
   
6. Choisissez entre l'onglet JAVASCRIPT et HTML pour obtenir l'un des deux types de codes utile à l'insertion de votre formulaire sur vos pages et cliquez sur le bouton bleu pour copier le code dans le presse-papiers:
   

Insérer le formulaire sur un site Web…

Vous pouvez insérer le même formulaire à différents endroits. Vous pouvez également créer plusieurs formulaires (pour peupler différents groupes de contacts p.ex). Évidemment une Newsletter n'est envoyée qu'une seule fois par contact, même si celui-ci est présent dans différentes listes/groupes:

… sur WordPress

1. Insérez à l'endroit désiré un nouveau bloc.
2. Choisissez un bloc de type HTML:
   
3. Collez le code HTML obtenu au point 6 ci-dessus (passez de l'onglet Javascript à l'onglet HTML pour afficher le code correspondant à votre formulaire).
4. Cliquez sur Mettre à jour.
5. Le formulaire configuré précédemment s'affiche sur votre site.

… sur Site Creator Infomaniak

1. Survolez l'emplacement désiré sur la page pour faire apparaitre un bouton PLUS permettant d'ajouter un bloc:
   
2. Cliquez sur le bouton PLUS pour choisir un bloc de code HTML personnalisé:
   
3. Collez le code HTML obtenu au point 6 ci-dessus (passez de l'onglet Javascript à l'onglet HTML pour afficher le code correspondant à votre formulaire):
   
4. Cliquez sur le bouton bleu pour Continuer et prévisualiser votre formulaire sur votre page:
   
5. Le formulaire configuré précédemment s'affiche sur votre site:
   
    

… sur une offre Starter - page Web basique

1. Ouvrez Web FTP sur l'hébergement Starter:
   
2. Éditez la page d'accueil index.html et collez le code HTML obtenu au point 6 ci-dessus (passez de l'onglet Javascript à l'onglet HTML pour afficher le code correspondant à votre formulaire), avant de sauvegarder:
   
3. Le formulaire configuré précédemment s'affiche sur votre site:
   

Ce guide est destiné aux utilisateurs de l'outil Site Creator Infomaniak qui souhaitent donner la possibilité aux visiteurs de pouvoir effectuer une recherche textuelle dans le contenu du site.

Prérequis

• Accédez à Site Creator:
  1. Cliquez ici afin d'accéder à la gestion de votre produit sur le Manager Infomaniak (besoin d'aide ?).
  2. Cliquez directement sur le nom attribué au produit concerné.
  3. Cliquez sur Personnaliser mon site:
     

Ajouter une barre de recherche à Site Creator

Pour permettre aux visiteurs de rechercher du contenu sur votre site conçu avec Site Creator, il faut activer la barre de recherche:

1. Cliquez sur le bouton Réglages dans le menu latéral gauche.
2. Cliquez sur Paramètres généraux.‍
3. Activez l'option de recherche.
4. Enregistrez les modifications en bas de page‍.
5. Visualisez le nouvel emplacement de recherche sur votre page d'accueil:
   ‍
   ‍‍

Une icône de loupe sera ajoutée dans l'en-tête de votre site et la barre de recherche apparait si on clique dessus:
‍

Ce guide concerne Site Creator et la possibilité de créer des liens vers des ancres.

Préambule

• Une ancre en design Web est un lien hypertexte qui pointe vers une position spécifique sur une page web, qu'elle soit sur la même page ou sur une page différente. Lorsqu'un utilisateur clique sur un lien d'ancrage, il est redirigé vers l'endroit spécifié (en principe une indication invisible placée dans le code source) de la page.
• Les ancres sont utiles pour permettre aux utilisateurs de naviguer rapidement vers des sections spécifiques d'une page Web ou même d'une autre page. Elles améliorent l'expérience utilisateur en fournissant un moyen efficace de trouver et d'accéder à des informations précises.

Exemple d'ancre

Une ancre est située (de façon invisible) en bas de cette FAQ. Elle est nommée "fin", par conséquent le lien suivant contient tout simplement la cible #fin et sans autre indication, un navigateur Web va chercher ce terme dans le code de la page où l'on se trouve et diriger l'utilisateur dessus: cliquez ici pour l'atteindre !

Créer ce type de lien sur Site Creator

Habituellement, pour créer une ancre en HTML, voici comment procéder :

1. Identifiez l'endroit sur votre page où vous souhaitez créer une ancre (section de texte, image ou tout autre élément).
2. Utilisez la balise <a> avec l'attribut href pour spécifier la cible de l'ancre:
   1. si la cible est sur la même page, utilisez simplement l'ID de l'élément (voir point 3 ci-dessous)
      <a href="#section1">Aller à la section 1</a>
   2. si la cible est sur une autre page, spécifiez l'URL complète de la page, suivie de l'ID de l'élément cible (voir point 3 ci-dessous)
      <a href="page2.html#section1">Aller à la section 1 de la page 2</a>
3. Dans la section de votre page où vous souhaitez que les utilisateurs soient redirigés, ajoutez un élément avec l'ID correspondant:
   <div id="section1"> <!-- Le contenu de la section 1 --></div>
    

Lorsque les utilisateurs cliquent sur le lien "Aller à la section 1", la page fera défiler automatiquement jusqu'à la section ayant l'ID "section1". Si la cible est sur une autre page, ils seront redirigés vers cette page et l'ancre fonctionnera de la même manière.

Avec Site Creator, le point 3 ci-dessus n'est pas "libre": chaque bloc possède déjà son ID (ou hashtag) qu'il faudra indiquer (ou modifier au préalable - voir point 3 ci-dessous) afin de faire pointer un lien dessus.

Trouver la référence du bloc de destination

Accédez à Site Creator:

1. Cliquez ici afin d'accéder à la gestion de votre produit sur le Manager Infomaniak (besoin d'aide ?).
2. Cliquez directement sur le nom attribué au produit concerné.
3. Cliquez sur Personnaliser mon site:
   

Une fois dans Site Creator :

1. Survolez le bloc de contenu à modifier et cliquer sur la roue dentée:
   
2. Faites défiler les paramètres jusqu'à la fin pour obtenir l'ID du bloc en question:
   
3. Un double-clic sur le champ indiquant l'ID permet de spécifier son propre intitulé à la place de l'ID aléatoire:
   

Créer un lien vers la référence du bloc

Pour ajouter un lien sur du texte dans Site Creator, avec comme destination le bloc situé plus bas sur la même page :

1. Sélectionnez un texte.
2. Cliquez ensuite sur l'icône du chainon:
   
3. Choisissez le type "Section" pour créer un lien vers une partie de la même page en choisissant la référence du bloc obtenue ci-dessus:
   
   
   Autres possibilités:
   1. Mettre le lien avec le signe dièse (lien vers la même page):
      
   2. Mettre le nom de la page suivie de l'ID:
      

FIN DE LA PAGE (et ancre placée sur cet élément) - cliquez ici pour remonter à l'ancre située au début de la page…

Ce guide permet de rediriger les visiteurs arrivant sur des pages inexistantes (anciennes pages d'un ancien site Web p.ex) dans le cas où votre site est actuellement géré avec Site Creator Infomaniak.

Prérequis

• Connaitre l'adresse (URL) de la page devenue inexistante.
• Accédez à Site Creator:
  • Cliquez ici afin d'accéder à la gestion de votre produit sur le Manager Infomaniak (besoin d'aide ?).
  • Cliquez directement sur le nom attribué au produit concerné.
  • Cliquez sur Personnaliser mon site:
    

Renvoyer les visiteurs vers la nouvelle page Site Creator

Dans le menu latéral gauche de Site Creator:

1. Cliquez sur Réglages.
2. Cliquez sur SEO & Meta Tags dans la partie Configuration du site.
3. Entrez l'adresse de l'ancienne page (sans le nom de votre site) sous Redirection.
4. Entrez l'adresse de la nouvelle page (ou / pour rediriger le visiteur à la racine de votre site, c'est à dire la page d'accueil):
   
5. Sauvegardez avec le bouton bleu en bas de page.

Par exemple:

• Votre précédent site Web contenait une page de contact à l'adresse domainxyz.com/company/contact.html.
• Désormais votre page de contact se trouve sur domainxyz.com/about.
• Vous devez donc entrer company/contact.html dans le champ de gauche
• et about dans le champ de droite afin que les visiteurs arrivant encore sur l'ancienne adresse (à cause d'un référencement pas à jour ou d'un clic sur un favori p.ex) soient automatiquement transférés vers la nouvelle page.

Une méthode alternative consiste à ajouter une nouvelle page Site Creator au nom de votre ancienne adresse de page, puis de spécifier une redirection vers l'URL de votre choix, et de la rendre invisible grâce au bouton à bascule (toggle switch) situé en-dessous du champ de redirection: