Dans ce tutoriel WordPress on va découvrir ensemble comment utiliser l’outil de création de site internet le plus célèbre du marché : WordPress.

Probablement le meilleur outil qui existe et qui a déjà utilisé par 40% des sites internet dans le monde.

Oui, c’est énorme.

Dans ce tutoriel on ne va pas simplement faire un tour d’horizon de WordPress, mais on va apprendre étape par étape comment utiliser cet outil pour créer soi-même son site internet. J’espère que vous êtes motivé, parce qu’on a du pain sur la planche !

Étape n°1 – Installer WordPress

N’importe quel site web au monde, qu’il soit créé avec WordPress ou non, nécessite obligatoirement deux choses  :

• Un nom de domaine
• Et un hébergement

Avoir un site web, c’est un peu comme construire une maison. On a besoin d’un terrain viable sur lequel construire sa maison et une adresse postale pour permettre à tout le monde de nous trouver.

Le terrain de construction, c’est l’hébergement et l’adresse, c’est le nom de domaine. Malheureusement construire sa petite maison sur le web a un coût :

• Pour le nom de domaine, ça sera moins de 10€ par an
• Pour l’hébergement, il faudra compter environ 40€ par an

Ce qui nous amène donc à un budget d’environ 4€ par mois au minimum.

Réserver son nom de domaine

Comme on vient de le voir, le nom de domaine c’est l’adresse d’un site web. Cette adresse va être composée de deux éléments :

• Un nom
• Et une extension

Le nom que vous allez choisir pourra tout simplement être celui de votre marque ou de votre nom propre. Ce nom devra uniquement être composé de caractères alphabétiques, de chiffres et de tirets. Donc pas d’accents, de caractères spéciaux ou de majuscules.

En plus de ce nom, on devra choisir une extension. Même si vous ne savez pas ce qu’est une extension, je suis sûr que vous en connaissez au moins quatre :

• .fr
• .com
• .net
• .org

Ce sont les extensions les plus connues, mais il en existe plus de 1 500 disponibles. Certaines sont là pour l’originalité (.ninja, .love, .pizza, .love, etc.), alors que d’autres sont associées à des localisations (.cn pour la Chine, .ru pour la Russie, .uk pour le Royaume-Uni, etc.).

Pour posséder un nom de domaine, il faut le réserver chez un «registrar». La démarche est relativement simple et repose sur une seule règle, elle aussi très simple :

Premier arrivé, premier servi.

Aucune entreprise et marque, aussi grosse soit-elle, n’a un droit de propriété sur un nom de domaine. Par exemple, Tesla a essayé pendant 10 ans d’acheter le nom de domaine «tesla.com» à son propriétaire de l’époque. Cette personne a fini par le céder pour la modique somme de 10 millions de dollars. Quand on sait qu’un nom de domaine coûte moins de 10€, on comprend vite pourquoi beaucoup décident d’en faire un business à part entière.

Donc la toute première chose à faire, c’est déjà de s’assurer que le nom de domaine que vous visez est disponible.

Pour vérifier la disponibilité d’un nom de domaine, vous pouvez vous rendre sur Hostinger, indiquer le nom de domaine dans la barre de recherche et croiser les doigts pour qu’il soit disponible.

Si le nom de domaine n’est pas disponible, il faudra soit changer le nom, soit changer l’extension.

Si au contraire il est disponible, félicitations ! Vous allez donc pouvoir le réserver.

Car oui, on n’achète pas un nom de domaine, on le réserve. Le nom de domaine est une propriété qu’on va en fait louer à l’année. Si un jour vous décidez d’arrêter de le payer et donc de le renouveler, une autre personne pourra le réserver à son tour et sera donc son nouveau propriétaire.

Choisir son hébergement WordPress

Choisir son hébergement peut être un des pires casse-tête en matière de création de sites web.

Il suffit de taper «hébergement site web» sur Google pour se retrouver face à des dizaines de services et des centaines d’articles comparatifs. Malheureusement, une grande partie de ces articles ne font que compliquer la question et beaucoup ne sont en fait que des publicités déguisées.

Ici je vais prendre le parti de ne vous recommander qu’un seul hébergeur. Pourquoi ? Parce que je pars du principe que si ce tutoriel vous intéresse c’est que :

• Vous débutez dans la création de sites web
• Vous ne voulez pas perdre de temps pour mettre en ligne votre site WordPress
• Vous voulez éviter au maximum toutes les complications techniques

Ce que je vais vous recommander ici n’est pas LA meilleure solution : tout simplement parce qu’il n’y en a pas. Il y a une infinité de contextes différents et beaucoup de paramètres à prendre en compte pour prendre la bonne décision.

Pour ce tutoriel, je vous recommanderai le service Hostinger pour cinq raisons :

• Vous pouvez bénéficier d’une réduction de 10% avec le code SITOPIA
• Les tarifs d’entrée de gamme font partie des plus accessibles
• C’est peut-être le service le plus simple d’utilisation
• Il est optimisé pour les sites WordPress
• Le rapport qualité/prix est bon

Petite précision importante, je vous propose ici un lien d’affiliation. Si vous ne savez pas ce que c’est l’affiliation, c’est très simple : si vous décidez d’utiliser un service à partir des liens que je vous propose, l’entreprise me reverse une commission. Ça ne vous coûte pas plus cher et moi ça me permet de rentabiliser le contenu gratuit que je propose.

