En 2020 tout le monde peut créer facilement un site internet en utilisant WordPress. 

Que ce soit un site internet pour vous même ou pour votre entreprise, WordPress va vous permettre d’avoir un site rapidement, simplement, à moindre coût et de pouvoir totalement l’optimiser selon vos envies. 

Dans ce guide accessible et gratuit pour débutants, nous allons créer un site WordPress, pas à pas. 

Il s’agit de la même méthode que j’ai utilisé pour créer avalanchemate.com

Voici ce que vous aurez à la fin de ce tutoriel : 

  • Votre propre nom de domaine
  • Votre site internet en ligne
  • Vos pages et vos contenus en ligne
  • Un design personnel pour n’importe quelle page de votre site internet.

Donc si vous voulez créer votre propre site internet avec WordPress et pouvoir le gérer entièrement, vous allez adorer ce guide.

Pourquoi utiliser WordPress : 

En 2020, WordPress compte pour 35% des sites créés sur Internet. 

La part de marché de WordPress est de +2% à +4% chaque année en faisant un des CMS les plus utilisé au monde. 

Et si on regarde uniquement les sites développés via un CMS, la part de WordPress monte à près de 60% de tous les sites. 

Lorsque vous créez votre site avec WordPress, vous développez des compétences qui vous serviront toute votre vie. 

De plus l’énorme popularité du CMS fait qu’il a la plus grande bibliothèque de plugins et de thème pour venir booster les fonctionnalités de votre site. 

Que vous souhaitiez créer un site WordPress pour vous même ou pour votre entreprise, c’est devenu en 2020 extrêmement simple, sans avoir besoin de connaissance en code ou en design.

De nombreux outils ou ressources sont mises à disposition gratuitement sur internet pour nous permettre de créer notre site et nos pages web.

Nous allons créer ensemble un site vitrine pour vous ou votre entreprise en utilisant WordPress et un ensemble d’outils complètement gratuits.

Comptez 1h pour créer un site WordPress à l’aide de ce guide.

De nombreux sites très populaires utilisent WordPress.

Ce dont nous avons besoin pour créer un site internet avec WordPress :

Un nom de domaine :

Le nom de domaine : C’est l’adresse de notre site web, par exemple ici avalanchemate.com.

Le nom de domaine est unique, on va donc commencer par acheter votre nom de domaine pour le réserver.

Un hébergeur pour notre site :

L’hébergeur : C’est l’entreprise qui va héberger le contenu de notre site, le CMS WordPress, toutes nos pages, nos images etc et les rentre accessible à tous.

Nous allons donc acheter chez un hébergeur un espace en ligne pour héberger notre site internet et le rendre accessible à tous.

Un CMS : WordPress

Le CMS, ici WordPress :

Créer un site WordPress c’est créer un site qui utilise le CMS WordPress pour créer votre contenu.

WordPress est gratuit et qui va nous permettre de créer entièrement nos pages et nos contenus important et l’ensemble de notre site sans avoir besoin de code.

Voici une explication complète si vous voulez en savoir plus sur pourquoi utiliser WordPress plutot qu’une autre solution (comme Wix ou un autre CMS par exemple).

Etapes pour créer un site WordPress :

Voici les différentes étapes pour créer un site WordPress que nous allons suivre dans ce guide :

Commençons tout de suite !

ETAPE 01 :

Créer un site WordPress : Trouver un nom de domaine

Pour construire un site WordPress, la toute première chose à avoir est un nom de domaine.

Le nom de domaine est l’adresse de notre site internet, par exemple ici avalanchemate.com est le nom de domaine de ce site.

Il s’agit de l’adresse que vos visiteurs entrent dans leur navigateur pour accéder à votre site.

Qu'est ce qu'un nom de domaine ?

Le nom de domaine est donc l’adresse de votre site internet, il doit donc être unique.

Un nom de domaine est réservé pour une à plusieurs années et on ne peut pas acheter un nom de domaine déjà réservé (par exemple fnac.fr est déjà réservé, on ne peut pas l’acheter).

Un nom de domaine coute environ entre 9€ et 15€ par an.

Comment trouver un nom de domaine ?

Avant d’envisager de créer un site WordPress, on doit déjà lui trouver un nom de domaine.  

Soit vous avez déjà un nom de domaine, par exemple votreentreprise.com ou votreentreprise.fr

Soit vous n’avez pas encore d’idée.

Trouver un nom de domaine pour son site WordPress :

Voici plusieurs techniques pour trouver le nom de domaine idéale lorsque vous n’avez pas d’idée :

Pour une marque :

Pour créer un site WordPress professionnel, entrez le nom de votre entreprise ou marque.com

Pour un produit ou service

Si vous site WordPress est autour d’un produit ou d’une catégorie et non d’une marque (pour les sites d’affiliation par exemple), utilisez produit.com ou service.com

Pour un portfolio

Si vous faites un site personnel, votre prénomnom.com peut être aussi une bonne option.

Conseils :
  • Gardez-le aussi court que possible.
  • Eviter les successions de lettres compliquées, muettes, ou les doubles orthographes possibles.
  • Si vous avez une entreprise locale (France), dans ce cas privilégiez un .fr, sinon cherchez à avoir un .com. Enfin si vous êtes une association vous pouvez choisir un .org également.

Utiliser des générateurs de nom de domaine :

Pour trouver le nom de domaine de votre site WordPress, vous pouvez également vous aider de sites de générateurs de nom de domaine comme namemesh.com

Il propose des noms de domaines en fonctions des mots clés que vous entrez.

nom de domaine generator

Si le nom de domaine que vous avez trouvé n’est pas disponible car déjà réservé par quelqu’un d’autre, ajoutez un mot clé relatif à votre activité dans l’adresse.

Exemple : Je veux créer un site WordPress pour ma marque de matériel de montagne montagne qui s’appelle Harvest :
harvest.com n’est pas disponible

reserver nom de domaine et hébergement

Mais harvestmontagne.com est disponible et peut être un très bon candidat pour mon nom de domaine:

reserver nom de domaine et hébergement

Vérifier la disponibilité d'un nom de domaine

Pour voir si un nom de domaine est disponible pour notre site, on va utiliser la recherche OVH. OVH est un hébergeur Français, on va pouvoir réserver notre nom de domaine et notre hébergeur directement dessus.

