top of page

Comment créer un site one-page ? (avec exemples)


les sites one-page

* Cet article a été mis à jour le 31 octobre 2022.


Les tendances : voilà sur quoi tout le monde se base pour savoir ce qu’il faut faire ou pas. Elles existent dans tous les domaines, de la danse au web design. Certaines modes passent, d’autres sont faites pour durer. Ce qui fonctionne particulièrement bien en ce moment, ce sont les sites one-page; autrement dit, des sites qui affichent l’intégralité du contenu sur une page unique à faire défiler.


De plus en plus de web designers choisissent cette technique pour créer un site internet. Pourquoi ? Eh bien parce que c’est simple, clair, fonctionnel et cela permet une navigation agréable. Tout cela sans parler des possibilités infinies de design. Allez, on vous explique comment créer un site one-page qui a tout pour plaire à vos internautes.



Définition : qu’est-ce qu’un site one-page ?


Comme son nom l’indique, un site one-page est un site constitué d’une seule page. Ce qui veut dire que vous pouvez accéder à l’ensemble du contenu sans avoir à effectuer de clic. Les différentes parties (Contact, FAQ, À propos, etc.) se succèdent les unes à la suite des autres. Pour y accéder, vous pouvez faire scroller la page et/ou insérer un menu ancré. La plupart du temps, les sites one-page sont utilisés pour créer une landing page ou un site vitrine.


Comment créer un site one-page en 11 étapes

  1. Définissez vos besoins

  2. Élaborez un plan pour votre site

  3. Choisissez un template

  4. Divisez votre contenu en parties succinctes

  5. Dynamisez votre site avec des effets

  6. Créez un menu ancre

  7. Ajoutez des CTA

  8. Remplissez votre pied de page

  9. Ajoutez un lien vers vos réseaux sociaux

  10. Appliquez les bonnes pratiques SEO

  11. Adaptez votre site aux mobiles


01. Définissez vos besoins


En web design, il y a deux écoles : le site classique et le one-page. En fonction de votre entreprise et de vos objectifs, vous allez choisir celui qui vous convient le mieux. Ils ont chacun leurs avantages. Prenez votre décision en fonction des priorités que vous vous êtes fixées.


Le site one-page a un design à la fois minimaliste et très ordonné. Il est principalement composé d’images accompagnées de texte ici et là. Avoir tout votre contenu sur une seule page vous permet de raconter l’histoire à votre façon. Vous pouvez choisir l’ordre dans lequel apparaissent les informations et ainsi avoir un contrôle total sur l’expérience des visiteurs. De plus, avec un site one-page, les internautes savent où aller. Explorer un site de façon linéaire est toujours plus facile que de se perdre à travers les différentes pages. Ce format convient également aux mobiles. Enfin, il est simple à créer et à mettre à jour. Avant de vous lancer les yeux fermés, demandez-vous « est-ce la bonne option pour mon entreprise ? ». Quelle que soit votre activité, si vous avez peu de contenu écrit, vous pourrez faire quelque chose de très beau. Pour les sites de photographie, les indépendants, les landing pages, les sites vitrines, les sites de mariage ou d’événement en général, ce format conviendra parfaitement.


Le site classique est celui que vous consultez la plupart du temps, c’est-à-dire une page d’accueil avec des liens redirigeant vers d’autres pages web (votre FAQ, page contact, etc.). La raison principale de choisir cette option est si vous avez beaucoup de contenus à inclure sur votre site, comme par exemple un catalogue de produits ou de services avec plusieurs catégories. Ainsi, vous pouvez créer une organisation plus complexe et inclure plus de détails. Optez pour ce format si vous avez un blog par exemple. Il sera plus facile pour vos visiteurs d’accéder à chacun de vos articles individuellement.


02. Élaborez un plan pour votre site


Si vous avez choisi le format one-page, commencez par définir un plan d’action. L’ordre dans lequel vous allez présenter vos éléments compte beaucoup. Vous voulez faire en sorte que cela soit logique et intuitif. Posez d’abord tout votre contenu, puis assemblez les éléments au fur et à mesure. Faites-le de façon hiérarchique.


Par quoi voulez-vous que les internautes commencent leur visite ? Ils doivent d’abord capter votre message principal. De quoi voulez-vous qu’ils se souviennent ? Placez cela au-dessus de la ligne de flottaison (c’est-à-dire ce qui apparaît sur l’écran sans avoir à faire défiler la page). À la fin de votre site, ajoutez vos informations de contact, c’est là que vos visiteurs iront les chercher. Tout ce qui se trouve entre les deux varie en fonction de vos priorités : cela peut être votre offre, des témoignages, des photos, une présentation de votre équipe ou un bouton d’appel à l’action.


03. Choisissez un template


