1. Home
  2. Site Builder
  3. Création de sites web avec le «Site Builder» SitePad

Création de sites web avec le «Site Builder» SitePad

Introduction

N0C donne accès à SitePad, un logiciel créateur de sites web (Site Builder) qui permet de les concevoir assez facilement.

SitePad

Dans les lignes qui suivent, nous vous expliquerons une méthode pas à pas permettant de parvenir à cet objectif. Nous débuterons par les instructions absolument nécessaires pour la mise en place initiale de votre site. Nous expliquerons comment créer un site, définir la langue, choisir un thème (gabarit ou template), ajouter les pages et en faire la mise en page, puis sauvegarder, et prévisualiser ou publier votre site. Nous expliquerons aussi comment créer d’autres sites et basculer d’un site à l’autre. 

Les divers outils mis à votre disposition pour maintenir vos sites web sont décrits dans d’autres articles. Une certaine logique justifie que le lecteur les consulte dans l’ordre.

Nous nous limiterons aux renseignements ayant trait à l’utilisation pour usagers de niveau débutants. 

Attention : SitePad n’est pas un sytème de gestion de contenu (CMS), mais bien un SaaS (Software as a Service) conçu spécifiquement pour créer des sites web.

Note : Le glossaire de PlanetHoster contient  des explications sur de multiples sujets et peut être consulté pour clarifier certains termes.

Préparation

Assurez-vous d’avoir un compte Gmail.

Saisissez dans votre navigateur web l’adresse suivante : https://mg.n0c.com/fr/.

Étape 1 – Création du site

  1. Choisissez Site Builder :
  1. Un nouvel onglet de votre navigateur s’ouvre sur l’interface SitePad.
  2. Notez le menu contextuel affiché à gauche :
  1. Notez la présence de la zone de notification, parfois appelée barre de navigation, en haut à droite.

Étape 2 – Définition de la langue

Assurez-vous que la langue française est choisie (Français), car elle est employée dans la rédaction de notre article.

  1. Vous pouvez facilement choisir la langue depuis la zone de notification en faisant passer le pointeur de votre souris dans la partie bleue juste à gauche de votre nom d’utilisateur :
  1. Cliquez sur la langue de votre choix dans le menu indiquant toutes les langues disponibles pour SitePad :

Note : La langue peut être modifiée en tout temps à partir des réglages aussi. Référez-vous à l’article Changement de la langue.

Étape 3 – Désactivation de l’assistant

L’assistant est un outil qui vous aide à naviguer dans l’éditeur de SitePad. Lorsque vous vous connectez pour la première fois, l’assistant est activé par défaut. Nous allons le désactiver pour la suite de la compréhension de cet article. 

Pour ce faire, il vous suffit de cliquer sur le X, comme indiqué dans l’image ci-dessous:

Étape 4 – Choix du thème (gabarit ou template)

Un thème donne la possibilité de gérer l’ensemble de votre site très aisément. Une condition s’impose toutefois : il faut viser à bien prévoir la structure dès sa conception et posséder un minimum de connaissances de SitePad.

Dès lors, avant toute chose, nous allons choisir le thème désiré pour votre site web.

  1. Vous pouvez cliquer sur le bouton Thèmes dans le volet de gauche ou bien choisir un thème depuis la zone d’aperçu rapide de l’écran d’accueil; vous serez ensuite redirigé vers le gestionnaire de thèmes, qui vous laissera en choisir un pour votre site web :
  1. Vous pouvez aussi utiliser la fonction Rechercher afin de rechercher un thème dont le nom, la catégorie ou le tag contient le ou les mot(s) clé(s) recherché(s).
  2. Vous pouvez afficher plus d’information sur un thème donné en cliquant sur le bouton Détails du thème, lequel apparaît lorsque vous positionnez votre curseur au-dessus de l’illustration du thème : 
  1. Lorsque vous avez trouvé un thème convenable, vous devez ensuite activer l’éditeur de page en cliquant sur le bouton vert Activer.
  2. Votre thème étant activé, vous pouvez le prévisualiser dans une autre page en cliquant dans la zone de notification en haut à droite sur le bouton nommé Prévisualiser :
  1. Après avoir prévisualisé le thème, retournez à l’éditeur de page et cliquez sur le bouton Fermer.

Étape 5 – Ajout des pages et mise en page

Le thème étant choisi, nous en sommes à l’ajout de vos pages et leur mise en page — une étape cruciale de la mise en place de votre site web. 

  1. Dans le menu contextuel, cliquez sur Pages 
  1. Remarquez que, par défaut, SitePad vous propose d’avoir un en-tête (header) et un pied de page (footer). 

Important : Ne supprimez jamais les pages nommées Header et Footer.

En-tête (header)

L’en-tête désigne la partie haute du site web.

Elle réunit l’ensemble des renseignements qui peuvent se trouver sur votre site web. Il s’agit de l’élément qui va permettre d’y diriger vos visiteurs : sa conception est cruciale pour qu’ils s’y retrouvent.

Le pied de page désigne la partie basse du site web.

Les liens et contenus présents dans le pied de page s’adressent typiquement aux visiteurs, mais également et surtout aux moteurs de recherche.