Regardons déjà la disponibilité de notre nom de domaine on va sur la fonction de recherche de nom de domaine et on cherche notre nom de domaine.com ovh.com/fr/domaines

reserver nom de domaine sur ovh

Et cherchez donc un nom de domaine disponible qui vous convient et qui est disponible. 

Vous l’avez ? 

Alors passons à l’étape suivante. 

ETAPE 02 :

Créer un site WordPress : Réserver un hébergement

L’hébergeur va nous mettre à disposition un espace dans ses serveurs pour héberger le contenu que l’on créé pour notre site internet WordPress.

Ainsi notre site sera en ligne et l’ensemble de son contenu pourra être accessible à tous nos visiteurs. 

Trouver un hébergeur

Nous allons réserver notre nom de domaine et notre hébergement sur OVH, qui est un hébergeur Français. 

Vous êtes bien entendu totalement libre de choisir l’hébergeur qui vous convient pour créer votre site WordPress. Si vous décidez de réserver via un autre hébergeur, le processus est pratiquement identique .

Donc la réservation de notre nom de domaine coute environ 10€ par an et un hébergement coute environ 10€ par mois.

Ce que nous offre un hébergeur de site web :

Avec notre hébergeur on obtient :

  • Notre nom de domaine réservé pour nous.
  • Un certificat SSL, qui va nous permettre d’avoir un site WordPress sécurisé en https
  • Un email professionnel, par exemple contact@notresite.com
  • Notre site internet WordPress, installé automatiquement.


Donc rendez-vous sur ovh.com/fr/domaines et une fois notre nom de domaine trouvé, il suffit de l’ajouter au panier puis de cliquer sur Continuer.

reserver nom domaine sur ovh

Réserver votre nom de domaine et un hébergement

De sélectionner DNSSEC Gratuit et service Gold (sauf si vous souhaitez un meilleur service)

reserver nom domaine sur ovh

Ensuite on choisit son hébergement, pour commencer, partons sur Performance 1 à 9,99€ par mois.

On coche CDN OVH (gratuit)

Puis on va installer le module WordPress en un clic.

module wordpress en un clic

ETAPE 03 :

Créer un site WordPress : Installer WordPress

WordPress est un outil qui va nous permettre de créer l’ensemble des contenus de notre site sans avoir besoin de coder. 

Nous allons pouvoir créer l’ensemble de notre pages, de nos articles, de nos menus, ajouter nos photos et images et enfin pouvoir gérer complètement le design de l’ensemble de notre site internet. 

Installer le module WordPress pour créer notre site

OVH nous propose d’installer automatiquement un CMS sur notre site.

On recommande l’utilisation de WordPress car c’est un des CMS les plus connus donc apprendre à s’en servir est une compétence utile. Il propose une bibliothèque gigantesque de thèmes et d’extensions pour designer et améliorer les fonctionnalités de notre site.

Installer WordPress avec notre hébergeur :

Mettre en place WordPress est très simple et c’est l’hébergeur qui va le faire automatiquement. Si vous n’avez pas choisi OVH comme hébergeur, chercher simplement sur internet comment installer WordPress avec votre hébergeur.

Nous allons sélectionner WordPress, qui va donc être automatiquement installé par OVH, nous n’aurons ainsi aucune manipulation à effectuer, l’hébergeur va créer un site WordPress pour nous. 

Terminer la commande de l'hébergement et du nom de domaine :

Donc après avoir sélectionné le module WordPress, on va jusqu’au bout de la commande.

OVH va donc réserver notre nom de domaine, mettre en place l’hébergement puis installer WordPress sur notre site.

L’opération est terminée lorsque l’on reçoit un email de confirmation de l’installation de WordPress contenant nos codes d’accès :

selectionner son hebergement

Accéder à son site WordPress en ligne

Pour accéder à notre site il suffit dans le navigateur de taper notre nom de domaine.

On a créé un site Internet WordPress et pour l’instant il n’y a rien dessus a part « Hello World » qui correspond à une page sans contenu automatiquement créé par WordPress pour vous permettre d’accéder à votre site (que nous allons supprimer par la suite).

Accéder au tableau de bord WordPress

Le paramétrage de notre site va se faire intégralement via le tableau de bord de WordPress.

Pour y accéder, il suffit, dans le navigateur, de rajouter /wp-admin après l’adresse de notre site. On tape donc nomdedomaine.com/wp-admin

se connecter a WordPress

On entre ses accès reçus par email et on arrive sur le Tableau de bord de WordPress.

C’est à partir de ce tableau de bord qu’on va pouvoir créer notre site internet, nos pages, designs et menus :

dashboard wordpress

Besoin de plus de détail sur cette étape ?
Consultez le chapitre du cours sur la réservation d’un nom de domaine et l’installation de WordPress.

Donc pour l’instant notre site ne ressemble à rien mais il existe, est en ligne et nous avons installé WordPress dessus.

On va donc pouvoir créer l’ensemble de nos pages.

Avant cela une dernière chose à faire avant tout, mettre en place le https.

Installer le HTTPS / SSL pour sécuriser son site internet

Rappelez vous plus haut, nous avons acheté un certificat SSL gratuit avec OVH pour notre site. Il va nous permettre d’afficher des pages sécurisées (https au lieu de http). C’est devenu une norme quasi obligatoire pour les moteurs de recherche et les navigateurs.

Le détail pas à pas de l’installation est traité dans le chapitre 4 du cours sur les Extensions WordPress, vous pouvez vous y référer si vous rencontrez des difficultés. 

On va donc installer un extension qui va passer toutes nos pages en Https.

Pour cela depuis le Tableau de bord WordPress, on se rend dans Extensions > Ajouter.

Puis dans la barre de recherche, on tape Really Simple SSL :

https et really simple ssl extension wordpress

On installe l’extension et c’est tout.

On va maintenant commencer par installer un thème pour notre site. C’est à dire la peau de notre site, son design.

ETAPE 04 :

Créer un site WordPress : Installer un thème responsive mobile et le paramétrer

Maintenant que l’on vient de créer notre site WordPress, il est temps de le faire ressembler à quelque chose de plus personnel et qui nous plait graphiquement.

Pour cela nous allons installer un thème WordPress.

