Comment créer un site Web à une page sur WordPress

De nombreux sites Web réussis sont de grandes affaires complexes avec beaucoup de pages et de contenu. Cependant, parfois, plus est vraiment moins dans le monde de la conception web. Et c’est pourquoi, au lieu d’adopter une approche traditionnelle, il peut valoir la peine de créer un site Web à une page sur WordPress.

Dans cet article, nous allons approfondir les avantages et les applications de ce type de site. Ensuite, nous vous montrerons comment créer un site web à une page sur WordPress en seulement trois étapes. Commençons!

📚 Table des matières:

Pourquoi vous pourriez vouloir créer un site Web à une page

La plupart des sites Web ont plusieurs pages. Au minimum, il y a généralement une page d’accueil, une page de contact, une page à propos et des pages pour tout contenu ou service que vous proposez.

Un site Web d’une page, en revanche, condense toutes les informations importantes en une seule page d’accueil, souvent en incluant un certain nombre de sections dédiées. La conception d’un site Web à une page offre un certain nombre d’avantages, tels que :

• Simplicité, ce qui permet aux visiteurs de naviguer plus facilement sur votre site et de trouver ce dont ils ont besoin.
• Facilité de maintenance, car il y a très peu de contenu à maintenir.

Bien sûr, une conception à une page n’est pas le bon choix pour tous les sites Web. Les sites volumineux et complexes ont leur place. Cependant, si vous gérez un site de petite entreprise, un portfolio ou une simple vitrine, vous pouvez envisager ce format.

Les éléments essentiels d’un site Web à une page

Lorsque votre site Web ne s’étend que sur une seule page, vous devez être très délibéré sur ce que vous incluez. Il est important de fournir toutes les informations dont votre public aura besoin, sans encombrer la page ni le submerger. Tout ce que vous ajoutez à votre page doit être là pour une raison.

Voici quelques-uns des éléments essentiels si vous cherchez à créer un site Web d’une seule page :

• Un appel à l’action (CTA) bien en vue, tel qu’un bouton d’inscription, de contact ou d’achat.
• Une section À propos expliquant qui vous êtes, votre entreprise ou votre organisation.
• Des éléments de marque tels que votre logo et votre slogan.
• Une liste de produits ou de services, le cas échéant.
• Des liens vers vos autres endroits et contenus sur le web, y compris les profils de médias sociaux.
• Des informations de contact, y compris divers canaux si possible.

Il est également important de prêter attention à l’ordre de ces éléments. En général, vous voudrez placer les informations et les CTA les plus cruciaux en début de page, les coordonnées et les liens étant plus proches du bas de la page. Réfléchissez à ce que votre public aura besoin de voir et dans quel ordre, et cela vous aidera à déterminer quels éléments inclure et comment les disposer.

Enfin – ce n’est pas parce que vous utilisez un design de site Web à une page que cela signifie nécessairement que vous ne pouvez pas avoir de blog. Si vous voulez toujours inclure un blog, WordPress vous permettra toujours de créer un lien vers votre blog à partir de votre page d’accueil à une page.

Comment créer un site Web à une page (ÉTAPES EXACTES)

Maintenant, parlons de la façon de procéder réellement à la conception de votre site. La première chose que vous voudrez faire est de consulter quelques exemples existants de sites Web à une page pour vous inspirer. Passez ensuite à la première étape.

Étape 1 : Déterminer l’objectif de votre site

Comme nous l’avons vu, choisir de créer un site Web à une page signifie que vous devrez être très délibéré quant à sa conception. Cela implique d’être clair sur ses objectifs. Lorsque vous êtes contraint à une seule page, vous voudrez choisir un ou deux éléments clés sur lesquels vous concentrer.

