Ce guide explique comment personnaliser le code source, modifier le CSS, modifier la partie HEAD ou BODY d'un site Web réalisé avec Site Creator Infomaniak.

Prérequis

• Accéder à Site Creator:
  • Cliquer ici afin d'accéder à la gestion de votre produit sur le Manager Infomaniak (besoin d'aide ?).
  • Cliquer directement sur le nom attribué au Site Creator concerné.
  • Cliquer sur le bouton Éditer mon site pour démarrer l'éditeur:
    

Ajouter du code personnalisé

Une fois dans Site Creator:

1. Cliquez sur Design dans le menu latéral gauche.
2. Cliquez sur Plus de paramètres.
3. Cliquez sur Code personnalisé en bas:
   
4. Saisissez du code HTML, JavaScript (avec ses balises script) ou CSS personnalisé (avec ses balises style) - lire plus bas pour quelques exemples.
5. Enregistrez les modifications en bas de page.

Métadonnées dans HEAD & BODY

Pour ajouter du code JavaScript ou n'importe quel autre code dans la partie HEAD ou BODY du code source de votre site:

1. Cliquez sur Réglages dans le menu latéral gauche.
2. Cliquez sur SEO & Métadonnées dans la partie Configuration du site Web:
   
3. Descendez jusqu'à Code personnalisé.
4. Choisissez d'ajouter sous les onglets HEAD ou sous BODY.
5. Enregistrez les modifications en bas de page:
   

Exemples de personnalisation CSS

Ces exemples permettent de démarrer la personnalisation avancée des pages du site Web. Un risque existe toutefois en fonction des modifications apportées de ne plus pouvoir accéder à l'éditeur lui-même ce ce qui vous obligera à le recommencer de zéro.

Personnaliser le fond d'écran du site Web

Pour mettre l'image de votre choix (à charger dans la bibliothèque de fichiers) en fond de page et personnaliser son affichage:

1. Rendez-vous au point 3 visible sur la première image en haut de ce guide.
2. Insérez le code <style> pour indiquer que vous souhaitez modifier le code CSS,
3. puis body { pour indiquer que vous voulez modifier le corps de la page et le "{" pour ouvrir l'espace permettant d'insérer les commandes,
4. puis background-image: url("../data/files/fond01.jpg"); avec le chemin & nom précis de l'image chargée dans la bibliothèque sans oublier le point virgule pour pouvoir insérer la commande suivante.
5. background-repeat: repeat; pour répéter l'image insérée.
6. background-attachment: fixed; pour que l'image de fond reste fixe même si le visiteur fait défiler la page vers le bas ou le haut pour lire son contenu.
7. } pour fermer l'espace d'insertion ouvert auparavant.
8. </style> pour indiquer que le code se termine ici.

Espacer les lettres de tous les liens du site

Pour écarter (beaucoup) les lettres entre elles sur les mots cliquables (liens):

1. Rendez-vous au point 3 visible sur la première image en haut de ce guide.
2. Insérez le code (si pas encore présent) <style> pour indiquer que vous souhaitez modifier le code CSS,
3. puis .container div a { pour indiquer que vous voulez modifier les blocs de la page et plus particulièrement les liens ("a") et le "{" pour ouvrir l'espace permettant d'insérer les commandes,
4. puis letter-spacing:1em; en diminuant la valeur (0.9em p.ex) sans oublier le point virgule pour pouvoir insérer la commande suivante ou terminer.
5. } pour fermer l'espace d'insertion ouvert auparavant.
6. </style> pour indiquer que le code se termine ici.

Prenez connaissance de ces autres exemples de code CSS à insérer sur votre site.

Ce guide concerne les "Applications"  (ou "modules", “extensions”) disponibles dans Site Creator Infomaniak selon la version dont vous disposez, pour créer un site vitrine, un blog ou une boutique en ligne 100% personnalisable, sans aucune connaissance technique.

Différentes Applications

En plus des blocs de contenu proposant différentes mises en page préformatées, vous pouvez également insérer des blocs sous forme de modules ayant chacun une fonction précise:

1. Vidéo
2. Lecteur audio
3. Slider d'images / diaporama
4. Téléchargement de fichier
5. Localisation sur plan
6. Sondage
7. Base de connaissances
8. Questions et réponses
9. Calendrier
10. Calendly
11. Menu de sous-pages
12. Plan du site (sitemap)
13. Ajouter à Google
14. Code HTML personnalisé
15. Formulaire de contact
16. Blog
17. Shop
18. Lecteur de flux RSS
19. Menu de restaurant

Insérer un module sur une page

Pour insérer un module:

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 Site Creator concerné.
3. Cliquez sur le bouton Éditer mon site pour démarrer l'éditeur:
   

Une fois dans Site Creator:

1. Cliquez sur le bouton Contenu dans le menu latéral gauche.
2. Cliquez sur Applications en bas et le contenu à disposition s'affiche sur la droite.
3. Cliquez sur l'une de ces applications pour l'insérer dans la page:
   
4. Une fois inséré, survolez le module (ou le bloc lui-même selon le module) pour accéder à ses réglages:
   

Module multiple ou module disparu

