Certification mondiale en ligne : Cours pour débutants - Section 1

Section 1 du cours pour débutants

Bienvenue dans la section 1 du cours de formation en ligne pour débutants.

Après avoir terminé cette section, vous serez capable de :
  • Utilisez l'assistant de configuration pour créer un site web d'essai
  • ajouter, supprimer et renommer les pages de votre site web d'essai
  • Ajouter des titres de page, des sous-titres et du texte de paragraphe à une page Web
  • ajouter une image à une page web
  • ajouter un logo à votre site web d'essai

Utilisez l'assistant de configuration pour créer un site web d'essai

Inscrivez-vous pour un essai gratuit du site web en :

  • Cliquer sur le bouton « Démarrer votre essai »
  • Cliquez sur le bouton Sélectionner du modèle de site web Decor Theme (vous pouvez sélectionner un autre thème si vous préférez, mais sachez que pendant le cours, nous utiliserons le modèle Decor Theme pour la démonstration).


Ensuite, vous devrez sélectionner le type de site web, qui, pour les besoins de ce cours, devra être l'option Boutique/Vente au détail


Ensuite, vous devrez saisir vos coordonnées, ainsi qu'un nom pour votre site web. Pour ce cours, nous utiliserons le nom « Ma boutique de t-shirts ».


Vous allez recevoir un courriel de Website World contenant vos identifiants de connexion et un mot de passe temporaire pour votre site web d'essai. Après avoir saisi ce mot de passe, vous serez redirigé vers la page d'accueil du CMS (système de gestion de contenu). C'est ici que vous pourrez modifier et concevoir votre nouveau site web.

Le modèle et le type de site web que nous avons choisis ont entraîné l'ajout automatique de certaines pages à titre d'exemples. Le site n'étant pas encore en ligne, vous pouvez ajouter, supprimer ou renommer des pages sans risque de pénalité de la part des moteurs de recherche (ce qui pourrait se produire si le site était en ligne).


Ajout, suppression et renommage de pages Web

Pour ajouter une nouvelle page à votre site Web, cliquez sur le bouton Ajouter une page situé à gauche de votre écran (flèche rouge), ou dans le menu déroulant de l'onglet Pages Web, sur le bouton Ajouter une page (flèche jaune).


Sur un nouvel écran, il vous sera demandé quel type de page vous souhaitez ajouter. Pour les besoins de ce cours, nous ajouterons une page unique (glisser-déposer).


Il vous sera ensuite demandé d'ajouter des informations concernant cette page : le texte du bouton de menu, le titre de la page et le nom du fichier SEO. Vous trouverez ci-dessous une capture d'écran des informations que nous avons ajoutées pour ce cours, pour la nouvelle page « À propos ».


Après avoir cliqué sur le bouton « Ajouter une nouvelle page maintenant », vous serez redirigé vers votre nouvelle page « À propos ». Elle sera également automatiquement ajoutée au menu situé à gauche de votre écran, ainsi qu'à la barre de menu de votre site web.

Supprimer une page web, même complètement, est déconseillé pour des raisons de référencement (SEO). Il est préférable de la rendre invisible pour les internautes et de la retirer du menu. Si vous devez absolument la supprimer, veillez à rediriger son URL vers une page active.

Votre site web étant actuellement en phase de test, vous pouvez supprimer une page sans problème. Pour ce faire, cliquez sur le bouton « Pages web », ce qui ouvrira une page de plan du site listant toutes vos pages. Dans cet exemple, nous allons supprimer la page « S'abonner ». Cliquez ensuite sur l'icône d'engrenage (flèche rouge).


Une fenêtre s'ouvrira alors, vous proposant différentes options pour cette page. Sélectionnez l'option « Supprimer cette page ». Un message d'avertissement apparaîtra. Cliquez sur « Supprimer la page maintenant », puis fermez la fenêtre en cliquant sur la croix (X) située dans le coin.

Renommer une page s'effectue également via le plan du site. Cliquez sur le bouton « Pages Web », puis sélectionnez l'icône d'engrenage correspondant à la page « Boutique ». Vous pouvez modifier le texte du bouton, le titre de la page et le nom de fichier optimisé pour le référencement (SEO). Attention : une fois votre site en ligne, il est fortement déconseillé de modifier les noms de fichiers SEO. En effet, cela crée des liens brisés et les moteurs de recherche interprètent ces modifications comme l'apparition d'une nouvelle page. Vous perdez ainsi tous les avantages SEO associés à cette page. Toutefois, si votre site est encore en phase d'essai, vous pouvez modifier les noms de fichiers sans pénalité.

Dans le cadre de ce cours, nous modifions le texte du bouton de « Shopping » à « Boutique » et le titre de la page de « Shopping » à « Boutique de t-shirts ».


Pour enregistrer les modifications apportées à votre site web, veuillez cliquer sur le bouton vert « Publier ». Votre site ne sera pas mis en ligne, mais les modifications seront publiées sur votre site de test et enregistrées.

Ajouter des titres de page, des sous-titres et du texte de paragraphe à une page