A quoi sert le thème WordPress ?

Le thème est une couche de design qui va changer automatiquement l’ensemble de design de notre site internet. Lorsque l’on change de thème, on change de design.

Un thème WordPress va donc gérer l’apparence de tout notre site internet : nos pages, de nos menus, de notre blog etc.

Avantages et inconvénients d'un thème WordPress :

  • L’avantage d’un thème est qu’il permet d’avoir un site à l’aspect professionnel et beau graphiquement très rapidement.

  • L’inconvénient est qu’il est limitant. Le thème offre des options de paramétrage comme les couleurs ou le placement de certains éléments. Mais il faut garder à l’esprit qu’il s’agit d’une couche rigide qu’on ne peut pas modifier exactement comme on le souhaite. Cependant nous allons utiliser un thème qui fonctionne avec un constructeur de page et qui va nous permettre de régler le designs de nos pages très précisément.


Donc on va déjà commencer par ajouter un thème à notre site.

Trouver un thème dans la bibliothèque WordPress

WordPress contient une grande quantité de thème dans sa bibliothèque. Puisqu’il s’agit d’un CMS Opensource, n’importe qui peut développer et publier un thème. Il en existe donc des milliers.

Pour accéder à la bibliothèque de thème, rendez-vous dans Tableau de bords > Apparence > Thème > Ajouter

Et on se retrouve dans la bibliothèque de thème WordPress.

Créer un site wordpress : bibliotheque theme wordpress

Comment choisir, parmi tous ces thèmes, celui avec lequel on va créer notre site ?

On peut simplement utiliser le filtre « Populaires », car ce sont des thèmes bien utilisés et donc qui sont stables, optimisés pour mobiles et ergonomiques.

Pour voir à quoi ressemble un thème, il suffit de cliquer sur Détails et prévisualisation.

theme populaires bibliotheque wordpress

Et si le thème vous plait, il suffit de cliquer sur Installer puis Activer pour l’avoir.

Pour avoir le détail complet il suffit de vous rendre sur le chapitre dédié à l’installation des thèmes et on verra ainsi pas à pas un exemple de recherche et d’installation d’un thème depuis la bibliothèque WordPress

Voyons maintenant comment installer un thème trouvé sur internet.

Trouver un thème WordPress sur internet

Il existe énormément de site internet qui propose des thèmes WordPress.

La plupart de ces sites en ont fait leur métier en concevant et publiant des thèmes qu’ils rendent payant.

Cependant il existe toujours des thèmes gratuits qu’ils proposent.

Voici un exemple de site proposant des thèmes WordPress Gratuits que l’on va utiliser pour créer notre site :

Pour en donner 3 :

themes pro gratuits

Il suffit à chaque fois de chercher uniquement les thèmes gratuits.

Une fois qu’on trouve un thème qui nous intéresse, on le télécharge depuis le site.

Par exemple sur Colorlib, on va avoir Illdy

installer theme professionnel telecharger

Si un thème vous intéresse, pour l’installer on le télécharge et on obtient un fichier zippé (.zip)

Ensuite il suffit de retourner dans son Tableau de bord WordPress > Apparence > Thème > Ajouter > Bouton Téléverser un thème

On va chercher le .zip que l’on vient de télécharger et on l’upload.

Si vous avez besoin d’aide avec la manipulation, voici le détail dans le chapitre sur l’installation d’un thème.

Installer un thème avec du contenu prêt à être modifié

Enfin dernière option et c’est celle qu’on va choisir : Le thème contenant des sites prêts à l’emploi.

Pour créer notre site avec WordPress, notre page d’accueil, nos pages contact, blog et nos articles, il existe une méthode extrêmement efficace : Utiliser un thème comme Neve. 

Utiliser le thème Neve pour WordPress

Neve est un thème gratuit, responsive design, compatible avec Elementor (le meilleur constructeur de pages que l’on verra un peu plus bas). 

25 sites Neve prêts à l'emploi :

Neve vient également avec 25 sites démo prêt à l’emploi

Cela signifie que pour créer notre site avec le theme WordPress Neve, on va partir de contenu existant et prêt à être modifiés plutôt que de pages blanches. 

On va importer le thème ainsi que tout le contenu de la démo, c’est à dire les pages, les paramètres, les images etc.

Puis on va simplement modifier le contenu directement.

C’est beaucoup plus simple de changer que de créer de zéro, surtout si vous souhaitez créer un site rapidement avec WordPress, donc on va partir avec cette option.

Créer un site wordpress avec le theme neve wordpress

Et comme dit plus haut, Neve est également extrêmement intéressant parce qu’il fonctionne en lien avec Elementor.

C’est LE constructeur de page.

Nous allons le voir plus tard mais retenez juste qu’il va nous permettre d’avoir un niveau de personnalisation extrêmement poussé de notre page d’accueil.


Cependant vous êtes totalement libre de le faire avec un autre thème et si vous voulez un guide pas à pas sur comment importer un thème et son contenu, faites un saut sur le chapitre dédié à l’installation des thèmes dans la partie thème professionnel pour votre site internet.

Installer le thème Neve sur son site WordPress

Donc plutôt que de créer notre site de zéro, on va donc utiliser le thème WordPress Neve, qui est très intéressant pour obtenir un résultat rapidement.

On va donc ajouter un thème depuis la bibliothèque WordPress : Tableau de bords > Apparence > Thème > Ajouter

Et on recherche Neve

Créer un site wordpress avec le theme neve wordpress

Puis on clique sur Installer et Activer.

Importer le contenu du thème Neve

Une fois le thème installé, on obtient le message suivant :

message success theme neve installation

On va cliquer sur le bouton bleu Essayez l’un de nos sites de démarrage prêt à l’emploi.

On a alors la liste de l’ensemble des templates prêts à l’emploi avec 24 templates qui sont gratuits (les autres sont labellisés Pro).

Créer un site WordPress prêt à l'emploi Neve

Les modèles proposés couvrent un grand nombre de niches : Agence web, blog, restaurent, docteur, fitness, mariage, musique, etc. 

Pour créer votre site WordPress, vous pouvez donc facilement trouver un modèle qui correspond à votre domaine d’activité.

Pour voir le modèle en détail on peut utiliser le bouton preview.

preview theme neve

