Comment créer un site Web WordPress

Le tuto de A à Z pour débutant

En 2020, un débutant peut très bien créer un site Web sans savoir coder et sans rien y connaître au développement.

Si vous souhaitez créer un site internet pour vous-même, pour votre entreprise ou pour votre association, il est possible de le faire en utilisant les bons outils et les bonnes ressources.

Ce tutoriel pas-à-pas vous expliquera comment créer un site Web en partant de zéro sans avoir à dépenser des milliers d’euros avec une agence Web ou un freelance. Si vous voulez créer votre site Web WordPress pour 5 Euros par mois d’abonnement et très simplement, lisez la suite.

En suivant les étapes de ce tuto de A à Z, vous aurez votre site en ligne rapidement après environ 1 heure.

Les ressources nécessaires pour créer un site Web WordPress sont :

• Nom de domaine : l’adresse de votre site Web  www.MonSite.com 
• Hébergement Web : service qui donne accès à votre site Web
• WordPress : système gratuit de gestion contenu

Afin d’avoir un site internet, il vous faut un nom de domaine et un compte chez un hébergeur Web. Ces deux éléments sont indispensables pour que votre site soit accessible à tous. Sans eux, vous ne pouvez pas avoir de site en ligne.

Avec un nom de domaine et un hébergement, vous pouvez créer un site Web avec WordPress qui est la solution la plus populaire dans le monde actuellement. Ce système de gestion de contenu est utilisé par plus de 35% des sites Web.

1. Choisir un nom de domaine

Le nom de domaine est le nom de votre site. C’est la première chose dont vous avez besoin pour créer un site Web.

Les visiteurs entrent ce nom dans un navigateur internet afin d’afficher votre site.

Le nom de domaine de notre site est tutositeweb.fr. Vous devez trouver un nom de domaine encore disponible pour votre site.

Voici quelques astuces pour bien choisir votre nom de domaine :

• Si vous créez un site Web professionnel, votre nom de domaine doit correspondre au nom de votre entreprise. Exemple: MonEntreprise.com 
• Si vous créez un site Web personnel,  VotreNom.com  est une bonne option.
• Optez pour une extension générique comme  .com, .eu ou .net  si vous visez une audience internationale. Utilisez une extension locale comme  .fr, .be ou .ch  si vous visez une audience dans un pays en particulier.
• Choisissez un nom court de préférence entre 6 et 14 caractères maximum.

Attention : votre nom de domaine doit être libre, c’est à dire qu’il n’est pas déjà utilisé.

Ne désespérez pas si le nom que vous voulez est déjà pris. Même si beaucoup de noms de domaine sont déjà enregistrés, il existe encore des milliards de possibilités.

Un nom de domaine coûte habituellement entre 10 et 15 € par an.

La bonne nouvelle est que vous pouvez obtenir un nom de domaine gratuit. J’explique comment dans la prochaine étape.

2. Enregistrer le nom de domaine et souscrire un hébergement

En plus d’avoir un nom de domaine, vous aurez également besoin d’un hébergement pour votre site Web (hébergement Web).

L’hébergement Web est un service qui héberge et stocke les fichiers (contenu) de votre site Web sur un serveur sécurisé qui est toujours opérationnel. Sans hébergeur, votre site ne sera pas accessible aux autres utilisateurs sur internet.

Nous avons retenu o2switch pour cela.

Pourquoi ? C’est une offre à 5€ par mois, sans plans additionnels, options, achats supplémentaires etc. Pour ce prix très modeste, pratiquement tout le service est illimité :

• votre espace de stockage (vous pourrez y mettre images, voire vidéos, etc. sans vous soucier de payer un supplément) ;
• vos comptes e-mails professionnels (comptes de type « nom@NomdeDomaine.fr », ce qui vous permet d’avoir des mails génériques type « info@domaine.fr », et personnalisés : « thierry.dupont@domaine.fr », « sylvie.dupont@domaine.fr », etc.) ;
• et d’autres avantages plus techniques mais très importants : sécurité (le fameux petit cadenas dans la ligne du haut de votre navigateur), rapidité (la « bande passante », c’est à dire la quantité d’information qui peut passer en une seconde sur votre ligne – très important si vous mettez des photos de qualité ou des vidéos), support client ! Tellement important si vous avez des soucis ! 24/7…
• Bonus o2switch : Vous n’avez pas besoin de payer votre nom de domaine ! 

