Un site monopage, c’est quand tout le contenu tient sur une seule page et que le menu ne renvoie pas vers d’autres URL: au clic, la page défile en douceur jusqu’au bloc souhaité. Pas de rechargement, pas de visiteur perdu. On dirait exactement ce qu’il vous faut pour une landing page, un portfolio ou une carte de visite, non?

Mais dans la pratique, un débutant se heurte à deux murs. Le premier: «Je ne sais pas coder.» Le second: «J’aurai sans doute besoin d’extensions payantes.» Les deux murs tombent en moins d’une heure.

Vous allez créer un véritable site monopage sur WordPress avec un défilement fluide, des sections ancrées et uniquement des outils gratuits. Pas une seule ligne de code.

Si vous préférez regarder plutôt que lire, voici une démonstration visuelle, de l’installation à la publication:

💡 Aperçu rapide:

• Installer XAMPP, un serveur local pour tester WordPress sur votre ordinateur
• Déployer WordPress en local via phpMyAdmin et en modifiant wp-config.php
• Choisir un thème compatible avec une structure monopage (nous utiliserons SiteOrigin North)
• Installer deux extensions gratuites de SiteOrigin: Page Builder et Widgets Bundle
• Assembler une page à partir de mises en page prêtes à l’emploi, attribuer des ID d’ancrage et les lier aux éléments du menu

Pourquoi un site monopage

Un site monopage l’emporte sur un site classique multipage dans des cas bien précis. Vous maîtrisez l’ordre dans lequel le visiteur consomme l’information: d’abord la valeur, ensuite le prix, et non l’inverse. Pas besoin de chercher des liens dans le menu.

Quand cela fonctionne

Le portfolio d’un photographe, une landing page de service, une page de promotion produit, la carte de visite d’une entreprise en cinq sections, tout cela tient sur un seul écran de défilement. Six blocs de deux à trois paragraphes sur une seule page donnent une impression de solidité. Les mêmes six blocs répartis sur six pages différentes donnent l’impression d’un site vide.

Mobile et rapidité

Un site monopage se charge une fois. Ensuite, il n’y a plus que du défilement. Un visiteur peut perdre sa connexion en cours de lecture et continuer à faire défiler jusqu’à la fin: la page est déjà en mémoire. Sur un écran mobile, l’expérience rappelle celle d’une application, pas celle d’un site web. Google l’a confirmé il y a longtemps: l’indexation mobile-first est la norme depuis 2018.

Quand éviter

Une centaine d’articles de blog, une boutique en ligne complexe, une arborescence à plusieurs niveaux: un site monopage ne pourra pas gérer cela. Le défilement devient interminable et le référencement en pâtit: les moteurs de recherche adorent les URL distinctes pour chaque groupe de sens.

Étape 1: Installer XAMPP sur Windows

XAMPP est un package gratuit multiplateforme: Apache (serveur web), MariaDB (base de données), PHP et Perl. En clair, il transforme votre ordinateur en hébergement local où WordPress fonctionne sans internet et sans frais. Idéal pour tester et apprendre.

Procédure d’installation sous Windows:

• Rendez-vous sur le site d’Apache Friends et téléchargez la dernière version de XAMPP pour votre système.
• Lancez l’installateur. Sur l’écran d’accueil, cliquez sur Suivant.
• À l’étape de sélection des composants, laissez cochés MySQL et phpMyAdmin, c’est suffisant pour WordPress. Le reste peut être décoché: vous pourrez les ajouter plus tard via le panneau de configuration si besoin.

• Choisissez un dossier d’installation (par défaut C:\xampp, vous pouvez le conserver).
• Sur l’écran Bitnami, décochez «En savoir plus sur Bitnami pour XAMPP», nous installerons WordPress manuellement. Cliquez sur Suivant.
• Patientez pendant le décompactage des fichiers. Laissez cochée la case «Lancer le panneau de configuration» et cliquez sur Terminer.

Si le panneau de configuration s’est ouvert sans erreur rouge et qu’Apache et MySQL sont en vert, le serveur fonctionne. Ouvrez un navigateur et allez sur http://localhost/. Si vous voyez la page d’accueil de XAMPP, tout est correctement paramétré.