Je fais attention à justement ne proposer que des services que j’utilise ou alors pour lesquels j’ai été satisfait par le passé. Pour le cas d’Hostinger, c’est l’hébergement que j’utilise actuellement pour tous mes projets. Il a ses défauts (comme tous les hébergeurs), mais je pense sincèrement que c’est l’un des meilleurs lorsqu’on débute dans la création d’un site web.

Bien choisir son type d’hébergement

Hostinger propose plusieurs types d’hébergement différents : mutualisé, cloud, VPS, etc. Tout un jargon technique dont on aimerait bien se passer.

Là encore, on va garder les choses les plus simples possibles.

Quand on débute, on commencera généralement par un hébergement mutualisé.

Un des avantages d’Hostinger c’est qu’il permet de mettre à niveau son hébergement en cours de route et d’ajouter le temps qu’il restait sur la nouvelle formule. Vous pouvez donc commencer avec un hébergement à petit prix et le faire évoluer en cours d’année en fonction de l’évolution de votre projet.

Plus votre projet prendra de l’ampleur, plus vous aurez besoin d’un hébergement à la hauteur.

Acheter son hébergement web

Selon votre budget, je vous conseille soit le premier prix à 1.49€ par mois, mais qui ne contient pas de nom de domaine gratuit, soit le second à 2.99€ qui comprend un nom de domaine gratuit pour la première année.

Une fois que vous aurez sélectionné la formule qui vous convient et que le paiement aura été validé, vous recevrez un e-mail récapitulatif avec des informations dont vous aurez besoin pour configurer votre site.

Gardez donc précieusement cet e-mail de côté ou alors notez les informations quelque part pour les retrouver rapidement quand vous en aurez besoin.

Installer WordPress

WordPress est un logiciel «open source». C’est-à-dire un logiciel qui n’appartient pas à une entreprise particulière, mais à une communauté de bénévoles.

WordPress est donc un logiciel gratuit qu’on va pouvoir télécharger et installer sur son hébergement pour créer son site.

Si vous avez choisi Hostinger, j’ai une bonne nouvelle pour vous : il existe une fonctionnalité d’installation «automatique» qui permet de ne pas avoir à installer WordPress manuellement.

Utiliser l’installation WordPress automatique d’Hostinger

Une fois sur votre tableau de bord Hostinger, vous verrez apparaître un encart «Hébergement» auquel vous pourrez accéder.

Une fois dessus, vous trouverez une barre de recherche en haut à droite dans laquelle vous pourrez chercher «installateur automatique» et cliquer sur le premier choix.

En bas de la page, vous trouverez un bandeau qui vous proposera d’installer WordPress. Vous n’aurez plus qu’à remplir les informations demandées et Hostinger s’occupera du reste.

Étape n°2 – Prendre en main WordPress

Ça y est, votre site WordPress est enfin installé et prêt à être utilisé !

Avant de mettre les mains dans la machine, on va déjà faire un petit tour du propriétaire.

Pour commencer, vous devez comprendre que WordPress est comme un iceberg. Il y a une face visible pour tous et une face invisible que vous seul pourrez voir. Cette partie invisible, on l’appelle le «back-office» ou tableau de bord en français. C’est cette partie du site qui vous permettra de :

• Créer des pages
• Modifier le contenu et le design
• Faire des mises à jour

Et encore beaucoup d’autres choses que vous apprendrez au fur et à mesure de ce tutoriel WordPress.

Accéder au tableau de bord WordPress

Une session sur WordPress dure 48 heures. Ce qui veut dire que toutes les 48 heures vous devrez vous reconnecter à votre tableau de bord.

Pour ça, vous allez évidemment avoir besoin de :

• Votre identifiant
• Votre mot de passe
• Et du lien d’accès à la page de connexion

Sur WordPress, l’URL pour accéder à la page de connexion est standardisée. Il suffit simplement de rajouter «/wp-admin/» à la fin de son nom de domaine.

Donc : https://monsite.fr/wp-admin/

À la toute fin de ce tutoriel, on verra comment changer cette URL de connexion pour des raisons de sécurité. Mais pour le moment, je vous conseille de mettre ce lien dans vos favoris pour pouvoir rapidement accéder à votre tableau de bord.

Découvrir la barre d’actions rapides

Une des actions que vous ferez le plus souvent va être de basculer de votre tableau de bord à votre site. Pour faire cette action, vous allez trouver une icône en forme de maison dans la barre horizontale qui se situe tout en haut.

En cliquant dessus vous basculerez de la face invisible de votre site à la face visible.

Vous remarquerez qu’en basculant entre les deux, la barre horizontale du haut reste présente. C’est normal ! Cette barre d’actions rapides va avoir plusieurs utilités :

• Vous indiquer que vous êtes bien connecté à votre tableau de bord WordPress
• Vous permettre de faire des actions rapides
• Vous permettre de basculer de votre site à votre tableau de bord

Vous aurez aussi remarqué qu’une fois avoir fait la bascule, l’icône en forme de maison disparaît pour laisser place à une icône en forme de compteur de bord. En cliquant sur ce bouton, vous reviendrez à votre tableau de bord.

Comme on vient de le voir, cette barre vous indiquera quand vous êtes connecté à votre site WordPress. Si elle n’est pas visible, c’est donc que vous devez accéder à votre page de connexion pour ensuite vous connecter.

Découvrir le menu WordPress

À gauche de votre tableau de bord, vous trouverez le menu WordPress dans lequel sont listées les différentes sections et fonctionnalités par défaut.

Au fur et à mesure que vous allez construire votre site WordPress, ce menu va changer et se remplir petit à petit de nouvelles fonctionnalités. Au départ, WordPress propose quelques fonctionnalités basiques qu’on va voir ensemble dans un instant.

