Comment Réussir la Conception d'un Site Web ? Le Guide

Je vous souhaite la bienvenue sur mon site et pour bien vous accueillir comme il se doit, je vais vous présenter un guide complet dédié à la conception d’un site internet. Nous allons principalement voir comment monter un WordPress en détail.

Nous sommes de plus en plus d’entrepreneurs à vouloir monter notre business à travers le web et, je comprends tout à fait, n’avons pas forcément le budget pour faire appel à un concepteur de sites web ou une agence de communication pour réaliser un site à notre image. Alors comme on est mieux servi que par soi-même, autant créer son site tout seul, non ?

Seulement, réussir à concevoir son site internet peut s’apparenter à un art. Beaucoup de détails nous échappent et peut sembler d’un autre monde. C’est vrai que si je vous parle tout de suite de NDD, de plugins, de margin et autres H1-H2, je parie que je vous ai déjà perdu… Après tout, je suis un artisan du web, sans fausse modestie !

C’est la raison pour laquelle je vous propose ce guide bien détaillé pour, qu’une fois avoir tout lu, vous allez pouvoir installer votre site WordPress facilement, le configurer comme vous le souhaitez et le mettre en ligne sans soucis. Et pour ceux qui ont la flemme de lire le contenu, n’hésitez pas à prendre directement contact avec moi afin que l’on discute d’une éventuelle formation ou une conception complète de ma part. A vous de voir !

Vous êtes prêt(e) à attaquer ? C’est parti !

Pas le temps de lire ? Téléchargez le guide complet juste ici 👇

Partagez sur :

Sommaire

1 Avant de se lancer : les points à savoir sur la conception d'un site internet
2 Réussir la conception de son site internet : les fondations
3 Configuration initiale et personnalisation du site WordPress
4 Structure et conception du site
5 Finalisation de la conception du site et mise en ligne
6 Conclusion sur la conception d'un site internet avec WordPress

Avant de se lancer : les points à savoir sur la conception d'un site internet

Oups ! Je suis confus de vous avoir freiné dans votre lancée. Mais j’ai une excellente raison à cela.

En fait, si vous souhaitez réussir votre conception à merveille, il y a plusieurs points à comprendre et à intégrer. A commencer par réfléchir sur le réel but d’avoir un site internet, prendre conscience que vous n’êtes sûrement pas tout seul sur le marché et que vos concurrents ont peut-être des sites ultra-performants que vous ne pourrez jamais dépasser en quelques jours. Et j’ajouterai même que derrière la conception ou la création d’un site (qui n’est pas la même chose, mais on verra cela un peu plus loin), il y a une vraie stratégie à mettre en place.

Et enfin, voici quelques conseils à appliquer tout au long du processus :

Vous devez TOUJOURS penser à vos visiteurs. Même si vous voulez le concevoir à votre image, un site doit répondre à ce que veulent vos visiteurs. Il faut comprendre les besoins et les attentes de vos cibles si vous voulez que votre site web leur soit vraiment utile.
Oui, vous allez faire des erreurs, beaucoup même. Et c’est tout à fait normal ! Personne ne devient concepteur en quelques heures. Voici 5 erreurs communes lors de la création de votre site WordPress.
Ne vous découragez pas. Cela fait sens avec le point précédent. Moi aussi j’ai été novice et si je vous montrais mes premiers designs…
La conception est différente de la création. En réalite, la création de site internet s’apparente plus à du développement web, pas mal de code… alors que la conception est plutôt la mise en place de fonctionnalités clé-en-main, la prise en compte de l’expérience utilisateur, l’esthétisme, la convivialité…

Bon allez, je vais quand même montrer l’un de mes premiers designs que j’avais mis sur mon tout premier site :

Aucun respect de la charte graphique, des tailles, dimensions, poids de l’image… il faut bien un début à tout !

Réussir la conception de son site internet : les fondations

Commençons cette aventure intelligemment : des bases solides sur lesquelles repose votre présence en ligne. Bien avant de penser au design et aux fonctionnalités de votre site, songez à plonger dans une phase d’exploration minutieuse. Les fondations d’une conception de site internet nécessitent une approche stratégique en vous posant ce type de questions :

Qui sont exactement les visiteurs que vous souhaitez toucher et servir ? La compréhension profonde de vos cibles est la clé d’un site qui résonne avec eux.
Comment se positionnent vos concurrents, et surtout, quel est le supplément de valeur unique que vous apportez à vos visiteurs ?
Comment vous positionnez-vous dans votre secteur d’activité ? Comment vous distinguez-vous ?

Ceci est le début d’une belle histoire qui va vous permettre de forger un site web d’une substance remarquable. Comme je le fais souvent, cette approche est une stratégie de webmarketing qui vient se mêler à un site performant qui sera bientôt le vôtre. Chaque aspect, du design aux appels à l’action, du contenu au ton de communication, tout est un reflet de l’analyse approfondie que vous menez.

Votre site ne sera plus seulement un espace virtuel, mais un lieu où les visiteurs se sentent compris, engagés et guidés.

Même si le but est de bâtir une expérience en ligne durable et que ces premiers mots abordant une stratégie digitale peuvent sembler effrayants, je vais vous rassurer tout de suite. Certes, dans l’idéal, toute cette étude est conseillée (et encore, ce n’est qu’une exquise) si vous voulez embrasser un succès qui perdure.

Mais comme je vous ai dit au début, ne vous mettez pas de pression et faites de votre mieux. Un site n’est pas figée dans le temps et vous pourrez toujours l’améliorer plus tard.

1 - Choix du nom de domaine

Voici le tout premier terme technique avec lequel vous allez devoir vous familiariser : le nom de domaine. Il s’agit de l’adresse de votre site internet (ou URL), là où vos visiteurs pourront vous trouver. Prenez bien le temps de réfléchir au nom que vous donnerez à votre site car il sera définitif (même s’il est possible de faire des redirections plus tard, mais ce n’est pas le but de vous enseigner cela maintenant). Très simplement, voici quelques conseils à suivre :

Réflexion identitaire : optez pour un nom en rapport avec l’âme de votre entreprise. Quand vos visiteurs entendent ce nom, ils doivent sentir une connexion instantanée avec vos valeurs.
Mémorabilité au rendez-vous : votre nom de domaine doit être une mélodie facile à retenir et à écrire. Évitez les termes compliqués ou trop longs. L’accessibilité compte autant que l’unicité.
Danse avec les moteurs de recherche : les arcanes des moteurs de recherche sont un facteur à considérer. Intégrez la requête visée dans votre nom de domaine pour donner un coup de pouce à votre positionnement SEO. Cela dit, les “exact match domains” font débat chez la plupart des SEO, certains disent que cela ne change rien au référencement, d’autres comme moi continuent de le faire quand j’aborde une niche particulière (exemple : “composition-florale-paris.fr” pour un fleuriste expert en bouquets sur Paris).
Générique ou marque ? : dilemme classique ! Les noms de domaine génériques, qui décrivent votre domaine d’activité (pas une requête visée, mais une thématique comme “pourmonenfant.fr” pour un site de puériculture), peuvent être efficaces pour le référencement initial. Cependant, les noms de domaine de marque offrent une identité unique. Pesez les avantages en termes de référencement et de mémorabilité, et optez pour celui qui propulse le mieux votre marque dans l’univers digital.
Le nom de domaine est-il disponible à l’achat ? : il serait vraiment regrettable d’investir du temps dans la sélection minutieuse d’un nom de domaine pour découvrir ensuite qu’il est déjà pris. Je vous recommande donc de prévoir des alternatives au cas où une autre entreprise l’aurait déjà acquis. Les hébergeurs vous informeront bien sûr de la disponibilité du nom, mais il est toujours judicieux de se rendre sur internetbs.net, un vérificateur de disponibilité de noms de domaine exhaustif.

Il y a même des suggestions d’alternatives de nom de domaine !

Astuce en Or : Si vous trouvez l’équilibre entre le nom parfait pour les humains et celui qui tape dans l’œil des moteurs de recherche, vous tenez là la pépite.

Pour ceux qui veulent aller encore plus loin : profiter de l’autorité d’un nom de domaine qui a existé dans le passé est possible pour monter dans le classement des moteurs de recherche ! Mais cela demande des compétences plus avancées en SEO, car ces noms de domaines expirés ont peut-être déjà été spammés (hacking, backlinks et contenus de mauvaise qualité, techniques black hat) ce qui engendre une mauvaise réputation aux yeux des moteurs de recherche.

N’oubliez pas les extensions TLD, c’est-à-dire les .fr, .com, .net… il est préférable de choisir un “.fr” pour les sites basés en France. Si vous voulez en savoir plus, je vous invite à suivre mes 10 conseils sur l’enregistrement de votre nom de domaine.

2 - Hébergement et sélection du CMS

Pour cette section, je vais la couper en trois afin de bien suivre les étapes comme il se doit. Déjà, je vais vous parler de l’hébergement qui est essentiel pour une mise en ligne convenable et pratique de votre site ainsi que les réglages à faire, puis dans un autre temps, le choix de votre CMS (oui parce que je ne vais vous apprendre à coder, mais à installer une solution facile à prendre en main qui se fait en quelques clics).

Choix de l'hébergeur

C’est ici que vous allez pouvoir réserver votre nom de domaine pour la durée de votre choix (en fonction de l’hébergement). Vous pouvez aussi le faire chez un registrar, mais je ne vais pas plus compliquer les choses. Et c’est aussi chez l’hébergeur que vous pourrez installer votre site internet.

Pour les personnes plus à l’aise, sachez que vous pouvez aussi installez votre CMS en local et envoyer les fichiers à votre hébergeur. Mais ce n’est pas la solution la plus pratique, surtout pour un débutant.

Généralement, les hébergeurs fournissent l’hébergement de votre nom de domaine et l’hébergement web (l’adresse et l’espace dans lequel vous affichez le contenu de votre site). Et avec un abonnement à l’année, vous aurez 1 nom de domaine offert que vous ne paierez pas la première année. Voici un aperçu des hébergeurs les plus réputés, chacun offrant des avantages particuliers :

O2switch (mon préféré) : Cet hébergeur français se distingue par son engagement envers la performance et la qualité de service. Leurs forfaits d’hébergement sont conçus pour offrir une expérience fluide et rapide à vos visiteurs. Ils ont aussi un super support technique réactif, ce qui peut être essentiel, surtout si vous êtes relativement nouveau dans le monde de la conception de site.
OVH : OVH est l’un des plus grands noms de l’hébergement en Europe. Leurs options d’hébergement sont variées, allant des solutions partagées aux serveurs dédiés. Malgré le désastre qui a eu lieu sur leurs serveurs, le prise en main est relativement simple et le support assez vif.
IONOS (1&1 IONOS) : Cet hébergeur offre une gamme complète de services d’hébergement, des solutions partagées aux serveurs dédiés et au cloud. Par contre, au niveau de la rapidité, ils n’ont pas l’air d’être les meilleurs si l’on compare aux autres hébergeurs.
Hostinger : Si vous cherchez une option plus abordable sans sacrifier la qualité, Hostinger pourrait être une solution intéressante. Leurs plans d’hébergement sont conçus pour offrir des performances décentes à un prix compétitif. Je n’ai pas encore testé mais les options ont l’air plutôt sympas.
LWS : LWS propose des solutions d’hébergement adaptées à une variété de besoins, des sites personnels aux sites e-commerce. Je suis beaucoup moins fan de leur support technique avec qui je ne partage pas une bonne expérience.

Conseil d’Expert : Lorsque vous choisissez un hébergeur, évaluez soigneusement vos besoins en termes de trafic attendu, de ressources nécessaires et de votre niveau de compétence technique. Si vous êtes novice, optez pour un hébergeur qui propose une interface conviviale, une rapidité de chargement et un support technique accessible.

Avant de continuer, j’aimerais conclure cette partie en précisant de bien comparer les différentes offres d’hébergement disponibles sur le marché. Lisez les avis, les commentaires, les comparatifs sur les meilleurs hébergeurs pour être sûr de faire le bon choix. Parce que changer d’hébergeur une fois votre site installé, c’est chiant (il faut modifier les enregistrements DNS sur les serveurs, par exemple), même si le nouvel hébergeur le prend en charge.

Les réglages de l'hébergement

Une fois votre choix d’hébergeur réalisé, je vais vous donner quelques tuyaux pour procéder à des réglages personnalisés qui maximiseront les performances et la sécurité de votre site.

Personnellement, je fonctionne d’abord par cette partie avant de choisir le CMS que je veux configurer, histoire de ne pas revenir en arrière une fois que je m’occupe de la conception. Voici comment je procède :

Accéder au CPanel : Le cPanel est le tableau de bord de votre hébergement, le cerveau qui contrôle les fonctions de votre site. Ici, vous pouvez gérer divers aspects de votre hébergement, y compris les bases de données, les comptes de messagerie, les paramètres de sécurité et l’installation du CMS. Familiarisez-vous avec cette interface, car elle vous donne le contrôle total sur votre site internet.
Aperçu du tableau de bord cPanel d’O2Switch
Gestionnaire de Fichiers : Imaginez le gestionnaire de fichiers comme vos placards virtuels. Vous pouvez y stocker des images, des vidéos et tout ce dont votre site a besoin pour fonctionner. C’est dans cette partie que vous pouvez envoyer tous les éléments de votre site internet visibles au visiteur ou non (back-end et front-end). D’ailleurs, si vous développez votre site avec du code, vous pouvez envoyer vos fichiers (protocole FTP) avec Filezilla, par exemple.

Comptes de Messagerie et Redirections : Si vous souhaitez des adresses e-mail personnalisées liées à votre domaine (comme contact@votrenomdedomaine.com), vous avez un module sur le cPanel. Vous pouvez également mettre en place des redirections pour diriger les e-mails vers d’autres adresses. D’un point de vue webmarketing, pensez que chaque aspect de votre site, y compris les e-mails, renforce votre image professionnelle.
Version PHP et Mémoire : Votre site web a besoin de la bonne version de PHP pour fonctionner correctement. Assurez-vous que votre hébergeur vous permet de choisir la version et la mémoire PHP appropriées. Cela garantira la compatibilité avec les thèmes et plugins que vous utiliserez. Une version obsolète peut ralentir votre site et entraîner des problèmes de sécurité. Aïe !
Certificat SSL : La sécurité est une priorité absolue. Activez un certificat SSL pour sécuriser la connexion entre votre site et ses visiteurs. Cela garantit que les informations sensibles, telles que les données de paiement, sont cryptées et protégées contre les hackers. Un site avec SSL est également favorisé par les moteurs de recherche, ce qui améliore son classement. Une extension existe dans le CPanel (Let’s Encrypt chez O2Switch).
WP Tiger sur O2Switch : Si vous optez pour O2Switch, leur plugin exclusif WP Tiger peut grandement améliorer la performance de votre site WordPress. Il optimise la mise en cache, accélère le chargement des pages et contribue à une expérience utilisateur fluide. Moi je l’aime bien et je l’utilise systématiquement.

Conseil d’expert : Prenez le temps de parcourir chaque paramètre de votre cPanel et de faire des recherches si quelque chose n’est pas clair. N’hésitez pas à contacter le support technique de votre hébergeur en cas de besoin. Les réglages de votre hébergement doivent être parfaitement ajustés pour éviter toute erreur.

La configuration de votre hébergement est la clé pour créer un site web stable, rapide et sécurisé. En prenant soin de ces détails, vous vous assurez que votre site est prêt à accueillir vos visiteurs et à leur offrir une expérience exceptionnelle. Ensuite, place à la sélection du CMS.

Définir le type de site

Encore une étape qui fait partie des bases de la conception de son site internet, sera de définir dans quelle catégorie fera partie votre site. Voulez-vous apporter des informations ? Afficher essentiellement des produits que vous vendez ?

Même si vous choisissez un CMS comme WordPress, il va falloir réfléchir à comment concevoir le site de façon à ce que vous remplissiez vos objectifs en ligne. Je vous donne quelques recommandations :

Analysez votre activité : Posez-vous les questions fondamentales. Êtes-vous une entreprise, un blogueur, un artiste, ou une organisation à but non lucratif ? Identifiez clairement la nature de votre activité. Si vous vendez des produits, un site e-commerce est indispensable pour afficher vos produits, gérer les transactions et interagir avec vos clients.
Identifiez vos objectifs : Qu’espérez-vous accomplir avec votre site ? Générer des ventes, accroître votre visibilité, partager des informations, établir une communauté en ligne ? Vos objectifs déterminent la structure et les fonctionnalités nécessaires à votre site.
Connaissez votre public cible : Qui sont vos visiteurs potentiels ? Comprenez leurs besoins, leurs attentes et leurs habitudes en ligne. Si vous visez une audience plus jeune, par exemple, un design moderne et une interface conviviale sont cruciaux.
Considérez la conception : La conception de votre site doit refléter vos objectifs et votre identité. Pour un blog, misez sur une mise en page facile à naviguer et une mise en valeur du contenu. Pour un site e-commerce, la présentation de vos produits doit être au centre de l’attention.
Gardez à l’esprit l’expérience utilisateur (UX) : Quel que soit le type de site que vous choisissez, l’expérience de vos visiteurs est primordiale. Assurez-vous que la navigation est fluide, que le contenu est facile à lire et que les actions (achat, inscription, contact) sont intuitives.

Mon conseil : La définition claire du type de site que vous souhaitez créer est la clé pour guider vos choix en matière de conception, de fonctionnalités et de contenu. Ne vous précipitez pas et prenez le temps d’analyser vos besoins et vos objectifs. Vous comprendrez plus tard qu’un site web bien aligné sur votre activité et vos objectifs aura un impact significatif sur votre présence en ligne et la satisfaction de vos visiteurs.

La sélection du CMS

Certes, nous allons voir comment bien concevoir son site web avec WordPress, mais 98% de ce que je vous ai dit depuis est valable pour tous les CMS. Si j’ai choisi WordPress, c’est parce qu’il est le plus simple à prendre en main, peut être extrêmement performant s’il est bien configuré et disponible chez la majorité des hébergeurs web.

Maintenant, vous avez le choix de choisir le type de CMS que vous voulez en fonction de ce que vous ferez dessus. Par exemple, si vous hésitez entre un blog ou un site internet, que vous souhaitez un site-commerce, un forum, plusieurs options s’offrent à vous :

WordPress : Un géant polyvalent qui s’est imposé comme l’une des options les plus populaires. Avec sa vaste base d’utilisateurs et de plugins, il convient à tout, des blogs personnels aux sites e-commerce complexes.
Wix : Conçu avec une interface conviviale et des modèles prédéfinis, Wix est pas mal pour les débutants et les petites entreprises. Il offre une mise en place rapide et intuitive mais est très limité en termes de fonctionnalités.
Joomla : Offrant des fonctionnalités avancées, Joomla est destiné aux utilisateurs expérimentés qui recherchent une personnalisation poussée. Il est idéal pour des sites avec une structure complexe.
Drupal : Conçu pour les projets exigeant une personnalisation avancée, Drupal offre une souplesse maximale dans la gestion de contenu. Il convient aux développeurs et utilisateurs techniques.
phpBB : Si vous envisagez de créer un forum, phpBB est un choix solide. Il vous permet de mettre en place une communauté en ligne dynamique avec des fonctionnalités de discussion.
PrestaShop : Si vous envisagez de lancer une boutique en ligne, PrestaShop est un CMS e-commerce populaire. Il offre une variété d’outils pour gérer vos produits et vos transactions.
Magento : Convient aux sites e-commerce de grande envergure, Magento offre une gamme complète de fonctionnalités pour gérer et développer votre boutique en ligne.
Shopify : Cette plateforme hébergée simplifie la création de votre boutique en ligne. Elle offre une variété de fonctionnalités et de thèmes pour personnaliser votre site.

Comme vous pouvez le voir, ce n’est pas pour rien que je recommande plutôt de concevoir son site avec WordPress si votre budget, vos compétences et vos moyens sont limités. Et si vous avez l’ambition de faire évoluer votre site web avec de nouvelles options, WordPress est un CMS évolutif que beaucoup de concepteurs maîtrisent et dont les tutos sur Internet sont incroyablement nombreux.

L'installation de base d'un WordPress avec O2Switch

Si vous avez choisi O2Switch comme hébergeur et WordPress comme CMS, voici comment amorcer votre aventure :

Installation avec Softaculous : Connectez-vous à votre cPanel depuis votre tableau de bord O2Switch. Scrollez tout en bas et vous trouverez les différents CMS à configurer. En cliquant sur WordPress, vous serez redirigé sur Softaculous, un outil puissant qui vous permet d’installer WordPress en quelques clics.
Tableau de bord Softaculous pour WordPress
Installation Rapide ou Personnalisée : Choisissez entre une installation rapide, où Softaculous fait tout le travail, ou une installation personnalisée pour plus de contrôle.
Configuration de la Base de Données : Si vous optez pour une installation personnalisée, configurez votre base de données en ajoutant un nom et un mot de passe sécurisé.
Activer HTTPS : Si vous passez par l’installation personnalisée, je vous recommande de choisir un protocol “https://” sans le “www”. Parfois, un message apparaît comme quoi un certifical SSL n’a pas été trouvé. Dans ce cas, revenez en arrière sur le cPanel et cherchez “Let’s Encrypt SSL”. Vous allez pouvoir générer un certificat sur le nom de domaine. Laissez tout coché par défaut et cliquez sur “Générer”.
Installation du Thème : Bien que vous puissiez installer un thème directement lors de l’installation, il est préférable de le faire après pour une personnalisation plus approfondie.
Plugins : Attendez de publier votre site avant d’ajouter des plugins pour éviter toute complication inutile au début.
URL d’Administration : Notez l’URL d’administration (exemple.com/wp-admin) pour vous connecter à l’interface de gestion de votre site.
Sécurité : Créez un mot de passe fort pour l’accès à l’administration. Ne partagez jamais ce mot de passe. NOTEZ LE BIEN QUELQUE PART !

Conseil supplémentaire : Attendez que votre URL soit prête pour le public avant de vous connecter à l’interface d’administration. Vous allez recevoir un mail de la part d’O2Switch que ce sera mis en place (généralement quelques minutes).

Rappelez-vous, vous êtes l’architecte de votre site web, et chaque décision compte pour créer une structure robuste et fonctionnelle.

Configuration initiale et personnalisation du site WordPress

Vous voilà dans la cour des concepteurs de site maintenant ! Après avoir vu toute la partie à propos de l’hébergement, de l’installation d’un CMS comme WordPress et du type de site que vous allez proposer à vos cibles, il vous sera plus facile d’aborder ce qui suit.

Mais avant, laissez-moi vous parler des configurations de base à effectuer depuis le tableau de bord WordPress. On va un peu personnaliser tout ça en touchant aux réglages, en choisissant un thème et en installant quelques plugins utiles et efficaces.

3 - Les réglages de base WordPress

Pour commencer, vous allez devoir vous connecter à votre interface WordPress en utilisant l’URL d’administration que vous avez créée lors de l’installation. Logiquement, il s’agit de l’URL de votre site suivi de “/wp-admin”. Pour la retrouver, vous pouvez vous revenir sur votre cPanel et vous rendre dans l’outil WP Tiger (vous pouvez même vous y connecter directement).

Ensuite, entrez votre mot de passe que vous avez noté (dans un fichier Word, bloc-notes ou bien sur un bout de papier). Vous voilà maintenant connecté et devriez voir un tableau de bord comme ceci :

C’est votre point de départ. Ce tableau de bord vous affiche quelques informations utiles comme les activités récentes, les statistiques et les notifications, mais ce qui nous interesse maintenant ce sont les onglets sur le côté gauche :

Articles : Ici, vous pouvez gérer et créer du contenu pour votre site. Créez des articles pour partager vos idées, informations et actualités.
Médias : Cette section vous permet de télécharger et de gérer des images, vidéos et autres fichiers multimédias que vous utiliserez sur votre site.
Pages : Différentes de vos articles, les pages sont des contenus fixes comme “À Propos”, “Contact” ou “Services”. Créez des pages pour présenter des informations importantes.
Commentaires : Gérez les commentaires laissés par les visiteurs sur vos articles. Approuvez, modérez ou supprimez les commentaires selon vos préférences.
Apparence : Personnalisez l’apparence de votre site en changeant le thème, en personnalisant les couleurs et en modifiant les éléments visuels.
Extensions : Gérez et ajoutez des extensions pour améliorer les fonctionnalités de votre site. Vous pouvez en installer de nouvelles, les activer ou les désactiver.
Outils : Cette section propose des outils utiles, comme l’importation/exportation de contenu ou la vérification des liens.
Réglages : Configurez les paramètres essentiels de votre site, y compris les réglages généraux, d’écriture, de lecture, de discussion et de permaliens.

Ce sont les onglets principaux avec lesquelles vous allez interagir fréquemment. Nous allons faire plusieurs allers-retours entre ces différents onglets, notamment la section “réglages” que nous allons explorer de ce pas.

Les réglages généraux pour personnaliser l'identité de votre site

Un petit tour rapide sans trop rentrer dans les détails, voyons les paramètres généraux à modifier en priorité :

Dans le menu situé à gauche de votre tableau de bord, repérez l’onglet “Réglages”. Cliquez dessus pour dérouler le sous-menu, puis sélectionnez “Général”. Vous voilà prêt à personnaliser les éléments clés de votre site.
Ensuite, configurez le titre et la description que vous retrouverez dans “Titre du site” et “Slogan”. Il s’agit d’indiquer une courte description et profitez-en pour mettre votre activité en avant la requête principale visée.
Vérifiez que toutes les autres informations soient cohérentes et laissez par défaut l’adresse mail d’administration qui devrait correspondre à celle que vous avez entrée sur votre hébergeur.
N’oubliez pas d’enregistrer vos modifications depuis le bas de la page, et c’est tout bon !

Les réglages de lecture

Vous pouvez constater que j’ai sauté l’étape “écriture”. Laissez cette section par défaut, car elle n’est pas très utile (sauf si vous voulez aller plus loin, mais je ne l’utilise que très rarement). On va plutôt regarder l’onglet “lecture” de près :

Au niveau de la page d’accueil : il devrait y en avoir aucune pour le moment vu que vous n’avez pas encore créé votre page d’accueil. Quand ce sera fait, vous pourrez revenir ici et la sélectionner dans le déroulé.
Même chose en ce qui concerne la page des articles : vous avez le choix de concevoir une page dédiée en fonction de l’affichage que vous désirez sur votre site. Avec un constructeur de page, comme Elementor, vous pourrez modifier de A à Z la présentation de vos articles à vos visiteurs, mais c’est complétement optionnel.
Pour le reste des éléments, ce sera à vous de choisir les paramètres qui vous correspondent le mieux. Vous pouvez afficher autant d’articles que vous voulez sur une seule et même page, afficher un extrait ou le texte complet, rédiger un texte pour les nouveaux abonnés à votre blog.
Pour finir, veillez à ce que la case “demander aux moteurs de recherche de ne pas indexer ce site” soit décochée ! Sinon, adieu le SEO !

On enregistre le tout et on passe à la suite.

Les réglages des commentaires

Je vous ai fait cette capture d’écran pour cette partie afin que vous puissiez copier ma configuration. Vous n’êtes pas obligé de tout suivre à la lettre, c’est pourquoi je vais approfondir les différents points suivants :

Approuver, modérer ou supprimer les commentaires : Ce que vous devez faire sera de cocher “le commentaire doit être approuvé manuellement”. Dans ce cas, vous recevrez une notification ou un mail et vous pourrez choisir d’approuver, de répondre, de supprimer, mettre à la corbeille ou en indisérable le commentaire depuis l’espace “commentaires” dans l’onglet du tableau de bord.
Prévenir les commentaires indésirables : Par défaut, vous aurez Akismet Anti-Spam d’installé dans les extensions qui vous permettra de filtrer les commentaires non désirés. Mais depuis les réglages des commentaires, vous pouvez modérez ceux qui contiennent plus d’1 lien, ce qui évite les liens néfastes sur votre site.
Vous pouvez laisser l’autorisation des ping et rétroliens par défaut au début, ce qui vous permettra d’obtenir des backlinks tout de suite, mais je conseille plutôt de décocher afin d’éviter que certaines personnes mal-intentionnés profitent de cette opportunité pour vous spammer.

Les réglages des permaliens

Dernier point avant de s’interesser aux pages, articles, extensions, thèmes, widgets, menus… la structure des permaliens qui correspond au format de vos futures URL. Je recommande de cocher la case “Titre de la publication” qui sera plus simple à lire pour les moteurs de recherche. Sachant que vous avez également la possibilité de modifier cela depuis les articles.

Pour le reste des éléments, il n’y a pas grand chose à ajouter pour le moment. Toutefois, si vous avez des questions, je suis là pour y répondre !

Bien, nous allons pouvoir passer à l’étape d’installation d’un thème qui permettra d’habiller votre site et de le rendre plus convivial.

4 - Installation et configuration du thème WordPress

Le choix de votre thème est une étape aussi importante que tout le reste vu que cela jouera sur l’aspect visuel de votre site Internet, la rapidité de chargement de votre site et les possibilités de modelage de l’apparence à votre guise. En effet, un thème peut-être gratuit ou payant et comportent plusieurs fichiers de code php, html, CSS, JavaScript etc… qui font fonctionner le site. En bref, ce sont des développeurs web qui ont conçus tous ces fichiers et les proposent gentiment sur WordPress à la disposition de quiconque.

Donc, mieux le thème est codé, plus il sera performant et fonctionnel pour les concepteurs de sites internet. Aussi, vous pouvez tout à fait créer vos thèmes WordPress, si vous avez les compétences, et les utiliser depuis la plateforme. Pour les curieux, rendez-vous sur le codex de WordPress.

Mais nous, nous allons faire plus simple et choisir un thème léger et gratuit du nom d’Astra et télécharger son thème enfant qu’il faudra activer ensuite. Suivez ces étapes pour installer et configurer Astra :

Installation du Thème

Accédez à votre tableau de bord WordPress : Connectez-vous à votre tableau de bord WordPress en utilisant l’URL d’administration fournie lors de l’installation ou revenez en arrière sur la page d’accueil.
Naviguez vers “Apparence” > “Thèmes” : Dans le menu de gauche, cliquez sur “Apparence”, puis sélectionnez “Thèmes”.
Ajoutez un nouveau thème : Cliquez sur “Ajouter un nouveau” pour explorer la bibliothèque de thèmes WordPress. Vous pouvez aussi faire cela depuis Softaculous. Ou si vous aimez les thèmes sombres, cherchez-en un autre avec un mode sombre intégré. Mais je vous recommande d’abord d’apprendre à concevoir un site en entier avant.
Recherchez votre thème : Utilisez les filtres et la barre de recherche pour trouver le thème qui correspond à vos besoins et à votre style. Entrez Astra et téléchargez-le.
Tapez “Astra Child” dans Google et suivez le lien “wpastra.com” : Vous arrivez sur le site officiel et vous pouvez générez un thème enfant. Laissez le nom par défaut et téléchargez le thème.
Revenez dans la section “Thèmes” et ajoutez Astrachild.zip : En haut de la page, vous trouverez un bouton “Ajouter” qui vous permet de téléverser votre fichier téléchargé précédemment.
Installez et Activez : Une fois que vous avez téléversé Astra Child, cliquez sur “Installer” puis sur “Activer” une fois l’installation terminée.

Vous voyez ? C’est assez simple finalement. Vous pouvez aussi choisir d’autres thèmes, mais n’oubliez pas d’avoir un thème enfant que vous activerez pour pouvoir faire des modifications au sein des fichiers du thème (ce que je vous invite à laisser de côté pour l’instant tant que vous n’aurez pas pris WordPress en main).

Astuces complémentaires : Pour ma part, j’enlève les thèmes installés par défaut (les “Twenty Twenty”) quand j’ai installé Astra et son thème enfant. Ils ne me sont plus utiles vu que j’ai un thème de secours au cas où le site crasherait.

Configuration du thème

Personnalisation Initiale : Une fois le thème Astra activé, accédez à “Apparence” > “Personnaliser” depuis votre tableau de bord WordPress.
Onglet “Global” > “Couleurs” : Vous pouvez personnaliser les couleurs globales du thème ici. Cela inclut les couleurs du texte, des liens, des arrière-plans et plus encore. Utiliser cette section pour définir une palette de couleurs cohérente sur tout le site. Notez que cela peut être plus simple que de le faire individuellement avec Elementor.
Onglet “Boutons” : Dans cette section, vous pouvez personnaliser les styles des boutons, y compris les couleurs, les marges et les bordures. Ajustez les paramètres pour obtenir des boutons cohérents et attrayants à travers le site. Utile si vous rajouter des options provenant du thème et non comprises avec un constructeur de site.
Onglet “Blog” : Cette section vous permet de personnaliser l’apparence des articles de blog et des pages d’archives. Vous pouvez choisir d’afficher les métadonnées, de définir un style de pagination et d’autres options pour améliorer la présentation de votre contenu.
Onglet “Identité du Site” : Ici, vous pouvez définir le titre de votre site, son sous-titre et le logo du site. C’est l’endroit où vous pouvez créer une identité visuelle cohérente pour votre site et qui apparaîtra aussi dans Google. Pour gagner du temps, je vous recommande d’insérer déjà votre logo et le favicon, ce sera déjà ça de fait et vous n’aurez pas à revenir dessus plus tard.

Notez que pour toutes les autres sections et pour la personnalisation avancée des en-têtes et pieds de page, nous utiliserons les extensions Elementor et Elementor Header & Footer Builder. Mais si le cœur vous en dit, vous pouvez quasiment concevoir tout le site depuis cet espace une fois avoir mis les extensions en place.

Ce site e-commerce a été réalisé avec Astra et Elementor

5 - Ajout et activation des extensions

Maintenant que vous avez installé votre thème, nous allons pouvoir rajouter quelques extensions (ou plugins) qui vous permettront d’ajouter des fonctionnalités spécifiques et personnalisées à votre site. Très simplement et depuis votre tableau de bord, cliquez sur “Extensions” (sous “Apparence”) et cliquez sur “Ajouter”. Vous devriez atterrir sur une page avec une barre de recherche et voici les extensions que je vous invite à télécharger :

Ajouter les extensions

WPS Hide Login : Modifie l’URL de connexion standard pour renforcer la sécurité de votre site en la rendant moins prévisible aux attaques potentielles.
Starter Templates : Cette extension vous propose une variété de modèles préconçus pour des pages, articles et sites complets. Elle facilite grandement le démarrage de votre projet.
WP Maintenance : Si vous souhaitez mettre votre site en mode maintenance pendant sa conception ou lors de mises à jour, cette extension vous aidera à afficher une page de maintenance personnalisée.
Classic Editor : Si vous préférez l’éditeur classique de WordPress à l’éditeur de blocs, cette extension vous permet de le rétablir.
Akismet Anti-Spam : Protégez votre site contre les faux commentaires et les spams, assurant ainsi un environnement en ligne plus propre et plus sûr (souvent installé par défaut).
Elementor Header & Footer Builder : Cette extension vous permet de personnaliser l’en-tête et le pied de page de votre site avec facilité et créativité.
Rank Math SEO : Améliorez la visibilité de votre site dans les moteurs de recherche grâce à cet outil de référencement puissant, vous aidant à optimiser vos contenus pour le classement et envoyer votre plan de site aux moteurs de recherche et de nombreuses options en plus pour le SEO.
LiteSpeed LsCache : Premièrement, vous devez revenir sur votre cPanel et chercher l’extension. Ensuite, il vous suffira de l’activer pour votre site puis de télécharger le plugin sur WordPress.
Complianz : Cette extension vous aide à générer un bandeau de cookies pour garantir la conformité à la vie privée et fournir aux utilisateurs les informations nécessaires sur les cookies utilisés sur votre site.

Conseils que je vous donne : Lors de l’ajout d’extensions, faites preuve de prudence et sélectionnez celles qui sont vraiment nécessaires pour éviter d’alourdir le site. Trop d’extensions peuvent ralentir le chargement de votre site. Aussi, il est nécessaire de désactiver les extensions que vous n’utilisez pas régulièrement pour maintenir les performances optimales de votre site. Pensez à régulièrement mettre à jour vos extensions pour garantir la sécurité et la compatibilité avec les nouvelles versions de WordPress.

Activer et configurer les extensions

Une fois que vous avez installé les extensions nécessaires pour enrichir les fonctionnalités de votre site, il est temps de les configurer pour qu’elles répondent à vos besoins spécifiques. Voici comment configurer certaines des extensions essentielles que nous avons mentionnées :

WPS Hide Login : Allez dans “Réglages” dans le menu WordPress et cliquez sur “WPS Hide Login”. Là vous pouvez choisir une nouvelle URL de connexion et rediriger sur une 404 en cas d’échec. Cela permet de cacher le “wp-admin” classique que la plupart des propriétaires de WordPress laissent par défaut.
Starter Templates : Une fois installé, allez dans les extensions installées et cliquez sur “voir la bibliothèque” et choisissez Elementor comme constructeur de page. Ensuite, sélectionnez le modèle de site qui vous plaît et suivez le guide en ajoutant un logo, les couleurs et la police de votre charte graphique (mieux vaut le faire plus tard). Ainsi, vous n’aurez plus qu’à modifier toutes les pages mises en place avec Elementor et supprimer le plug in une fois que tout sera fait.
WP Maintenance : Tout au long de la conception de votre site web, je vous invite à activer le mode maintenance. C’est juste histoire de ne pas présenter vos pages en cours de construction à quiconque se rendrait sur une de vos URL.
Classic Editor : Après l’installation, il n’y a pas de configuration nécessaire. L’éditeur classique sera activé pour la rédaction de vos articles et pages. Par ailleurs, lors de l’installation de WordPress depuis Softaculous, cette extension est aussi suggérée.
Akismet Anti-Spam : Suivez les instructions pour obtenir une clé API Akismet. Collez la clé API dans la section dédiée et enregistrez-la.
Elementor Header & Footer Builder : C’est grâce a ce plugin que vous allez créer votre en-tête et votre pied-de-page sur toutes les pages du site. Personnellement, j’aime bien commencer la conception d’un site par ces deux parties.
Rank Math SEO : Vous pouvez, d’ores et déjà, procéder à quelques réglages comme : retirer la base de la catégorie dans “liens”, activez la fonction “fil d’ariane” (recommandé pour les sites avec de nombreuses pages et articles), retirer des types de publication et taxonomies de votre plan de site et ne laissant que les pages, articles et, éventuellement, les pages d’atterrisage. N’oubliez pas de connecter les services Google lors de la configuration de départ du plugin, car cela vous sera utile pour le SEO. Pour plus d’infos sur l’extension, allez faire un tour sur ce guide.
LiteSpeed LsCache : Si tout se passe comme prévu, la liaison entre le cPanel et WordPress devrait se faire. Activez aussi le “cache mobile” et vous allez gagner en score de performances sur votre site internet.
Complianz : Cette extension génère un bandeau de cookies pour la conformité à la vie privée. Suivez les instructions pour personnaliser le bandeau en fonction des lois de votre région.

Lorsque vous configurez ces extensions, prenez le temps de parcourir leurs paramètres et options. Consultez également les tutoriels et la documentation fournis par les développeurs. Chaque site étant unique, ajustez les configurations en fonction de vos besoins et de la façon dont vous souhaitez que votre site fonctionne.

Structure et conception du site

Désormais, votre site est prêt pour être conçu, mais il va falloir penser aux nombres et aux types de pages que vous souhaitez publier, aux fonctionnalités à ajouter en plus (comme un formulaire de contact), aux différentes catégories et comment hiérarchiser tout ça… Puis, nous attaquerons la création de l’en-tête, du pied de page, de l’apparence du menu pour finir sur la conception complète du site.

6 - Arborescence et structure du site

Voyons ensemble comment faire pour organiser son site avec une arborescence garantissant une expérience fluide et engageante de la part de vos futurs visiteurs :

Navigation intuitive : Imaginez comment vos visiteurs parcourront votre site. L’objectif est de rendre la navigation aussi simple et intuitive que possible. Assurez-vous que les éléments essentiels sont facilement accessibles depuis le menu principal. Pensez à ce que vos visiteurs cherchent en priorité et placez ces éléments dans des positions stratégiques.
Catégories claires : Regroupez vos pages similaires sous des catégories pertinentes. Par exemple, si vous avez un site e-commerce, vos catégories pourraient être “Vêtements pour Hommes”, “Vêtements pour Femmes”, “Accessoires”, etc. Cela aide les visiteurs à trouver rapidement ce qu’ils recherchent.
Hiérarchie visuelle : Utilisez une structure hiérarchique pour organiser votre contenu. Les pages principales doivent figurer dans le menu principal. Les sous-pages ou les pages de niveau inférieur peuvent être regroupées dans des menus déroulants pour éviter de surcharger le menu principal.
Réflexion sur les besoins : Pensez à ce que votre public cible recherche. Si vous avez un site de voyage, par exemple, organisez votre contenu par destinations ou types de voyages (aventure, détente, culture, etc.).
Planification à long terme : Anticipez l’ajout futur de contenu. Créez une structure qui peut accueillir de nouvelles pages et catégories sans compromettre la simplicité de la navigation.

Retenez que la simplicité et la clarté sont essentielles. Evitez de surcharger le menu avec trop d’options. Priorisez les éléments qui sont les plus importants pour vos visiteurs et assurez-vous qu’ils sont facilement accessibles. Une navigation intuitive et une hiérarchie bien pensée contribuent grandement à la convivialité de votre site.

7 - Création du Header et Footer

La capture d’écran suivante est un plan pour suivre chaque étape à réaliser. Chaque indication est notée par un numéro dont je vais vous expliquer à quoi il correspond.

Réglages de l’en-tête et du pied de page

Pour retrouver l’extension : Dans “Apparence” > “Elementor Header & Footer Builder”, cliquez sur “Ajouter Nouveau” et vous devriez atterrir ici.
Le titre de l’en-tête que j’ai nommé “header’, appelez-le comme vous le souhaitez.
Le design que vous voulez personnaliser. Vous avez 4 options : En-tête, Pied de page, Avant le pied de page ou Bloc personnalisé. Prenez “En-tête”.
Où est-ce que vous souhaitez afficher votre nouveau design. Vous avez de nombreuses options dans le cas où vous aimeriez faire différents header en fonction des pages, articles, catégories… Je vous suggère de ne choisir qu’un seul en-tête et un seul pied-de-page pour toutes vos pages et donc de choisir “Tout le site”.
La modification avec Elementor. Nous allons faire cette étape immédiatement, ce qui va vous permettre de vous familiariser avec le fameux constructeur de page.
Une fois l’en-tête réalisé, il ne vous restera plus qu’à publier.

Dernière chose, il faudra répéter la même opération, mais cette fois-ci pour le pied de page de votre site. Aussi, je vous conseille de ne pas indexer l’en-tête et le pied de page qui seront considérés comme des pages à part entière. Pour ce faire, suivez les indications sur la capture ci-dessous :

Design de l’en-tête et du pied de page avec Elementor

Arrivés à ce stade du guide sur la conception d’un site internet avec WordPress, j’aimerais évoquer le fait que je ne peux pas vous livrer tous les petits détails et les paramètres qui permettent de peaufiner complètement votre site. Déjà, il me faudrait créer un e-book complet et puis, chacun a des préférences spécifiques ce qui m’amènerait à faire un guide pour chaque personne.

Donc, je vais vous présenter une manière de faire des plus simples avec un logo, un menu et un pied-de-page avec quelques informations essentielles. Aussi, quand vous publierez vos “header” et “footer”, cela devrait remplacer ceux installés par défaut avec Starter Templates. Sinon, vous allez devoir les concevoir depuis le menu “Apparence” > “Personnaliser”. Et dernier point : pensez à désactiver les sections titre et image mise en avant.

Pour plus d’explications, voici une vidéo que j’ai faite :

8 - Conception du menu

Quand vous aurez mis en place votre en-tête, vous allez pouvoir commencer à créer un menu. Après cela, il faudra revenir sur la conception de l’en-tête et insérer le menu correspondant. Pensez à tout ce que j’ai dit avant au niveau de l’arborescence et même si vous n’avez pas encore créé de pages, d’articles et de catégories, il sera toujours bon de savoir comment concevoir un menu avec WordPress. Suivez ces étapes :

Accéder à la Section “Menus” : Connectez-vous à votre tableau de bord WordPress. Dans le menu de gauche, survolez “Apparence” pour faire apparaître le sous-menu, puis cliquez sur “Menus”.

Créer un Nouveau Menu : Cliquez sur “Créer un menu” en haut de la page. Donnez un nom significatif à votre menu (par exemple, “Menu Principal” ou “Menu de Navigation”).

Ajouter des Éléments au Menu : Dans la colonne de gauche, vous verrez différentes sections pour ajouter des éléments au menu :
- Pages : Cochez les pages que vous souhaitez ajouter au menu.
- Articles : Ajoutez des articles de blog au menu.
- Liens Personnalisés : Ajoutez des URL externes ou internes personnalisées.
- Catégories : Ajoutez des catégories d’articles au menu.

Organiser les Éléments du Menu : Faites glisser les éléments pour les organiser dans l’ordre souhaité. Pour créer un sous-menu (menu déroulant), faites glisser un élément sous un autre élément et déplacez-le légèrement vers la droite pour l’intégrer.

Personnaliser les Éléments du Menu : Cliquez sur un élément du menu pour afficher les options de personnalisation. Vous pouvez modifier le libellé du menu, ajouter des classes CSS personnalisées (pour le style) et supprimer l’élément.

Emplacements du Menu : Dans la section “Emplacements du menu” en haut de la page, choisissez où vous souhaitez afficher ce menu. Les emplacements dépendent de votre thème, mais généralement, vous aurez des options comme le menu principal, le menu secondaire, etc.

Enregistrer le Menu : Une fois que vous avez organisé et personnalisé votre menu, cliquez sur “Enregistrer le menu”.

Prévisualisation : Pour voir à quoi ressemble votre menu, cliquez sur “Gérer les emplacements” en haut de la page. Vous pouvez également afficher votre site en direct pour vérifier le menu dans l’environnement réel.

Évitez de surcharger le menu avec trop d’options (par exemple, vouloir mettre toutes les pages et articles de son site). Priorisez les pages importantes et utilisez des noms de menu clairs et concis pour aider les visiteurs à comprendre rapidement ce qu’ils peuvent trouver sur chaque page.

En revenant sur Elementor Header & Footer Builder, vous pourrez choisir de styliser votre menu déroulant, l’espace entre les différentes sections, etc. Regardez encore la vidéo si vous ne vous en sortez pas.

9 - Conception de la page d'accueil

Sachez que vous reviendrez de nombreuses fois entre les différentes parties de ce guide. Pour le coup, nous allons maintenant nous pencher sur la conception de la page d’accueil. Si tout se passe bien jusque là, vous devriez avoir toutes les pages du site que vous avez importé avec Starter Templates. Du coup, aller dans “Pages” dans l’interface d’administration WordPress et retrouvez la page d’accueil qui a été importé, puis faites “Modifier avec Elementor”.

Vous allez tomber nez-à-nez avec le template de la page d’accueil que vous aurez installé sur votre site, mais voici déjà comment prendre en main Elementor :

Familiarisation avec l’interface Elementor

L’outil Elementor vous permet de créer des pages visuellement attrayantes et personnalisées sans avoir à écrire de code. Voici comment vous familiariser avec l’interface Elementor pour concevoir vos pages et articles :

Structure de la page : Lorsque vous entrez dans Elementor, vous verrez une structure de page basée sur le modèle que vous avez choisi. La page est divisée en sections. Chaque section peut contenir des colonnes, et chaque colonne peut contenir des widgets.
Ajouter des sections ou importer des modèles : Pour ajouter une nouvelle section à votre page d’accueil, cliquez sur le bouton “+ Ajouter une nouvelle section”. Vous pouvez choisir différentes structures de colonnes pour chaque section. Sinon, vous pouvez importer des blocs ou des modèles de page complets.
Ajouter des colonnes : À l’intérieur d’une section, vous pouvez ajouter des colonnes en cliquant sur l’icône “+ Ajouter une colonne”. Vous pouvez choisir le nombre de colonnes et leur disposition.
Ajouter des widgets : Les widgets sont les éléments de contenu que vous pouvez ajouter à vos sections et colonnes. Cliquez sur l’icône “+ Ajouter un élément” pour choisir et insérer des widgets tels que du texte, des images, des boutons, des vidéos, etc.
Éditer les widgets : Une fois que vous avez ajouté un widget, cliquez dessus pour ouvrir le panneau d’édition. Vous pouvez modifier le texte, les images, les couleurs, les polices, et d’autres options de style.
Options de style : Dans le panneau de droite, vous trouverez les options de style pour chaque élément. Vous pouvez ajuster les marges, les couleurs, les polices, les arrière-plans, etc.
Prévisualisation en temps réel : Elementor offre une fonction de prévisualisation en temps réel. Cela signifie que vous pouvez voir exactement à quoi ressemblera votre page pendant que vous la concevez.
Sauvegarder et mettre à jour : Une fois que vous êtes satisfait de la conception de votre section ou de votre page, cliquez la flèche à côté de “Publier” pour enregistrer vos modifications.
Réorganisation et duplication : Vous pouvez facilement réorganiser les sections, les colonnes et les widgets en les faisant glisser. Vous pouvez également dupliquer des éléments pour gagner du temps.
Annuler et rétablir : Elementor propose des boutons “Annuler” et “Rétablir” pour vous permettre de revenir en arrière si nécessaire. Vous pouvez aussi utiliser le raccourci CTRL + Z.
Aperçu global : En haut de la page, vous trouverez un bouton pour afficher un aperçu global de votre page.
Responsive : Activez le mode responsive tout en bas à gauche et utilisez les icônes en haut de la page pour basculer entre les modes de bureau, de tablette et de mobile. Assurez-vous que votre conception est réactive sur tous les appareils.

Structure d’une page d’accueil

Avant de remettre les bains dans le cambouis, du moins dans la conception, décomposons la structure d’une page d’accueil. Avec un modèle importé comme celui de Starter Templates, une bonne page d’accueil performante devrait présenter tous les éléments suivants :

En-tête : logo, menu de navigation. Rappelons que l’en-tête est généralement situé en haut de la page. Assurez-vous que votre logo est bien positionné et que le menu de navigation est clair et facile à suivre. Utilisez des liens vers des sections importantes de la page.
Section de bannière principale : titre, sous-titre, bouton d’appel à l’action. Cette section est souvent la première chose que les visiteurs voient. Utilisez un titre accrocheur (que vous nommerez en H1) pour présenter votre site ou votre marque. Le sous-titre, ou la description, peut offrir plus de contexte et doit tout de suite apporter une solution au problème de l’internaute. Puis, incluez un bouton d’appel à l’action pour diriger les visiteurs vers une page ou une action spécifique (un formulaire de contact, un appel téléphonique…).
Présentation des services : images et descriptions. Si votre site propose des produits ou des services, cette section est cruciale. Utilisez des images attrayantes pour chaque service, accompagnées de descriptions claires et concises. Cela permet aux visiteurs de comprendre rapidement ce que vous offrez. Plus simplement, mettre des avantages avec une boîte d’icône peut être tout aussi efficace. Dans le menu Elementor, vous pouvez modifier l’apparence de chaque élément sur votre site (tailles, marges, typographie, couleurs, animations, arrière-plan, balise HTML de titre…).
Témoignages : avis clients. Affichez des témoignages d’anciens clients ou utilisateurs satisfaits. Ces avis ajoutent de la crédibilité à votre site et encouragent la confiance. Utilisez des images et des noms réels si possible pour renforcer l’authenticité. Voici quelques idées créatives pour mettre en avant vos témoignages.
Appel à l’action final : inscription à la newsletter, liens vers des réseaux sociaux ou formulaire de contact. À la fin de la page, encouragez les visiteurs à entreprendre une action. Cela pourrait être de s’inscrire à votre newsletter pour rester informé ou de remplir un formulaire de contact pour en savoir plus ou bien de faire grandir votre communauté sur les réseaux sociaux (même si je ne suis pas pour faire sortir les visiteurs du site, mais tout dépend de vos objectifs). Utilisez des incitations pour encourager les actions.
Pied de page : liens utiles, copyright Le pied de page offre généralement des liens vers des pages importantes comme la politique de confidentialité, les termes et conditions, etc. Incluez également des informations de contact et le copyright pour protéger votre contenu.

L’ordre de ces sections peut varier en fonction de votre contenu et de vos objectifs. Généralement, ceci est le cheminement logique et d’autres sections peuvent être ajoutées. Assurez-vous que chaque section est clairement définie et qu’elle offre une expérience utilisateur fluide. N’oubliez pas que la simplicité et la cohérence visuelle sont clés pour une page d’accueil réussie.

Personnalisation visuelle

Chaque bloc, chaque élément, chaque section de vos templates peuvent être modifiés pour qu’ils correspondent exactement à ce que vous voulez. Par contre, si vous préférez faire au plus rapide, vous avez le choix de vous rendre directement dans le Tableau de bord WordPress puis “Apparence” > “Personnaliser” > “Global” > “Couleurs” et changer la palette, les couleurs du thème et de surface. Vous verrez un aperçu en temps réel de chaque modification de vos pages.

Cela dit, avec Elementor, vous avez accès à beaucoup plus d’options comme :

Facilité d’ajout de polices : Je trouve ça clairement plus simple de passer par Elementor pour choisir la police de chaque élément (Titres, Texte, Liens…). D’ailleurs, je vous conseille fortement de choisir des polices générales, comme je vous dis dans la vidéo, afin d’éviter de surcharger votre site.
Ajout d’effets de survols : Les effets de survol sont des animations ou des changements visuels qui se produisent lorsque le curseur de la souris survole un élément. Par exemple, vous pouvez ajouter un effet d’assombrissement ou un agrandissement subtil lorsque le curseur survole un bouton. Ces effets ajoutent de l’interactivité et de l’attrait visuel à votre page.
Ajustements des marges et espacements : Aussi appelés “Margin” et “Padding”, ils déterminent la distance entre les éléments sur votre page. Ajustez-les de manière cohérente pour créer un design équilibré. Utilisez des marges suffisantes pour éviter que le contenu ne semble trop compressé. Vérifiez bien que les espacements entre les sections sont uniformes pour une apparence soignée.
Images et illustrations : Si vous utilisez des images ou des illustrations, compressez-les au préalable et faites en sortes qu’elles correspondent au style visuel de votre site. Si vous constatez que le visuel devient flou, alors c’est que la taille en pixel de base n’est pas assez grande par rapport au format de bloc sur Elementor. Dans ce cas, recommencez en faisant un montage sur Canva, par exemple, compressez le fichier avec TinyPng et convertissez votre image en WebP avec CloudConvert. Renommez l’image et importez-la sur Elementor.
Intégration de contenu dynamique : Vous pouvez ajouter tout un tas de widgets fourni avec Elementor ou les extensions installés avec votre template. Cela peut être des articles récents, un sommaire, des tables de prix, un formulaire de contact… Il ne vous reste plus qu’à modifier le design comme bon vous semble avec ce que vous avez appris jusque là.
Ajustements pour les différents formats d’écran : Vos visiteurs utiliseront des mobiles, des tables et des ordinateurs. Et le rendu ne sera pas le peine sur chacun de ses formats. Donc je le répète encore, mais faites bien attention à vérifier la conception de votre design à chaque nouvelle modification. Tout doit être facile à lire, les liens facilement cliquables et votre menu soit adapté pour chaque écran. Vous pouvez même aller encore plus loin en masquant des éléments en fonction du format de l’écran de l’internaute (mais je ne vais pas rentre dans le sujet car on arrive à une conception plus poussée).
Prévisualisation et test : Dès que vous serez satisfait du design et avant de publier vos modifications, utilisez la fonction de prévisualisation d’Elementor pour voir à quoi ressemblera votre page pour les visiteurs. Tous les éléments doivent être correctement alignés, les couleurs vont bien ensemble et que les effets de survol sont fluides. Au besoin, faites des petits ajustements finaux avant de publier la page.

Ce que je fais, c’est que j’enregistre ma page avant de la publier directement. Du coup, une fois enregistrée, je quitte en revenant dans l’éditeur de page WordPress et je renseigne les éléments SEO comme ci-dessous :

10 - Conception des autres pages et articles (comparaisons avec la page d'accueil)

Exactement de la même manière que pour construire une page d’accueil, les autres pages et articles de votre site suivront la même procédure à quelques différences près. En fait, la page d’accueil est censée présenter toute votre activité avec vos différents services ou types de produits, les avis de vos clients, vos références si vous en avez, une brève présentation de l’entreprise, de quoi vous contacter… Et pour les autres pages (de second niveau), vous allez pouvoir rentrer un peu plus dans le détail.

Pensez à reprendre les pages importées avec Starter Templates pour gagner du temps !

En revanche, les articles sont là pour apporter des réponses précises à un sujet particulier. La conception sera beaucoup plus souple puisqu’il y aura une majorité de texte. Une image, un sommaire, des titres, du texte et éventuellement un formulaire de contact et pas besoin de plus que ça. Pour le coup, ce sont des techniques de référencement naturel qui devront prendre le dessus sur la conception, même si pour les autres pages il faudra quand même s’adonner à cette tâche.

Pour être plus clair, voici une comparaison entre la page d’accueil, les autres pages et les articles en termes de conception :

Page d’Accueil

Objectif : La page d’accueil est la vitrine de votre site, c’est là que les visiteurs obtiennent leur première impression. Elle doit captiver l’attention et guider les visiteurs vers des zones clés du site et les inciter les visiteurs à explorer davantage le site, à prendre des mesures (comme vous contacter). En bref, à comprendre rapidement ce que le site offre.
Contenu : La page d’accueil présente généralement une combinaison de sections telles que la bannière principale, les services, les témoignages, les appels à l’action, etc. On fait un lien vers ces différentes pages au sein du contenu (maillage interne).
Conception : La conception de la page d’accueil se concentre sur l’utilisation de sections bien définies pour présenter différents éléments clés. Elle comporte souvent un en-tête distinctif, une bannière attrayante et des appels à l’action visibles.

Autres Pages (À Propos, Services, Contact, etc.)

Objectif : Les autres pages ont des objectifs spécifiques, tels que fournir des informations détaillées sur vos services, expliquer votre histoire, ou faciliter le contact.
Contenu : Le contenu de ces pages dépend de leur objectif. Par exemple, une page “À Propos” peut présenter l’histoire de votre entreprise, tandis qu’une page “Services” détaille ce que vous offrez. N’oubliez pas de toujours faire un lien qui renvoi vers la page d’accueil (pour le “jus” SEO).
Conception : La conception de ces pages suit la cohérence visuelle du site, mais peut varier en fonction du contenu. En revanche, si vous souhaitez présenter différents services, soyez certain que vos visiteurs peuvent faire la différence en un coup d’oeil (par exemple, une image distinctive avant le premier scroll). N’oubliez pas que les appels à l’action restent importants pour guider les visiteurs vers des actions particulières.

Articles

Objectif : Les articles ont pour objectif de fournir des informations, de partager des connaissances, ou d’engager le lecteur avec du contenu intéressant. Ils sont aussi là pour le SEO et devraient être rangés dans une page “Blog”.
Contenu : Les articles se composent généralement d’un titre, d’un contenu, d’images et parfois de vidéos. Ils peuvent couvrir divers sujets et doivent être pertinents pour votre public cible.
Conception : La conception des articles se concentre sur la lisibilité et la présentation du contenu. L’utilisation d’images, de titres accrocheurs, de paragraphes courts est de pas mal de texte est recommandé.

Tout au long de la conception, restez cohérent sur votre design, d’où l’intérêt d’avoir téléchargé l’extension Starter Templates. Pour l’inspiration, il n’y a rien de mieux que d’avoir des exemples déjà conçus. Franchement, allez au plus simple et remplacez les visuels par les vôtres, le texte, la police et les couleurs.

Dernière chose : il ne vous restera plus qu’à organiser votre menu avec les différentes pages que vous avez créées.

Finalisation de la conception du site et mise en ligne

La conception de votre site internet commence à bien prendre forme. Si vous avez suivi les étapes jusque là avec succès, je ne peux que vous féliciter, car j’imagine très bien le temps que vous avez pu passer dessus. Vous allez pouvoir le mettre en ligne, mais avant de décocher le mode maintenance, il y a encore quelques démarches à entreprendre pour vous assurer que tout fonctionne et que votre site soit prêt à être découvert par les internautes.

Nous allons donc voir comment ajouter et configurer un formulaire de contact, publier certaines pages spécifiques obligatoires, assurer la sécurité et les performances de votre site web, comment créer une boutique en ligne (si besoin) et enfin publier son site.

11 - Ajouter un formulaire de contact

Il serait bien malheureux que personne ne puisse vous contacter, car vous n’avez aucun formulaire de contact sur votre site. Bon d’accord, vous aurez tout aussi bien pu rajouter votre adresse mail professionnelle et un numéro de téléphone en bas de la page, mais un formulaire de contact, c’est tout de même plus agréable pour le visiteur.

Si vous insistez, je vais vous expliquer comment faire pour ajouter un formulaire de contact. Premièrement, il faut revenir sur l’ajout d’extensions depuis le tableau de bord WordPress et chercher “Contact Form by WPForms”. Installez et activez-le puis créez un nouveau formulaire.

Création du formulaire et intégration sur Elementor

Ensuite, vous pouvez choisir un modèle préconçu ou partir de zéro. Faites votre choix et votre écran devrait ressembler à ceci :

Dans “Champs” sur le côté gauche, vous pouvez glissez et déposez les différents éléments comme : des champs de texte, des cases à cocher, des boutons radio, des listes déroulantes, etc. Personnalisez chaque champ en cliquant dessus et en ajustant les options à droite.

Dans l’onglet “Réglages” > “Notifications”, veuillez à bien remplir chaque champ pour recevoir les emails de vos visiteurs. D’ailleurs, vous pouvez aussi utiliser l’email du site créé sur le cPanel et ajouter une redirection depuis l’hébergeur, mais la démarche est un peu plus complexe.

Faites bien le tout de toutes les options disponibles en fouinant dans chaque onglet, chaque paramètre. Cependant, je vous ai parlé de l’essentiel à connaître. Pour finir, rendez-vous sur une de vos pages créée avec Elementor et ajoutez votre nouveau formulaire en faisant glisser le widget “WPForms”.

Petite précision, vous pouvez ajouter une protection par reCaptcha. Pour cela, revenez sur votre tableau de bord WordPress, cherchez l’onglet WPForms et cliquez sur “Réglages”. Puis, allez dans l’onglet “Captcha” et lisez bien ce qu’il y a d’écrit. Suivez les étapes une à une et enregistrez le tout.

Personnalisation visuelle avec Elementor

Aussi simple que “Bonjour”, la conception visuelle de votre formulaire avec Elementor va vous prendre quelques minutes seulement. Comme chaque widget, vous pouvez personnaliser votre formulaire de contact de la tête au pied. Comme d’habitude, utilisez les options de style, de couleurs et de polices, les marges internes et externes.

Plus facile encore, insérez un bloc de contact sur votre page et remplacez le formulaire par le vôtre. Vous pouvez même ajouter des animations de survol pour rendre le formulaire plus attrayant.

Prévisualisez le tout pour voir le rendu sur tous les formats d’écran, et “mettez à jour” si la page est déjà publiée.

12 - Création de pages "Mentions Légales" et "Politique de confidendialité"

Impératif : Avoir une page de mentions légales sur son site. Et je conseille aussi d’avoir une page de politique de confidentialité pour être aux normes vis-à-vis de la réglementation RGPD. On va voir cela avec l’extension Complianz que je vous ai fait téléchargé au début.

En ce qui concerne les mentions légales, malheureusement Complianz ne le propose pas. Pour cela, vous allez devoir créer une nouvelle page et ajouter vos propres mentions légales. Voici un lien qui vous explique comment faire pour les générer. Ensuite, je vous inviterai à mettre cette page dans le pied de page de votre site, exactement comme je l’explique dans ma vidéo (voir la partie Header et Footer Builder).

Pour la politique de confidentialité et la politique sur les cookies, suivez ces étapes :

Après l’activation, une nouvelle option “Complianz” apparaîtra dans votre menu. Cliquez dessus.
Suivez les étapes guidées de configuration de Complianz pour définir vos paramètres de conformité en fonction de votre emplacement géographique.
Une fois la configuration terminée, Complianz générera automatiquement des pages de politique de cookies et de politique de confidentialité adaptées à votre emplacement. Mais pour la politique de confidentialité, il faut acheter la version payant du plugin, alors vous pouvez aussi télécharger l’extension gratuite “Mentions légales [FR]” de Hugo Jacques.
Les pages incluront des informations juridiquement requises, telles que les détails de contact, les informations sur les cookies, la politique de confidentialité et d’autres dispositions nécessaires.
Ensuite, vous allez pouvoir concevoir le style du bandeau d’acceptation des cookies depuis l’extension. Derechef, suivez les étapes.

Petit rappel sur ce qui doit figurer au niveau des mentions légales :

Informations de Contact : Vos coordonnées complètes, y compris l’adresse postale et l’adresse e-mail de contact.
Propriétaire du Site : Le nom légal ou l’entité propriétaire du site.
Propriété Intellectuelle : Mentionnez les droits d’auteur et toute autre propriété intellectuelle liée au contenu du site.
Utilisation des Données : Expliquez comment les données personnelles sont collectées, utilisées, stockées et protégées sur votre site.
Liens Externes : Indiquez que vous n’êtes pas responsable du contenu des sites externes liés.
Loi Applicable : Précisez la loi applicable pour tout litige concernant le site.

13 - Sécurité et performances du site

Je ne vais pas trop m’étaler sur le sujet car je ne n’ai pas la prétention d’être un expert en sécurité informatique qui apporterait beaucoup plus de conseils que moi. D’ailleurs, la majorité des développeurs web “ne sont pas très WordPress” dû aux nombreuses attaques informatiques qui ont eu lieu sur ce CMS. Cela dit, la majorité des personnes vulnérables n’ont entrepris aucune action comme changer l’URL de connexion, se protéger des spams, mettre à jour leurs extensions et le site… Bref, ils cherchent le bâton pour se faire battre.

Donc en suivant chacune des actions suivantes, vous devriez être à l’abri d’attaques communes. Et puis, sachez qu’un bon hacker peut cracker n’importe quel site, quelque soit le nombres d’actions de sécurité mises en amont.

Sauvegardes régulières

Assurer la sauvegarde régulière de votre site est essentiel pour éviter toute perte de données en cas de problème. Voici comment le faire :

Choix de l’Extension de Sauvegarde : Utilisez des extensions telles que “UpdraftPlus”, “BackupBuddy”, “All-In-One WP Migration” ou même “JetBackup” sur le cPanel pour automatiser les sauvegardes. Configurez-les pour qu’elles sauvegardent votre site à des intervalles réguliers.
Emplacement de Stockage : Configurez vos sauvegardes pour être stockées dans un emplacement sécurisé, tel que le cloud (Google Drive, Dropbox, etc.) ou un serveur externe.
Restaurations de Sauvegarde : Familiarisez-vous avec le processus de restauration à partir d’une sauvegarde en cas de besoin. Assurez-vous que vos sauvegardes sont fonctionnelles.

Gardez votre site à jour

Les mises à jour régulières de votre site, y compris le thème, les extensions et WordPress lui-même, sont essentielles pour maintenir la sécurité et les performances. Voici comment le gérer :

Mises à Jour Automatiques : Activez les mises à jour automatiques pour WordPress, les thèmes et les extensions si possible. Cependant, assurez-vous que vos sauvegardes sont à jour en cas de problème.
Surveillance des Mises à Jour : Vérifiez régulièrement les mises à jour disponibles dans votre tableau de bord WordPress. Mettez à jour rapidement pour bénéficier des dernières fonctionnalités et corriger les vulnérabilités.

Protection contre les menaces en ligne

Si vous voulez renforcer la sécurité de votre site, il y a encore quelques actions que vous pouvez faire aisément comme :

Plugins de Sécurité : Utilisez des extensions telles que “Wordfence” ou “Sucuri Security” pour détecter et prévenir les menaces potentielles. Configurez-les correctement pour renforcer la sécurité.
Mots de Passe Forts : Utilisez des mots de passe forts et uniques pour votre compte administrateur, ainsi que pour tous les comptes d’utilisateurs.
Connexions Sécurisées : Utilisez un certificat SSL pour activer HTTPS sur votre site, assurant ainsi des connexions sécurisées entre les visiteurs et votre site.
Limitation des Tentatives de Connexion : Utilisez des plugins pour limiter le nombre de tentatives de connexion infructueuses et bloquer les adresses IP suspectes.
Suppression des Extensions Inutilisées : Supprimez les extensions que vous n’utilisez pas, car elles peuvent créer des vulnérabilités.

Là, vous devriez être rôdé. Votre site WordPress sera un vrai coffre-fort que les pirates auront du mal déverrouiller. Bien entendu, ne tombez non plus dans la psychose car vous n’êtes pas une grande multinationale qui serait plus à même de se faire attaquer. Sachez aussi que les attaques ont plus souvent lieu au sein des fichiers internes de votre entreprise, plus que sur un site internet.

14 - Comment concevoir une boutique en ligne avec WordPress

Tout ce que nous avons vu jusqu’à présent concerne plutôt les sites vitrines. Pour un site e-commerce, il y a d’autres éléments à ajouter comme une extension, des paramètres pour votre boutique en ligne, ajouter des produits, gérer vos commandes et ajouter un module de paiement. Nous allons voir toutes ces parties en détail.

Evaluation des besoins

En premier lieu, est-ce qu’ajouter une boutique en ligne sur votre site vaut réellement le coup ? Est-ce qu’un site vitrine de présentation ne suffirait-il pas ? Sachez que la gestion de votre boutique en ligne demande encore plus de temps, surtout si vous êtes seul aux commandes de votre entreprise et que vous avez déjà une boutique physique à gérer.

Vous allez devoir mesurer les coûts initiaux et continus de la mise en place et de la gestion par rapport aux bénéfices potentiels de l’augmentation des ventes. N’hésitez pas à étudier la question en profondeur, quitte à sollicitez les opinions de vos clients actuels pour savoir s’ils aimeraient acheter vos produits en ligne.

Puis, est ce que vos produits ou services conviennent à la vente en ligne ? Certains clients préfèrent acheter en physique un type de produit, puis certains produits nécessitent une démonstration en personne ou d’autres encore ne sont pas adaptés à la livraison en ligne.

Dernière précision : pensez à ce que vos produits doivent voir une présentation impeccable sur votre site pour donner l’envie d’être acheté par vos visiteurs. Vous allez devoir fournir des images de haute qualité, faites par un photographe. Est-ce que cela est possible pour vous ?

Installation de l’extension WooCommerce

Maintenant, vous savez où trouver l’extension depuis le tableau de bord. Et pour l’activer, même chose. Nous allons donc passer directement à la configuration du plugin :

Lancement de l’assistant de configuration : Dès que vous activez WooCommerce, vous serez accueilli par un assistant de configuration. Cet assistant est très utile car il vous guidera à travers les étapes essentielles pour configurer votre boutique, comme la définition de la monnaie, la configuration des taxes, les paramètres d’expédition, l’ajout de produits…
Information sur la boutique : Vous serez invité à fournir des détails sur votre boutique, tels que le pays, l’adresse, la monnaie et le type de produits que vous comptez vendre.
Configuration des paiements : Choisissez parmi les méthodes de paiement populaires. Vous pouvez configurer des solutions comme PayPal, Stripe ou des paiements par chèque.
Paramètres d’expédition : Configurez vos zones d’expédition, les tarifs et choisissez si vous souhaitez vendre des produits physiques ou numériques.
Recommandations complémentaires : WooCommerce pourrait suggérer des extensions supplémentaires pour améliorer votre boutique. Examinez ces suggestions et installez celles qui vous conviennent.
Activation : Une fois que tout est configuré, vous pouvez activer votre boutique.

Maintenant que WooCommerce est installé et activé, vous pouvez commencer à ajouter des produits, à configurer d’autres paramètres selon vos besoins et à personnaliser la conception de votre boutique en ligne pour qu’elle corresponde à votre marque. L’extension est vraiment bien faite, toutes les pages essentielles comme la boutique, les CGV, la page panier… seront installées automatiquement et vous pourrez modifier le design avec Elementor. Je n’ai même pas besoin de vous faire un guide là-dessus, car l’assistant vous guidera tout au long de processus sans intervention de ma part (ou presque).

Ajout de produits

Les uns après les autres, vous allez pouvoir ajouter plus de produits sur votre boutique en ligne. Je vous donne quelques tuyaux essentiels mais vous pouvez, bien entendu, aller encore plus loin dans la configuration.

Note importante : Je vous déconseille de modifier le design de vos produits avec Elementor. Il est beaucoup plus simple de configurer vos produits directement depuis l’éditeur classique comme ceci :

Naviguez vers l’onglet Produits : Depuis votre tableau de bord WooCommerce, allez dans “Produits” puis “Ajouter nouveau”.
Nom du produit : Entrez le nom de votre produit. Cela doit être descriptif et précis pour que les clients puissent facilement identifier ce qu’ils achètent.
Description : Sous le nom du produit, vous trouverez un éditeur où vous pouvez ajouter une description détaillée du produit. Assurez-vous de mettre en avant les caractéristiques principales, les avantages et tout autre détail pertinent.
Image du produit : Sur la droite, vous aurez la possibilité d’ajouter une image principale pour le produit. Une image claire et de haute qualité est essentielle.
Galerie d’images : Si nécessaire, vous pouvez ajouter des images supplémentaires qui montrent le produit sous différents angles ou en action.
Prix : Dans le panneau “Données produit”, définissez le prix régulier de votre produit. Si vous avez une promotion, vous pouvez également indiquer le prix soldé.
Catégories : Sur le côté droit, ajoutez ou sélectionnez des catégories pertinentes pour le produit. Cela facilite la navigation et la recherche pour vos clients. Laissez par défaut, ou personnaliser cela depuis les réglages des permaliens.
Autres réglages : WooCommerce vous offre également des options pour définir des attributs (comme la taille ou la couleur), appliquer des remises spéciales, configurer des taxes et bien plus encore.
Publiez : Une fois que vous avez rempli tous les détails, cliquez sur le bouton “Publier” pour que votre produit soit visible dans votre boutique.
Configurations initiales de la gestion des stocks : Pour configurer la gestion des stocks, allez à “WooCommerce” > “Réglages” > “Produits” > “Inventaire”.
Activer la gestion des stocks : Cochez l’option “Activer la gestion des stocks” pour commencer à suivre l’inventaire des produits.
Notifications : Vous pouvez définir des seuils pour les notifications de stock faible et de rupture de stock. Ainsi, lorsque vos produits atteignent ces seuils, vous recevrez une alerte vous informant de la nécessité de réapprovisionner.
Gestion des stocks au niveau du produit : Lorsque vous ajoutez ou modifiez un produit, dans le panneau “Données produit”, sous l’onglet “Inventaire”, vous pouvez définir la quantité en stock pour ce produit spécifique, marquer si le produit est en rupture de stock, et même définir un seuil de stock faible individuel pour ce produit.

En maîtrisant ces étapes, vous serez bien équipé pour ajouter et gérer efficacement vos produits sur WooCommerce. Cela garantira non seulement une meilleure expérience pour vos clients, mais aussi une gestion optimale de votre inventaire pour éviter les ruptures de stock ou les surstockages.

Gestions des commandes

Quand la boutique en ligne est mise en place et que tous vos produits seront ajoutés, il va falloir gérer vos différentes commandes en ligne. Cela demande une attention particulière comme :

Accédez aux Commandes : Connectez-vous à votre tableau de bord WooCommerce. Dans le menu de gauche, cliquez sur “Commandes”. Ici, vous verrez une liste de toutes les commandes passées par vos clients.
Vue d’ensemble : Chaque commande est associée à un numéro unique et fournit des détails tels que le nom du client, la date de la commande, le montant total et le statut (en attente, traitée, expédiée, etc.).
Traitement des Commandes : Pour voir les détails d’une commande spécifique, cliquez sur le numéro de commande ou sur le nom du client. Ici, vous pouvez voir les articles commandés, l’adresse de livraison, les notes de commande et autres détails pertinents. Une fois que vous avez préparé et expédié la commande, vous pouvez changer le statut de “En attente” ou “Traitée” à “Expédiée” ou tout autre statut approprié.
Notes de commande : Utilisez la section “Notes de commande” pour ajouter des informations internes ou des notes pour le client. Par exemple, vous pouvez ajouter une note indiquant que le colis a été remis à un transporteur particulier.
Actions en masse : Si vous avez plusieurs commandes à traiter simultanément, WooCommerce vous permet d’effectuer des actions en masse, comme changer le statut de plusieurs commandes à la fois.
Configuration des Notifications : Pour gérer les notifications, rendez-vous à “WooCommerce” > “Réglages” > “E-mails”. Vous y verrez une liste d’e-mails que WooCommerce peut envoyer automatiquement, tels que “Nouvelle commande”, “Commande traitée”, “Commande expédiée”, etc.
Personnalisation : Chaque e-mail est personnalisable. Cliquez sur “Gérer” ou le nom de l’e-mail pour modifier le contenu, le sujet, l’en-tête, etc. Assurez-vous que chaque e-mail reflète le ton et le branding de votre entreprise.
Notifications automatiques pour les clients : Par défaut, WooCommerce informe automatiquement les clients lorsqu’une commande est reçue, lorsque le statut de la commande change, ou si il y a des notes ajoutées qui sont marquées comme visibles par le client. Ces notifications sont cruciales pour tenir les clients informés de l’état de leur commande et leur fournir une assurance que leur achat est bien traité.
Autres notifications : Vous pouvez également recevoir des notifications en tant que propriétaire de la boutique pour chaque nouvelle commande ou pour d’autres actions importantes. Cela vous permet de rester informé et de réagir rapidement aux nouvelles commandes.

La gestion efficace des commandes et la communication transparente avec les clients à travers les notifications sont essentielles pour le succès de toute boutique en ligne. Cela non seulement améliore la fidélité des clients, mais réduit également les éventuels malentendus ou conflits. Un vrai métier en perspective !

Sécurité et paiements

Les clients ont besoin de savoir que leurs informations personnelles et financières sont en sécurité lorsqu’ils effectuent des achats en ligne. De plus, les propriétaires de boutiques doivent également s’assurer que les transactions sont protégées contre les fraudes. Voici comment s’y prendre :

Passerelles de paiement : Les passerelles de paiement sont des services qui autorisent les paiements par carte de crédit pour les entreprises en ligne. Elles jouent un rôle crucial dans le processus de transaction en transférant les informations concernant la transaction entre le site web et la banque.
Choix de la passerelle de paiement : WooCommerce est compatible avec de nombreuses passerelles de paiement, telles que PayPal, Stripe, Square, etc. Lors de la sélection d’une passerelle, tenez compte des facteurs suivants, même si celles proposées par WooCommerce sont largement suffisantes :
- Fiabilité : Assurez-vous que la passerelle est reconnue et utilisée par de nombreuses autres boutiques en ligne.
- Frais : Examinez les frais associés à chaque transaction et les éventuels frais mensuels ou annuels.
- Intégration : Certaines passerelles s’intègrent plus facilement à WooCommerce que d’autres. Recherchez celles qui offrent des plugins ou des extensions spécifiques pour une intégration sans heurts. Ou restez sur celles proposées par WooCommerce.
- Sécurité : La passerelle doit être conforme aux normes PCI DSS (Payment Card Industry Data Security Standard) pour garantir la sécurité des informations de paiement de vos clients.
Mise en place : Une fois que vous avez choisi une passerelle, vous devrez la configurer sur votre site. Cela implique généralement d’ajouter vos détails de compte marchand et d’autres informations nécessaires pour traiter les paiements. Assurez-vous de suivre les instructions spécifiques fournies par la passerelle et par WooCommerce pour garantir une configuration correcte.

En résumé, la sécurité des transactions est vitale pour la confiance des clients et le succès de votre boutique en ligne. Le certificat SSL et le choix de passerelles de paiement réputées, vous permettent de prendre des mesures essentielles pour protéger à la fois votre entreprise et vos clients.

15 - Publication du site et suivi

Eh bien voilà ! On arrive au bout de ce guide et, croyez-moi, j’ai transpiré pour le réaliser. Je vous ai offert une majorité de mon savoir en conception de site internet, et je vous demanderai juste de me laisser un commentaire ou de partager le guide en guise de soutien.

On va finir en beauté avec de nouveaux conseils sur la publication de votre site internet et quoi faire une fois qu’il sera publié. Une fois terminé, vous pouvez aussi supprimer l’extension Starter Templates qui ne vous servira plus à l’avenir (faites quand même une sauvegarde de votre site au cas où).

Allez, assez parlé et passons à la suite.

Pré-publication

Il s’agit d’une dernière étape avant de publier officiellement votre site Internet et de désactiver le mode maintenance. Je vous invite à suivre ces quelques conseils :

Revue et vérification du contenu : Avant la mise en ligne, relecture de tous les contenus pour s’assurer qu’il n’y a pas d’erreurs grammaticales, typographiques ou factuelles. Assurez-vous également que toutes les images et autres médias sont correctement licenciés et optimisés pour le web.
Tests de fonctionnalité : Vérifiez toutes les fonctionnalités du site, notamment les formulaires, les boutons, les liens et les intégrations de passerelles de paiement pour s’assurer qu’ils fonctionnent comme prévu.
Vérification de la compatibilité multi-navigateurs : Testez votre site sur différents navigateurs (Chrome, Firefox, Safari, Edge, etc.) pour s’assurer qu’il s’affiche et fonctionne correctement partout.
Tests sur différents dispositifs : Vérifiez comment votre site s’affiche et fonctionne sur divers dispositifs tels que les smartphones, tablettes et ordinateurs de bureau.
Sécurité et préparation à la mise en ligne : Soyez certain que toutes les mesures de sécurité sont en place, notamment le certificat SSL, et préparez-vous à surveiller le trafic et les éventuelles menaces après la mise en ligne.

Publication du site internet

Tout dépend de l’importance que cela suscite de lancer un site internet pour la société. Je prends comme exemple une entreprise connue qui se déciderai enfin de se lancer sur le web (rare de nos jours) ou qui voudrait annoncer la refonte complète de son site.

Dans tous les cas, faire un peu de communication autour de soi est toujours bon à prendre. Vous pourriez avoir déjà des clients mais pas de site et dans ce cas, parler du lancement officiel de votre site vous apportera tout de suite des visiteurs. Soyez prêt à enlever le mode maintenance et lancez-vous :

Importance du Timing : Choisissez le bon moment pour la mise en ligne de votre site. Par exemple, évitez les périodes de fortes activités ou les jours fériés, où les audiences pourraient être distraites. La mise en ligne en début de semaine peut être idéale car elle donne suffisamment de temps avant le week-end pour résoudre d’éventuels problèmes.
Procédure de mise en ligne : La mise en ligne officielle implique généralement la transition de votre site d’un environnement de développement ou de test à un serveur de production. Cela peut nécessiter de mettre à jour les DNS, d’assurer la propagation correcte des changements et de vérifier que le site est pleinement opérationnel. Mais cela est dans le cas où nous aurions réaliser le site en pré-production depuis l’hébergeur.
Tests post-mise en ligne : Après la publication, effectuez des tests supplémentaires pour vous assurer que toutes les fonctionnalités du site fonctionnent comme prévu. Cela peut inclure des vérifications des formulaires de contact, des transactions e-commerce et de l’affichage général.
Stratégie de communication : Avant de lancer votre site, planifiez comment vous allez en informer vos audiences. Créez un plan de communication qui détaille quand et comment vous allez faire vos annonces.
Réseaux sociaux : Préparez des publications spécifiques pour chaque plateforme sociale (Twitter, Facebook, Instagram, LinkedIn, etc.). Utilisez des visuels accrocheurs, des hashtags pertinents et incitez à l’action pour encourager les utilisateurs à visiter votre nouveau site.
Newsletters : Si vous avez une liste d’abonnés, envoyez-leur une newsletter annonçant le lancement. Assurez-vous d’inclure des points forts sur ce qui est nouveau et amélioré, et pourquoi ils devraient visiter.
Communiqués de presse : Si le lancement de votre site est une étape majeure pour votre entreprise, envisagez de rédiger et de distribuer un communiqué de presse. Cela peut attirer l’attention des médias, des blogueurs et d’autres influenceurs de votre secteur.
Promotions ou offres : Pour encourager les visites dès le premier jour, envisagez d’offrir des promotions spéciales, des remises ou d’autres incitations pour ceux qui visitent ou effectuent un achat sur le nouveau site.
Feedback des utilisateurs : Encouragez les retours sur le nouveau site. Cela vous donne non seulement l’occasion d’apporter des améliorations basées sur les commentaires, mais montre également à votre audience que vous valorisez leur opinion

En résumé, la mise en ligne d’un site est une dernière étape qui peut faire appel à des actions de marketing. En effet, en faire la promotion peut servir à garantir un trafic initial robuste. Une stratégie de communication bien pensée permet de susciter l’intérêt et d’encourager les interactions dès le début.

Bravo ! Votre site est maintenant publié !

Suivi après publication du site

Je dois vous dire que si vous avez tenu jusqu’ici, je ne suis pas peu fier de vous ! Désormais, vous avez acquis des compétences en conception de site internet qui vous serviront grandement à l’avenir. Mais nous allons encore un petit peu plus loin avec le suivi post-publication des performances de votre site.

Bien sûr, pour booster la visibilité de votre site, rien de mieux qu’un autre guide sur le référencement naturel. Un autre guide sur la publicité digitale. Et, pourquoi pas, un guide sur le social media pour une meilleure communication digitale.

Voici déjà quelques tips de webmarketing que vous pouvez appliquer mais qui sont beaucoup plus poussés comme :

Les outils d’analyse : Google Analytics, Google Search Console, Matomo… sont des outils en ligne vous permettant de suivre les visites sur votre site, les requêtes sur lesquelles vous apparaissez, le taux de rebond, et d’autres données intéressantes. Il vous faudra des formations bien spécifiques pour apprendre à vous servir de ces outils, mais vous en trouverez plein en ligne.
Les performances de votre site : Même chose, il y a encore d’autres outils gratuits permettant de vérifier la rapidité de votre site comme Google PageSpeed Insights (disponible depuis Google Search Console), les erreurs 404, et d’autres soucis pouvant affecter l’expérience utilisateur.
Identification et amélioration des zones problématiques : Avec ces outils d’analyse, vous pourrez voir ce qui ne va pas au sein de votre site web. Il faudra peut-être optimiser le contenu, réduire la taille de vos images, faire du copywriting, changer le contenu de vos différentes pages…
Demander aux utilisateurs directement : Une autre solution pour ceux qui n’ont pas la possibilité ou l’envie de se servir d’outils, serez de demander des feedbacks directement. réaliser des enquêtes autour de vous, sur les réseaux sociaux, par mail… Puis rassembler chaque retour pour en dégager les problèmes communs.

Faire un suivi bien rigoureux vous aidera à rendre votre site encore plus performant. Au vu de la concurrence, votre expérience utilisateur doit être impeccable, et souvent, le SEO aussi. Ne baissez pas les bras parce que si vous en êtes arrivés jusqu’ici, vous serez tout à fait capable d’entreprendre des actions de webmarketing plus poussées.

Conclusion sur la conception d'un site internet avec WordPress

Je récapitule tous les points qui ont été vus ensemble depuis le début. La conception d’un site internet comprend une méthode avec différentes étapes comme :

Le Début : Tout commence avec le choix d’un nom de domaine – l’adresse virtuelle unique que les visiteurs utiliseront pour trouver votre site. C’est la première impression digitale, alors choisissez judicieusement.
La Fondation : Opter pour un hébergement fiable est essentiel pour assurer une performance optimale du site. Couplé au CMS WordPress, ce choix forme la fondation solide sur laquelle votre site sera construit.
Les Réglages de Base : Comme tout outil puissant, WordPress nécessite une configuration initiale. Ces réglages déterminent la façon dont votre site fonctionne et interagit avec les utilisateurs et les moteurs de recherche.
Personnalisation du Design : Avec le thème Astra, vous pouvez donner à votre site une apparence professionnelle sans effort. Sa configuration donne vie à votre vision, faisant de votre site une œuvre d’art digitale.
Extensions : Les extensions essentielles viennent compléter la fonctionnalité de WordPress, ajoutant des caractéristiques et des fonctions spécifiques selon les besoins de votre site.
Structuration : Une arborescence et une structure solides garantissent que le contenu est organisé de manière logique, facilitant la navigation pour les utilisateurs.
Éléments Clés du Design : La création d’un header et d’un footer, ainsi que la conception d’un menu, offre une navigation intuitive et renforce l’identité de la marque.
Contenu : La page d’accueil, ainsi que les pages et articles distincts, sont le cœur du site, fournissant les informations, les histoires et les services que vous souhaitez partager.
Interaction : L’ajout d’un formulaire de contact offre un canal direct de communication avec les visiteurs, renforçant la confiance et l’engagement.
Conformité : Les pages de mentions légales et de politique de confidentialité garantissent que votre site respecte les réglementations en vigueur, protégeant à la fois les visiteurs et vous-même.
Sécurité et Performance: Ces deux éléments sont essentiels pour garantir que votre site fonctionne rapidement et en toute sécurité, protégeant à la fois les données des utilisateurs et votre contenu.
Commerce Électronique : Avec WooCommerce, votre site se transforme en une puissante plateforme de vente, permettant de monétiser vos offres.
Lancement et Suivi: La publication du site est le couronnement de tout votre travail acharné. Cependant, le travail ne s’arrête pas là. Le suivi post-publication garantit que vous continuez à offrir une expérience utilisateur exceptionnelle, tout en adaptant et améliorant continuellement votre site.

Pour finir, moi qui suis une personne qui a tendance à vite se désorganiser, je recommande de concevoir un plan de départ pour chacune des étapes et les suivre une-à-une. Cela vous évitera de vous perdre en cours de route ou d’oublier un détail qui peut faire toute la différence.

Quoi qu’il en soit, n’hésitez pas à partager cet article, le commenter et me contacter pour des interrogations en cas de besoin. Je serai ravi d’y répondre !

Hugo, votre webmarketer et concepteur de site internet