Si Apache ne démarre pas, vérifiez si le port 80 est occupé par un autre programme. Skype et IIS sont souvent en cause. Dans les paramètres d’Apache (Config → Apache → httpd.conf), vous pouvez changer le port de 80 à 8080.

Étape 2: Créer une base de données et installer WordPress

WordPress stocke tout, pages, réglages, utilisateurs, dans une base de données MySQL. Créons-la via phpMyAdmin.

• Dans le panneau de configuration XAMPP, cliquez sur le bouton Admin dans la ligne MySQL. phpMyAdmin s’ouvre.
• Allez dans l’onglet Bases de données dans le menu en haut à gauche.
• Saisissez un nom de base de données, par exemple wordpress, et cliquez sur Créer.

La base de données est prête. Passons maintenant à WordPress proprement dit:

• Téléchargez la dernière version de WordPress et extrayez l’archive dans le dossier C:\xampp\htdocs\wordpress (vous pouvez nommer le dossier autrement, cela fera partie de l’URL locale).
• Dans ce dossier, repérez le fichier wp-config-sample.php et renommez-le en wp-config.php.
• Ouvrez ce fichier dans un éditeur de texte et cherchez le bloc de paramètres MySQL:

1
define('DB_NAME', 'wordpress');
2
define('DB_USER', 'root');
3
define('DB_PASSWORD', '');
4
define('DB_HOST', 'localhost');

• Enregistrez le fichier et fermez l’éditeur.
• Dans le navigateur, ouvrez http://localhost/wordpress/. Choisissez une langue, créez un identifiant et un mot de passe, puis cliquez sur Installer WordPress.

Voilà. Vous êtes connecté à l’administration WordPress sur votre machine locale. Premier jalon atteint.

Étape 3: Choisir un thème

Presque n’importe quel thème peut convenir pour un site d’une seule page, mais nous allons utiliser SiteOrigin North: il est gratuit, responsive et conçu pour fonctionner avec le constructeur de pages SiteOrigin, que nous mettrons en œuvre à l’étape suivante. Le thème prend en charge un menu fixe, ce qui évite aux visiteurs de devoir remonter pour naviguer vers une autre section.

Installation: Apparence → Thèmes → Ajouter un thème → saisissez SiteOrigin North → Installer → Activer. Ce thème est développé par l’équipe SiteOrigin, les mêmes personnes qui conçoivent l’extension Page Builder. Il n’y aura pas de conflits.

Étape 4: Les extensions SiteOrigin, Page Builder et Widgets Bundle

Le cœur de notre réalisation, deux extensions gratuites disponibles sur le dépôt WordPress:

• SiteOrigin Page Builder (siteorigin-panels), un constructeur par glisser-déposer avec une grille, des mises en page et une fonctionnalité native de défilement en page unique (depuis la version 2.3). Aperçus en direct, code HTML propre, plus de 500 000 installations actives.
• SiteOrigin Widgets Bundle (so-widgets-bundle), un ensemble de widgets: boutons, images, diaporamas, cartes, tarifs et une vingtaine d’autres éléments. Tout ce qui vient remplir les mises en page.

Installation: Extensions → Ajouter une nouvelle extension → recherchez SiteOrigin Page Builder et SiteOrigin Widgets Bundle l’un après l’autre → Installer → Activer les deux. C’est précisément la combinaison de ces deux extensions qui vous apportera à la fois le constructeur et le contenu pour vos mises en page. La fonctionnalité de défilement par ancre est intégrée à Page Builder, aucune extension supplémentaire n’est nécessaire pour une navigation en page unique.

Étape 5: Construire une page avec SiteOrigin Page Builder

Créez une nouvelle page (Pages → Ajouter). Au-dessus de l’éditeur standard, des onglets apparaîtront, basculez vers Page Builder.

SiteOrigin Page Builder est livré avec une bibliothèque de mises en page prêtes à l’emploi. Cliquez sur le bouton Layouts au-dessus de l’éditeur.

Un catalogue de modèles prédéfinis s’ouvrira, de Fitness Gym à Agency. Choisissez celui qui vous convient (nous avons choisi Fitness Gym), cliquez sur Insérer. S’il y avait déjà du contenu sur la page, l’extension vous demandera: insérer avant, après ou remplacer. Pour une page vierge, cela ne fait aucune différence.

Enregistrez la page et ouvrez-la. Basculez vers l’**Éditeur **visuel, le lien vers celui-ci apparaîtra dans la barre d’administration WordPress en haut de la page.