Dans ce tutoriel WordPress, je ne vais pas vous détailler tous les paramètres et fonctionnalités disponibles dans votre tableau de bord.

Comme n’importe quel outil, il va se passer un premier temps de découverte où vous vous sentirez peu perdu face à la quantité d’options disponibles. C’est tout à fait normal.

Plutôt que de vous faire un focus sur chacune d’elles (ce qui aurait plus tendance à vous embrouiller qu’autre chose), je préfère vous guider dans la réalisation d’actions concrètes.

Pour créer votre premier site internet, vous n’aurez pas besoin de connaître et maîtriser toutes les fonctionnalités sur WordPress.

Je vais donc volontairement passer à côté de certaines fonctionnalités pour que ça ne fasse pas trop d’un coup et que vous puissiez vous concentrer sur des actions comme :

• Installer un thème
• Créer une page
• Modifier son contenu
• Etc.

Si vous avez une question ou que vous êtes face à un problème que vous n’arrivez pas à régler, WordPress est une des communautés les plus grandes et actives d’internet. N’importe quel question ou problème a déjà trouvé réponse dans un article, une vidéo ou un forum.

Une simple recherche sur Google et vous trouverez rapidement la réponse à votre question.

Le tableau de bord

Le menu tableau de bord est la page par défaut sur laquelle vous allez atterrir une fois connecter à votre site WordPress.

Vous trouverez quelques informations dessus (que personnellement je ne regarde jamais). Le plus grand intérêt de ce menu est le sous-onglet «Mises à jour».

C’est ici que vous pourrez vous occuper de la maintenance de votre site WordPress. À chaque fois qu’une mise à jour sera disponible, vous verrez une petite pastille rouge avec le nombre de mises à jour à faire.

Faites attention à ne pas accumuler trop de mises à jour en attente. Les mises à jour ne sont pas seulement là pour ajouter de nouvelles fonctionnalités, elles sont aussi là pour protéger votre site contre d’éventuelles attaques.

Les articles

Dans votre menu WordPress vous trouverez deux onglets qui se ressemblent beaucoup : les Articles et les Pages.

Pour comprendre la différence entre les deux, c’est simple : un article est tout simplement un type de page qui est rattachée à un blog.

Techniquement, un article est aussi une page, mais à la différence d’une page classique, un article a une structure standard.

Si on va sur un site lambda, on aura des pages comme :

• La page Accueil,
• La page Services
• La page À Propos
• La page Contact
• Etc.

D’une page à l’autre on aura un design différent.

Par contre, si on va sur un blog, on verra que d’un article à l’autre, le design ne change quasiment pas : seul le contenu texte change.

C’est là la principale différence entre un article et une page. Les articles sont donc des pages avec une structure fixe et qui ont comme seul but d’alimenter un blog.

Les médias

Lorsque vous ajouterez des images ou vidéos sur votre site WordPress, ces médias s’importeront dans votre médiathèque.

Si par exemple vous importez une image sur votre page d’accueil, mais que vous décidez ensuite de l’enlever, cette image restera disponible dans votre médiathèque.

La quantité de médias que vous pourrez importer dépendra du type d’hébergement que vous avez choisi. Si par exemple vous avez choisi l’Hébergement à l’unité d’Hostinger, vous aurez 30 Go de stockage.

Ce qui sera largement suffisant pour un simple site vitrine.

Les pages

Ici rien de plus simple, c’est dans cette partie que vous allez pouvoir créer les différentes pages de votre site WordPress.

Comme on l’a vu :

• La page Accueil,
• La page Services
• La page À Propos
• La page Contact
• Etc.

Les commentaires

Par défaut, chaque article que vous publierez sera composé d’un formulaire qui permettra aux visiteurs de publier des commentaires.

Mais là aussi, par défaut, les commentaires ne seront pas publiés automatiquement sur votre site tant que vous ne les aurez pas validés vous-même. C’est ce menu Commentaires qui permettra donc de faire ce travail de modération.

L’apparence

Aucun site WordPress n’existe sans thème.

Un thème est tout simplement un modèle de site qui va servir de base dans la création de son propre site.

À l’installation, WordPress configure et propose trois thèmes par défauts créés par WordPress lui-même. Des thèmes plutôt minimalistes que la plupart des gens n’utilisent pas.

À la place on verra dans ce tutoriel comment installer et configurer un thème plus développé.

Les extensions

WordPress est un outil qui permet de faire énormément de choses : créer un simple site vitrine, un site e-commerce avec des centaines de produits ou encore un forum qui gère des milliers d’utilisateurs.

Sauf que pour beaucoup de personnes, WordPress sera simplement utilisé pour créer un site vitrine ou un blog. Alors plutôt que d’être une véritable usine à gaz dès le départ et couvrir toutes les fonctionnalités possibles et inimaginables, WordPress a préféré fonctionner sur un système d’extensions (qu’on appelle très souvent plugins).

Les extensions vont donc nous permettre de configurer notre site WordPress en fonction du site qu’on cherche à créer. Ici on aura l’embarras du choix puisque WordPress propose plus de 50 000 extensions gratuites dans son catalogue.

Il existe des extensions pour tout : configurer une boutique en ligne, améliorer la rapidité de son site, optimiser le référencement naturel pour Google, etc.

Au fur et à mesure de ce tutoriel on découvrira les extensions les plus essentielles qui serviront qu’importe le site qu’on souhaite créer.

Les comptes

C’est ici que vous pourrez donner l’accès à votre site WordPress si vous collaborez avec des prestataires ou que vous n’êtes pas seul dans votre activité.