Et lorsqu’on a trouvé le thème qui nous convient, on clique sur Import.

Créer un site WordPress import contenu theme neve

L’importation va donc installer l’ensemble de la démo sur notre site.

On va donc avoir le thème, les images, les contenus, les pages, et les extensions nécessaires au fonctionnement du thème.

On va ensuite dans un second temps pouvoir modifier les éléments importés pour mettre notre contenu.

créer un site WordPress prêt à l'emploi :

Ici on va prendre par exemple un photographe qui souhaite créer un site WordPress pour mettre en ligne son Portfolio et ses compétences.

On va choisir donc le template Photography et on va l’importer avec tous ses éléments.

Vous pouvez choisir n’importe quel template, les manipulations seront les mêmes. 

Une fois le thème importé, on obtient le message de confirmation suivant :

import fenetre success

Personnaliser le thème Neve avec son propre contenu

Maintenant qu’on a créé un site WordPress prêt à l’emploi, il est temps de le modifier avec notre propre contenu. 

On commence par le personnaliser. 

C’est à dire gérer les couleurs, le menu, le logo, l’apparence. 

On va retourner sur son tableau de bord et commencer la personnalisation de son thème Neve :

On va dans Tableau de bord > Apparence > Personnaliser :

Créer un site wordpress personnaliser template photography neve

Et ici on va commencer à personnaliser le thème avec des éléments personnels.

Sur la gauche on a le menu de navigation pour retrouver l’ensemble des paramètres pour personnaliser notre site.

Sur la droite on a le rendu de notre page.

Ici on se situe donc sur la page d’accueil de notre site de photographie.

Modifiez l'en-tête de votre site WordPress :

On va commencer par modifier l’en-tête de notre site et ajouter notre logo.

Note : Pour éditer un élément, on peut directement cliquer dessus sur la page puis sur le petit crayon pour l’éditer, soit on passe par la barre des paramètres.

Ajouter le logo de votre site ou votre marque

Donc la première chose qu’on va faire c’est ajouter notre logo.

Si vous n’avez pas de logo, il existe des outils qui permettent de créer vos logos directement en ligne, avec vos couleurs, sans faire appel à un designer.

Par exemple :

 

Une fois qu’on a notre logo, il est temps de l’importer sur notre site.

Donc toujours dans Apparence > Personnaliser, on clique sur En-tête > Modifier le logo > Changer le logo.

modifier le logo site WordPress

Et on importe son logo.

importer son logo sur site wordpress

En dessous on peut mettre le Titre de son site, et sélectionner le mode d’affichage avec par exemple logo à gauche et titre à droite :

mode affichage du logo wordpress

En dessous on peut régler la taille du logo :

regler taille logo site wordpress

Puis une fois que ça nous convient, il ne reste qu’à cliquer sur le bouton Publier pour sauvegarder notre modification.

Ajouter une favicon (icône des onglets et favoris)

La Favicon c’est le petit logo qui apparaît sur les onglets de notre navigateur. En général la Favicon reprend notre logo.

Pour l’ajouter, toujours dans les paramètres d’en-tête, en dessous du logo on a Favicon.

On clique sur Sélectionner l’icône du site et on choisit notre logo.

ajouter une favicon a son site wordpress

Et la Favicon apparaît bien sur les onglets de notre navigateur.

Modifier la couleur de l’en-tête de notre site WordPress

On retourne en arrière dans en-tête, et on va pouvoir modifier la taille et la couleur du bandeau d’en-tête.

On va dans en-tête > Modifier la couleur de l’en-tête

Ici on va pouvoir paramétrer la hauteur de l’en-tête, la couleur blanche ou noir pour le titre (et donc mettre un logo noir ou blanc en conséquence) et enfin la couleur de fond de l’en-tête.

modifier couleur en-tête site wordpress

Modifier la couleur et l’apparence du menu

Toujours dans les paramètres d’en-tête, on a Modifier le menu qui va nous permettre de modifier l’apparence du menu.

En ce qui concerne les éléments qu’on va faire remonter dans le menu on verra ça plus tard lorsqu’on aura créé nos pages et qu’on pourra alors les faire remonter dans notre menu.

Dans En-tête > Modifier le menu, on va dans l’onglet Mise en Page pour modifier la position du menu :

modifier apparence menu site wordpress

Et dans l’onglet Style, pour modifier les couleurs de notre menu, des onglets, lors du passage de la souris et de l’onglet actif :  

modifier couleur onglets menu site wordpress

Définir les couleurs utilisées sur son site internet

Maintenant qu’on a fait l’en-tête, on va définir les couleurs de son site internet.

On revient en arrière (toujours dans Apparence > Personnaliser) et on va aller dans Couleurs et Arrière-plan.

Pour se rendre compte des changements de couleurs qu’on va faire ici on va plutôt se rendre dans sur la page Blog en cliquant directement sur l’onglet Blog :

Créer un site wordpress : Page blog modifier apparence

On va pouvoir modifier la couleur des liens, des liens lorsque la souris passe dessus, la couleur du texte et la couleur de fond.

Par exemple, on va changer la couleur des liens en bleu pour avoir la même chose que la couleur de l’en-tête :

Modifier couleur de typographies page blog

Puis on clique sur Publier lorsqu’on a défini les couleurs de son site.

Personnaliser les polices : Typographies de son site

Pour définir les polices d’écriture de notre site, on revient en arrière et on va aller dans Typographie.

Pour mieux se rendre compte des modifications on va aller sur un article de blog.

Donc toujours dans l’onglet Blog, on va cliquer sur le premier article :

personnaliser les typographies du site wordpress

On va ainsi pouvoir se rendre compte facilement des modifications sur les typographies.

On va aller dans En-tête et ici on va pouvoir définir les typographies à utiliser pour nos titres (H1, H2, H3, etc.) et pour les paragraphes de contenu.

Par exemple ici dans Font Family on choisit Impact, on voit tout de suite que la police s’applique à l’ensemble de nos titres.

En cliquant sur les types de titres (H1, H2, etc.) on va avoir des paramètres plus précis sur la casse, la taille, la graisse, l’espacement des lettres, etc.

Modifier typographie des titres de son site WordPress

Lorsqu’on est satisfait on clique sur Publier pour enregistrer.