Pour modifier une page et ajouter des titres, des en-têtes et du texte, cliquez sur son nom dans l'onglet « Pages Web » situé à gauche de votre écran. La page s'ouvrira alors pour que vous puissiez la modifier. Dans cet exemple, nous allons modifier la page « À propos », comme illustré ci-dessous, à l'aide de l'éditeur glisser-déposer d'Innova Studio.



La page « À propos » étant ouverte, vous pouvez ajouter des sous-titres et du texte. Pour ce faire, cliquez dans la zone de texte prévue à cet effet, située par défaut au centre de la page, ou sélectionnez un extrait dans la colonne de droite contenant le type de texte souhaité.

Voici un lien vers le texte que nous avons utilisé, que vous pouvez télécharger et copier-coller (Ctrl+V) dans votre site d'essai si nécessaire.

Faites un clic droit et sélectionnez « Enregistrer sous » pour télécharger le texte de la page « À propos ».

Nous avons ajouté du texte dans la zone de paragraphe existante, puis cliqué et fait glisser la zone de titre H2 située au-dessus. Nous avons ensuite ajouté un titre à ce titre, comme sur cette image :


Il existe deux façons de modifier le titre de la page, ou titre de niveau 1 (h1). Vous pouvez d'abord suivre les instructions de l'étape précédente concernant le renommage d'une page. Ensuite, vous pouvez ouvrir l'onglet SEO dans le menu bleu, puis sélectionner « Optimiser les balises méta des pages Web ».

Vous accéderez alors à une page vous permettant de modifier vos balises méta SEO, notamment le titre de votre page. Pour l'instant, nous le laisserons sur « À propos ».


Télécharger et ajouter une image à une page Web

Ouvrez à nouveau votre page « À propos » en cliquant sur son titre, qui se trouve dans la colonne « Pages Web » à gauche de l'écran.

Faites un clic droit sur ce lien et sélectionnez « Enregistrer sous » pour télécharger l'image que nous avons utilisée ci-dessous.

Il existe deux façons d'ajouter une image à une page. Celle que vous utiliserez dépendra de l'image que vous souhaitez insérer.

  1. Pour insérer une image dans un bloc de texte existant, placez votre curseur à l'endroit souhaité (flèche rouge), puis cliquez sur le signe + dans la barre d'édition (flèche violette). Notez que si vous placez votre curseur à côté d'un texte, sa position sera modifiée. Si vous souhaitez insérer l'image à côté du texte, il est préférable d'utiliser un extrait de code. Une boîte de dialogue s'ouvre alors, vous demandant quel type d'insertion choisir (image, lien ou champ de formulaire). Sélectionnez « Insérer une image ». Pour importer une image depuis votre appareil, cliquez sur le bouton Parcourir pour ouvrir vos fichiers image, double-cliquez sur l'image (le format JPEG est recommandé), puis cliquez sur le bouton bleu Importer.


L'assistant d'images du CMS ouvrira votre image, prête à être modifiée si nécessaire. Il affichera sa taille actuelle, son nom de fichier et des options pour la recadrer, la faire pivoter, la redimensionner et la convertir en JPG. Nous allons redimensionner cette image pour qu'elle s'affiche correctement sur la page « À propos ». Cliquez sur la flèche déroulante de la zone « Redimensionner » et sélectionnez l'option « 448 x 448 » (Blog). Modifiez le nom du fichier si nécessaire, puis cliquez sur « Enregistrer les modifications ».


Une autre fenêtre s'ouvrira, vous offrant des options de modification pour votre image, notamment sa position, sa bordure et son espacement. Pour cet exemple, nous conserverons les paramètres par défaut (bordure, alignement et espacement), puis nous cliquerons sur le bouton bleu « Insérer la photo maintenant ».


Votre page « À propos » ressemblera désormais à ceci dans la zone d'édition du CMS :



Nous aborderons plus en détail les techniques de retouche d'images dans les sections suivantes du cours.

Ajouter un logo à votre site web

L'un des meilleurs moyens de personnaliser votre site web est d'y ajouter le logo de votre entreprise. Survolez le bouton « Design » du menu, puis choisissez l'option « Images d'arrière-plan ou de logo ».

Faites un clic droit sur ce lien et sélectionnez « Enregistrer sous » pour télécharger le logo que nous avons utilisé.


La page « Options de conception » qui s'affiche présente par défaut le logo textuel (nom du site web). Nous allons le remplacer par une image. Cliquez sur l'icône d'image (changer l'image) pour ajouter votre logo.



Vous serez de nouveau redirigé vers l'Assistant Image où vous pourrez parcourir vos fichiers et importer une image depuis votre appareil (idéalement, votre logo doit déjà avoir la taille requise, soit 910 x 120 px). Cette fois-ci, sélectionnez l'option « Logo » dans le menu déroulant « Redimensionner » : « Logo 910 x 120 ». Votre logo sera automatiquement placé à l'emplacement du nom du site web, au-dessus du menu. Cliquez sur « Publier » pour enregistrer votre travail.

Vous avez terminé la section 1 du cours pour débutants. Bravo ! Il est maintenant temps de passer à la suite. Section débutants 2.