Chaque personne pourra avoir son propre compte et tableau de bord sur WordPress.

En tant qu’administrateur, vous aurez quand même la possibilité de gérer les niveaux d’accès pour ne pas donner tous les droits aux personnes qui auront accès à votre site.

Les outils

Le menu Outils est probablement la partie la moins utile de WordPress. Pour avoir fait des dizaines de sites avec WordPress, je n’ai jamais utilisé cet onglet.

Il y a donc 99% de chance que vous ne vous en serviez pas non plus.

Les réglages

Pour finir, les Réglages est la partie où on trouvera des paramètres divers et variés.

Plus utile que le menu Outils, mais vous n’aurez pas besoin pour autant de modifier les paramètres par défaut.

Étape n°3 – Installer un thème WordPress

Depuis quelques années déjà, il est de plus en plus rare de créer un site web en partant de zéro. À part les entreprises qui ont les moyens de payer des développeurs et des web designers, la plupart des sites web d’aujourd’hui sont réalisés à partir de modèles : autrement appelés thèmes ou templates.

Il en existe pour tous les goûts, tous les cas de figures et tous les budgets.

Installer Astra

Astra est un des thèmes gratuits les plus populaires sur WordPress.

Ce qui le rend intéressant ce thème est qu’il propose une extension qui permet d’avoir accès à plus de 100 sous-thèmes gratuits et de qualités.

Il faut bien garder en tête qu’aucun thème ne s’adaptera à 100% à vos besoins.

Ce n’est pas forcément le type d’activité que le thème présente qui est le plus important, c’est son style. Donc essayez de faire abstraction du sujet du thème et concentrez-vous plutôt sur ce qu’il dégage.

Un thème est principalement là pour donner un début de direction.

Dans la prochaine partie on verra comment vous pourrez le customiser pour l’adapter parfaitement à vos besoins.

Étape n°4 – Personnaliser son site WordPress

Maintenant que vous avez les fondations de votre site, on va passer à la personnalisation.

Pour pouvoir personnaliser au maximum votre site, vous allez avoir besoin d’une des extensions les plus populaires sur WordPress : Elementor.

Il vous suffit d’aller dans l’onglet Extensions, de rechercher Elementor dans la barre de recherche, de l’installer et de l’activer.

Elementor est un plugin qui permet d’étendre les capacités d’un thème. Avec cette extension vous allez pouvoir :

• Modifier tout le contenu de vos pages (le texte, les images, les liens, etc.)
• Modifier la mise en page (ajouter de nouvelles parties ou en supprimer)
• Créer un en-tête et un pied de page
• Créer une nouvelle page en partant de zéro

Bref, Elementor est un outil indispensable pour créer un site web avec WordPress.

Modifier le contenu d’une page avec Elementor

Dans votre onglet Pages, vous devriez normalement vous retrouver face à une liste de pages créées grâce au thème que vous avez précédemment installé.

En passant votre souris sur ces pages, certaines actions vont apparaitre : Modifier, Modification Rapide, Corbeille…

Cliquez sur «Modifier» pour commencer à personnaliser la page. Tout en haut de la page vous trouverez un bouton «Modifier avec Elementor» sur lequel vous allez pouvoir cliquer.

Une fois redirigé, vous allez vous retrouver avec :

• À gauche, un panneau vertical Elementor.
• À droite, la page en question

Maintenant, si vous placez votre souris sur la partie droite de l’écran, là où il y a votre page, vous verrez que vous pouvez défiler la page. Vous remarquerez aussi que des blocs apparaitront en passant votre souris sur certains éléments.

J’espère que vous êtes concentré, parce qu’on va voir ensemble l’aspect le plus complexe d’Elementor.

Les sections et colonnes

Chacune des pages que vous allez modifier ou créer avec Elementor sera composée de trois types d’éléments :

• De sections
• De colonnes
• De modules (un titre, une image, un corps de texte, etc.)

Créer une page avec Elementor fonctionne comme un jeu de Lego.

Chaque élément (un texte, une image, un bouton, etc.) a besoin d’être organisé dans un conteneur, qu’on appelle ici section. Dans ces sections, on va pouvoir créer une ou plusieurs colonnes qui vont nous servir à organiser les éléments à l’intérieur de ces conteneurs.

Donc si vous passez votre souris sur les différentes parties de votre page, vous verrez toutes les sections, colonnes et module délimités par des encarts. Dans un premier temps, la structure peut vous sembler incompréhensible, mais ne vous inquiétez pas, c’est tout à fait normal.

C’est seulement au fur et à mesure que vous allez créer et modifier des structures que vous comprendrez mieux leur fonctionnement.

Ce qu’on va vouloir faire dans un premier temps pour se familiariser avec l’outil, c’est commencer à modifier certains contenus. Si vous passez votre souris sur un élément comme un texte, une image ou un bouton, vous aurez un encart bleu avec dans le coin supérieur droit une icône en forme de stylo.

Si vous cliquez dessus, vous verrez que le bandeau Elementor à gauche va changer. En haut de ce bandeau, vous trouverez trois onglets : Contenu, Style et Avancé.

À l’intérieur de ces onglets, vous trouverez un tas de réglages à modifier. Ces réglages ne seront pas les mêmes selon le module que vous sélectionnerez.

Étant donné qu’il y a beaucoup de paramètres modifiables, je ne vais pas les expliquer un par un.

Ce que je vous conseille dans un premier temps, c’est simplement de toucher aux différents réglages et voir le résultat sur la page. C’est la meilleure façon de comprendre à quoi ils servent et comment les utiliser. Ne vous inquiétez pas, vous aurez la possibilité de facilement revenir en arrière