Modifier l’affichage des articles sur la page Blog

On va retourner sur l’onglet Blog.

Dans la barre de paramètre on va aller toujours dans Mise en page, sous Blog / Archive :

Et ici on va pouvoir définir la façon dont les articles sont affichés sur la page Blog.

Par exemple ici les uns au-dessus des autres :

modifier affichage des articles Blog wordpress

Modifier le positionnement de la barre latérale sur les Articles et la page Blog

On va maintenant aller sur un Article.

On voit que sur le côté il y a une barre de navigation, typique des blogs.

paramétrer barre latérale Blog de son site wordpress

Elle permet d’afficher des éléments comme les Articles récents, les Catégories, etc.

Juste après, nous allons voir comment modifier les éléments qui se trouvent dans cette barre latérale, mais ici ce qui nous intéresse c’est le placement de cette barre.

Donc dans les paramètres on retourne en arrière et on va aller cette fois-ci dans Contenu / Barre.

Sous Article Unique, on voit qu’on a trois options de placement de la barre :

  • A Gauche
  • A Droite
  • Ne pas l’afficher

 

Par défaut elle se situe à droite, mais voici par exemple si on sélectionne Ne pas l’afficher :

Masquer la barre latérale Blog de son site wordpress

Pour les besoins du guide nous allons la laisser affichée à droite, mais beaucoup de blog ne l’affichent pas pour faciliter la lecture de l’article.

On peut même l’afficher sur la page Blog, mais dans ce cas il faut bien veiller à recadrer le contenu à 70% pour avoir un affichage optimal :  

paramétrer la largeur du contenu blog de son site wordpress

Nous n’allons pas garder la barre latérale sur la page blog car cela représente peu d’intérêt en termes d’ergonomie et de design.

Modifier le contenu de la barre latérale avec les Widgets

Pour modifier le contenu de la barre latérale et donc définir les éléments que l’on souhaite y afficher, on va retourner tout en arrière dans les paramètres et aller dans Widgets > Barre.

On a la liste des Widgets, c’est à dire des éléments, qui se trouvent dans la barre latérale.

On peut les déplacer pour modifier l’ordre d’apparition, les supprimer ou encore en ajouter d’autres en cliquant sur Ajouter un Widget.

Par exemple si on ne souhaite que la Fonction Recherche et Articles Récents, on supprime les autres Widgets.

Ce qui nous donne :

Modifier les Widgets de la barre latérale

Il y a beaucoup d’options détaillées, c’est à vous d’aller expérimenter, tester et voir ce que vous préférez le plus pour votre site.

Pour l’instant nous avons maintenant un site avec une apparence qui correspond à notre activité et qui nous est personnel.

On va maintenant pouvoir terminer en ajoutant nos contenus, créer nos pages, nos menus, nos articles, bref ajouter maintenant notre propre contenu.

ETAPE 05 :

Créer un site WordPress : Ajouter ses pages, articles et contenus importants

Notre site internet est composé donc de Pages et d’Articles. 

Après avoir mis en place le Thème et le design nous allons maintenant commencer à créer ou modifier les pages pour y ajouter notre propre contenu. 

Quels sont les types de pages à créer sur notre site internet ?

Notre site internet est donc composé de différentes pages et articles.

Différence entre une page et un article WordPress :

La différence entre une page et un article est que l’article va remonter automatiquement dans la section blog. Un article est aussi lié à un auteur, avec une date de publication et un espace pour les commentaires.

Les articles sont donc typiques du blog, le reste des éléments de notre site doivent être donc des pages.

Au sein de chaque page, le contenu change mais la seule chose qui reste unique c’est le header, contenant le logo et le menu, et le footer ou pied de page.

Les différents templates de pages de notre site WordPress :

Il existe des pages types sur tout site internet que nous allons passer en revue.

Une fois qu’on aura créé une page, on pourra en créer autant qu’on le souhaite car le principe est le même.

Parmi les pages que nous allons créer :

  • Une page classique type « A Propos »
  • Une page d’accueil ou HomePage
  • Une page contact
  • Un article de blog.

Créez des nouvelles pages à partir de template :

Si ensuite on souhaite créer de nouvelles pages spécifiques à notre activité, on va pouvoir les créer de manière similaire.

Par exemple une page classique va pouvoir être créé de la même manière que la page « A Propos ». Un nouvel article va être basé sur les articles existant, etc.

Avant d’attaquer on va rapidement voir ou se trouvent les Pages et les Articles dans le tableau de bord WordPress.

Créer et modifier les Pages et les Articles de son site internet 

On va donc commencer par regarder où se trouvent chaque éléments Pages et Articles en ligne, dans le tableau de bord WordPress.

Accéder à la version en ligne de son site :

Pour accéder à son site, on va dans le Tableau de bord tout en haut dans le nom de notre site > Aller sur le site.

Aller sur le site WordPress

Voyons maintenant ou retrouver dans le Tableau de bord de WordPress les différentes pages et Articles que l’on retrouve sur notre site en ligne.

Pour rappel, on a importé tout le contenu de la démo du Template Neve de notre thème.

Ainsi plusieurs pages et articles ont été créé par le Template et sont en ligne.

Nous n’avons donc maintenant plus qu’à les modifier, les supprimer ou créer de nouvelles pages si nécessaires.

Afficher les Pages du site :

Dans le Tableau de bord WordPress, on va retrouver toutes ses pages en allant dans Pages :

Voir toutes les pages dans le tableau de bord wordpress

On peut voir que cela correspond à chaque page que l’on retrouve sur notre site :

Créer le menu de son site wordpress

Afficher les Articles du site :

Et de même pour les articles, on va dans Tableau de bord > Articles :

liste articles tableau de bord wordpress

Et ils correspondent bien à l’ensemble des articles que l’on retrouve dans la section Blog.

liste des articles onglet blog site wordpress

Donc maintenant qu’on sait où trouver nos pages et où trouver nos articles dans le Tableau de bord WordPress, on va pouvoir commencer à modifier le contenu de notre site avec notre propre contenu.

Commençons par voir comment créer une nouvelle page.

Créer une nouvelle page web :

Pour avoir toutes les fonctionnalités de création offertes par Neve, on va ajouter l’extension Otter Block qui va nous permettre de créer nos pages en un clin d’œil en utilisant des block pré-définit.