Si vous supprimez un de vos modules (tel que celui pour faire un sondage) déjà configuré et souhaitez revenir en arrière, appuyez sur Annuler immédiatement:

ou

Vous pouvez également réinsérer le module qui devrait revenir avec ces précédents réglages.

Vous ne pouvez pas insérer plusieurs modules du même type pour les personnaliser indépendamment l'un de l'autre.

Autres intégrations & widgets

Cliquez sur le bouton APPLICATIONS dans la barre latérale gauche de Site Creator:
‍

Exemple: insérer un décompte

Pour ajouter un compteur permettant l'affichage d'un décompte:

1. Dans le menu latéral gauche cliquez sur le bouton Contenu.‍
2. Cliquez sur Objets dans la liste et le contenu à disposition s'affiche sur la droite.
3. Cliquez sur l'un de ces objets pour l'insérer sur la page:
   
4. Une fois inséré, survolez le module pour accéder à ses réglages::
   

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éder à Site Creator:
  • Cliquer ici afin d'accéder à la gestion de votre produit sur le Manager Infomaniak (besoin d'aide ?).
  • Cliquer directement sur le nom attribué au Site Creator concerné.
  • Cliquer sur le bouton Éditer mon site pour démarrer l'éditeur:
    

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 vous aide à personnaliser un site Web créé avec Site Creator Infomaniak.

Prérequis

• Accéder à Site Creator:
  • Cliquer ici afin d'accéder à la gestion de votre produit sur le Manager Infomaniak (besoin d'aide ?).
  • Cliquer directement sur le nom attribué au Site Creator concerné.
  • Cliquer sur le bouton Éditer mon site pour démarrer l'éditeur:
    

Changer les couleurs du site

Pour gérer les thèmes, couleurs et polices dans Site Creator:

1. Cliquez sur le bouton Design dans le menu latéral gauche.
2. Cliquez sur Couleurs du site.

Vous pouvez choisir parmi les palettes de couleurs disponibles ou créer votre propre jeu de couleurs personnalisé.

En dessous il existe des paramètres plus spécifiques, où vous pouvez spécifier à quels éléments une couleur doit être appliquée.

Gérer le fond (image / couleur) des blocs

Sur la page d'édition de votre site:

1. Survolez un bloc et cliquez sur la roue dentée pour accéder aux réglages:
   
   

Charger un modèle de site Web

Vous pouvez modifier la conception complète de votre site Web en changeant le thème de celui-ci, et en décidant ce qui devra être écrasé ou pas sur le site actuel lors du changement:

1. Cliquez sur le bouton Design dans le menu latéral gauche.
2. Cliquez sur Choix du thème:
   

C'est là que vous pouvez choisir parmi les thèmes de sites Web disponibles.

Lorsque vous avez trouvé votre nouveau thème, cliquez sur Installer puis vous pourrez choisir les parties du nouveau modèle que vous souhaitez importer (par défaut, seuls les couleurs, polices ou style de menu) pour éviter que le contenu de votre site Web ne soit écrasé.

Si votre site Web est nouveau, vous pouvez choisir plus d'options lors de l'importation.

Changer les polices du site Web

Pour cela:

1. Cliquez sur le bouton Design dans le menu latéral gauche.
2. Cliquez sur Polices:
   

Vous pouvez facilement changer les polices principales du site Web, la première police étant utilisée pour les en-têtes et la seconde police pour le contenu.

En dessous il existe des paramètres plus spécifiques, où vous pouvez spécifier à quels éléments une police doit être appliquée.

Il n'est pas possible d'importer ou d'ajouter une police personnalisée mais vous pouvez modifier le fournisseur (la liste de polices sera la même) pour des questions de confidentialité par exemple:

1. Cliquez sur Réglages dans le menu latéral gauche.
2. Cliquez sur Paramètres généraux
3. Choisissez le fournisseur des polices:
   

Résoudre un problème de texte absent / invisible

Si vous avez l'impression que votre bloc de texte a disparu ou qu'il est invisible

alors sélectionnez tout le contenu du site Web (ctrl + a ou cmd + a sur Mac) ; si vous voyez que votre contenu est là, cela signifie probablement que les paramètres du bloc sont réglés pour un fond sombre:

Dans ce cas, allez dans les paramètres du bloc et assurez-vous que l'option "Fond sombre" n'est pas cochée. Cela devrait résoudre ce problème:

Ce guide explique comment gérer la partie logo, en-tête et pied de page (footer) dans Site Creator Infomaniak.

Prérequis

• Accéder à Site Creator:
  • Cliquer ici afin d'accéder à la gestion de votre produit sur le Manager Infomaniak (besoin d'aide ?).
  • Cliquer directement sur le nom attribué au Site Creator concerné.
  • Cliquer sur le bouton Éditer mon site pour démarrer l'éditeur:
    

Ajouter un logo de site Web

Une fois dans Site Creator:

1. Cliquez sur le bouton Réglages puis Logo dans la barre latérale gauche.‍‍
2. Chargez une image et choisir si le nom du site doit également s'afficher à côté.
   ‍

Réglages du logo

1. Cliquez sur le bouton Design dans la barre latérale gauche.
2. Cliquez sur Menu Designer‍ puis Titre/logo pour régler espacements et couleurs.