Utiliser l’historique

Si vous commencez à bidouiller un peu les réglages, vous allez rapidement avoir besoin d’une chose : effacer ce que vous avez fait. Pour ça, c’est très simple.

En bas du bandeau Elementor, vous trouverez un bouton et cinq icônes.

La troisième icône de cette liste vous permettra de visualiser l’historique de vos changements. Pour chaque action que vous allez faire sur la page, Elementor va créer un bloc. Si vous cliquez sur un des blocs, vous retournerez à l’action en question.

Vous pouvez aussi tout simplement faire un Commande + Z sur Mac ou Contrôle + Z sur PC pour revenir rapidement en arrière.

Prévisualiser les changements

Même si vous allez voir en temps réel chaque changement que vous faites sur la page, le bandeau Elementor et les informations qui s’affichent au survol peuvent empêcher de voir clairement les choses.

Si vous voulez voir clairement ce que vous faites, vous pouvez tout simplement masquer le bandeau Elementor en cliquant sur l’icône située sur le côté.

En cliquant dessus vous pourrez voir votre page en format grandeur nature et masquer tous les encarts qui s’affichaient.

La deuxième façon est d’utiliser l’outil de prévisualisation qui se situe en bas du bandeau Elementor.

Elementor ouvrira une page où vous pourrez voir vos modifications.

Si vous faites de nouvelles modifications et que vous voulez voir les changements sur votre page de prévisualisation, vous aurez juste à cliquer à nouveau sur l’icône de prévisualisation ou sur le bouton Mettre à jour.

Modifier la mise en page

Modifier la mise en page peut être une manipulation un peu compliquée au début. Mon conseil ici sera d’utiliser en prioriété les modèles de bloc que les extensions Elementor et Starter Templates mettent à disposition.

Une fois que vous aurez installé ces deux extensions, vous aurez tout en bas de chaque page un bandeau avec plusieurs icônes.

Si vous cliquez sur l’une des deux icônes en partant de la droite, vous trouverez une liste de blocs réutilisables (voir tout en haut l’onglet «Blocs»).

À vous ensuite d’adapter ces blocs en modifiant la police d’écriture, les couleurs et le style en fonction du reste de la page.

Déplacer et supprimer des éléments

Au cas où vous ne l’auriez pas déjà remarqué, Elementor est une extension qui fonctionne en glisser-déposer. Ce qui veut dire que chaque élément de votre page peut être déplacé : les sections, les colonnes et les modules.

Si vous voulez déplacer un module, il vous suffit de passer votre souris sur l’élément jusqu’à voir apparaître l’icône en forme de stylo. Cliquez ensuite sur cette icône tout en gardant le clic appuyé et déplacez l’élément à un autre endroit de votre page.

En déplaçant l’élément, vous verrez apparaître une barre bleue qui vous montrera où l’élément peut être déposé.

Vous pouvez faire cette même manipulation avec les colonnes et les sections. Pour les sections il faudra cliquer sur l’icône grise et pour les sections sur l’icône centrale avec les six points.

Si vous n’arrivez pas à accéder à un élément ou à le déplacer, vous pouvez utiliser le navigateur Elementor. En cliquant dessus vous aurrez une vue des différentes sections, colonnes et modules de votre page.

Si vous cliquez sur un élément, Elementor vous le sélectionnera sur la page et vous pourrez le déplacer en utilisant le navigateur.

Si vous voulez supprimer un module ou une colonne, il vous suffit de faire un clic droit sur l’icône en forme de stylo (pour un module) ou de fenêtre (pour une colonne) et de choisir Effacer dans le menu déroulant qui apparaîtra.

Utiliser les marges externes et internes

Le réglage le plus compliqué à comprendre est sans aucun doute celui des marges externes et internes.

Vous trouverez ce réglage dans l’onglet Avancé du bandeau Elementor.

Ces deux réglages vont vous permettre de modifier la position des différents éléments de votre page. Mais quelle est la différence entre la marge et la marge interne ?

Comme on l’a vu, si vous passez votre souris sur un module, vous verrez un encart bleu apparaître tout autour. Pour faire simple, la marge interne va augmenter ou diminuer l’espace à l’intérieur de cet encart. Cette marge va venir compresser le contenu à l’intérieur de son bloc. La marge externe c’est celle qui se trouve entre les modules. C’est celle qui va donc pousser ou rapprocher les modules entre eux.

La marge sert à donner de l’espace entre les différents éléments de la page, alors que la marge interne va plutôt servir à modifier l’apparence d’un élément.

Malheureusement c’est un concept qui ne se comprend pas facilement par de la théorie. C’est seulement à force d’utiliser ces deux valeurs dans plusieurs cas de figure qu’on arrive enfin à comprendre leur différence et leur utilité respectives.

Pour finir, vous remarquerez tout à droite un bouton en forme de trombone. Si vous ne cliquez pas sur cette icône, vous modifierez la marge dans toutes les directions d’un seul coup.

Si vous voulez modifier la marge dans une seule direction, vous allez devoir cliquer sur cette icône pour ne plus lier les valeurs entre elles.

Créer un design responsive

Le responsive consiste à créer un design qui va automatiquement s’adapter à différentes tailles d’écran. De l’ordinateur, au smartphone, en passant par la tablette.

Elementor propose une fonctionnalité qui vous permettra de créer une mise en page responsive.

Pour ça, il faut que vous cliquiez sur l’icône tout en bas du bandeau Elementor qui vous permettra d’activer le mode responsive.

