Si vous lisez cet article, c’est que vous souhaitez vous lancer dans la création de votre nouveau site WordPress, ou alors le modifier.
Vous êtes au bon endroit ici nous allons vous montrer comment créer une page WordPress. Si vous souhaitez tout savoir sur la gestion des articles avec WordPress, nous avons également pensé à vous !

Comment ajouter une page dans WordPress ?

Avant de pouvoir créer une page dans son site WordPress, il faut s’y connecter (jusqu’ici, c’est évident, je vous l’avoue). Une fois connecté, vous pourrez vous rendre dans l’interface qui regroupe vos pages, les modifier, les supprimer ou en créer de nouvelles. Voyons donc comment se connecter à votre interface d’administration WordPress !

Se connecter à son site WordPress

Nous avons donc dit qu’avant toute chose, il faut se connecter à son site WordPress.
À la création de votre site WordPress, vous avez dû recevoir un mail de la part de WordPress. Celui-ci contient deux informations essentielles :

Ce mail est à conserver précieusement.
Une fois le mail retrouvé, cliquez sur le lien de connexion à votre back office WordPress (le dernier lien contenu dans le mail).
Avec ce lien, connectez-vous avec vos identifiants de connexion, c’est-à-dire votre identifiant et votre mot de passe. Pas de panique, si vous ne vous souvenez plus de ce dernier, vous pouvez le réinitialiser directement depuis l’interface de connexion à votre back office WordPress. Pour cela, il vous suffit de cliquer sur “Mot de passe oublié ?”.

Afficher toutes ses pages WordPress

Une fois connecté, vous avez accès à tout votre site WordPress, les réglages, les pages, les articles, l’apparence, les extensions, etc.
Mais ce que nous voulons pour l’instant, c’est voir où sont toutes les pages de notre site WordPress.

Pour cela, regardez à gauche de votre écran. Une colonne latérale contient plusieurs entrées.

Menu WordPress
Menu latéral d’un site WordPress regroupant toutes les entrées liées à l’administration et la personnalisation du site.
Voici le menu latéral qui apparaît sur mon site WordPress. Si votre menu diffère légèrement du mien, c’est normal. Nous avons cependant tous l’entrée « Pages ».

Dans ce menu, il faut survoler “Pages” puis cliquer sur “Toutes les pages”.

Aller vers toutes les pages
Voici le chemin d’accès vers toutes les pages. Il suffit de survoler le lien “Pages” et de cliquer sur “Toutes les pages”

C’est depuis cette interface que vous pourrez modifier, trier, créer, supprimer les pages de votre site WordPress. Bref, c’est l’unique endroit pour procéder à la gestion intégrale de vos pages !

Configurer une nouvelle page

Si vous voulez créer une toute nouvelle page, cliquez sur le bouton “Ajouter” situé tout en haut de l’interface

ajouter une page
Bouton d’ajout d’une nouvelle page. Vous avez aussi un petit raccourci vers ce bouton en survolant le lien “Pages” dans le menu WordPress

La première chose qu’il faut ajouter à votre page, c’est le titre. C’est ce titre qui sera affiché dans le listing de vos pages et c’est ce titre que verront les internautes.

Aussi, tant que votre page n’est pas totalement terminée, vous ne souhaitez probablement pas qu’elle soit visible par vos utilisateurs. Vous ne voulez donc pas encore la publier, alors enregistrez-la en tant que brouillon. Vous aurez ainsi votre page enregistrée, vous pourrez la modifier à votre guise mais elle ne sera pas encore visible par les visiteurs de votre site tant que vous n’aurez pas cliqué sur le bouton “publier”.

Si vous voulez supprimer une page publiée, il faudra penser à la redirection. Pour faire dans la simplicité, vous pouvez ajouter l’extension nommée “Redirection” qui vous aidera à gérer vos redirections d’url si vous modifiez le nom d’une page ou si vous décidez d’en supprimer une.

Une fois votre titre ajouté et votre page enregistrée comme brouillon, vous pouvez intégrer le contenu de votre page (texte, images, boutons, etc) avec les blocs Gutenberg.

Comment utiliser les blocs Gutenberg dans une page WordPress ?

Les blocs Gutenberg sont les blocs intégrés à WordPress vous permettant d’ajouter du contenu comme un titre, du texte, des icônes, des sections, des colonnes, ou encore des boutons, des images, des vidéos et plein d’autres éléments. Vous pouvez placer ces blocs où vous le voulez et les personnaliser facilement pour l’ensemble de vos pages WordPress.
Le fonctionnement est simple et il n’y a aucunement besoin d’être un développeur ou de savoir écrire du code !
Et vous avez de la chance, on va tout vous expliquer dans cet article 

Commençons par les blocs les plus courants. Par exemple, les blocs “titre”, “image”, “paragraphe”, “citation”, “liste à puces”, etc. Il en existe 90 nativement inclus dans WordPress. Il est possible d’en ajouter davantage pour créer des pages répondant parfaitement à vos attentes (et celles de vos clients). Toutefois, les blocs dont vous disposez de base sur votre site WordPress vous permettent déjà d’accomplir beaucoup de choses !

On peut trouver tous les blocs Gutenberg que propose WordPress en cliquant sur la croix bleue située en haut à gauche de votre écran.

bouton d'accès aux blocs gutenberg dans une page
Bouton d’accès aux blocs Gutenberg sur l’interface d’édition d’une page

Pour ajouter des blocs à votre page, il existe différentes possibilités :

Croix noire d'ajout de bloc Gutenberg
Croix noire d’ajout de bloc Gutenberg, visible au centre de l’éditeur de contenus.
liste des blocs gutenberg via la croix noire 1
Listing des blocs Gutenberg via la croix noire au centre de l’éditeur.

Si vous souhaitez supprimer un bloc, il suffit de :

retirer un element
Avec “supprimer l’élément” vous avez bien évidemment d’autres choix comme le déplacer, le dupliquer, le grouper, le copier, etc

Comme vous pouvez le voir, vous pouvez aussi dupliquer le bloc, le copier, le retirer, etc. Pratique pour créer rapidement une page !

L’emplacement de votre bloc ne vous convient plus ? Pas de problèmes !Vous pouvez déplacer votre bloc en réalisant un glisser-déposer vers un meilleur emplacement. Cliquez sur votre bloc, restez appuyé, relâchez à l’endroit désiré.

Également, quand on sélectionne du texte, il est possible de le mettre en gras, en italique, le souligner ou encore y ajouter un lien.  Ces fonctionnalités dites “de texte riche” sont très utiles pour mettre des éléments en exergue ou réaliser des liens entre vos pages en un clin d’œil !

Modification du texte d'un bloc Gutenberg
Modification du texte d’un bloc Gutenberg. Une fois mon texte sélectionné, plusieurs options sont disponibles.

Chaque bloc a ses propres réglages et paramètres de personnalisation. Vous pouvez choisir l’alignement de vos images, leur taille d’affichage, l’apparence de vos listes à puces, d’ajouter des colonnes par deux, trois, quatre et plus encore !

Vous voulez en savoir plus ? Alors voyons cela dans la suite de cet article !

Comment remplir la colonne “bloc” dans la création de page WordPress ?

Voyons ensemble ce que nous propose WordPress pour personnaliser les blocs Gutenberg.

Je vais prendre exemple sur les blocs les plus utilisés : titre, paragraphe, image, bouton.

Mais il ne faut pas s’arrêter que sur ces blocs-là. Je vous rappelle que WordPress propose, nativement, 90 blocs. Beaucoup sont très utiles ! Par exemple, le bloc “galerie” vous permettra d’intégrer un groupe de photos.

Il existe également des blocs vous permettant d’intégrer un tableau, une barre de recherche, un bloc d’icônes de réseaux sociaux, etc. Et tous ces blocs sont personnalisables, profitez-en ! Vous pourrez ainsi proposer des fonctionnalités intéressantes sur vos pages web, tout en assurant un style cohérent avec votre esprit de marque.

Réglages du bloc Titre

Tout d’abord, avant de regarder la colonne “Bloc” du titre, petite parenthèse sur un réglage très important : nous pouvons changer le niveau du titre (ce réglage se fait seulement dans l’espace éditeur, voir l’image ci-dessous).

Les niveaux de titre permettent de structurer le texte. Ils vont de H1, pour le niveau le plus important, à H6, pour le moins important.

C’est un peu comme sur Word ou Google Docs. Vous pouvez mettre en forme votre page en choisissant : Titre 1 (= H1), Titre 2 (= H2), Titre 3 (= H3).
Il faut correctement régler les titres car ils composent le squelette de votre page. Un squelette auquel il manque des os n’est pas optimal… Il en va de même pour vos pages web !

Dans la même logique, il ne faut pas non plus manquer de niveau de titre. En effet, les moteurs de recherche comme Google vont interpréter vos titres pour en comprendre le sens. Une hiérarchie erronée va grandement leur compliquer la tâche ! Cela se répercute sur votre référencement naturel. Mieux vaut donc vérifier ses titres à deux fois !

Les titres sont donc cruciaux pour les moteurs de recherche.
C’est pourquoi il faut bien optimiser vos titres et leur donner les bons niveaux.

Niveaux des titres Gutenberg
En cliquant sur un des titres de votre page, comme présenté ci-dessus, vous pouvez choisir le niveau de titre.