Dans le premier cas, les contenus et liens y figurant permettent généralement de pointer vers des contenus ou informations annexes ou n’intéressant qu’une petite partie des visiteurs, et qui n’ont donc pas leur place dans l’en-tête ou dans les menus de navigations principaux.

Ajout d’une nouvelle page

  1. Dans le menu contextuel, cliquez sur Ajouter 
  1. L’éditeur de page est alors activé :
  1. Les nouvelles pages et leur titre sont tous deux nommés New Page. L’adresse (ou URL) de la page est aussi proposée par défaut. Vous pouvez modifier cela comme vous le voulez dans le haut de l’éditeur de page, au moyen des champs prédéfinis.

Modification des pages existantes

  1. Dans le menu contextuel, cliquez sur Toutes les pages 
  1. Vous avez accès à certaines options illustrées par des icônes, telles que Modifier cet élément, Déplacer cet élément dans la corbeille, Afficher, etc. 
  2. Sélectionnez Modifier cet élément (icône en forme de crayon) :
  1. L’éditeur de page est alors activé.

Utilisation de l’éditeur de page

  1. L’éditeur de page vous offre la possibilité de glisser et de déposer des éléments depuis la Barre des objets. Plusieurs éléments s’y trouvent, tels que l’insertion d’un paragraphe de texte, l’insertion d’une zone vidéo, etc.
  1. Lorsqu’un élément est déposé à un endroit particulier, la Barre d’actions apparaît avec toutes les options concernant l’objet qui vient d’être déposé, certains objets fournissant aussi un menu d’options avancé afin de configurer tous les paramètres requis :
  1. Lorsque vous travaillez sur un objet, vous pouvez aussi le copier sur un autre endroit de votre site ou le supprimer en cliquant respectivement sur les boutons Dupliquer l’objet ou Supprimer l’objet en haut, dans la barre de menu :

Vous disposez de plus de 40 objets afin de personnaliser vos pages.

Étape 6 – Ajout d’un titre et d’un slogan personnalisés au site

  1. Une fois connecté au SitePad, cliquez dans le volet de gauche sur l’option nommée Réglages et sur Général. La page Réglages généraux est alors affichée :
  1. Dans la page des réglages généraux, vous constaterez la présence de diverses options : Titre du Site, Slogan du site, Format de date, Fuseau Horaire, Format d’heure, etc. Saisissez le titre du site et le slogan dans les champs du même nom.
  2. Cliquez sur le bouton Enregistrer les modifications :

Étape 7 – Sauvegarde , prévisualisation ou publication de votre site

Une fois la mise en page terminée, vous pouvez soit publier directement le site web afin que les changements y soient reflétés, ou bien simplement le mettre à jour afin de sauvegarder le travail en cours.

Avant de poursuivre, il convient de noter que trois boutons vous seront toujours utiles durant la conception de votre site web. Ils sont localisés dans le coin supérieur droit :

  • Cliquez sur le bouton Publier pour publier les modifications lorsque vous y êtes prêt.
  • Vous pouvez sauvegarder la version en cours de création sans pour autant la publier en cliquant sur le bouton Mettre à jour
  • Vous pouvez prévisualiser les modifications que vous apportez sans pour autant les sauvegarder et les publier en cliquant sur le bouton Prévisualiser.

Ainsi, pour publier votre site web :

  1. Assurez-vous que l’éditeur de page est ouvert :
  1. Lorsque vous cliquez sur le bouton nommé Publier, une fenêtre de confirmation s’ouvre :
  1. Cochez la case confirmant votre certitude de bien vouloir publier la page actuelle sur le site.
  2. Cliquez sur le bouton vert « Oui, Publier »; une barre de progression vous indique alors le processus de publication.
  3. Lorsque la publication est terminée, vous avez le choix de cliquer sur le bouton Terminé ou bien Visite le Site pour voir le site publié: 

Étape 8 – Ajout d’un site supplémentaire et changement de site

Vous pouvez créer autant de sites web que vous le désirez et basculer aisément de l’un à l’autre.

Ajout d’un site supplémentaire

  1. Cliquez dans le volet de gauche sur l’option nommée Sites. Un menu contextuel est alors affiché :
  1. Cliquez sur Ajouter, ce qui donne accès à l’interface de gestion de l’ajout de sites web :
  1. Remplissez les champs : nom du site (Site Name), domaine et répertoire s’il y a lieu (Adresse du site), Titre du site (c’est ce titre qui sera affiché sur votre Page lorsqu’elle sera publiée), Langue du site (si vous désirez la changer) et Adresse de contact de l’administrateur (si désiré).
  2. Cliquez sur le bouton Ajouter un site.
  3. Une fois le site web créé, un message de succès vous demandant si vous désirez visiter ou modifier le site vous permet de choisir l’une ou l’autre des options, à votre convenance.

Passage d’un site à un autre

Pour basculer du site actuel vers un autre site sur lequel vous souhaitez travailler à nouveau :

  1. Passez votre curseur sur le bouton Changer de Site dans la barre de navigation. Un menu déroulant avec tous les sites que vous avez ajoutés se révèle. Cliquez alors sur le site sur lequel vous souhaitez travailler de nouveau :
  1. Cliquez sur Tableau de bord :

Note : Le site créé par SitePad lorsque vous vous êtes connecté la première fois sera toujours le premier dans la liste.

Updated on mars 30, 2022

Related Articles