Une fois que vous aurez cliqué dessus, vous aurez un second bandeau qui apparaîtra tout en haut de votre page. En cliquant sur l’icône d’ordinateur, de tablette ou de smartphone, vous pourrez modifier la taille d’écran et voir comment votre page s’adapte.

Qu’importe le thème que vous utilisez, votre page demandera sûrement certains ajustements. Comme une taille de police trop grande ou plus d’espace entre certains éléments.

Si vous regardez de plus près certains réglages dans le panneau Elementor, vous verrez une icône apparaître à côté de certains paramètres.

S’il y a une icône qui vous indique le type d’appareil que vous avez sélectionné (ordinateur, tablette ou smartphone), c’est que changer la valeur du paramètre s’appliquera uniquement à la taille d’écran que vous avez sélectionné.

Par exemple, si je sélectionne la vue smartphone et que je change l’alignement pour qu’il soit centré et non plus à gauche, mon alignement s’appliquera uniquement au smartphone et non aux tablettes et ordinateurs.

Si un réglage n’a pas cette icône, ça veut dire qu’en le changeant vous ferez une modification sur toutes les tailles d’écrans.

Créer un en-tête et en pied de page

L’en-tête (plus souvent appelé Header) et le pied de page (appelé Footer) sont deux parties essentielles d’un site web.

L’en-tête est ce qui se trouve tout en haut de chaque page et permet d’intégrer le logo et le menu. Le pied de page sera tout en bas de la page et doit contenir au minimum les mentions légales et la politique de confidentialité.

En installant un modèle de thème Astra, un menu d’exemple aura été créé et placé dans votre en-tête par défaut.

Pour modifier les pages présentes dans ce menu, vous devrez vous rendre dans Apparance et le sous-onglet Menus.

Vous trouverez alors une page dans laquelle sera présenté votre menu (normalement appelé Primary Menu) avec à l’intérieur des blocs correspondant aux différentes pages. Si vous voulez retirer une page, il vous suffit de cliquer sur la petite flèche à droite du bloc et ensuite le bouton Retirer.

Si au contraire vous voulez ajouter une nouvelle page, vous trouverez un encart situé à gauche dans lequel se trouvent les différentes pages de votre site. Vous pouvez alors sélectionner celle que vous voulez ajouter à votre menu et cliquer ensuite sur Ajouter au menu.

Pour finir, les blocs correspondant aux pages de votre menu peuvent être déplacés en glisser-déposer. Vous pourrez donc définir vous-même l’ordre dans lequel vous voulez que les pages apparaissent.

L’en-tête est généralement composé d’un logo et d’un bouton principal.

Si vous voulez modifier ces deux éléments, il faudra vous rendre dans l’onglet Personnaliser, toujours dans le menu Apparence. Une fois dessus, vous verrez qu’en passant votre souris sur le logo ou le bouton, une petite icône en forme de stylo apparaîtra.

Cliquez dessus et vous verrez apparaître des paramètres qui vous permettront de changer ces deux éléments. Une fois terminé, n’oubliez pas de cliquer sur le bouton Publier tout en haut de votre écran.

Pour le pied de page, donc tout en bas de page, il vous suffit d’appliquer le même procédé.

Créer une page à partir de zéro

Pour créer une page à partir de zéro, il faudra d’abord se rendre dans l’onglet Ajouter du menu Pages du tableau de bord.

Une fois le titre créé, vous pourrez cliquer sur le bouton Modifier avec Elementor en haut de votre page.

Vous vous retrouverez donc face à une page vierge sur laquelle vous pourrez ajouter des éléments sur-mesure.

Comme on l’a vu un peu plus tôt (dans la partie Modifier la mise en page), je vous conseille d’utiliser des modèles de blocs plutôt que d’essayer de créer des mises en page par vous-même. Ce n’est qu’une fois que vous aurez parfaitement compris le fonctionnement des sections, colonnes et marges que vous pourrez vous permettre de créer vous-même votre mise en page.

Une fois que vous vous serez familiarisé avec Elementor, vous pourrez composer votre page comme bon vous semble.

Il faudra donc créer des sections et déplacer à l’intérieur les modules (aussi appelé widgets) présents dans le bandeau Elementor.

Utiliser Elementor Pro

Elementor est une extension qui permet de faire beaucoup de choses, même avec sa version gratuite. Mais forcément, vous ne pourrez pas faire tout ce que voulez.

Avec Elementor Pro, vous pourrez :

• Créer des en-têtes et pieds de page plus perfectionnés
• Avoir accès à 27 modules supplémentaires
• Personnaliser un site e-commerce, un blog ou un portfolio
• Créer des pop-up

Dans un premier temps, la version gratuite sera normalement suffisante pour commencer. Mais si vous voulez aller plus loin dans la création de votre site web, la version payante d’Elementor sera un bon investissement pour votre activité.

Étape n°5 – Optimiser son site WordPress

Pour optimiser votre site WordPress, vous allez pouvoir installer des extensions qui auront chacune des utilités différentes, comme :

• Améliorer votre référencement sur Google
• Optimiser la rapidité de chargement
• Sécuriser votre site WordPress
• Analyser votre trafic
• Etc.

Vous trouverez aussi tout un tas d’autres extensions pour vous permettre de créer un type de site bien précis : e-commerce, blog, plateforme e-learning, marketplace, etc.

Des extensions WordPress, il en existe plus de 50 000 dans le répertoire officiel. Ce qui vous donnera l’embarras du choix, mais pourra aussi vous rendre la tâche compliquée de savoir lesquelles vous devriez choisir.