Affichage du logo au centre

Au même endroit que ci-dessus, activez l'option pour afficher le logo sur une ligne séparée ce qui centrera le logo du site:

Masquer le logo (+ en-tête et pied de page)

Pour créer une page sans logo qui n'aura ni en-tête (donc aucun menu affiché) ni pied de page, il faut la définir comme Page d'accueil (c'est à dire "Landing page" ; attention cela ne change pas l'ordre des pages) grâce à un bouton qui se trouve ici:

1. Cliquez sur le bouton Réglages dans la barre latérale gauche.
2. Cliquez sur Liste des pages.
3. Survolez une page dans l'arborescence existante et cliquez sur l'icône de roue dentée qui apparait au survol.
4. ‍Activez l'option en bas "Page d'accueil" pour masquer en-têtes et pied de page:
   

Ce guide explique comment modifier certains détails d'un site créé avec Site Creator Infomaniak.

Prérequis

• Accéder à Site Creator:
  • Cliquer ici afin d'accéder à la gestion de votre produit sur le Manager Infomaniak (besoin d'aide ?).
  • Cliquer directement sur le nom attribué au Site Creator concerné.
  • Cliquer sur le bouton Éditer mon site pour démarrer l'éditeur:
    

Changer le nom du site Web

Cliquez sur le bouton Réglages dans la barre latérale gauche, puis sur Titre du site:

Coordonnées de l'entreprise

Cliquez sur le bouton Réglages dans la barre latérale gauche, puis sur Coordonnées de contact sous Configuration du site Web.
‍

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éder à Site Creator:
  • Cliquer ici afin d'accéder à la gestion de votre produit sur le Manager Infomaniak (besoin d'aide ?).
  • Cliquer directement sur le nom attribué au Site Creator concerné.
  • Cliquer sur le bouton Éditer mon site pour démarrer l'éditeur:
    

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 par exemple):
   

Ce guide explique comment ajouter et configurer un formulaire de contact sur votre site créé avec Site Creator Infomaniak.

Créer un formulaire de contact personnalisé

Prérequis

• Accéder à Site Creator:
  • Cliquer ici afin d'accéder à la gestion de votre produit sur le Manager Infomaniak (besoin d'aide ?).
  • Cliquer directement sur le nom attribué au Site Creator concerné.
  • Cliquer sur le bouton Éditer mon site pour démarrer l'éditeur:
    

Vous pouvez créer un ou plusieurs formulaires permettant à vos visiteurs d'écrire un message, de s'inscrire à une activité, bref, de remplir toute sorte de formulaire en ligne avec ou sans pièce jointe:

1. Cliquez sur le bouton Contenu dans le menu latéral gauche.
2. Cliquez sur Applications en bas de liste.
3. Cliquez sur Créateur de formulaires:
   
4. Construisez votre formulaire à l'aide des éléments à gauche.
5. Sauvegardez en bas de page:
   

Une fois le premier formulaire créé, vous pouvez l'insérer en cliquant sur ‍ à l'emplacement de votre choix et en le sélectionnant:

Le formulaire créé va s'insérer sur votre page:

Paramètres du formulaire de contact

Vous pouvez personnaliser le message de remerciement, l'éventuelle page de redirection après soumission, l'adresse mail utilisée, ajouter un captcha (recommandé), etc.

Pour cela, survolez le module pour accéder à ses réglages:

Cliquez si nécessaire sur le formulaire que vous souhaitez éditer, puis sur les Propriétés du formulaire:

Vous pouvez également supprimer le formulaire créé pour qu'il ne soit plus proposé:

Ce guide explique comment créer des galeries avec vos photos dans Site Creator Infomaniak.

Créer une galerie de photos

Prérequis

• Accéder à Site Creator:
  • Cliquer ici afin d'accéder à la gestion de votre produit sur le Manager Infomaniak (besoin d'aide ?).
  • Cliquer directement sur le nom attribué au Site Creator concerné.
  • Cliquer sur le bouton Éditer mon site pour démarrer l'éditeur:
    

Une fois dans Site Creator:

1. Cliquez sur le bouton Réglages dans le menu latéral gauche, la liste de vos pages apparaît.
2. Cliquez sur le bouton Ajouter une page en dessous de l'arborescence existante.
3. Activez Afficher plus d'options pour choisir le type de page GALERIE PHOTO:
    
   
    
4. Choisissez un nom de page.
5. Validez.

La nouvelle page avec le module de galerie photo s'affiche à l'écran.

Paramétrer la galerie photo

Pour cela:

1. Survolez le module pour accéder aux paramètres de la galerie.
2. Cliquez sur Éditer‍:
   ‍

Albums photo

Vous pouvez créer des galeries photos supplémentaires pour vos différents albums:
‍
‍

Modifier l'ordre des photos

Lorsque votre galerie est créée, chaque nouvelle photo que vous téléchargez depuis votre ordinateur est ajoutée à la fin de la liste des photos ; vous pouvez facilement modifier cet ordre en glissant les photos avec la souris quand vous éditez une galerie:

 