Pour ce faire, considérez le CTA primaire autour duquel votre site sera conçu. Que voulez-vous que les visiteurs fassent – s’inscrire à une adhésion, acheter un produit, assister à un événement ou vous embaucher pour un emploi ? Tout ce qui se trouve sur votre page doit encourager les gens à entreprendre cette action. Cela signifie qu’il faut leur fournir les informations dont ils auront besoin, expliquer les avantages et rendre les prochaines étapes claires.

Étape 2 : Sélectionnez un thème de qualité pour une page

Si vous avez décidé de créer un site Web à une page sur WordPress, vous pouvez utiliser le thème de votre choix. Cependant, une stratégie intelligente consiste souvent à choisir un thème à une page qui a été construit spécifiquement pour vous aider à concevoir ce type de site. Ces thèmes permettent d’inclure facilement toutes les informations nécessaires tout en conservant un design attrayant.

Lorsque vous choisissez un thème à une page, voici ce que vous voudrez rechercher :

• Un constructeur de pages avec les éléments préconstruits dont vous aurez besoin, comme une section de contact.
• Une méthode pour diviser votre page en plusieurs sections qui peuvent être visuellement distinguées.
• Une navigation qui permet aux visiteurs de sauter à diverses sections de votre page.
• Un moyen facile d’ajouter des boutons CTA et de les personnaliser.

Il existe de nombreux thèmes à une page. Neve, par exemple, est un thème polyvalent qui est parfait pour les sites à une page concis mais complets. Il est compatible avec de nombreux constructeurs de pages populaires, comprend un personnalisateur en direct et vous aide à configurer rapidement votre site à une page. Il comprend également des sections préconstruites pour les informations de contact, votre bio, une vitrine, et bien plus encore.

Étape 3 : Concevez votre site

Une fois que vous savez ce que vous voulez inclure sur votre site, que vous êtes clair sur son objectif, et que vous avez choisi un thème fort, vous pouvez commencer à concevoir réellement la page. Vous voudrez qu’elle soit appropriée à votre public, qu’elle reflète votre style et qu’elle soit optimisée pour atteindre vos objectifs – ce qui signifie que vous ne devriez pas simplement suivre une formule.

Cependant, voici quelques suggestions à garder à l’esprit pendant que vous mettez votre site en place :

• Gardez votre page simple, et n’incluez rien qui ne serve pas un but distinct
• Distinguez clairement les différentes sections avec une variété d’en-têtes, d’arrière-plans, etc.
• Créez une navigation qui fera sauter rapidement les visiteurs vers les sections dont ils ont besoin.
• Faites en sorte que vos CTA primaires soient proéminents et persuasifs.

En suivant ces conseils, vous serez en mesure de créer un site à une page génial en un rien de temps.

Maintenant, parlons des outils. Alors, comment pouvez-vous construire un excellent site Web à une page de la manière la plus efficace et la plus rapide possible ?

Construisez votre site Web à une page avec Elementor

Elementor est un constructeur de pages facile à utiliser et riche en fonctionnalités qui permet de créer facilement n’importe quel nombre de pages dans un site Web WordPress. Cela en fait l’outil parfait pour élaborer un excellent site Web à une page avec.

Dans les sections suivantes, nous vous montrerons comment faire cela. L’exemple que nous utilisons est un site pour un magasin de fruits et légumes. Le site Web aura :

• une page avec de nombreuses sections abritant le contenu
• un menu sur lequel les visiteurs peuvent cliquer pour aller directement aux sections pertinentes
• un en-tête qui abrite le logo et le menu
• un pied de page

Voici un aperçu de ce à quoi ressemblera le site Web à la fin :

Nous allons passer en revue chaque étape en détail, mais voici le processus de base:

1. Installer le thème gratuit Neve.
2. Installer le plugin Elementor si ce n’est pas déjà fait.
3. Configurer la « toile » de votre site web – l’en-tête, le pied de page et le menu.
4. Ajouter votre contenu avec Elementor.
5. Liez le menu à différentes sections de votre canevas, pour créer l’effet de navigation sur une seule page.
6. Définissez votre canevas comme page d’accueil de votre site.