1) Pour souscrire à cette offre d’hébergement Web, visitez simplement o2switch.fr et cliquez sur «Inscrivez vous».

2) Ensuite vous pouvez compléter le formulaire d’inscription et cliquez sur «S’inscrire».

3) Sélectionnez l’offre unique o2switch avec nom de domaine inclus.

Si vous avez déjà un nom de domaine acheté ailleurs, vous pouvez le faire pointer vers o2switch en réglant les paramètres DNS.

4) Indiquez le nom de domaine (gratuit) qui doit être disponible et procédez au règlement.

5) Vérifiez dans votre boîte de réception l’email « Bienvenue chez o2switch » qui indique le bon traitement de votre commande.

3. Installer le système de gestion de contenu WordPress

Une fois que votre offre d’hébergement est disponible à l’utilisation, vous pouvez installer un système de création de contenu (CMS).

WordPress est le système le plus répandu car il est gratuit et facile à utiliser. Il permet de créer un site internet personnalisé et évolutif grâce à des milliers de thèmes et d’extensions gratuites.

L’installation de WordPress sur votre compte hébergement o2switch est relativement facile grâce à un outil qui s’appelle Softaculous. Vous pouvez accéder à cet outil dans l’interface d’administration générale du compte Web (CPanel).

1 : Installer WordPress sur votre compte hébergement

1) Ouvrez l’email « Bienvenue chez o2switch » et recherchez les informations de connexion à l’administration générale du compte Web (CPanel).

2) Pour accéder à votre CPanel, vous devez vous connecter depuis une adresse URL ( https://exemple.o2switch.net:1234 ), avec votre nom d’utilisateur (login) et votre mot de passe.

3) Une fois connecté au CPanel, trouvez la section « Softaculous Apps Installer » et cliquez sur WordPress.

4) Ensuite cliquez sur le bouton «Mon AppsInstall Maintenant».

5) Ensuite sélectionnez le domaine que vous avez créé à l’inscription, le nom de votre site et la description du site.

6) Ensuite indiquez les informations de votre compte administrateur qui va servir à vous connecter à WordPress.

Par mesure de sécurité, utilisez un nom d’utilisateur autre que admin et un mot de passe assez fort. Vous pouvez indiquer l’adresse email par défaut de l’administrateur de WordPress.

7) Enfin cliquez sur le bouton «Installation».

Une fois l’installation terminée, un message de félicitations s’affiche avec l’adresse URL de connexion à votre interface WordPress ( http://www.monsite.fr/wp-admin/ ).

2 : Vérifier l’installation de votre site Web

Une fois WordPress installé, vous pouvez vérifier si tout fonctionne.

La façon la plus simple de le faire est de saisir votre nom de domaine dans un navigateur Web (Firefox, Opera, Safari, Chrome…).

Si WordPress est correctement installé, vous devriez voir une page comme celle-ci:

3 : Sécuriser l’adresse du site

Pour faire simple, un certificat SSL permet aux visiteurs d’accéder à votre site en toute sécurité. Au lieu d’avoir une adresse de site internet qui commence par  http://  votre site aura une adresse qui commence par  https:// . C’est essentiel aujourd’hui d’avoir un site sécurisé.

Pour installer un certificat SSL sur votre site, procédez comme suit:

1) Connectez vous à votre CPanel, faites défiler vers le bas pour trouver la section « Sécurité » et cliquez sur «Let’s encrypt SSL».

2) Dans la section « Générer un nouveau certificat », cliquez sur «Générer» en face de votre nom de domaine.

3) Dans l’écran suivant, cliquez sur «Générer» en bas de la page sans modifier les options.

4) Revenez à l’écran d’accueil de CPanel en cliquant sur 02switch en haut à gauche.