De plus, vous pouvez ajouter une description à n'importe laquelle de vos photos, sous chaque image, vous remarquerez le champ "Description de l'image", commencez à y taper votre description et appuyez sur le bouton vert pour enregistrer les modifications:

Ajouter un widget défilement d'images

Pour configurer un ou plusieurs widgets Slider dynamique, sur lesquels une ou plusieurs photos glisseront latéralement (sans aucun lien avec les galeries photos décrites ci-dessus):

1. Cliquez sur le bouton Applications dans le menu latéral gauche.
2. Cliquez sur Slider:
   
3. Configurez le widget selon vos préférences.
4. Insérez le widget configuré à l'endroit désiré en cliquant sur Contenu puis Apps et choisir Slider:
   

Ce guide explique comment ajouter et configurer un module de blog sur votre site créé avec Site Creator Infomaniak.

Préambule

• Il n'existe pas de fonctionnalité permettant la gestion de multiples utilisateurs sur la section Blog (ni sur Site Creator).
• Plusieurs utilisateurs d'une même Organisation ayant accès à Site Creator (via leur autorisation d'accès à l'hébergement Web) pourront publier sur le blog, mais l'identité de l'auteur restera la même pour tous.
• Il est possible de se faire aider par l'intelligence artificielle comme c'est le cas sur le reste des pages de Site Creator.
  • Prenez connaissance de cet autre guide au sujet du modèle utilisé par l'assistant de rédaction et des responsabilités de chacun.

Commencer un blog sur Site Creator

Prérequis

• Accéder à Site Creator:
  • Cliquer ici afin d'accéder à la gestion de votre produit sur le Manager Infomaniak (besoin d'aide ?).
  • Cliquer directement sur le nom attribué au Site Creator concerné.
  • Cliquer sur le bouton Éditer mon site pour démarrer l'éditeur:
    

Une fois dans Site Creator, sur la page où vous voulez insérer vos futurs articles de blog:

1. Cliquez sur le bouton + situé en-dessous d'un bloc déjà inséré:
   
2. Cliquez sur Applications (sur l'onglet Contenu qui s'est ouvert quand vous avez cliqué pour ajouter le bloc visuel).
3. Cliquez sur le module Blog:
   
   1. Si c'est la première insertion de ce module, alors vous obtenez le bloc visuel suivant avec un exemple de premier article publié (passez au point 4 ci-dessous):
      
   2. Si vous avez déjà testé le module Blog auparavant et que vous l'avez retiré de vos pages, vous obtenez ceci:
      
      1. Appuyez sur le choix du haut pour insérer le bloc principal.
      2. Appuyez sur le second choix pour afficher un bloc avec les 3 derniers articles publiés uniquement si vous avez déjà un bloc principal inséré ailleurs sur le site.‍
4. Une fois le module Blog inséré, survolez le bloc et cliquez sur le bouton de menu à trois lignes horizontales ☰ Blog puis sur ‍ Nouvel article pour insérer un article vierge:
   

Publier du contenu en exploitant l'intelligence artificielle

Pour rédiger du contenu et si nécessaire améliorer vos rédactions:

1. Choisissez une image pour la bannière, entrez un titre, sous-titre optionnel, corps de l'article avec différentes mises en forme.
2. Appuyez sur le signe + au niveau du texte de l'article ou la touche tabulation de votre clavier.
3. Sélectionnez le contenu puis cliquez dessus pour faire apparaitre une barre d'outils de formatage du texte.
4. Depuis cette barre d'outils, accédez aux possibilités offertes par l'IA (traduction, reformulation, correction, etc.):
   
   
    
5. Publiez en cliquant sur le bouton Publier (ou sauvegardez le brouillon pour plus tard):
   

Éditer le blog

Pour activer les commentaires, les notifications par mail, la disposition par liste et le tri de celles-ci, etc.:

1. Cliquez sur Applications dans le menu latéral gauche.
2. Cliquez sur Blog.
3. Cliquez sur Paramètres et réglez vos préférences sans oublier de sauvegarder en bas de page:
   

Éditer les articles de blog

Quel que soit l'endroit où vous vous trouvez lors de l'édition de votre site, il vous suffit d'aller dans le menu Applications en bas à gauche, puis de cliquer sur Blog:

Pour éditer le contenu de votre article, cliquez sur Parcourir les articles dans le menu latéral gauche, survolez et cliquez sur l'icône crayon ✎:

Pour paramétrer (lire ci-dessous) l'un des articles, survolez et cliquez sur la roue dentée:

Étiqueter, archiver ou faire expirer un article

Un article de blog peut disparaitre de votre liste d'articles, soit en lui donnant une date d'expiration soit en l'archivant de suite. Il est également possible d'ajouter un tag (étiquette) qui sera cliquable pour le visiteur et facilitera ainsi la navigation au sein des posts:

Date des articles

Par défaut, les nouveaux articles de blog seront ajoutés avec la date "d'aujourd'hui" mais il est possible de la modifier:

1. Survolez et cliquez sur le lien de la date (directement sur l'article).
2. Choisissez une nouvelle date.

Ce guide pour Site Creator Infomaniak aborde le sujet des cookies de navigateur.

Préambule

• Par défaut, lorsque votre site Web est nouveau, aucun cookie ne doit être stocké sur les appareils de vos visiteurs, il n'y a pas de fonctionnalité de suivi pour les publicités ou le marketing.
• En tant qu'administrateur de site Web, certaines données sont stockées dans vos propres cookies (comme les informations indiquant que vous êtes un administrateur de site Web).
• Si vous ajoutez des applications/modules intégrés à votre site Web, des cookies peuvent être utilisés ; exemple avec le Formulaire de sondage: si vous ajoutez un module de sondage à votre site Web, il utilisera des cookies lorsque le visiteur du site Web votera (pour se rappeler qu'il a déjà voté).

Notification pour le visiteur

Prérequis

• Accéder à Site Creator:
  • Cliquer ici afin d'accéder à la gestion de votre produit sur le Manager Infomaniak (besoin d'aide ?).
  • Cliquer directement sur le nom attribué au Site Creator concerné.
  • Cliquer sur le bouton Éditer mon site pour démarrer l'éditeur:
    

Vous pouvez activer un message de consentement aux cookies qui s'affichera dans une petite fenêtre survolante en bas de l'écran pour tous les nouveaux visiteurs de votre site:

1. Cliquez sur le bouton Réglages dans le menu latéral gauche.
2. Cliquez sur Coordonnées de contact sous Configuration du site Web.
3. Activez l'option d'informations sur les cookies pour configurer le bref message et l'URL pour les compléments d'information.
4. Réglez le type d'affichage élargi ou non (lire plus bas).
5. Enregistrez les modifications en bas de page:
   ‍

Réglages supplémentaires

Le message de consentement peut être réglé par défaut ou de façon élargie, lorsque vous cliquez sur Affichage. Le résultat obtenu est le suivant:

• par défaut:
  
• élargie:
  

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éder à Site Creator:
  • Cliquer ici afin d'accéder à la gestion de votre produit sur le Manager Infomaniak (besoin d'aide ?).
  • Cliquer directement sur le nom attribué au Site Creator concerné.
  • Cliquer sur le bouton Éditer mon site pour démarrer l'éditeur:
    

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 détaille l'utilisation des médias dans Site Creator Infomaniak.

A noter qu'il est également possible d'insérer d'autres éléments comme par exemple un formulaire d'inscription à la Newsletter Infomaniak.

Prérequis

• Accéder à Site Creator:
  • Cliquer ici afin d'accéder à la gestion de votre produit sur le Manager Infomaniak (besoin d'aide ?).
  • Cliquer directement sur le nom attribué au Site Creator concerné.
  • Cliquer sur le bouton Éditer mon site pour démarrer l'éditeur:
    

Ajouter une image

Les médias sont gérés dans la bibliothèque de fichiers :

1. Ajoutez un nouveau bloc de contenu contenant des images que vous pourrez ensuite remplacer ou compléter.
2. Cliquez sur le bouton Contenu dans le menu latéral gauche.
3. Cliquez sur Objets dans la liste pour insérer une image unique.
4. Cliquez sur le bloc IMAGE sur la droite.

Une fois l'image ajoutée, vous pouvez également en faire un lien cliquable ou modifier sa taille:

Vous pouvez également ajouter des images en tant que module Galerie de photos.

Changer d'image

Pour remplacer une image insérée:

1. Cliquez sur une image pour l'éditer.
2. Cliquez sur le bouton type Cadre photo sur la miniature de l'image pour pouvoir sélectionner une nouvelle image qui remplacera la précédente:
   

Ajouter une vidéo

Pour ajouter une vidéo:

1. Cliquez sur le bouton Contenu dans le menu latéral gauche.
2. Cliquez sur Objets dans la liste.
3. Cliquez sur le bloc VIDEO sur la droite pour insérer une vidéo en pleine largeur.

Vous pouvez également appliquer un lien sur une image en utilisant une vidéo YouTube comme URL: cela créera automatiquement une icône de type PLAY qui au clic ouvrira la vidéo dans une fenêtre de type lightbox.

Ajouter un fichier audio

Pour ajouter un fichier sonore:

1. Cliquez sur le bouton Contenu dans le menu latéral gauche.
2. Cliquez sur Applications en bas.
3. Le contenu à disposition s'affiche sur la droite.
4. Cliquez sur le lecteur audio pour l'insérer dans la page.

Vous pouvez le personnaliser de façon avancée via l'édition HTML.

Ajouter un fichier à télécharger

Pour facilement proposer un fichier au téléchargement:

1. Cliquez sur le bouton Contenu dans le menu latéral gauche.
2. Cliquez sur Applications en bas.
3. Le contenu à disposition s'affiche sur la droite.
4. Cliquez sur le widget Téléchargement de fichier pour l'insérer dans la page.
5. Sélectionnez dans la bibliothèque le fichier qui pourra être téléchargé par vos visiteurs.

Ce guide détaille la création de menus de navigation pour votre site réalisé avec Site Creator Infomaniak, ainsi que leur composition, styles et paramètres.

Prérequis

• Accéder à Site Creator:
  • Cliquer ici afin d'accéder à la gestion de votre produit sur le Manager Infomaniak (besoin d'aide ?).
  • Cliquer directement sur le nom attribué au Site Creator concerné.
  • Cliquer sur le bouton Éditer mon site pour démarrer l'éditeur:
    