Installez le thème gratuit Neve

• Allez dans Apparence → Thèmes → Ajouter un nouveau dans votre tableau de bord WordPress.
• Recherchez « Neve »
• Cliquez sur le bouton Installer
• Une fois que WordPress installe le thème, cliquez sur Activer pour le mettre en ligne

Installer le plugin gratuit Elementor

• Voir Plugins → Ajouter nouveau
• Recherche de « Elementor »
• Installer et activer le plugin gratuit Elementor Page Builder.

Maintenant, avec une installation WordPress propre, le thème Neve actif, et le constructeur de page Elementor, vous êtes prêt à construire votre site web à une page.

Configurer l’en-tête, le pied de page et le menu

Vous utiliserez le thème Neve pour configurer l’en-tête, le pied de page et le menu de votre site web à une page.

En-tête

Allez dans le tableau de bord WordPress et cliquez sur Apparence → Thèmes → Personnaliser pour personnaliser le thème Neve :

D’abord, vous allez sélectionner les couleurs et l’arrière-plan du site

Puis, sur le panneau Customizer, cliquez sur Header → Change Logo et ajoutez le logo de votre site. Ajustez la largeur du logo, ajoutez le titre du site, l’icône du site et un slogan. Choisissez d’afficher ou de masquer le nom du site et le slogan dans l’en-tête.

Sous l’onglet Disposition, choisissez une disposition pour l’en-tête ainsi que la couleur, et définissez le rembourrage et les marges. Sinon, choisissez l’un des préréglages de l’en-tête.

Menu

Puis, vous devez créer le menu de navigation qui s’affichera dans votre en-tête. Pour ce faire, cliquez sur Menus → Créer un nouveau menu. Donnez-lui un nom et définissez son emplacement de menu égal au menu principal.

Cliquez sur Suivant et Ajouter des éléments. Ici, ajoutez les noms des sections que vous allez créer. Par exemple, Principal, À propos de nous, Produits et Contact. Pour ce faire, cliquez sur le bouton Liens personnalisés.

Dans le champ URL, saisissez un hashtag suivi du nom de cette section. Plus tard, lorsque vous configurerez Elementor, vous le configurerez pour que ces liens aillent vers des sections spécifiques de votre design. Par exemple :

• #about-us
• #products
• #contact

Footer

Passez au Footer et ajoutez le texte et la couleur de fond. Vous pouvez ajouter le contenu que vous voulez ici :

Cliquez sur Publier pour enregistrer toutes les modifications

À ce stade, votre site a un en-tête, un pied de page et un menu. Il devrait ressembler à quelque chose comme ci-dessous. Maintenant, vous êtes prêt à utiliser Elementor pour ajouter le contenu qui va entre votre en-tête et votre pied de page :

Créer une nouvelle page et ajouter du contenu avec Elementor

Pour commencer, allez dans Pages → Ajouter nouveau pour créer une nouvelle page. Donnez un nom à la page. Si le thème propose des barres latérales, celles-ci s’afficheront également. Mais vous pouvez couper les barres latérales en ajustant les attributs de la page à la pleine largeur.

Sur la nouvelle page qui s’ouvre, cliquez sur Editer avec Elementor. Cela ouvre un panneau sur la gauche. Sur le côté droit, il y a la zone d’édition où vous verrez le site web prendre forme.

Une introduction rapide à l’interface d’Elementor

Avant de continuer, jetons un coup d’œil au panneau d’Elementor. Il dispose de nombreux éléments créatifs ou widgets comme des titres, des paragraphes, des images ou des vidéos. Vous pouvez les ajouter à votre contenu en les faisant glisser dessus.

En haut à gauche du panneau se trouve le menu hamburger qui ouvre de nombreuses options. Ici, vous serez en mesure d’ajuster les couleurs, les polices et le style du thème à un niveau global. Inutile de dire que cela permet de gagner beaucoup de temps lors de l’ajout de nouvelles pages.