Une fois que vous savez ce que vous voulez mettre sur votre site one-page, il est temps de penser au design. Vous avez besoin d’un template qui contient tous les éléments nécessaires : un menu ancre, une mise en page en bandes et colonnes, une barre de réseaux sociaux ou encore un pied de page bien fourni. Vous trouverez chez Wix des centaines de templates, entièrement personnalisables et adaptés à tous les types d’activités. Vous pouvez donc modifier tous les éléments pour rendre votre site unique et en accord avec l’image de votre entreprise. Vous pouvez également vous inspirer de ces exemples de landing page


04. Divisez votre contenu en parties succinctes


La première étape lors de la création de la structure de votre site Web consiste à disposer stratégiquement tout votre contenu afin qu'il raconte une histoire logique et intuitive aux visiteurs. Commencez à hiérarchiser votre site en imaginant le parcours de vos visiteurs. Placez vos messages principaux au-dessus de la ligne de flottaison pour les attirer avant qu'ils ne fassent défiler votre page, puis placez chaque élément de contenu supplémentaire par ordre de priorité.


Chaque site internet a besoin d'une section « À propos » et d'une zone d'informations de contact dédiée. Ensuite, vous pouvez inclure votre offre, une présentation de l'équipe, des services et produits, des témoignages, une section FAQ ou encore une galerie de photos.


05. Dynamisez votre site avec des effets


De nombreux sites peuvent sembler légèrement unidimensionnels, mais notez que les meilleurs sites one page ajoutent des effets comme le défilement parallaxe pour attirer l'attention des utilisateurs et stimuler leur engagement. Cet effet de défilement crée une illusion 3D, avec des bandes en arrière-plan et au premier plan se déplaçant à des rythmes différents lorsque l'utilisateur fait défiler votre site.



exemple d'effet sur un site one page


06. Créez un menu ancre


Vous êtes maintenant habitué à utiliser des menus sur les sites internet. Mais celui-ci est différent. Il ne renvoie pas à d’autres pages de votre site, mais à d’autres sections de la même page. La première chose à faire est donc de les délimiter clairement avec des ancres. Il y a trois étapes importantes pour créer un menu ancre et organiser correctement votre page :

  • Ajoutez une ancre : elle permet à vos visiteurs de naviguer facilement en pouvant se rendre directement sur une section de votre page. Beaucoup de nos templates ont des ancres intégrées, mais il ne tient qu’à vous de les renommer, modifier ou supprimer en fonction de vos besoins.

  • Reliez ces ancres à votre menu : c’est grâce à cela que vous pourrez aller sur les sections de votre site à partir de votre menu. Le nom que vous donnez à vos ancres est celui qui va apparaître dans votre menu, faites donc en sorte qu’il soit le plus clair possible.

  • Ordonnez votre menu : l’ordre des sections telles qu’elles apparaissent dans votre menu doit correspondre à la façon dont vos parties se succèdent sur votre site. Par exemple, si votre première partie est « À propos », elle s’affichera à la fois au tout début de votre site et en haut de votre menu.


Pour faciliter la vie des internautes et leur offrir la meilleure expérience possible, ajoutez un bouton « retour en haut de page ». Ils pourront alors retourner au début de votre site en un clic sans le refaire défiler dans l’autre sens.



exemple de menu sur un site one page


07. Ajoutez des CTA


Puisque tout votre contenu se trouve sur une seule et unique page, vous avez besoin d’un élément puissant pour amener vos visiteurs à réaliser une action : s’inscrire à votre newsletter ou réserver un service par exemple. C’est là que le bouton d’appel à l’action (ou CTA) entre en jeu. Il s'agit d'une courte phrase (2 ou 3 mots) qui incite vos visiteurs à passer à l’acte.


Ce bouton doit être placé au-dessus de la ligne de flottaison pour une meilleure visibilité. En cliquant dessus, vos visiteurs seront à nouveau envoyés vers la section appropriée. Par exemple, si le bouton est « Contactez-nous », en cliquant dessus, ils iront sur la partie « Contact ». Pour faire cela, vous devez créer une ancre au niveau de votre bouton, comme vous l’avez fait avec votre menu. Commencez par créer votre CTA, puis connectez-le tout simplement à votre ancre.


08. Remplissez votre pied de page


Le pied de page est, comme son nom l’indique, la partie qui se trouve tout à la fin de votre site. C’est généralement là que les gens se rendent pour trouver des informations importantes, telles que comment vous contacter ou vos horaires d’ouverture. Voilà pourquoi vous ne devez pas négliger cette partie. Pensez à y inclure vos chaînes de réseaux sociaux, votre politique d’utilisation et de confidentialité, votre adresse, votre email, etc. Si vous avez une boutique physique, vous pouvez aussi y mettre un plan.

09. Ajoutez un lien vers vos réseaux sociaux