Les différents menus de navigation

Les différentes pages qui composent votre site peuvent être accessibles au sein d'un ou plusieurs menus de navigation:

1. Cliquez sur le bouton Réglages dans le menu latéral gauche.
2. Par défaut la liste de vos pages apparaît, classées dans 2 rubriques principales: MAIN MENU et LEGAL.

Mais vous pouvez en ajouter davantage.

Ces menus avec les pages qu'ils contiennent sont ensuite repris à différents endroits de votre site selon le thème choisi notamment.

Vous trouverez souvent le menu principal placé en haut de page:

et les autres menus seront automatiquement proposés dans le pied de page:

Gérer le menu

Vous pourrez gérer sa présence dans le plan du site ou le supprimer (lui ainsi que toutes ses pages):

1. Cliquez sur le bouton Réglages dans le menu latéral gauche.
2. Survolez un titre de menu dans l'arborescence existante.
3. Cliquez sur l'icône de roue dentée qui apparait au survol.

Prenez connaissance de cet autre guide pour ne pas faire apparaitre de menu du tout.

Créer un sous-élément dans un menu

Pour cela:

1. Cliquez sur le bouton Réglages dans le menu latéral gauche.
   • La liste de vos pages apparaît.
2. Avec la souris déplacer une page légèrement vers la droite sous une autre page:
   
   
    
   • Elle deviendra une sous-page et votre menu sur le site pourra afficher l'arborescence ainsi créée.

Titre du menu non cliquable

Choisir si nécessaire de ne pas rendre cliquable le tout premier élément d'un tel menu:

1. Cliquez sur le bouton Réglages dans le menu latéral gauche.
2. Cliquez sur Paramètres généraux afin de modifier ce réglage sous Options sous-menu:
   

Élément de menu contenant un lien vers un autre site Web

Pour cela:

1. Cliquez sur le bouton Réglages dans le menu latéral gauche.
   • La liste de vos pages apparaît.
2. Cliquez sur le bouton Ajouter une page en dessous de l'arborescence existante:
   
3. Choisissez un nom de page et Afficher plus d'options.
4. Choisissez la redirection d'URL pour spécifier la destination lors du clic:
   

Ajouter un nouveau menu

Pour cela:

1. Cliquez sur le bouton Réglages dans le menu latéral gauche.
2. Survolez un titre de menu dans l'arborescence existante.
3. Cliquez sur l'icône "+" qui apparait au survol:
   

Menu supérieur supplémentaire

Pour afficher une "barre de menu" tout en haut de votre page:

1. Cliquez sur le bouton Design dans le menu latéral gauche.
2. Cliquez sur Plus de paramètres.
3. Activez la Barre de menus d'en-tête:
   
   • Une fois activée vous pouvez la personnaliser grâce au lien Réglages au même endroit.

Styles de menu

Pour gérer les différents styles de menu:

1. Cliquez sur le bouton Design dans le menu latéral gauche.
2. Cliquez sur Éditeur de menu:
   
   ‍

Vous pourrez notamment décider de l'emplacement de vos menus (sur la gauche de la page ou placé en haut, fixe ou mobile, type "menu hamburger ☰" à droite ou normal, etc.).

Changer la couleur du menu "hamburger" (☰)

Si ce bouton de menu à trois lignes horizontales ☰ apparait par exemple blanc sur blanc sur un appareil mobile:

1. Cliquez sur Titre du menu / logo (toujours sous Design, puis Éditeur de menu).
2. Ajustez la couleur du texte:
   

Adopter un nouveau thème de menu

Changez complètement de style prédéfini grâce aux thèmes tout en haut du sous-menu:

1. Cliquez sur Modèles de menu (toujours sous Design, puis Éditeur de menu):
   

Menu fixe

La plupart des menus proposés vont bouger avec le contenu de la page. Le menu disparait si on descend dans la page:

Vous pouvez définir un menu qui devra toujours être fixé au bord supérieur (avec différentes options visuelles):

Pour activer ou désactiver le menu fixe:

1. Cliquez sur Design.
2. Cliquez sur Éditeur de menu:
   
3. Cliquez sur Configuration principale.
4. Choisissez Dans l'en-tête dans l'encadré Type de menu.
5. Le bouton à bascule (toggle switch) Fixé au sommet s'affiche plus bas et vous pouvez l'activer.
6. Cliquez sur Enregistrer:
   