À partir de cet onglet, vous pouvez également quitter le tableau de bord WordPress à tout moment.

Au bas du panneau, il y a des options pour ajuster les paramètres de la page, nommer la page, afficher l’historique des modifications et basculer entre les modes réactifs. Aussi, il y a un navigateur qui montre une vue organisée de la page.

En cliquant sur l’icône de l’œil, vous pouvez Prévisualiser la page, et quand vous êtes prêt à aller en direct, appuyez sur le bouton Publier.

Maintenant, il est temps de commencer à ajouter du contenu.

Deux façons de créer un site web d’une page avec Elementor

À ce stade, vous pouvez choisir de procéder à la construction du site web d’une page avec Elementor de deux façons :

1. Insérez l’un des modèles préconstruits d’Elementor, puis personnalisez-le comme vous le souhaitez. À cette fin, cliquez sur l’icône de dossier dans l’aperçu en direct de votre conception et cela ouvrira un certain nombre de modèles, certains gratuits et beaucoup de pro. Dans l’onglet Pages, vous trouverez des modèles complètement terminés pour des pages entières. Dans l’onglet Blocs, vous trouverez des modèles préconstruits pour des sections spécifiques d’une plus grande page (c’est le plus utile pour un site Web d’une page).

Vous pouvez insérer n’importe quel modèle en cliquant dessus. Ensuite, vous serez en mesure de personnaliser entièrement chaque élément.

2. Alternativement, vous pouvez commencer à partir de zéro en cliquant sur le bouton plus pour ajouter une section et construire votre conception à partir d’un canevas vierge.

Pour les besoins de ce tutoriel, nous allons adopter une combinaison des deux méthodes – nous allons construire la première section de notre site Web à partir de zéro et ensuite choisir parmi les blocs de modèles pour remplir les sections restantes.

Comment créer des sections du site web d’une page avec Elementor

Elementor utilise des sections, des colonnes et des widgets pour créer la mise en page de toute page. Les sections sont les plus grands blocs de construction et vous pouvez ajouter des colonnes à l’intérieur de ceux-ci. A l’intérieur de ces sections ou colonnes, vous pourrez ajouter les widgets que vous voulez.

Cliquez sur le signe ‘+’ pour ajouter une section et choisissez la structure de la colonne.

Lorsque vous survolez une section, une bordure bleue apparaît avec une poignée en haut. Cette poignée vous permet d’ajouter une nouvelle section vierge au-dessus de la section existante, ou de modifier/supprimer une section. En cliquant sur les points au milieu, vous accédez aux contrôles de la section – disposition, style et avancé. En outre, vous pouvez déplacer les sections vers le haut ou vers le bas en faisant glisser sur les points, et faire un clic droit pour faire apparaître d’autres options comme dupliquer ou supprimer.

De même, vous pouvez cliquer sur la poignée de l’icône de colonne dans le coin supérieur pour choisir les dispositions de colonne dans la section. Vous pouvez également ajuster la largeur des colonnes et l’espace entre elles. Faites un clic droit sur les cases pour ajouter d’autres colonnes, dupliquer celles qui existent, les supprimer, et plus encore.

Depuis le panneau Elementor, vous pouvez faire glisser n’importe quel élément (appelé widget) dans la colonne. Une fois que vous avez ajouté un élément à une colonne ou à une section, une icône de crayon apparaît dans le coin supérieur droit. Cliquez sur cette icône pour faire apparaître les options de contenu, de style et d’édition avancée dans le panneau Elementor.

Comment créer la première section

Nous utiliserons la première section pour faire connaître aux visiteurs la nature de l’entreprise et un petit quelque chose à son sujet. À cette fin, vous pouvez utiliser toute la largeur de la section pour porter une image de fond. Tout en éditant la mise en page de la section, vous pouvez ajuster la largeur du contenu et étirer la section sur toute la largeur de la page, simplement en basculant un bouton.