On va donc dans Extensions > Ajouter et on recherche Otter Block.

On voit en premier résultat l’extension Gutenberg Blocks and Template Library by Otter, on l’installe et on l’active :

Extension Gutemberg block otter wordpress

Ensuite on va créer une nouvelle page.

Pour créer une nouvelle page, il suffit d’aller dans Pages > Ajouter

Et on se retrouve sur une page vierge.

Première chose, on lui donne un Titre : par exemple ici on va créer une page avec les expériences :

Créer une nouvelle page de son site wordpress

Ensuite on va dire à WordPress d’utiliser comme template le theme Neve.

On va à droite dans Attributs de page et on sélectionne Constructeur de page en pleine largeur (Neve) :

Attributs de page sélectionner le template de page

Ensuite on clique sur le bouton Template Library et on accède à des blocs prédéfinis qu’on va pouvoir ajouter à notre page.

Par exemple il s’agit de la page Expériences donc on va ajouter le bloc Our Focus en cliquant sur Insert

insérer un bloc template neve wordpress

On va pouvoir modifier chaque bloc, ils vont simplement nous permettre d’aller très vite en ayant déjà un design de base.

Par exemple on va directement modifier le bloc, le contenu, les couleurs, les icones etc.

modifier les blocs page de son site wordpress

Lorsqu’on est satisfait il ne nous reste plus qu’à cliquer sur Publier.

Et si on va voir la page (Soit en cliquant sur Voir la Page, soit en tapant son URL directement dans le navigateur), on a bien la version en ligne :

voir la page en ligne de son site wordpress

Pour ajouter un second bloc en dessous, par exemple, il suffit de cliquer sur le dernier élément, puis les trois points > Insérer après.

ajouter un bloc a une page wordpress

Puis sur l’icône + > Otter > Section.

insérer un bloc dans une page wordpress

Et à nouveau on a le bouton Template Library qui nous permet d’accéder à la librairie de bloc prédéfinis.

Par exemple on rajoute une seconde section A Propos en dessous :

Créer son site wordpress : ajouter section A propos

Puis on publie et on se retrouve bien avec notre page immédiatement mise à jour :

Créer une page en ligne de son site wordpress

Pour prévisualiser les modifications apportées à une page sans la publier il suffit de cliquer sur le bouton Prévisualiser :

Prévisualiser une page sur WordPress

Voilà comment créer une nouvelle page avec notre propre contenu.

Exactement de la même manière (et encore plus simplement), on va pouvoir modifier une page existante.

Modifier une page existante

Pour modifier une page existante, on va retourner dans le Tableau de Bord, dans Pages > Toutes les pages

On va par exemple modifier la page Contact, donc on clique dessus.

Neve utilise un constructeur de page qui s’appelle Elementor, pour créer les pages web.

On va donc éditer la page dans Elementor en cliquant sur le bouton Modifier dans Elementor.

Modifier une page dans elementor de son site wordpress

La page va s’ouvrir dans l’éditeur de page Elementor.

Créer un page avec Elementor de son site wordpress

Elementor fonctionne très simplement.

Pour modifier un élément il suffit de cliquer dessus pour avoir sur la barre latérale les options de paramètres.

Par exemple ici la page est en anglais, pour modifier le titre, on va cliquer dessus.

Et soit on modifie directement sur le rendu de la page, soit dans la barre latérale gauche :

Modifier une page de son site wordpress dans Elementor

Autre exemple, pour modifier l’image de fond, il suffit de cliquer sur la section, d’aller dans la barre de paramètre dans l’onglet Style et on peut retrouver l’image en arrière plan que l’on souhaite modifier

Modifier image fond section elementor

Pour ajouter un élément, il suffit de cliquer sur le bouton + sur une section.

Ajouter une nouvelle section Elementor

Puis sur l’icône avec le Dossier :

Ajouter un bloc dans une section elementor

Puis dans Blocs, on accède à la bibliothèque de blocs disponibles dans Elementor.

bibliotheque de bloc elementor pour créer son site wordpress

On peut en insérer un et de la même manière le modifier en cliquant sur les éléments et en les paramétrant exactement comme on le souhaite :

modifier un bloc importé elementor

Lorsque les modifications nous conviennent, on clique sur Mettre à Jour.

Mettre a jour page elementor de son site wordpress

Puis pour revenir au Tableau de bord WordPress, on clique sur l’icône Hamburger tout en haut à gauche de l’éditeur :

icone hamburger elementor

Puis sur Revenir à l’éditeur WordPress.

revenir a l'editeur wordpress elementor

Et si on va sur la version en ligne de la page Contact on voit bien que nos modifications ont été mise en ligne :

Créer son site wordpress : Page contact en ligne

Donc voilà comment on crée une nouvelle page ou comment on modifie une page existante.

Un bon moyen de gagner beaucoup de temps dans la création de nos pages c’est l’option Duplication de page.

Si par exemple on a créé une page qui nous convient et qu’on souhaite avoir une seconde page avec un contenu différent mais sur le même modèle, plutôt que de repartir de zéro, on va dupliquer cette page et modifier le contenu dans cette nouvelle page.

Dupliquer une page existante

Pour dupliquer une page on va ajouter l’extension Duplicate Page.

On va dans Extensions > Ajouter, on cherche Duplicate Page, on Installe et on Active l’extension :

Extension duplicate page wordpress

Ensuite on retourne dans Pages > Toutes les Pages et on voit maintenant quand on passe la souris sur le titre d’une page qu’on a une option qui s’appelle Dupliquer :

option dupliquer page wordpress

Lorsqu’on clique dessus, on va avoir une copie de la page qui est créé qu’on reconnaît parce qu’elle est encore en Brouillon :

Page dupliquée en brouillon dans wordpress

Il suffit alors d’aller sur la page, de mettre le nouveau Titre, de faire ses modifications et de la publier :

Modifier et publier une page dupliquée dans WordPress

Voyons pour terminer comment modifier l’url de nos pages.

Modifier l’url d’une page de notre site dans WordPress

L’url d’une page c’est l’adresse de la page dans le navigateur.

L’url est important parce que c’est ce que les moteurs de recherches comme Google référencent pour afficher nos pages dans les résultats de recherche.