Dans l’Éditeur visuel, vous survolez n’importe quel élément et voyez immédiatement quel widget en est responsable. Vous pouvez modifier le texte, changer les images et déplacer les blocs, le tout en temps réel.

Étape 6: identifiants d’ancrage et menu de navigation

La dernière étape consiste à lier les éléments du menu aux sections de la page. Sans cela, le défilement ne fonctionnera pas.

Dans Live Editor, survolez la première ligne après le bloc Hero, cliquez sur l’icône de clé à molette et sélectionnez Modifier la ligne. Allez dans l’onglet Attributs et, dans le champ ID de ligne, saisissez un identifiant, par exemple activities. Cliquez sur Terminé.

Répétez l’opération pour chaque ligne avec un ID unique: services, puis pricing, puis contact, et ainsi de suite. Enregistrez la page.

Passons maintenant au menu: Apparence → Menus. Créez un nouveau menu. Ajoutez des éléments via Liens personnalisés: dans le champ URL, saisissez #activities, dans le champ nom, «Activités». Répétez l’opération pour chaque ID.

Nuance importante: le dièse # est obligatoire dans l’URL de l’élément de menu (c’est le format d’ancrage HTML), mais dans l’ID de ligne à l’intérieur de Page Builder, vous n’avez pas besoin de mettre le dièse, le constructeur comprend tout seul qu’il s’agit d’un identifiant.

Plus de détails sur la création de menus dans WordPress sont disponibles dans notre guide sur la configuration de la navigation.

Enregistrez le menu, assignez-le à une zone d’affichage du thème et ouvrez le site. Cliquez sur un élément du menu, la page défilera en douceur jusqu’à la section souhaitée.

⁉️🤔 Foire aux questions

XAMPP est-il obligatoire ou puis-je passer directement à l’hébergement?

XAMPP est nécessaire pour les tests en local. Si vous disposez déjà d’un hébergement avec WordPress, passez les étapes 1 et 2 et allez directement au thème et aux extensions. La logique d’ancrage fonctionne de la même manière en local et sur un serveur en ligne.

Puis-je utiliser un autre thème que SiteOrigin North?

Oui, presque tous les thèmes WordPress modernes prennent en charge la structure en page unique. L’essentiel est que le thème n’entre pas en conflit avec SiteOrigin Page Builder. Les développeurs de Page Builder garantissent la compatibilité avec la plupart des thèmes du dépôt WordPress.

Cette configuration fonctionne-t-elle sur Mac ou Linux?

XAMPP est multiplateforme, des versions existent pour Windows, macOS et Linux. Sur Mac, vous pouvez également utiliser MAMP (version gratuite). L’installation de WordPress et des extensions après la mise en place du serveur local est identique sur tous les systèmes d’exploitation.

Que faire si Apache ne démarre pas?

Les deux raisons les plus courantes: le port 80 est occupé par un autre programme (Skype, IIS, un autre serveur web) ou l’antivirus bloque l’activité réseau. Solution: changez le port Apache pour 8080 dans httpd.conf ou terminez le processus gênant via netstat -ano | findstr :80 en ligne de commande.

Puis-je ajouter d’autres sections plus tard?

Oui. À tout moment, allez dans Page Builder, ajoutez une nouvelle ligne, attribuez-lui un ID de ligne et créez un élément de menu avec le même ancrage. Le constructeur ne limite pas le nombre de sections.

Ce que vous avez obtenu en une heure

Un site WordPress monopage fonctionnel. Avec un menu d’ancrage, un défilement fluide, un éditeur en direct et entièrement avec des outils gratuits. La même configuration XAMPP + SiteOrigin fonctionne aussi pour les projets commerciaux: construisez une page d’atterrissage en local, testez-la et transférez-la vers un hébergement en ligne via n’importe quel plugin de migration.

Adoptez cette règle: d’abord la construction en local, ensuite la mise en production. Cela vous fait économiser de l’argent sur l’hébergement pendant les expérimentations et vous épargne des tracas quand quelque chose tourne mal.

Si ce contenu vous a été utile, essayez de construire votre premier site monopage dès aujourd’hui. XAMPP et WordPress se téléchargent en cinq minutes, et le constructeur SiteOrigin s’occupe de toute la mise en page.