Pour ajouter l’image de fond, choisissez l’option d’édition de la section en cliquant sur les points de la poignée. Visitez l’onglet Style qui apparaît dans le panneau et téléchargez l’image depuis la bibliothèque multimédia. Ajustez la taille de l’image ainsi que la superposition.

Nous allons ajouter une seule colonne dans la section et la centrer dans la section. À l’intérieur de la colonne, nous utiliserons trois widgets – Heading qui indique aux visiteurs que vous vendez des fruits et légumes frais, un éditeur de texte qui attire l’attention sur les options de livraison à domicile, et un bouton à partir duquel les visiteurs peuvent passer une commande.

Ajouter un widget Heading:

Déplacer un widget texte:

Ajouter le widget bouton:

Maintenant vous pouvez personnaliser chaque widget en utilisant les options d’édition.

Si vous le souhaitez, vous pouvez également ajouter les widgets en trois colonnes séparées en ajoutant des colonnes en cliquant sur l’icône de colonne. Ce qui est important de noter ici, c’est que chaque widget peut être ajusté minutieusement pour la mise en page, le style et plus encore.

Créer les sections restantes

Maintenant que la première section est faite, vous pouvez passer aux trois autres – À propos de nous, Produits et Contact.

Comme mentionné précédemment, nous utiliserons des blocs de modèles prêts à l’emploi de la bibliothèque Elementor pour construire ces trois sections. Elementor a de nombreux blocs de modèles gratuits dans chacune de ces catégories et la bibliothèque est consultable.

Pour la section À propos de nous, nous allons choisir un bloc de modèle simple avec un titre, un éditeur de texte et un widget vidéo. Vous pouvez remplacer tout cela par votre propre contenu.

Le bloc de template avec le contenu substitué :

De la même manière, vous pouvez utiliser des blocs de template pour la section Produits et Contact. Le modèle utilisé pour la section Contact est accompagné d’icônes de médias sociaux. Cliquez sur l’onglet Style pour contrôler la couleur de l’icône, sa taille, le rembourrage et plus encore.

Etant donné qu’Elementor permet une grande personnalisation, vous pouvez donner à ces sections un aspect différent des modèles importés.

Quand vous avez terminé d’apporter les changements souhaités, cliquez sur le bouton vert Publier et les changements seront en direct sur le site.

Lier le menu aux sections d’une page

Pour avoir un menu de navigation cliquable, vous devez connecter les différentes sections de votre conception Elementor avec le menu de navigation que vous avez créé à l’étape #3. Pour ce faire, ouvrez l’ID d’une section et allez dans l’onglet Avancé. Dans le champ ID CSS du panneau Elementor de la section correspondante, remplissez le nom de section correct sans le hashtag.

Par exemple, si votre menu est lié à #about-us, vous ajouterez l’ID CSS sous la forme about-us. Ensuite, répétez le processus pour toutes les sections vers lesquelles vous voulez créer des liens :

Définir votre design comme page d’accueil

En guise de dernière étape, vous pouvez configurer la page que vous venez de créer comme page d’accueil du site web à une page créé avec Elementor. Pour ce faire, rendez-vous dans Paramètres → Lecture. Cliquez sur Sélectionner une page statique sous Votre page d’accueil s’affiche, puis sélectionnez le design que vous avez créé. Enfin, cliquez sur Enregistrer les modifications.

Si vous êtes confus par une étape, nous avons un guide complet sur la configuration d’une page d’accueil statique WordPress.

Enfin, votre site Web à une page est maintenant prêt. Voici un exemple de ce à quoi il pourrait ressembler :

Conclusion

Voici trois étapes simples qui vous permettront de créer un site web à une page dès aujourd’hui :

1. Déterminer l’objectif de votre site.
2. Sélectionner un thème à une page de qualité, tel que Neve.
3. Concevoir votre site en utilisant Elementor si nécessaire.

.