Dans cette dernière étape de ce tutoriel WordPress, je vous ai fait une sélection d’extensions que j’estime être indispensables pour tout site WordPress. Peu importe le type de site en question, ces extensions devront tout le temps être présentes.

Si vous avez un besoin spécifique d’extension pour votre site, n’hésitez pas à faire une petite recherche Google : «Meilleurs plugins WordPress pour [type de site]» ou encore «[ce que vous voulez faire] plugin WordPress».

Vous trouverez sûrement plein d’articles qui vous guideront pour bien choisir.

Sécuriser son site WordPress

Dans l’écosystème de la création de sites web, WordPress a la réputation d’être très vulnérable aux attaques de hackeurs.

Ce qu’il faut comprendre, c’est que WordPress est utilisé par plus de 500 millions de sites web. Le problème, c’est que parmi tous ces propriétaires de site, il y a beaucoup de débutants. Des personnes qui cherchent à faire un site web facilement et pour pas trop cher.

WordPress a ses failles, comme n’importe quel logiciel. Mais dans la grande majorité des cas, ce qui fait qu’un site WordPress est plus vulnérable que d’autres logiciels, c’est une mauvaise configuration.

Ici on va voir ensemble comment bien configurer son site WordPress pour éviter de se le faire hacker.

WPS Hide Login

WPS Hide Login est une extension qui va vous permettre de changer le lien d’accès à votre tableau de bord. Si vous vous souvenez, votre lien d’accès est actuellement :  https://monsite.fr/wp-admin/

C’est le lien d’accès par défaut de tous les sites WordPress. Ce que font généralement les hackeurs, c’est qu’ils envoient des robots parcourir le web à la recherche de failles WordPress. L’une d’elles consiste tout simplement à rajouter «/wp-admin/» à la fin d’un site web et d’essayer des combinaisons standard de mots de passe.

Si la personne n’a pas choisi un mot de passe fort, alors le robot arrivera à entrer dans le site WordPress. Si vous avez bien suivi ce tutoriel, vous avez normalement défini un mot de passe complexe.

Mais comme on est jamais trop prudent, on va modifier le lien d’accès à votre tableau de bord. Si les robots ne trouvent déjà pas la porte d’entrée à votre tableau de bord, alors il y a beaucoup moins de chance qu’ils arrivent à rentrer.

Une fois l’extension installée, il faudra vous rendre dans l’onglet Réglages et vous trouverez dans le menu déroulant le nom de l’extension WPS Hide Login. En cliquant dessus, vous pourrez modifier le lien d’accès de votre page de connexion et la page vers laquelle les visiteurs seront redirigés s’ils essayent d’accéder à cette page.

Vous pouvez donc créer une URL comme :

• /connexion-site/
• /ma-page-connexion/
• /me-connecter/

Avant de cliquer sur le bouton pour enregistrer les modifications, n’oubliez surtout pas de noter ce lien d’accès ou de le mettre dans vos favoris. Parce que si vous ne trouvez plus le lien de votre page de connexion, vous ne pourrez plus vous connecter à votre tableau de bord.

Si vous vous retrouvez dans cette situation, vous devrez supprimer ou désactiver l’extension WPS Hide Login à partir de votre tableau de bord Hostinger.

WP Cerber

Cette extension va permettre de protéger votre site face à plusieurs types d’attaques. Elle est très simple à utiliser, parce qu’une fois installée, elle ne demande aucune configuration particulière.

Une chose importante à noter, c’est que cette application limitera le nombre de tentatives de connexion à votre tableau de bord WordPress. C’est une fonctionnalité utile qui permet justement d’éviter ce qu’on appelle une «attaque brute force». La fameuse attaque du robot qui essaye les combinaisons de mot de passe jusqu’à trouver la bonne.

Avec WP Cerber, le nombre de tentatives sera limité à cinq échecs à la suite. Si les cinq tentatives ont échouées, alors WP Cerber bloquera une nouvelle tentative pendant une heure.

Donc raison de plus pour toujours bien noter votre mot de passe quelque part ou utiliser un gestionnaire de mot de passe.

UpDraftPlus

Perdre des photos ou des documents importants sur son ordinateur est une sensation très désagréable. Alors, imaginez celle de perdre l’intégralité d’un site web sur lequel vous avez travaillé des dizaines d’heures et investis beaucoup d’argent.

Pour vous éviter des sueurs froides et du stress, il vaut mieux faire des sauvegardes régulières de votre site WordPress. Ce qui vous permettra en cas de problème de le restaurer rapidement.

Pour ça, vous allez pouvoir utiliser l’extension UpDraftPlus.

Une fois l’extension activée, elle vous dirigera automatiquement vers des explications des différents réglages. Une fois terminé, vous pouvez vous rendre dans l’onglet Réglages de l’extension et changer les deux premières lignes où se trouve un menu déroulant.

Changez simplement Manuel par Quotidiennement et laissez telles quelles les deux valeurs à côté.

En dessous, vous verrez des logos avec différentes solutions de stockage. Je vous conseille de sélectionner soit Google Drive soit Dropbox. Si vous n’avez pas de compte, on vous proposera d’en créer un juste après.

Une fois que vous aurez terminé, vous pourrez enregistrer les modifications tout en bas et UpDraftPlus vous permettra de vous connecter à la solution de stockage que vous venez de choisir. Une fois que c’est fait, votre site web sera quotidiennement sauvegardé sans que vous n’ayez rien à faire.