L’url doit être simple, descriptif et surtout unique.

Attention avec la modification de l'url d'une page de notre site :

L’url ne doit pas être modifié à la légère. 

Parce qu’une fois que nos pages seront référencées par les moteurs de recherche, si on modifie l’url, le moteur de recherche ne va plus pouvoir pointer vers notre page.

Il aura la mauvaise adresse.

Donc il est important de bien définir ses urls à la création de la page et de ne plus les modifier.

Si vous devez le faire, mettez en place des redirections automatiques (redirections 301).

Définir l'url d'une page de notre site : Permalien

Prenons l’exemple sur la version en ligne de notre site, de la page About.

On va aller dans Pages > Toutes les pages, et ici on va prendre la page About

A droite sous Permaliens, on va retrouver notre url.

Modifier les permaliens url de son site wordpress

Ici on voit que l’url actuel de la page est « bae34-about »

On appelle cela le Slug.

Le Slug c’est ce qu’il y a dans l’url apres le nom de notre site.

Ici les Slug est bae34-about, donc l’adresse de la page est https://nomdenotresite.com/bae34-about 

Cet url n’est pas descriptif et le mot « About » est en anglais.

On va donc simplement modifier directement dans le champs Slug et mettre « a-propos » et Mettre à jour :

mettre a jour le slug d'une page wordpress

Voilà donc comment on modifie l’url de n’importe quelle page.

Ce qu'on vient de faire :

On sait maintenant tout ce qu’il faut savoir sur la création et la modification de pages.

Il s’agit d’une vue rapide pour pouvoir créer nos pages et les modifier avec notre propre contenu.

Pour avoir un détail sur la création de page, allez voir le chapitre 3 dédié à la création et la modification de pages et articles. Vous aurez tout le détail clic par clic pour vous montrer toutes les possibilités offertes par WordPress.

Elementor : le constructeur de pages WordPress compatible avec Neve

Enfin comme on l’a vu, notre template Neve, utilise le constructeur de page Elementor.

Elementor est un outil puissant aux possibilités de design quasi sans limites en ce qui concerne la création de vos pages. Si par exemple vous avez une idée très précise du design que vous souhaitez créer, allez lire les chapitres sur Elementor. Clic par clic on va explorer le fonctionnement d’Elementor et comment créer des designs exactement comme on le souhaite pour ses pages.

Voyons maintenant la même chose pour les Articles.

Modifier un Article de notre blog

Les Articles fonctionnent pratiquement comme les pages.

Tout ce qu’on a dit plus haut sur les pages fonctionne donc pour les Articles.

Un article est plus simple qu’une page car il a toujours le même template.

De plus un article va remonter automatiquement sur la page Blog de notre site internet.

Donc on va dans Articles > Tous les Articles et on ouvre le premier Article par exemple :

Créer un article de son site WordPress

Un article est composé d’un titre principal, de sous titres et de paragraphes.

On peut y ajouter des images ou des vidéos.

On va travailler directement sur la page de l’Article.

Modifier le contenu d’un bloc

Pour modifier un bloc il suffit de cliquer dedans directement et de modifier le contenu :

Modifier le contenu d'un bloc article avec WordPress

Ajouter un nouveau bloc

Pour ajouter un bloc, il suffit de cliquer sur les trois petits points d’un bloc existant et de sélectionner Insérer après

insérer un nouveau bloc pour créer ses pages wordpress

Et un nouveau bloc se crée en dessous. Il suffit de cliquer sur l’icône + au début de ce bloc pour indiquer le type d’élément que l’on souhaite ajouter : un Titre, un Paragraphe, une image, une vidéo etc.

type de contenu de bloc ajouter wordpress

Déplacer un bloc

Pour déplacer un bloc, il suffit d’utiliser les flèches haut et bas pour le faire monter et descendre sur la page :

déplacer un bloc page wordpress

Modifier l’image de mise en avant de l’article de blog

Si on va sur la page Blog de notre site, on voit qu’il y a une image de mise en avant. C’est l’image qui apparaît dans la liste des articles pour l’illustrer :

Image de mise en avant article blog de son site wordpress

Pour modifier cette image il suffit d’aller à droite dans les options de Document > Image mise en avant et de la modifier en téléchargeant ses propres images en cliquant sur Remplacer l’image

modifier l'image de mise en avant d'un article de blog

Une fois les modifications effectuées, on clique sur Publier pour les enregistrer.

Créer un nouvel Article de blog

Pour créer un nouvel article, comme pour page, il suffit de cliquer sur Articles > Ajouter.

Ensuite on lui donne un Titre et on clique sur Publier.

On va ensuite pouvoir modifier l’URL sous Permaliens et l’image de mise en avant.

Puis ajouter les blocs de la même manière que lorsqu’on modifie un article.

Créer un site wordpress : Ecrire un article en utilisant les bloc

On clique sur Publier pour mettre à jour et si on retourne sur la page Blog de notre site, on voit bien que l’Article a été ajouté :

Article de blog en ligne site wordpress

De la même manière que pour les pages on peut également partir d’un article existant, le dupliquer et le retravailler.

Dupliquer un article de blog existant

On va dans Articles > Tous les articles et on a également l’option Dupliquer qui nous permet de créer une copie de notre article pour le modifier ensuite.

Dupliquer un article existant dans WordPress

Voilà donc comment créer des articles et les modifier.

Pour avoir plus de détail sur toutes les possibilités offertes par l’éditeur WordPress et la présentation de tous les outils, allez lire ce chapitre pour avoir une vue d’ensemble de tous les éléments que vous pouvez mettre dans un article.

Et maintenant... Créer une HomePage ou Page d'accueil

Maintenant on est totalement opérationnel pour créer les pages de notre site et les Articles.

Voyons comment modifier la page la plus importante maintenant : notre page d’accueil ou HomePage.

ETAPE 06 :

Modifier la Page d’Accueil, ou HomePage, de son site internet

La HomePage ou Page d’Accueil est la page principale de notre site. La première qui s’affiche lorsqu’on tape l’adresse de notre site.

Il s’agit d’une des pages les plus importante de notre site et doit bien décrire au visiteur ce qu’il va y trouver. 

On va donc modifier notre page d’accueil avec notre contenu personnel. 

Accéder à la page d'accueil ou HomePage