Le titre principal de votre page est déjà de niveau H1 par défaut. Par ailleurs, sachez qu’il ne doit y avoir qu’un seul titre H1 dans une page (ou un article ou tout autre type de post) pas besoin de rajouter un titre de niveau H1, passez directement au niveau H2.

Revenons à notre colonne d’options du bloc.

Options du bloc Titre
L’onglet “Bloc” du bloc titre s’affiche à la droite de l’éditeur de contenu de la page

Voici comment procéder pour mettre cela en place :


1. Ce premier titre est ma destination. C’est ici que je souhaite arriver après avoir cliqué sur mon bouton de retour en haut de page. Pour que mon ancre fonctionne, je dois lui donner une ancre HTML. Une ancre, en HTML (langage web), c’est un morceau de texte. Ici, pour fonctionner, notre ancre ne doit contenir ni espace, ni caractères spéciaux ou accents. Par exemple, “premierTitre” est une très bonne ancre.

2. En bas de la page doit se trouver mon bouton me permettant de retourner en haut de la page, au niveau de mon premier titre. Je dois donc ajouter un bloc “bouton” puis, dans les paramètres du lien, ajouter mon ancre. Dans le cas où mon ancre se situe sur la même page, je dois simplement ajouter le signe dièse “#” suivi de l’ancre définie un peu plus tôt. Dans notre cas, cela donnerait : #premierTitre.

Dans le cas où mon ancre ne se situe pas sur la même page, je dois tout d’abord ajouter le lien de la page vers laquelle je souhaite mener mon utilisateur puis à la fin de celle-ci, je peux ajouter mon ancre, sous le même format dièse + ancre.

Tutoriel : Comment créer une ancre HTML avec Gutenberg ?

Réglages du bloc Paragraphe

Pour ce qui concerne le bloc paragraphe, les options de modifications possibles sont les mêmes que pour le titre sans l’option “apparence” et celle relative à la casse.

Réglages du bloc Image

options d'une image
Et voici l’onglet « Bloc » du bloc image.
Taille de l'image
Différents choix vous sont proposés concernant la taille de l’image.
image 11
Les dimensions de l’image avec en dessous le pourcentage de place que prendra l’image à son emplacement sur la page.

Réglages du bloc Bouton

options d'un bouton
Et enfin l’onglet “Bloc” du bloc Bouton.
Tutoriel : Comment régler le bloc « bouton » de Gutenberg ?

Voilà les réglages possibles pour les blocs Gutenberg les plus utilisés. Comme vous avez pu le voir c’est assez intuitif et simple d’utilisation.

Comment remplir la colonne “page” dans la création de page WordPress ?

Après avoir réglé les blocs, voyons ce que nous avons comme réglages pour votre page.

options page pour nouvelle page wordpress
Comme nous pouvons le voir, les options de la page sont situées dans l’onglet « Page » à droite de l’éditeur de contenu

Nous allons voir élément par élément.

slug de page
Vous pouvez personnaliser manuellement le slug d’une page si besoin.

Blocs Gutenberg et responsive design

Évidemment n’oubliez pas le responsive (les réglages d’apparences en version tablette et mobile) de votre page et de leurs éléments.

Pour ce faire vous avez simplement à cliquer sur le bouton « prévisualiser » en haut à droite de votre écran et choisir la taille d’écran que vous souhaitez prévisualiser et modifier (ordinateur de bureau, tablette ou mobile). Faites ensuite vos réglages de la même manière que précédemment.
Sachez que les réglages mobile et tablette n’ont pas d’incidence sur les réglages de la version ordinateur.
Cependant, à l’inverse, si l’on ne donne pas de réglages aux versions mobile et tablette, leurs réglages par défaut seront ceux de la version ordinateur. Laisser comme cela rend les versions mobile et tablette très désagréables à visiter pour l’utilisateur. Notez qu’un utilisateur mécontent ne revient généralement pas sur un site qui n’offre pas une expérience utilisateur agréable !

Donc, pour satisfaire vos utilisateurs et leur offrir une expérience de navigation agréable, nous vous conseillons de régler les versions mobile et tablette au mieux.

Bouton prévisualiser
Le bouton “prévisualiser” permet de configurer le responsive de vos pages web. Vous avez le choix entre la vision en mode ordinateur (celle par défaut), puis la vision en mode tablette et enfin en mode téléphone mobile.

Nous espérons que notre article vous aura aidé. Si vous ressentez que vous avez besoin d’approfondir vos connaissances WordPress, ou si vous faites face à une problématique spécifique, n’hésitez pas à nous contacter. Nous vous répondrons dans les meilleurs délais et planifierons, ensemble, une session de formation pour vous accompagner.
Nous vous souhaitons une bonne navigation !