Certains modèles de menu (comme le #3 et le #16) appliquent directement les réglages optimaux pour un menu fixe:

Insérer vos menus dans le corps de la page

Un module Menu de sous-pages permet l'insertion de vos menus et sous-menus à n'importe quel endroit de votre page.

Le module plan du site affiche tous les menus et toutes vos pages dans un seul bloc.

Définir l'URL de la page

Par défaut si le nom de votre page est Contact alors l'URL pour l'atteindre sera www.domain.xyz/contact.

Si par la suite vous changez le nom de la page pour Contactez-nous alors l'URL sera www.domain.xyz/contactez-nous.

Pour définir l'URL personnalisée de la page sur laquelle vous vous trouvez:

1. Cliquez sur le bouton Réglages dans le menu latéral gauche.
2. Cliquez sur SEO & Métadonnées (sous Paramètres de cette sous-page):
   

Le premier champ en haut permet de définir l'adresse de la page. Tout espace sera transformé en trait d'union et les caractères spéciaux, accents, symboles, etc. sont à éviter.

Si des changements d'URL sont enregistrés en cours de création de site alors qu'un menu contient déjà un lien vers la page en question, il sera adapté de façon dynamique.

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

Préambule

• Aucune sauvegarde / restauration n'est possible depuis le Manager Infomaniak.
• Si par exemple 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éder à Site Creator:
  • Cliquer ici afin d'accéder à la gestion de votre produit sur le Manager Infomaniak (besoin d'aide ?).
  • Cliquer directement sur le nom attribué au Site Creator concerné.
  • Cliquer sur le bouton Éditer mon site pour démarrer l'éditeur:
    

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 mettre temporairement hors ligne un site créé avec Site Creator Infomaniak.

Préambule

• La page de maintenance ne s'affichera que sur les appareils des visiteurs:
  
• Votre appareil continuera d'afficher votre site sans page de maintenance, uniquement pour votre connexion Internet.
• Etant connecté, vous pourrez toujours éditer le site avec Site Creator.

Mettre Site Creator en maintenance

Pour désactiver temporairement 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 Gérer ‍ en haut de page.
4. Cliquez sur Activer la maintenance.
   • Refaites l'opération pour la désactiver:
     
   • Vous pouvez également désactiver la maintenance depuis le bloc de prévisualisation de votre site:
     

Ce guide explique comment connecter un site réalisé avec Site Creator Infomaniak à un nom de domaine.

Prérequis

• L'offre Site Creator Free permet d'accéder au site par un nom de domaine de la forme 123xyz.infomaniak.site…
  • Pour connecter un nom de domaine personnalisé, il faut au préalable passer à une offre supérieure:
    
• Les offres Site Creator Lite et Pro proposent un nom de domaine gratuit 1 an parmi les extensions .ch, .com, .fr, .org, .co.uk, .be, .de, .eu, .it, .es
• Si vous souhaitez utiliser un domaine existant, celui-ci devra se trouver dans la même Organisation.

Connecter Site Creator à un nom de domaine

Pour connecter Site Creator (Lite ou Pro) à un nom de domaine:

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 Connecter mon site à un domaine pour démarrer l'assistant de configuration: 
   
4. L'assistant vous propose de créer un nouveau nom de domaine ou d'utiliser un nom déjà existant:
   
   • Si vous créez un nouveau nom de domaine à cette occasion, il faudra revenir sur cet assistant de configuration une fois la commande terminée.
   • Si vous choisissez d'attacher un domaine parmi ceux existants sur votre Organisation, l'assistant vous propose la liste des domaines et un sous-domaine peut être créé à cette occasion:
     
5. Cliquez sur le bouton Suivant.
6. Vérifiez l'adresse choisie puis cliquez sur le bouton pour Confirmer:
   

Gérer le(s) nom(s) de domaine Site Creator

Pour gérer le ou les nom(s) de domaine utilisé(s) avec 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é.

En haut de page s'affichent les éventuels messages au sujet de problèmes concernant Site Creator et les domaines.

Plus bas, vous pouvez gérer vos domaines s'il y en a, cliquez sur le chevron ‍ si nécessaire:

Domaine temporaire, adresse provisoire, URL de prévisualisation…

Plusieurs noms de domaine peuvent être reliés à Site Creator, supprimés ou interchangés et inversés si nécessaire.

Cliquez sur le menu d'action ⋮ à droite du domaine concerné:

 

En revanche l'URL de prévisualisation, de type 123xyz.infomaniak.site et distincte dans la liste des domaines Site Creator, ne pourra jamais être supprimée pour le bon fonctionnement de votre site.

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="#chapter1">Go to chapter 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#chapter1">Go to chapter 1 on 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="chapter1"> &nbsp; </div>
    

Lorsque les utilisateurs cliquent sur le lien "Go to chapter 1", la page fera défiler automatiquement jusqu'à la section ayant l'ID "chapter1". 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 Site Creator concerné.
3. Cliquez sur le bouton Éditer mon site pour démarrer l'éditeur:
   

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 explique comment personnaliser et configurer le module de boutique en ligne de Site Creator.

Configurer une boutique sur Site Creator

Prérequis

• Accéder à Site Creator:
  • Cliquer ici afin d'accéder à la gestion de votre produit sur le Manager Infomaniak (besoin d'aide ?).
  • Cliquer directement sur le nom attribué au Site Creator concerné.
  • Cliquer sur le bouton Éditer mon site pour démarrer l'éditeur:
    

Pour gérer les préférences générales du système e-commerce (devise monétaire, taxes, etc.) une fois le module ajouté :

1. Survolez le module de la boutique ajouté sur votre page.
2. Cliquez sur Configuration.

Une fois sur Configuration, plusieurs sous-menus s'affichent sur la gauche permettant de configurer d'autres paramètres:

Moyens de paiement