Pour l’instant nous utilisons la page d’accueil du template Photographie de notre thème Neve.

Créer un site wordpress Homepage photography neve

La HomePage fonctionne comme une page normale.

On va la retrouver dans Pages > Toutes les Pages > Home

Et WordPress l’indique comme Page d’accueil

page accueil liste des pages wordpress

Si on va dessus, on voit qu’elle a été construite avec le constructeur de page Elementor :

Homepage construite avec Elementor sur WordPress

Donc pour la modifier, il suffit de cliquer sur le bouton Modifier avec Elementor

La page va s’ouvrir dans l’editeur Elementor et on va pouvoir changer tous les éléments qui se trouvent sur notre page : Textes, titres, photos, boutons, positions etc.

Passons en revue comment modifier les éléments de sa HomePage.

Modifier un élément de la HomePage

Pour modifier un élément il suffit de cliquer dessus et dans la barre de paramètre de gauche on va pouvoir accéder à toutes les options de modification.

Panneau paramètre Elementor

Le panneau se décline en trois onglets :

Onglet Contenu :

Dans cet onglet on va pouvoir modifier le contenu de l’élément, par exemple le texte et la position ou encore ajouter des liens.

Onglet Contenu Elementor

Onglet Style :

Dans cet onglet on va pouvoir modifier le design ou le style de l’élément.

Par exemple la couleur, la typographie, les ombres et les modes de fusion.

onglet style Elementor

Onglet Avancé :

Cet onglet va nous permettre de gérer toutes les options de marges et d’écartement autour et à l’intérieur de l’élément.

Cela va permettre d’augmenter ou de diminuer l’espace autour de l’élément. 

Onglet Avancé Elementor

Ces trois onglets sont communs à tous les éléments que l’on va sélectionner.

Déplacer un élément de la HomePage

Pour déplacer un élément, il suffit de cliquer sur le crayon et de le déplace ou on le souhaite

Déplacer un élément dans Elementor

Dupliquer un élément de la HomePage

Et enfin on peut dupliquer n’importe quel élément en faisant clique droit dessus > Dupliquer

Dupliquer un element dans Elementor

Modifier les Sections de la HomePage

Comme on peut le voir, la HomePage est construite en section qui prennent la largeur de l’écran. On les retrouve dans les encadrés bleu.

Pour modifier, dupliquer ou déplacer une section, il suffit de cliquer dessus et les options apparaissent dans la barre latérale de paramètres :

Barre latérale paramètre section Elementor

Modifier les colonnes de la HomePage

A l’intérieur d’une section il y a des colonnes (minimum une) que l’on retrouve dans les encadrés gris.

Comme pour les sections, on peut modifier, dupliquer ou déplacer une colonne en cliquant dessus et en accédant aux paramètres de la colonne dans le volet latéral.

Barre latérale paramètre de colonne dans Elementor

Exactement comme pour les pages, on peut ajouter de nouvelles sections à n’importe quel endroit de la page.

Ajouter une nouvelle section à la HomePage

Pour cela il suffit de cliquer sur une section existante et de cliquer sur l’icône « + » ce qui va ajouter automatiquement une nouvelle section en dessus :

Ajouter une nouvelle section dans Elementor

Puis comme précédemment, il suffit de cliquer sur l’icône du dossier puis dans Blocs, d’ajouter un nouveau bloc tout fait et de le modifier directement ensuite avec son propre contenu et son propre design.

Créer ses pages WordPress : Ajouter un nouveau bloc dans Elementor

Enfin dernière chose à voir, c’est l’ajout d’élément (texte, bouton etc.), à n’importe quel endroit de notre page.

Ajouter de nouveaux Widgets à la HomePage

Elementor vient avec un ensemble de Widgets disponibles qu’on a juste à faire glisser à l’endroit souhaité de sa page puis à paramétrer.

Pour accéder aux Widgets, il suffit de cliquer sur l’icône du carré en 9 points dans la barre latérale, on a alors la liste de l’ensemble des Widgets disponibles :

Liste des Widgets Elementor pour créer son site WordPress

Pour ajouter par exemple un bouton, il suffit de sélectionner le widget Bouton et de le placer à l’endroit souhaité dans la page :

Insérer un bouton dans une section Elementor WordPress

Ensuite en cliquant sur l’élément, on le paramètre à l’aide du volet de paramètre pour changer le contenu, l’apparence et la position de l’élément.

Créer un bouton avec Elementor sur une page de son site wordpress

Une fois les modifications effectuées on clique sur le bouton Mettre à jour en bas et les modifications sont automatiquement en ligne.

Tirez partie d'Elementor pour personnaliser vos pages WordPress :

Tout l’interface d’Elementor est intuitif. Si on apprend bien à l’utiliser il permet de faire des merveilles.

Pour apprendre toutes les fonctionnalités d’Elementor je vous suggère de lire les chapitres concernant Elementor et qui vont vous donner un vue complète de l’outil et de comment l’utiliser au maximum pour créer vos pages web exactement comme vous le souhaitez.

Et maintenant le menu de navigation pour lier nos pages :

Maintenant qu’on a créé l’ensemble de nos pages et de nos articles, il ne reste plus qu’à les relier au menu de navigation.

Voyons ça tout de suite.

4 réponses

  1. Bonjour Thomas, merci c’est excellent ! Exactement ce que je cherchais ! On sent le travail de recherche et de synthèse alors bravo !

  2. Merci pour ce guide !
    C’est long à lire mais ça en vaut la peine.
    Je découvre le thème Neve, je n’en avais jamais entendu parlé ni d’Elementor.
    Ca a l’air très chouette je vais essayer.
    Par contre est ce que on est obligé d’utiliser Neve pour Elementor ou est ce qu’il est compatible avec mon thème ? Parce que j’utilise un thème que j’aime bien déjà.
    En tout cas beau travail.

    1. Merci Marina,
      Tu peux effectivement utiliser Elementor avec le Thème que tu as déjà.
      Sur une page tu sélectionnes le modèle : Elementor Pleine Page, Canevas ou Thème.
      L’intérêt de Neve est surtout pour profiter des sites prêts à l’emploi ce qui permet de sauter toute la phase paramétrage et nous fait gagner beaucoup de temps plutôt que de partir de zéro.

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *