Comment créer un site Web WordPress en 2021 en 6 étapes. Un guide de A à Z

En 2017, il y avait une opportunité dans l’entreprise dans laquelle je travaillais d’apprendre la conception Web.

J’ai commencé à apprendre HTML, CSS et Javascript. J’ai plutôt apprécié. Jusqu’à ce que je rencontre mes premiers bugs. Plus tard, on m’a assigné un projet parallèle : un site web réel. J’étais ravie, mes collègues étaient là pour moi quand j’ai demandé de l’aide.

Quelques mois plus tard, je travaillais sur une mission WordPress pro-bono pour une ONG.

Permettez-moi de dire que nous étions sur le marché du voyage et que je faisais du marketing. Mais il y avait cette culture d’autonomisation des gens dans l’apprentissage de nouvelles compétences.

Je suis du type BRICOLAGE et je me suis rendu compte que la courbe d’apprentissage du code est beaucoup plus longue que prévu. Avec WordPress, les choses ont fonctionné différemment.

Avance rapide, en 2020, j’ai fini par travailler pour les fabricants de Colibri, Colibri étant un constructeur de pages glisser-déposer WordPress populaire.

Les choses sont si faciles aujourd’hui avec de tels outils. WordPress peut vraiment permettre aux gens de créer un site Web à partir de zéro en un rien de temps. Et l’inspiration pour les sites Web est justeall partout sur Internet.

Maintenant, voici les étapes:

1. Choisissez votre nom de domaine
2. Acquérir un hébergement de site web
3. Familiarisez-vous avec l’interface WordPress
4. Installez un thème WordPress
5. Construisez votre site web WordPress
6. Installez des plugins WordPress vitaux

Car avoir quelques étapes à franchir est pas assez pour avoir un site web supercalifragilisticexpialidocious, j’ai un bonus pour vous à la fin du guide: trucs et astuces de conception UX.

Mais avant de sauter dans le sujet, je veux faire la lumière sur un autre sujet. Ça ne prendra pas longtemps, promis.

Combien coûte un site Web WordPress?

Si nous devons faire une ventilation des coûts pour un site Web WordPress, voici ce que nous devrions inclure:

• Achat d’un domaine : les prix peuvent commencer à 15 $ / an
• Acquisition d’hébergement : les prix commencent aussi bas que 8 theme / an
• Thème WordPress. Maintenant, en fonction des niveaux de personnalisation et du nombre de fonctionnalités que vous souhaitez inclure, vous pouvez commencer avec 0 $. Si vous ne voulez pas vous contenter d’un site Web de base, les plans de thème WordPress annuels tournent autour de 70 $.
• Plugins WordPress. Beaucoup d’entre eux sont gratuits, mais si vous souhaitez des options avancées, vous devrez passer à un plan payant.

Cela signifie que le site Web le plus basique commencera à partir de 23 $ / an. Au moment où vous voulez des fonctionnalités de thème avancées, le coût passera à environ 100 $ / an.

Lorsque vous mettez à niveau des plugins, vous pourriez finir par payer environ 200 à 500 $ par an.

Si vous voulez quelque chose de personnalisé et que vous devez faire appel à un développeur WordPress, les coûts peuvent dépasser 1000 in la première année.

Pour les magasins en ligne, les coûts peuvent augmenter considérablement, car vous avez besoin de nombreuses fonctionnalités, et les performances et la sécurité sont au cœur des préoccupations.

Maintenant que nous clarifions cela, il est temps d’aller au fond de notre sujet aujourd’hui: comment créer un site Web WordPress en 2021.

Choisissez votre nom de domaine

Source: https://unsplash.com/photos/N1XUwR8iOf0

Si vous ne le saviez pas encore, le nom de domaine est le nom de votre entreprise ou le nom de votre produit. Les noms peuvent être très puissants, alors ne soyez pas pressé lors du choix de votre nom de domaine. Si vous sentez que vous avez froid aux pieds, ne vous inquiétez pas, il existe des outils qui peuvent vous aider.

Trucs et astuces pour choisir un nom de domaine de site Web

Je faisais un brainstorming pour un domaine de site Web pour une entreprise il y a quelque temps et je me suis rendu compte que « Wazz » semblait assez intéressant. C’est court, facile à retenir. Mais au moment où je l’ai googlé, eh bien ….permettez-moi de dire, j’éclate de rire. En argot britannique, cela signifiait « miction ». Vraiment les gens, faites vos recherches.

Plus tard, j’ai voulu nommer mon site de photographie. J’analysais « moonshine ». C’était tellement agréable, romantique, féériqueexcept sauf que ce n’était pas le cas. Il semble que cela signifiait « de l’alcool distillé illicitement ou de contrebande ».

Alors, assurez-vous que votre nom est unique, mémorable et n’a pas de signification étrange en anglais ou dans une autre langue populaire (par exemple: espagnol) si vous voulez aller à l’international. Si vous êtes une entreprise locale, vous pourriez ignorer cela.

Maintenant, regardons un peu une petite liste de contrôle pour choisir un nom de domaine pour votre site Web WordPress:

• Faites une liste de mots clés pertinents pour votre entreprise / produit. Pensez à ce que les utilisateurs devraient ressentir après avoir utilisé le produit. Disons que vous avez une gamme de produits pour la peau à base d’ingrédients naturels. Votre liste peut contenir des mots tels que « peau », « soin », « sûr », « naturel », « beau », « frais », etc. Utilisez un outil tel que Namelix ou Novanym pour générer des idées de noms de domaine.
• Vérifiez la signification de votre nom de domaine nouvellement trouvé. Je le google toujours comme ceci « {insérer le nom ici} signifiant ». Je me retrouverai avec des explications de dictionnaire. Ensuite, je vais sur Google images et je vois comment il est apparié. Peut-être qu’il y a un chanteur avec ce nom, un nom de dessin animé manga, etc. Si c’est le cas, vous devrez refaire le processus.
• Recherchez le nom de domaine sur Facebook ou LinkedIn pour voir s’il existe une page professionnelle portant ce nom.
• Vérifiez s’il existe un domaine de site Web disponible à la vente. Pour de nombreux sites, « .com » est le meilleur domaine de premier niveau (TLD), suivi de « .org », « .net » ou « .io ».
• Achetez votre nom de domaine. Vous pouvez le faire via un registraire de domaine tel que GoDaddy ou via votre fournisseur d’hébergement.

Et cela nous conduit à notre prochain chapitre.

Acquérir un hébergement de site Web

Chaque site Web que vous avez déjà visité est hébergé sur un serveur. Cela signifie que vous devrez acquérir un hébergement Web auprès d’un fournisseur d’hébergement.

Étant donné que nous construisons un site Web WordPress, vous pouvez choisir un plan d’hébergement parmi WordPress.com ou un autre fournisseur d’hébergement tiers.

Laissez-moi effacer quelque chose avant de continuer. Il y a wordpress.com et wordpress.org . La différence est que sur WordPress.com vous pouvez héberger et créer un site Web. De WordPress.org vous acquérez généralement des thèmes et des plugins pour votre site Web, qui est hébergé ailleurs. Vous pouvez comparer les WordPres.com plans ici.

L’hypothèse de ce guide est que vous voulez vraiment créer une marque et avoir un contrôle total sur votre site Web. Cela signifie que vous allez chez un fournisseur d’hébergement tiers.

Il existe trois principaux services d’hébergement: l’hébergement partagé, le VPS et l’hébergement géré. Dans la première situation, les ressources du serveur sont réparties entre plusieurs sites. À long terme, si ces sites se développent, et le vôtre également, vous risquez de rencontrer des problèmes de performances. Vous réalisez peut-être que vous avez besoin d’un service VPS ou d’un plan d’hébergement géré.

Vous devez donc en tenir compte lors du choix d’un fournisseur d’hébergement: quels sont vos objectifs commerciaux ?

Si vous optez pour l’hébergement VPS, les ressources seront toujours partagées, mais vous aurez un certain contrôle sur elles. Vous constaterez également des améliorations en termes de sécurité et de performances.

L’hébergement géré est un peu un service « à la carte ». Vous aurez votre propre serveur physique tout seul, et vous verrez une amélioration des performances et de la sécurité.

Certainement, les choses peuvent devenir plus compliquées que cela, mais je voulais juste brosser un tableau d’ensemble de l’hébergement.

Ensuite, lorsque vous analysez les plans, regardez de plus près:

• Prix
• Stockage
• Support
• Performance

Certains fournisseurs d’hébergement ont des fonctionnalités supplémentaires telles que l’offre de domaine (par exemple: Namecheap), le créateur de site Web (par exemple: GoDaddy), les options de commerce électronique, etc.

Maintenant, vous avez probablement remarqué que certains sites Web utilisent « HTTP » ou « HTTPS ». Qu’y a-t-il avec ça ?

HTTP est la base du web moderne. Il connecte les navigateurs et les serveurs et fonctionne sur une base de demande-réponse. Désormais, le « s » supplémentaire signifie que la connexion au site Web est cryptée et que les données partagées avec le site Web sont sécurisées.

Disons qu’un utilisateur effectue un paiement sur votre site Web ou se connecte à un compte. Les informations que l’utilisateur tapera seront privées. À l’abri du piratage. Cela se produit grâce à la technologie SSL, qui signifie « Secure Sockets Layer ». »Pour les consommateurs, voir « HTTPS » signale la confiance, car vous pouvez protéger leurs données et leur confidentialité. Cela signifie que vous devrez acquérir un certificat SSL.

Assurez-vous que votre plan choisi l’inclut également.

Au moment où vous achetez votre plan d’hébergement et que vous avez configuré vos informations de connexion, la seule pièce manquante sera WordPress lui-même. La plupart des fournisseurs d’hébergement vous permettent d’installer WordPress à partir de leur tableau de bord / assistant. Tout est assez intuitif.

Comment allez-vous vous connecter à votre site? Peasy facile. Il suffit de taper dans le navigateur l’adresse de votre site Web et d’y ajouter « /wp-admin », comme on le voit ci-dessous.

Familiarisez-vous avec l’interface WordPress

Le tableau de bord WordPress comporte 9 sections. Regardons-les.

Paramètres WordPress

Dans cette section, il y a 7 autres éléments de menu. Je vais décrire brièvement les choses les plus importantes qui doivent être faites ici.

• Sous « Général », vous pouvez configurer le titre du site, le slogan, l’URL, le fuseau horaire, le format de date de l’heure & et la langue.
• Sous « Lecture », vous « direz » à WordPress quelle page sert de page d’accueil et laquelle est votre « blog ». C’est une étape importante. Vous choisirez également le nombre d’articles de blog pouvant apparaître sur une page ou si vous souhaitez que votre site Web soit indexé par Google.
• Sous « Discussion », vous allez configurer les commentaires du blog.
• Dans « Media », vous pouvez établir les dimensions maximales en pixels à utiliser lors de l’ajout d’une image à la Médiathèque.
• Dans ‘Permaliens », vous configurerez le format de vos URL.
• Vous pouvez définir vos pages de politique de confidentialité dans « Confidentialité ».

La meilleure façon d’aborder le panneau « Paramètres » est d’entrer tous ces éléments et de remplir les informations manquantes, juste pour vous assurer de ne rien ignorer d’important. Les choses sont assez simples, alors n’ayez pas froid aux pieds. Toute la configuration peut être effectuée en moins de 30 minutes.

Pages et publications WordPress

Ce que vous devez savoir, c’est que votre contenu ira dans des « pages » ou des « publications ». Ici, vous passerez 95% de votre temps.

Les « pages » sont statiques. Vous pouvez avoir une page « page d’accueil », une page « services », une page « contactez-nous », vous obtenez le point. Sous les messages, vous pouvez avoir vos derniers articles de blog, peut-être votre portfolio. Ce sont des pages dynamiques car elles placent automatiquement le contenu de votre site Web le plus récent en haut.

Lorsque vous sélectionnez « Publications » dans le tableau de bord, vous pourrez créer une publication, visualiser toutes les publications et gérer les balises et les catégories.

Vous pouvez créer un nouveau message si vous sélectionnez « Ajouter un nouveau » comme vu ci-dessus, ou allez dans « Tous les messages », puis sélectionnez « Ajouter un nouveau ».

La même chose fonctionne pour les pages.
Ce que vous verrez dans vos « Toutes les Pages » ou « Tous les messages » sont des pages et des messages par défaut déployés par votre thème.

Maintenant, comment pouvez-vous modifier un article ou une page?

Lorsque vous survolez vos pages et publications par défaut, vous verrez certaines options: édition, édition rapide, corbeille, affichage. Dans la capture d’écran ci-dessus, il y a aussi « Modifier dans Colibri ». En effet, nous avons installé un plugin qui vous permet de personnaliser les pages en utilisant le constructeur WordPress Colibri (mais nous en parlerons un peu plus tard).

Médias WordPress

Tous vos médias entrent ici: images et vidéos. Vous pouvez les faire glisser et les déposer ou les télécharger.

Vous pouvez également ajouter des médias à partir de votre niveau de publication / page. Je vous en montrerai plus sur le sujet plus tard.

Commentaires WordPress

La 4ème section du tableau de bord s’appelle « Commentaires ». Ici, vous pouvez gérer les commentaires de vos messages. Vous recevrez des tonnes de commentaires de spam qui peuvent être déplacés vers le spam ou la corbeille. Vous pouvez approuver ceux pertinents.

Le menu « Apparence »

À ce niveau, vous pouvez:

• Recherchez, installez et activez un thème (plus de détails dans le chapitre suivant).
• Personnalisez les widgets pour ajouter des blocs de contenu aux barres latérales, pieds de page et autres zones de votre site.
• Définissez les menus de votre site WordPress.
• Ajoutez une image d’arrière-plan à votre site.
• Modifiez le code de votre thème dans « Éditeur de thème » (recommandé uniquement si vous êtes développeur).

Maintenant, au moment où vous activez certains plugins, vous pouvez voir quelques nouveaux éléments de menu sous « Apparence ». Dans ce cas, parce que nous avons activé le thème Skyline, nous voyons une option pour le configurer sous « Paramètres SkylineWP ». Chaque thème peut venir avec sa propre configuration.

 » Installer des plugins » est l’autre élément de menu supplémentaire ajouté par le thème Skyline. Ici, vous verrez quelques recommandations de plugins qui fonctionnent bien avec Skyline.

Cela nous amène à notre élément de menu suivant.

Plugins

Il existe de nombreuses fonctionnalités qui ne peuvent pas être gérées uniquement par thème, telles que l’optimisation SEO, l’audit SEO, la sécurité et la sauvegarde des sites Web, les tableaux, les formulaires, les fonctionnalités de commerce électronique, etc. Les plugins sont là pour compenser le manque de telles options.

Voici un petit tutoriel sur la façon d’installer, d’activer et de désactiver les plugins. Tout est intuitif et convivial.

Utilisateurs

À ce niveau, vous déciderez qui a accès à votre site Web. Vous pouvez donner accès à des contributeurs, des auteurs invités, des éditeurs et plus encore, en fonction de vos besoins.

Outils

Sous « Outils », vous aurez la possibilité d’importer et d’exporter des données d’outils vers et depuis d’autres systèmes de gestion de contenu (par exemple. Blogueur).

Il y a aussi une section « Santé du site », qui vous montre des informations critiques sur votre configuration WordPress et les éléments qui nécessitent votre attention, avec quelques conseils.

Parce que nous devons respecter les politiques de confidentialité, vous pouvez ici exporter ou effacer les données personnelles de vos utilisateurs.

Et, avec cela, nous avons enveloppé le chapitre du tableau de bord WordPress.

Passons à des affaires plus intéressantes.

Comment installer un thème WordPress

Pour cela, vous devez vous rendre sur votre tableau de bord d’administration WordPress, cliquer sur « Apparence » dans le menu de gauche, puis sur « Thèmes ».

Ensuite, cliquez sur le bouton « Ajouter un nouveau ».
Vous verrez apparaître un tas de modèles, et vous pouvez les filtrer par dernières, en vedette, popularitéor ou par fonctionnalités.

Nous sommes fiers de dire que nos propres thèmes Mesmerize et Colibri figurent dans le top 20 des thèmes WordPress les plus populaires.

Au moment où vous choisissez un thème, cliquez sur « Installer », puis sur « Activer ».

Vous pouvez également activer votre thème WordPress si vous revenez aux thèmes Apparence ->.

L’ensemble du processus d’installation est également expliqué dans notre tutoriel.

Maintenant, vous êtes prêt à faire du rock and roll!

via GIPHY

Construisez votre site web WordPress

Dans WordPress, la conception de votre site web dépend du thème que vous avez choisi. Si vous avez besoin de quelque chose de plus, eh bienyou vous devrez peut-être trouver quelque chose pour remplir les fonctionnalités manquantes.

Habituellement, chaque thème WordPress a 2 designs: un pour le blog et un pour les pages. Les couleurs sont limitées, il n’y a pas de personnalisations spéciales. Cela signifie qu’à un certain moment, les plugins seront utiles.

Maintenant, les thèmes WordPress ont un personnalisateur de thème avec des fonctionnalités de base. Ils conviennent parfaitement à ceux qui n’ont pas besoin de fonctionnalités personnalisées et qui souhaitent créer leur site très rapidement. Lorsque vous en avez besoin, vous pouvez ajouter vos propres styles CSS. Assurez-vous simplement de choisir un thème dont la mise en page correspond à votre propre vision.

Comment personnaliser un thème ? Rendez-vous simplement sur Apparence – > Personnaliser.

Du côté gauche, vous pouvez choisir ce qu’il faut modifier: contenu, menu et plus encore. Sur le côté droit, il y a l’aperçu de votre site Web. Vous pouvez modifier le texte en temps réel, en cliquant sur l’icône en forme de crayon.

De l’autre côté de l’histoire, nous avons des constructeurs WordPress. Ce sont des plugins qui vous aident à créer des sites Web vraiment uniques. Vous pouvez modifier complètement la disposition de votre thème.

Dans notre cas, Skyline pré-installe un tel constructeur appelé Colibri, nous allons l’utiliser comme exemple.

Selon la version du thème, gratuite ou payante, vous avez différents éléments avec lesquels jouer: des en-têtes, des sections de page spécifiques aux composants les plus minuscules tels que les appels à l’action, les onglets, les compteurs, les accordéons, etc.

Vous pouvez modifier votre thème comme précédemment, à partir de Apparence – > Personnaliser, ou prendre le raccourci, comme indiqué ci-dessous.

Quels changements? Vous aurez accès à plus de fonctionnalités dans le personnalisateur.

Outre l’utilisation du personnalisateur, il existe une autre option de personnalisation de site Web dans WordPress – l’éditeur par défaut. Vous pouvez y accéder à partir de l’option « Modifier » située sous chaque publication et page. De plus, au moment où vous ajoutez un nouvel article ou une nouvelle page, vous accéderez directement à l’éditeur par défaut (sauf si un générateur est activé).

Donc, dans notre prochain chapitre, nous allons approfondir la façon de:

1. Créer un site Web WordPress à l’aide d’un générateur de page WordPress
2. Créer un site WordPress à l’aide de l’éditeur WordPress par défaut

A. Comment créer un site Web WordPress à l’aide de constructeurs de sites Web gratuits

Les constructeurs de sites Web WordPress vous aident à faire passer le personnalisateur WordPress à un tout autre niveau. Vous pourrez tout personnaliser : en-têtes, contenu de page, pieds de page, menus de navigation, style global, individuel, vous le nommez! Aucune compétence de conception ou de codage nécessaire!

C’est généralement un processus de glisser-déposer. Et vous n’avez pas à vous soucier de la conception mobile, les constructeurs ont couvert l’aspect réactivité.

Comment ajuster les paramètres du site Web dans le personnalisateur

Regardez votre panneau latéral gauche. Faites maintenant défiler jusqu’à « Paramètres généraux ».

Voici où vous pouvez configurer:

• Le nom de votre site Web.
• La palette de couleurs et la typographie globales de votre site Web.
• Modèles pour blog, en-tête et pied de page: quels arrière-plans utiliser, espacements, bordures, ombres, etc.
• Espacement : boutons intérieurs, colonnes, etc.
• Style CSS personnalisé

Comment créer du contenu dans WordPress à l’aide de builders

Comme mentionné précédemment, si vous souhaitez créer une nouvelle page de site Web, rendez-vous sur « Pages » et sélectionnez « Ajouter un nouveau ». Vous serez dirigé vers l’éditeur WordPress par défaut où vous nommerez votre page. Ensuite, sélectionnez « Modifier avec Colibri ».

Lorsque vous souhaitez modifier une page WordPress existante, cliquez simplement sur « Modifier dans Colibri ».

Comment ajouter des sections à vos pages WordPress

Chaque signe « + » dans le panneau de gauche ouvre une fenêtre avec des blocs et des composants. Vous pouvez faire défiler vers le bas jusqu’à ce que vous trouviez un design qui vous plaît, ou simplement taper une catégorie. Voici les catégories disponibles dans le constructeur Colibri: Accent de héros, À propos, Fonctionnalités, Contenu, Appel à l’action, Blog, Compteurs, Portfolio, Galerie de Photos, Témoignages, Clients, Équipe, Contact, FAQ et Prix.

Ce sont des modèles prédéfinis, qui correspondront à la palette de couleurs de votre choix.
En sélectionnant l’un des blocs, en cliquant sur le signe « + » apparaissant sur le bloc, le bloc sera positionné en bas de la page.

Vous pouvez les déplacer où vous voulez, en faisant glisser la section depuis le panneau de gauche.

Il existe également une option pour les blocs « vides ».

Cela signifie que vous pouvez les personnaliser comme bon vous semble. En fin de compte, vous pouvez même enregistrer votre design pour une utilisation ultérieure.

À partir de l’icône de réglage dans le coin supérieur droit de chaque section, vous pouvez ajuster le nombre d’éléments par ligne, réorganiser les éléments, ajouter de nouveaux blocs et même supprimer toute la section.

Comment personnaliser les sections de votre page WordPress

Si vous souhaitez modifier le texte de vos sections, vous pouvez le faire en ligne, c’est-à-dire à l’intérieur de la section elle-même, en direct.

L’édition en ligne n’est pas disponible pour les textes sur les boutons. Ils seront gérés dans le panneau de gauche.

Si vous souhaitez modifier une image de votre site, tout est intuitif. Commencez par sélectionner votre image.

Vous pourrez également le voir à l’intérieur du panneau de gauche. Cliquez sur l’image. Vous verrez apparaître une nouvelle fenêtre vous demandant de télécharger une image ou d’en sélectionner une dans la bibliothèque. Si vous choisissez de télécharger, vous pouvez le faire par glisser-déposer.

Maintenant, pour revenir au panneau que je viens de mentionner, il dispose de 3 options principales: Mise en page, Style et Avancé. Chaque fois que vous sélectionnez une section dans l’aperçu du site Web à droite, vous verrez le panneau correspondant de la section.

Prenons-les un par un:

• Mise en Page

Ici, vous pouvez ajuster la largeur et la hauteur du conteneur, au niveau de la structure. . En termes simples, le conteneur est l’espace réel qu’occupe un bloc. À l’intérieur du conteneur, vous placez le contenu (texte, images).

Vous pouvez également ajuster l’espacement de votre contenu et la proximité du haut ou du bas de celui-ci.

Vous pouvez également ajouter de nouvelles lignes à l’intérieur de votre bloc.

• Style

À ce niveau, vous pouvez personnaliser l’arrière-plan de votre bloc ou ajouter des séparateurs. Les diviseurs sont des indices visuels qui signalent la fin ou le début d’une section de site Web.

• Avancé

Voici le plaisir, les gars!

De la typographie et de l’espacement à la réactivité, c’est là que vous pouvez entrer dans les moindres détails du site Web.

Vous pouvez créer des variations en fonction de l’état de l’élément : normal ou survol.

Si vous sélectionnez un certain élément dans un blog, disons un titre, le même panneau apparaîtra à gauche.

Cela signifie que vous pouvez être plus granulaire avec votre édition.

En parlant d’en-têtes et d’éléments plus granulaires, ceux-ci sont nommés « composants ». Voyons comment vous pouvez jouer avec eux.

Comment utiliser les composants dans votre site WordPress

Les composants se réfèrent aux titres, curseurs, diviseurs, boutons, carrousels, prix, etc. Ils sont accessibles de la même manière que les blocs. Ils sont assis côte à côte et disposent d’une fonctionnalité de glisser-déposer. Colibri propose 40 composants.

Comme mentionné précédemment, vous pouvez les ajuster à partir du panneau de gauche, si vous allez dans « mise en page », « style » ou « avancé ».

Réactivité mobile

Dans un monde multi-appareils, il est essentiel d’avoir un site Web entièrement réactif. Par défaut, Skyline est un thème mobile réactif. Cela signifie que ses sections s’ajusteront en fonction de divers appareils. Si vous souhaitez prévisualiser l’apparence de votre site WordPress sur tablettes ou mobiles, vous pouvez le faire en jouant avec les commandes en bas à gauche.

Vous pouvez également sélectionner de masquer certaines fonctionnalités sur mobile, par exemple, dans les options « avancées ».

Comment créer un menu dans le personnalisateur WordPress

Maintenant, disons que vous avez conçu vos pages et que vous devez les ajouter à un menu. Dans le panneau de droite, vous avez toutes vos sections, ordonnées de haut en bas, comme sur votre site. Le pied de page est votre dernière section. En dessous, vous verrez quelques fonctionnalités supplémentaires.

Ici vous pouvez créer votre menu.

Après avoir sélectionné « Créer un nouveau menu », vous pourrez nommer votre menu et choisir un emplacement pour celui-ci (en-tête, pied de page, pages, etc.).

Lorsque vous sélectionnez « Suivant », vous pourrez ajouter vos pages au menu, à partir de l’option « Ajouter des éléments ». Ça ne peut pas être plus facile que ça.

Comment travailler avec les widgets WordPress

J’ai déjà mentionné que les widgets sont des blocs de contenu que vous pouvez ajouter aux barres latérales, aux pieds de page et à d’autres zones de votre site.

Lorsque vous utilisez un plugin WordPress builder, vous utiliserez des widgets uniquement pour vos barres latérales WordPress, car vous avez des mises en page de pied de page prédéfinies.

Habituellement, les barres latérales sont utilisées par les pages de blog. Chaque thème a différentes options de widgets, des barres de recherche, des publications récentes et des commentaires, des widgets sociaux, aux images et aux vidéos. Disons Instagram que vous voulez afficher votre profil Instagram dans une barre latérale, il y a un widget WordPress Instagram pour cela.

L’un de mes widgets préférés est celui qui permet l’édition HTML personnalisée. Je trouve ça vraiment puissant.

Ceci étant dit, vous avez un peu terminé. Félicitations, votre site WordPress est opérationnel!

Maintenant, vérifions l’autre méthode pour construire des sites dans WordPress.

D. Comment créer un site Web WordPress en utilisant l’éditeur WordPress par défaut (Gutenberg)

Je vais le faire très rapidement. Cet éditeur est encore nouveau dans WordPress (c’est l’éditeur WordPress par défaut depuis décembre 2018), mais il évolue continuellement grâce à la contribution de la communauté.

L’éditeur WordPress classique ressemblait à ceci:

Maintenant, nous avons:

Maintenant, ce que vous devez savoir, c’est que tous les thèmes ne sont pas compatibles avec ce nouvel éditeur. Vous devrez en trouver un prêt pour Gutenberg.

La mise en page avec l’éditeur WordPress par défaut est limitée. Il est également basé sur des blocs. Maintenant, comme vous l’avez probablement découvert dans le chapitre précédent, les blocs peuvent être à peu près tout: en-têtes, images, boutons, vidéos, etc.

Maintenant, pourquoi je n’insiste pas sur le sujet: si vous recherchez les avis de Gutenberg, les plus récents sont des avis de 1 étoile. Ce n’est pas une bonne expérience. Même si cela fait déjà 2 ans depuis le lancement, et de nombreuses mises à jour au milieu, cela en est encore à ses balbutiements. WordPress s’appuie désormais sur la communauté pour créer de nouveaux blocs afin que l’expérience d’édition puisse évoluer.

À l’heure actuelle, l’outil se comporte comme un éditeur de texte, avec une faible puissance du côté du style.

Il existe des outils tels que Kadence, qui peuvent vous aider, mais nous n’en sommes pas encore là.

Installez des plugins WordPress vitaux

L’écosystème WordPress est composé de thèmes et de plugins

Il existe des milliers de plugins WordPress disponibles qui peuvent étendre les fonctionnalités ou ajouter de nouvelles fonctionnalités à votre site Web.

Ceci est un très court tutoriel sur l’installation d’un plugin.

Nos recommandations de plugin

Maintenant, abordons un peu un autre sujet: la vitesse de la page.

Vos visiteurs et Google se soucient beaucoup de la vitesse de votre site.

Pourquoi Google?

La vitesse est un facteur important à prendre en compte lors du classement organique, ce qui signifie ici:

Pourquoi la vitesse du site est-elle mauvaise pour les utilisateurs, et finalement pour vous?
Eh bien, si vous leur offrez une mauvaise expérience, ils pourraient ne pas accepter votre offre, ou même ne pas revenir de sitôt.

Selon une étude menée en 2018 par Google, 53% des utilisateurs mobiles quittent un site qui met plus de 3 secondes à se charger (Holy Moly!).

Et jetez un oeil à ça!

Comment le chargement de la page influence-t-il les visiteurs mobiles (remarque: rebondir signifie quitter le site)?
.
Alors, comment pouvez-vous résoudre ce problème et améliorer les performances globales de votre site Web afin que vous ne receviez pas un coup de pouce de vos utilisateurs et de Google?

J’ai choisi 2 solutions décontractées (il y en a beaucoup plus, mais assez techniques).

● Optimiser les images
Les images de votre site Web ne doivent pas être téléchargées dans leur taille d’origine. Essayez également d’utiliser des fichiers PNG au lieu des fichiers JPEG (ils ont moins de couleurs).
Smush est notre plugin WordPress préféré pour la compression d’images. Vous ne verrez aucune baisse visible de qualité et votre vitesse de page sera optimisée.

● Mise en cache
En termes simples, le cache fournit un stockage temporaire pour que le contenu soit accessible ultérieurement. Votre site Web se charge différemment s’il est consulté pour la première fois ou la 5e fois par le même visiteur.

Pourquoi est-ce?
Lorsque vous traitez avec la mise en cache du navigateur, votre navigateur enregistre une copie des fichiers d’un site Web sur l’appareil de l’utilisateur
(disque dur, téléphone portable). Lorsqu’un site Web est mis en cache, le navigateur n’a besoin que de charger des éléments nouveaux ou mis à jour d’une page et n’a pas besoin d’initier une nouvelle demande de serveur. La même chose se produit si vous cliquez sur le bouton « retour », votre navigateur affichera la page à partir du cache. Ceci est
également très utile lorsqu’il s’agit d’une connexion Internet lente, les pages se chargeront rapidement.

Vous voulez en savoir plus sur le fonctionnement de la mise en cache ? Lisez la suite ici.

Les outils que nous recommandons ici sont:
W W3 Total Cache (W3TC) améliore le référencement et l’expérience utilisateur de votre site en augmentant les performances du site Web et en réduisant les temps de chargement.
Hum Colibri. Cela a également des fonctionnalités supplémentaires que nous aimons, comme la compression de Javascript, de fichiers HTML & CSS.

Maintenant, comment pouvez-vous vérifier la vitesse de chargement de votre site Web?
Google a juste l’outil pour vous aider avec cela, et fournit également quelques idées de réparation.

Bonus: Trucs et astuces de conception UX

Rappelez-vous que je disais « le ciel est la limite » avec les constructeurs de pages WordPress?

Eh bienthere il y a toujours un « mais ». Lorsque vous concevez un site Web, vous devez toujours avoir à l’esprit votre public
, ou les personnages de l’acheteur (comme aiment le dire les spécialistes du marketing). Vous devez leur offrir une excellente expérience sur votre site Web, c’est ce que signifie UX (expérience utilisateur).

Maintenant, pour cela, il y a certaines règles que vous devez suivre afin de fournir une expérience utilisateur sans friction.

Répondre aux besoins des utilisateurs
Les utilisateurs d’un site Web ne veulent pas trop réfléchir. Ils ont besoin d’informations utiles qui peuvent être écrémées et comprises facilement. Ils n’ont pas besoin d’une expérience consistant en de nombreux clics ou beaucoup d’allers-retours.

Les gens recherchent une satisfaction instantanée: trouver ce dont ils ont besoin rapidement et facilement. Si cela ne se produit pas sur votre site Web, ils en chercheront un autre.

Hiérarchie visuelle

Toutes les parties du site Web ne sont pas traitées de la même manière, certaines sont plus importantes que d’autres (formulaires, boutons, titre, proposition de valeur, etc.).

Où souhaitez-vous que votre utilisateur atterrisse ? Où voulez-vous qu’il clique?

Utilisez des repères visuels pour l’aider à réaliser ce que vous voulez. Tous les éléments des pages doivent se comporter comme un guide touristique.

Les chercheurs ont découvert que les utilisateurs qui lisent de gauche à droite scannent les sites Web selon un motif en forme de Z.

Cela signifie que c’est là que vous devez diriger vos informations les plus importantes.

Navigation facile

Vous devez garder la barre de navigation simple, n’allez pas dans trop d’options. Vous pourriez vous retrouver avec une situation de choix paradoxal lorsque les utilisateurs sont submergés par les possibilités.Les pages

doivent être liées en interne à d’autres pages pertinentes afin que la navigation soit fluide et que l’utilisateur ne clique pas plusieurs fois sur « retour » pour accéder aux pages précédentes.

Utilisez des espaces blancs. L’espace blanc permet d’organiser les informations dans des zones de contenu digestibles. Cela permettra aux utilisateurs de se sentir plus à l’aise et de ne pas être submergés par des charges de données.

Même schéma de couleurs (cohérence)

Évitez les couleurs super sombres ou super intenses sur votre site Web. Ils pourraient renvoyer les utilisateurs. Vous pouvez utiliser des couleurs plus fortes pour mettre en évidence des aspects importants de votre site Web.

Utilisez des couleurs également équilibrées. Voici un peu d’inspiration.

Et encore une chose avant de passer au principe de conception UX suivant. Les couleurs ont des significations dans le monde entier, elles sont liées à diverses émotions. Cette infographie mettra en lumière le sujet.

Utilisez une écriture efficace

N’utilisez pas de copie exagérée et de clickbait. Écrivez avec bon sens, dans un langage naturel, n’utilisez pas de jargon (tout le monde ne connaît pas certains mots techniques).

Utilisez max. 3 polices de caractères dans un maximum de 3 tailles de points — un maximum de 18 mots ou de 50 à 80 caractères par ligne de texte, comme le recommande Smashing Magazine.

Utiliser la preuve sociale

Pourquoi devrais-je vous faire confiance, à vous, à votre entreprise ou à vos produits?
Nous, les humains, sommes des créatures sociales. Nous vivons dans des communautés, nous avons des amis et de la famille. Ils peuvent être nos influenceurs. Nous nous soucions beaucoup de leur opinion.
.
Permettez-moi d’énumérer quelques exemples pour vous:
● Notes et avis

● Témoignages

● Non. des clients (« vous êtes en bonne compagnie »).

● Logos des clients

● Études de cas soutenues par les résultats

● Presse featuring et récompenses

Aussi, si vous souhaitez en savoir plus sur les dernières tendances du design, les créatifs côtiers ont fait une infographie merveilleuse sur le sujet.

Conclusions

Nous pouvons appeler cela un enveloppement ne pensez-vous pas?

Nous voulions faire court, ne pas vous submerger d’informations. Mais, à la fin, le diable est dans les détails. On vient de vous donner la vue en hélicoptère.

Le fait est que vous pouvez avoir votre site Web opérationnel en moins de 2 heures. Mais, plus vous souhaitez ajouter de fonctionnalités, de pages et de contenu, plus cela prendra de temps. Et ne négligez jamais les dernières tendances en matière de conception Web.

Une dernière chose cependant, si vous êtes du genre à bricoler, vous devez absolument faire tourner notre constructeur de Colibri!

Voici une vidéo sur la façon de créer une page de site Web WordPress en utilisant des tonnes de fonctionnalités.

Maintenant, si vous avez aimé cet article, et que vous souhaitez en savoir plus sur la conception d’un site Web WordPress, assurez-vous de vous abonner à notre chaîne Youtube et suivez-nous sur Twitter et Facebook!