• Paypal
• Carte bancaire & Twint (via Stripe ou Mollie)
• Paiement personnalisé
• à la livraison

Pour utiliser les services de Stripe et Mollie, vous devez disposer d'un numéro de SIRET en France ou d'un IDE en Suisse. De plus, il est nécessaire d'avoir une entreprise valide enregistrée au registre des commerces de votre pays pour utiliser les services de Stripe et Mollie.

Modes de livraison

Vous pouvez créer plusieurs méthodes d'envoi:

Celles-ci seront ensuite proposées lors de la validation du panier de l'acheteur:

Parmi les paramètres pour créer une méthode d'envoi:

• tarifs (+ gratuité des frais de port à partir de quel montant)
• pays autorisés
• frais d'expédition selon poids
• délais d'envoi
  
  

Messagerie

Quatre messages sont prédéfinis et ne peuvent être supprimés. Ils permettent de couvrir l'ensemble de la communication par e-mail autour d'une commande, autant à destination du client que pour le gestionnaire de la boutique.

Il est possible de personnaliser les messages existants et d'en ajouter (puis de supprimer ces messages supplémentaires si nécessaire):

1. Choisir le moment où l'e-mail devra être envoyé (ou simplement désactiver le message pour le conserver sans l'utiliser)
   1. e-mail nouvelle commande (pour vous notifier)
   2. e-mail de commande traitée (personnalisable)
   3. bon de livraison au format PDF (personnalisable)
   4. facture également générée et disponible au format PDF sur votre compte Stripe/Paypal/Mollie
2. Des variables peuvent être insérées dans chacun des champs afin de personnaliser un maximum les textes à l'aide des éléments que comporte la commande et des informations fournies par l’acheteur:

Page d'accueil de la boutique

• Affichage des catégories produit s'il y en a
• Présentation de produits aléatoires
• etc.

Gestion des produits

Pour gérer les produits, en ajouter ou en supprimer:

1. Survolez le module en haut à gauche.
2. Cliquez sur Produits.

Retrouvez les 3 premiers produits d'exemple:

Réorganisez vos produits en les déplaçant avec la souris.

Cliquez sur un produit pour régler ses détails ainsi que la catégorie dans laquelle il doit se trouver (lire plus bas). Vous pouvez notamment:

• créer des attributs (couleur par exemple) pour proposer le même produit dans plusieurs versions/tarifs
• définir si le produit doit être dématérialisé (virtuel) p.ex un PDF, un ZIP ou un MP3, et donc téléchargeable après l'achat

En bas de l'édition de votre fiche produit, recherchez d'autres produits de votre liste afin de les lier et de les proposer au visiteur.

Tout en bas de la fenêtre d'édition d'un produit, choisissez de masquer si nécessaire le produit à vos visiteurs.

Pour terminer et revenir à la liste des produits, enregistrez les modifications grâce au bouton situé tout en bas. 

Supprimer ou dupliquer un produit 

Sur la fiche d'édition d'un produit, cliquez tout en bas sur le menu d'action à côté du bouton d'enregistrement pour choisir s'il faut supprimer le produit ou le dupliquer.

Gestion du stock / inventaire 

Dans ce même menu d'action, gérez le stock directement sur la liste de vos produits (pour éditer le stock en masse).

Mais chaque fiche produit permet d'éditer le stock et également d'entrer le SKU (unité de gestion des stocks) et son code barre (ISBN).

Catégories de produit

Vos produits peuvent être organisés au sein de Catégories et sous-catégories qui s'afficheront ensuite selon le design de votre site.

Cliquez dans le sous-menu Catégories sur la gauche du panneau d'administration de la boutique, sous Produits.

Définissez une image pour illustrer votre catégorie.

Masquez si nécessaire une catégorie (cela ne masque pas les produits qu'elle contient).

Code promo 

Un code promo permet d'accorder une réduction (en % ou en devise) sur une commande.

Cliquez dans le sous-menu Code promo sur la gauche du panneau d'administration de la boutique, sous Produits.

Vous pouvez spécifier:

• sa date d'expiration
• son montant minimum éventuel
• son nom ("Réduction spécial Noël" par exemple)
• sa forme ("JOYEUXNOEL")

Exporter la liste de vos produits 

Exportez la liste de vos produits (format CSV) grâce au menu d'action situé en haut à droite de la liste de vos produits.

Gestion des commandes

Pour gérer les commandes passées et en cours:

1. Survolez le module en haut à gauche.
2. Cliquez sur Configuration.
3. Cliquez dans le sous-menu Commandes sur la gauche du panneau d'administration de la boutique.

Exporter la liste de vos commandes

Exporter la liste de vos commandes (format CSV) grâce au bouton Télécharger situé à droite de la barre de recherche de commandes.

Gestion des clients

Pour gérer les clients (un client fourni des informations personnelles lors de sa commande):

1. Survolez le module en haut à gauche.
2. Cliquez sur Configuration.
3. Cliquez dans le sous-menu Clients sur la gauche du panneau d'administration de la boutique.

Exporter la liste de vos clients

Exportez la liste de vos clients dans un fichier CSV (format .csv) grâce au bouton Télécharger situé à droite de la barre de recherche de clients.