En ligne, tout est relié. Vous devez, vous aussi, connecter les différents éléments de votre présence en ligne. Ajoutez sur votre site votre page Facebook, votre compte Twitter et votre flux Instagram. Pourquoi ? Pour avoir le plus de trafic possible. Voici deux façons de faire :

  • Ajouter une barre de réseaux sociaux. C’est à cet endroit que se trouvent les icônes de tous vos réseaux sociaux. Wix vous donne le choix entre plusieurs options de design : tout ce que vous avez à faire est de choisir celle qui vous convient et d’y ajouter les liens vers vos chaînes. Là aussi, vous pouvez la fixer sur votre page afin qu’elle reste toujours visible.

  • Ajouter un flux Instagram : Vous pouvez mettre votre page Instagram encore plus avant en affichant un flux sur votre site. C’est un bon moyen de donner à vos visiteurs un contenu toujours à jour sans trop faire d’efforts. Ici aussi, vous avez le choix entre plusieurs mises en page, à vous de choisir celle qui conviendra le mieux.


lien vers les réseaux sociaux

10. Appliquez les bonnes pratiques SEO


Le référencement est essentiel pour absolument tous les sites internet. Cela englobe l’ensemble des actions que vous pouvez faire pour permettre à votre site d’apparaître en haut des résultats des moteurs de recherche – et donc de vous apporter plus de trafic et de clients potentiels. Commencez par vous assurer que votre site est bien indexé par Google (c’est-à-dire qu’il fait partie de la base de données). Avec Wix, cela ne prend que quelques secondes. Après cela, attaquez-vous aux mots-clés.


11. Adaptez votre site aux mobiles


Faire des recherches depuis un smartphone est devenu la norme. Voilà pourquoi Google a décidé d’utiliser les sites mobiles comme critère d’indexation principal. Qu’est-ce que cela signifie concrètement pour votre site ? Tout simplement que votre version mobile doit être aussi travaillée et attrayante que celle sur ordinateur. Étant donné que la navigation et la visibilité sont tous deux des facteurs importants, le site one-page vous met d’emblée dans la bonne direction. Si en plus, vous avez un site Wix, votre version mobile est créée automatiquement. Vous pouvez voir le rendu en allant sur votre Éditeur et en cliquant sur « Passer au mode mobile ».


Un dernier conseil pour la route : ajoutez une barre d’action rapide sur votre version mobile pour permettre à vos visiteurs de se rendre en un clic sur les sections les plus importantes de votre site. Ainsi, vous leur permettez de trouver ce dont ils ont besoin en un clin d’œil.



exemple de site one page adapté aux mobiles


Les avantages et les inconvénients d’un site one-page

Comme pour tout, créer un site one-page représente des avantages et des inconvénients. Faites votre choix en connaissance de cause et prenez tous les aspects en considération avant de vous lancer.

Commençons par les points positifs. Les sites one-page permettent d’être créatif et de vous lâcher au niveau du design : vous pouvez ajouter des transitions, des animations ou encore des effets parallaxe. Ils sont généralement très attrayants pour les visiteurs. Premièrement parce qu’ils sont faciles de navigation, mais aussi, car ils ont tendance à contenir plus d’images que de texte. Enfin, le one-page est le format idéal pour raconter une histoire : en maîtrisant l’ordre dans lequel s’affiche votre contenu, vous pouvez suivre un storytelling. Nous y reviendrons dans la suite de cet article.

D’un autre côté, il existe quelques points négatifs. Il y a très peu de clics sur un site one-page. L’engagement avec vos visiteurs se limite à faire défiler la page, ce qui veut dire que vous allez devoir faire un effort supplémentaire pour garder leur attention. Limitez votre contenu et trouvez un moyen de les inciter à scroller. Pour cela, nous vous suggérons d’avoir 4 ou 5 sections maximum. Un dernier inconvénient du site one-page est sa vitesse de chargement. Faites attention à la répartition de vos éléments pour ne pas trop alourdir votre page au risque de perdre vos visiteurs.


6 raisons pour lesquelles vous pourriez utiliser un site one-page :

  • Vous avez un contenu court, comme une landing page, un CV, un portfolio de photographies, un site de mariage ou tout autre site lié à un événement.

  • Vous avez un objectif clair que vous souhaitez que vos utilisateurs atteignent.

  • Vous disposez de peu de temps et de ressources et avez besoin de créer un site Web rapidement.

  • Vous voulez que votre site soit compatible avec une large gamme d'appareils.

  • Vous pouvez adapter tout votre contenu sur une seule page linéaire.

  • Vous voulez une page qui se charge plus rapidement et une meilleure web performance.


Quelques bons exemples de sites one-page


Si vous vous demandez à quoi ressemble un site qui aurait suivi tous ces bons conseils, voici la réponse. Découvrez des exemples de sites one-page réalisés avec Wix pour vous inspirer avant de créer votre propre site one page.



Lena Steinküler


example de site one page - Lena Steinkuler


Tokyo Trip


Exemple de site one-page - Tokyo Trip



Erh Restaurant


Exemples de site one-page - Erh

Lior Raz



Exemples de site one-page - Lior Raz



Publié par Marie Kaddouch

Marketing Manager

FR03.png
bottom of page