Pour être sûr que tout fonctionne, vous pouvez vous rendre dans l’onglet Sauvegarder/Restaurer et créer votre première sauvegarde. Une fois que c’est fait, vérifiez sur votre Google Drive ou Dropbox qu’un nouveau dossier UpDraftPlus vient de se créer. Si c’est le cas, c’est que vos sauvegardes fonctionnent.

Optimiser la rapidité

Les sites WordPress peuvent rapidement devenir des usines à gaz. Étant donné qu’il existe énormément d’extensions disponibles, on peut vite se retrouver avec des dizaines d’extensions installées et donc un temps de chargement de plus en plus lent.

Un site lent, c’est à la fois très mauvais pour l’expérience utilisateur, mais aussi pour votre référencement puisque Google pénalise les sites web trop lents à charger.

Pour vérifier la rapidité de votre site web, vous pouvez utiliser des outils comme :

• PageSpeed Insight de Google
• GTmetrix
• Pingdom

Smush

Améliorer la rapidité d’un site peut être quelque chose d’assez long et complexe. Mais une des choses simples et rapides à mettre en place, c’est tout simplement d’optimiser le poids de ses images. La plupart des débutants ne font pas forcément attention quand ils importent des images sur leur site web.

On se retrouve avec des pages qui mettent beaucoup de temps à charger à cause d’images trop volumineuses.

Pour éviter ça, vous pouvez installer l’extension Smush. En tapant Smush dans la barre de recherche, vous verrez qu’il y en a plusieurs.

Celle dont je te parle est : Smush – Lazy Load Images, Optimize & Compress Images.

Une fois installée et activée, l’extension s’ajoutera tout en bas dans votre menu WordPress. En cliquant dessus, vous pourrez activer les différentes fonctionnalités de l’extension. Une fois fait, Smush se chargera d’optimiser automatiquement le poids des images que vous importerez sur votre site WordPress.

Si vous avez déjà des images dans votre onglet Médias, vous pouvez utiliser le bouton Bulk Smush Now un peu plus bas et l’extension optimisera votre images déjà importées.

WP Optimize

Là encore, une chose relativement simple à mettre en place et qui apporte de grands résultats est la mise en cache et la minification du code de votre site web. Comme c’est un tutoriel pour débutants, je ne vais pas trop rentrer les détails.

Mais pour que vous compreniez un minimum, quand vous accédez à un site web, une grande quantité de fichiers transitent d’un hébergement à votre navigateur en quelques microsecondes. Cette opération va se répéter à chaque fois que vous retournerez sur le site en question.

Sauf que parmi tous ces fichiers, il y en a qui n’ont pas changé depuis votre précédente visite. Alors pour éviter de perdre des microsecondes de chargement, votre navigateur va pouvoir mettre en cache ces fichiers. C’est-à-dire les stocker en attendant votre prochaine visite. Il y aura donc moins de fichiers à charger à chacune de vos visites sur le site et le temps de chargement sera donc nettement réduit.

Une fois que vous aurez installé WP Optimize, vous pourrez y accéder dans votre menu WordPress. Vous aurez juste besoin de vous rendre dans l’onglet Cache et Minifier et activer les deux fonctionnalités. Une fois que c’est fait, vous devrez déjà voir la différence en vous baladant sur votre site WordPress.

Améliorer le référencement

Il faut bien comprendre que le SEO ne résume pas à installer 2-3 extensions et penser que des centaines de visiteurs vont arriver comme par magie.

L’extension qu’on va utiliser est un outil tout-en-un qui va vous permettre de faire beaucoup de choses. Mais gardez à l’esprit que ça ne reste qu’un outil et qu’il vous faudra comprendre le SEO pour avoir des résultats intéressants.

Rank Math

Rank Math est une extension qui offre de nombreux outils SEO.

Une fois activée, Rank Math va vous proposer un assistant de configuration pour vous permettre de paramétrer l’extension. Pensez simplement à cocher l’activation :

• Sitemap
• De la surveillance 404
• Des redirections

Une fois que c’est fait, vous trouverez dans le tableau de bord de l’extension une liste d’outils que vous pouvez activer et désactiver. Vous trouverez dans cette liste un outil «SEO Image» que je vous conseille d’activer. Une fois que c’est fait, allez dans l’onglet «Réglages Généraux» et dans le menu cliquez sur «Images».

Sur cette page vous pourrez activer les attributs ALT manquants qui vous permettront d’améliorer votre référencement grâce à vos images.

Pour finir, vous pouvez vous rendre dans l’onglet Réglages et cliquer sur Permaliens. Sur cette page, vérifiez que la structure de liens est bien cochée sur «Titre de la publication». Si ce n’est pas le cas, cochez cette ligne et enregistrez les modifications en bas de page.

Analyser son trafic

Une fois que vous aurez un peu optimisé votre référencement, vous aurez sûrement envie de voir les résultats de vos actions. Savoir combien il y a de visiteurs sur votre site, quelles pages sont les plus consultées, d’où provient votre trafic, etc.

Pour connaître les performances de votre site, vous allez avoir besoin d’utiliser Google Analytics et Search Console. Deux outils proposés par Google.

Site Kit par Google

Site Kit est une extension de Google lui-même et permet d’installer plusieurs outils dont Google Analytics, Search Console et Google Ads. Il vous suffit simplement d’installer l’extension et de suivre les indications de Google.

Une fois que c’est fait, vous pourrez avoir accès une analyse allégée directement à partir de votre tableau de bord WordPress.

Si vous voulez aller plus loin dans l’analyse, vous pouvez vous rendre directement sur le site Google Analytics et Search Console.