5) Faites défiler vers le bas pour trouver la section « Outils » et cliquez sur «WP Tiger».

6) Dans l’écran suivant, cliquez sur «Gérer le site».

7) Faites défiler vers le bas pour trouver « SSL/Https », cliquez sur «Forcer le site en Https».

Si tout s’est bien passé, vous devriez voir une icône en forme de cadenas à côté de votre nom de domaine dans un navigateur Web après avoir tapé l’adresse ( https://www.monsite.fr ).

Une fois le certificat SSL en place, vous pouvez personnaliser votre site Web.

4. Personnaliser votre site Web

Votre site Web est maintenant visible sur internet. Il est temps de le personnaliser avec un joli design et les éléments qui sont propres à votre activité.

Voici la démarche à suivre :

1 : Choisir un thème pour son site

Un thème WordPress est une présentation prête à l’emploi qui permet de changer l’apparence de votre site Web. Si le thème sélectionné ne vous plaît pas, vous pouvez le changer très facilement car les thèmes WordPress sont interchangeables.

L’autre bonne nouvelle est qu’il existe des milliers de thèmes WordPress gratuits, ou payants, disponibles sur internet.

Au début, le mieux est d’installer un thème gratuit directement depuis le répertoire officiel des thèmes WordPress. Tous les thèmes officiels WordPress.org sont de qualité. C’est le choix le plus sûr qui sera sans mauvaise surprise.

Afin de choisir un thème gratuit officiel, vous devez vous connecter à votre compte administrateur WordPress via l’URL  https://www.monsite.fr/wp-admin/ . Tapez le nom d’utilisateur et le mot de passe définis lors de l’installation.

VIDEO : Comment ajouter un thème

Cliquez au centre de l’image pour lancer la vidéo

1. Dans la barre de menu à gauche, sélectionnez la section « Apparence » et cliquez sur «Thèmes».

2. Ensuite cliquez sur «Ajouter un nouveau».

3. Dans la barre du haut, cliquez sur «Populaires».

2 : Installer votre thème préféré

N.B. Un bon thème WordPress doit être :

• Adapté à tous les écrans (Responsive) : c’est obligatoire, l’affichage du site doit s’adapter aux écrans des smartphones.
• Rapide : le thème doit être léger et s’afficher le plus rapidement possible.
• Optimisé pour les moteurs de recherche (SEO) : le thème doit faciliter le référencement naturel dans Google et les autres moteurs de recherche.
• Personnalisable : il doit donner la possibilité de changer les couleurs ou l’agencement du site.

Vous êtes libre de parcourir cette liste et de choisir le thème qui vous plaît le plus.

Pour simplifier, nous allons utiliser dans ce tuto le thème gratuit Astra. Ce beau thème est l’un des plus populaires avec plus de 700 000 utilisateurs à ce jour. Entièrement personnalisable, ce thème est rapide, léger et optimisé pour plaire aux moteurs de recherche.

VIDEO : Comment ajouter le thème Astra

Cliquez au centre de l’image pour lancer la vidéo

1. Cliquez sur «Installer» au niveau de la boîte du thème Astra.

2. Ensuite cliquez sur «Activer».

Un message s’affiche qui annonce l’installation du thème avec succès. Ne le fermez pas. Pour aller plus vite, vous pouvez utiliser les modèles de sites proposés par Astra.

3. Dans le message de succès d’installation Astra, cliquez sur «Commençons».

L’énorme avantage du thème Astra réside dans le choix de modèles de sites. Cela permet de créer un site Web très rapidement avec un design pro sans grande difficulté.

4. Dans l’écran suivant, cliquez sur «Elementor».

Vous pouvez voir une galerie avec des dizaines de modèles de sites. Afin d’installer un modèle gratuit, il faut en sélectionner un qui n’est pas marqué « Agency ». Les modèles disponibles gratuitement couvrent de nombreux domaines qui pourront parfaitement faire l’affaire pour une boutique bio, un coach, un restaurant, une prof de yoga, une architecte d’intérieur, une artiste, un photographe, un mariage, une association, un événement… Vous devriez trouver un modèle qui correspond à votre besoin.

Dans ce tuto, nous allons choisir le premier modèle de la liste qui s’appelle «Outdoor Adventure».

VIDEO : Comment importer une page d’accueil

Cliquez au centre de l’image pour lancer la vidéo

1. Dans la galerie, cliquez sur la boîte «Outdoor Adventure».

A ce stade, vous avez le choix entre l’importation de toutes les pages du modèle ou l’importation de la seule page d’accueil. Comme les pages Web des modèles sont en anglais, il est plus simple d’importer uniquement la page d’accueil et d’ajouter ultérieurement d’autres pages au site.

2. Cliquez sur «Import Home Template» et sur l’écran suivant cliquez sur «Import».

A la fin du processus, vous devriez voir un message qui annonce le succès de l’importation. Vous pouvez fermer cette fenêtre. A présent, vous pouvez personnaliser le thème.

3 : Ajouter votre logo

La première chose à faire pour personnaliser son site est d’ajouter son propre logo et de l’afficher dans le coin supérieur gauche du site.

Si vous n’avez pas de logo, vous pouvez en créer un en ligne. Grâce au site freelogodesign.org, vous pouvez créer un logo gratuitement en quelques secondes.

Une fois que vous avez un logo, vous pouvez l’ajouter à votre site.

VIDEO : Comment ajouter un logo

Cliquez au centre de l’image pour lancer la vidéo

1. Dans la barre de menu à gauche, sélectionnez la section « Apparence » et cliquez sur «Personnaliser».

2. A gauche, cliquez sur «En-tête» et ensuite sur «Identité du site».

3. Ensuite, cliquez sur «Sélectionner un logo».

4. Une fois le logo chargé, décochez l’option « Afficher le titre du site » en bas du menu à gauche.

5. Enfin, cliquez sur «Publier» et sur la croix à gauche pour fermer l’interface de personnalisation.

5 : Définir la page d’accueil

Par défaut, WordPress affiche une page avec un article Hello World. Vous pouvez remplacer cette page d’accueil et afficher celle que vous avez importée lors de l’installation du thème. Cette page s’affichera quand les visiteurs tapent votre nom de domaine dans leur navigateur internet.

VIDEO : Comment définir la page d’accueil

Cliquez au centre de l’image pour lancer la vidéo

1. Dans la barre de menu à gauche, sélectionnez la section « Pages » et cliquez sur «Toutes les pages».

2. Sous la page « Home » dans la liste, cliquez sur «Modifier».

3. En haut à gauche, vous pouvez renommer la page « Home » en « Accueil »

4. Ensuite cliquez sur «Publier» deux fois et sur le W en haut à gauche.

5. Dans le menu gauche, sélectionnez la section « Apparence » et cliquez sur «Personnaliser».

6. En bas à gauche, cliquez sur «Réglages de la page d’accueil».

7. Cochez l’option « Une page statique », sélectionnez la page « Accueil » et cliquez sur «Publier» puis sur la croix à gauche pour fermer l’interface de personnalisation.

6 : Modifier la page d’accueil

VIDEO : Comment modifier la page d’accueil

Cliquez au centre de l’image pour lancer la vidéo

1. Dans la barre de menu à gauche, sélectionnez la section « Pages » et cliquez sur «Toutes les pages».

2. Sous la page « Accueil » dans la liste, cliquez sur «Modifier avec elementor».

Elementor est un constructeur de page visuel. Vous pouvez cliquer sur n’importe quel élément de la page et le modifier directement. Par exemple, si vous souhaitez modifier le titre principal, cliquez simplement dessus et commencez à taper.

Sur la droite de l’écran, vous voyez les éléments composant la page. Dans la barre latérale gauche, vous trouvez un panneau de personnalisation qui permet de modifier chaque élément. Vous pouvez ajuster la structure et le style de n’importe quel bloc de contenu.

Avec Elementor, vous pouvez sélectionner n’importe que élément sur la page et le faire glisser à un autre endroit.

Pour ajouter de nouveaux éléments, cliquez sur la petite icône carrée dans le coin supérieur gauche.

Vous verrez alors une liste de tous les blocs de contenu disponibles.

Il est possible de saisir l’un des blocs et de la faire glisser sur la page à droite.

Vous pouvez personnaliser votre page d’accueil en modifiant le contenu d’un bloc après l’autre et en vous basant sur la page de démonstration.

Vous pouvez saisir votre texte, changer l’alignement de certains des blocs, supprimez ceux dont vous n’avez pas besoin et ajoutez-en de nouveaux si besoin.

L’interface d’Elementor est assez intuitive à utiliser. Vous pouvez passer un peu de temps pour vous familiariser avec et pour agencer la page d’accueil de votre site.

3. A la fin de l’édition, n’oubliez pas de cliquer sur le bouton «Mettre à jour» pour sauvegarder vos modifications. Pour quitter Elementor, cliquez sur le bouton en haut à gauche et cliquez sur «Revenir à l’éditeur WordPress».

5. Ajouter des pages et du contenu

Un site Web ne se limite pas à une seule page d’accueil. Il est nécessaire d’ajouter d’autres pages.

La bonne nouvelle est qu’il est relativement facile d’ajouter une page Web dans WordPress.

En général, on trouve les pages suivantes sur un site internet :

• Page d’Accueil : c’est la première page que vos visiteurs voient lorsqu’ils visitent votre site Web.
• Page Contact : une page permettant aux visiteurs de vous contacter
• Page À propos : une page qui explique votre mission ou votre histoire.
• Page Blog : une page qui affiche la liste de vos articles de blog. Si vous ne prévoyez pas de bloguer, vous pouvez utiliser la page de blog pour afficher les dernières annonces concernant votre entreprise ou votre association.
• Page Services :une page qui présente vos services.
• Page Boutique :une page pour présenter votre commerce ou votre boutique en ligne.

Après avoir appris à créer une page, vous saurez comment créer les autres. La plupart des pages d’un site ont une structure similaire.

1 : Ajouter des pages

Il est assez facile d’ajouter des pages au site dans WordPress.

VIDEO : Comment ajouter une page

Cliquez au centre de l’image pour lancer la vidéo

1. Dans la barre de menu à gauche, sélectionnez la section « Pages » et cliquez sur «Ajouter».

2. Tapez le titre de la page et cliquez sur l’icône «Ajouter un bloc» pour ajouter un élément à la page.

3. Sélectionnez un bloc de texte par exemple.

4. Tapez le texte.

5. Cliquez à nouveau sur l’icône plus en haut à gauche pour ajouter un nouvel élément à la page.

6. Sélectionnez un blog image par exemple, cliquez sur «bibliothèque de médias» et cliquez sur une image pour l’ajouter à la page.

7. Lorsque vous avez terminé, vous pouvez cliquer sur le bouton «Publier» en haut à droite. La nouvelle page est alors publiée et accessible sur votre site. Vous pouvez répéter la même procédure pour ajouter d’autres pages à votre site.

2 : Ajouter une page Blog

Une page Blog permet d’afficher la liste de vos articles de blog les plus récents. Si vous ne prévoyez pas de bloguer, vous pouvez utiliser cette page de blog pour afficher les dernières nouvelles concernant votre entreprise ou votre association.

Si vous ne souhaitez pas ajouter un blog ou de dernières nouvelles à votre site, cette page n’est pas nécessaire.

VIDEO Comment ajouter une page Blog

Cliquez au centre de l’image pour lancer la vidéo

1. Dans la barre de menu à gauche, sélectionnez la section « Pages » et cliquez sur «Ajouter».

2. Tapez le titre de la page « Blog » ou « Dernières Nouvelles ». Peu importe le titre, vous choisissez.

3. Cliquez sur «Publier» en haut à droite à deux reprise et ensuite sur le W en haut à gauche.

4. Dans la barre de menu à gauche, sélectionnez la section « Réglages » et cliquez sur «Lecture».

5. Dans le menu déroulant « Pages des articles », sélectionnez la page avec votre titre « Blog » ou « Dernières Nouvelles ».

6. En bas de la page, cliquez sur «Enregistrer les modifications».

Etape 3 : Ajouter un article

La page précédente affichera automatiquement les derniers articles de blog ou les nouvelles les plus récentes. Pour ajouter un nouvel article, c’est assez simple.

VIDEO : Comment ajouter un article

Cliquez au centre de l’image pour lancer la vidéo

1. Dans la barre de menu à gauche, sélectionnez la section « Articles » et cliquez sur «Ajouter».

L’interface est en tout point similaire à celle de l’ajout de pages. Il suffit de taper un titre d’article et d’ajouter des blocs de contenu à cet article.

2. Cliquez sur «Publier» en haut à droite à deux reprises et ensuite sur le W en haut à gauche.

6. Ajouter un formulaire de contact

Une page permettant aux visiteurs de vous contacter est essentielle sur votre nouveau site. Afin de créer un formulaire de contact, il est nécessaire d’utiliser une extension WordPress.

Nous vous recommandons d’installer WPForms Lite qui est une extension de formulaire de contact conviviale pour les débutants. Elle permet de créer facilement un formulaire avec une interface en glisser/déposer. Une fois le formulaire créé, il faut l’ajouter à une page Contact.

VIDEO : Comment ajouter un formulaire de contact

Cliquez au centre de l’image pour lancer la vidéo

1. Dans la barre de menu à gauche, sélectionnez la section « Extensions » et cliquez sur «Ajouter».

2. Tapez le nom de l’extension en haut à droite « WP Forms ».

3. Au niveau de la boîte WP Forms, cliquez sur «Installer» puis sur «Activer».

4. Sur l’écran suivant, cliquez sur «Créer votre premier formulaire».

5. Ensuite saisissez le nom du formulaire et cliquez sur «Formulaire de contact simple».

L’interface de WP Forms permet de modifier le formulaire par défaut. Il est possible de glisser/déposer sur le formulaire des éléments comme ligne texte, liste déroulante, choix multiple, etc. Pour ce tutoriel, nous allons garder le formulaire par défaut tel quel.

6. En haut à droite, cliquez sur «Intégration», copiez le code court qui s’affiche et fermez la fenêtre de dialogue.

7. Cliquez sur «Enregistrer» puis sur la croix en haut à droite pour fermer l’interface WP Forms.

Il reste maintenant à intégrer le code court dans une nouvelle page WordPress.

8. Dans la barre de menu à gauche, sélectionnez la section « Pages » et cliquez sur «Ajouter».

9. Tapez le titre de la page « Contact ».

10. Cliquez sur «Publier» en haut à droite à deux reprises et ensuite sur le W en haut à gauche.

Votre formulaire de contact est désormais accessible. Quand un visiteur remplit le formulaire, un message est automatiquement envoyé à l’adresse e-mail d’administration renseigné dans votre installation WordPress Réglages > Général.

7. Configurer le menu de navigation

La prochaine étape consiste à ajouter toutes les pages du site à un menu de navigation. Cela permettra à vos visiteurs d’accéder facilement aux pages de votre site Web.

VIDEO : Comment configurer le menu de navigation

Cliquez au centre de l’image pour lancer la vidéo

1. Dans la barre de menu à gauche, sélectionnez la section « Apparence » et cliquez sur «Menus».

2. Tapez le nom du menu et cliquez sur «Créer le Menu».

3. Dans la partie gauche, cliquez sur «Afficher tout» pour voir toutes les pages et sélectionnez celles que vous souhaitez faire apparaître dans le menu.

4. Cliquez sur «Ajouter au menu» puis cochez « Menu principal » pour indiquer l’emplacement de ce menu.

5. Enfin cliquez sur «Enregistrer le menu».

A ce stade, vous pouvez voir le menu s’afficher en haut de votre page d’accueil.

Félicitations !

Félicitations, vous venez de compléter notre tuto gratuit pour débutant qui explique comment créer un site Web.

Si vous avez terminé ce tutoriel, vous pouvez envoyer votre témoignage à cette adresse e-mail – contact@tutositeweb.fr.