Comment créer un site Web d'une page avec Elementor (méthode gratuite)

Les sites Web d'une page font bien un travail spécifique : ils mettent chaque élément d'information dont un visiteur a besoin sur un seul parchemin Pas de clic autour Pas de deuxième page Juste héros, à propos, services, contact, fait.

Ce guide explique comment créer un site Web d'une page avec Elementor à l'aide du plugin gratuit, d'un thème léger et d'une poignée de widgets de Master Addons où s'épuise l'ensemble gratuit Elementor. À la fin, vous aurez un site qui défile proprement de haut en bas, avec des liens de navigation qui sautent vers chaque section au lieu de charger une nouvelle page.

Si vous êtes pressé, passez au raccourci du kit de modèles près du bas Si vous voulez réellement comprendre ce que vous construisez, commencez par le haut.

Qu'est-ce qu'un site Web d'une page et quand il fonctionne réellement

Un site Web d'une page met tout votre contenu sur une seule URL. Au lieu de naviguer vers /about ou /services(en), le menu passe aux sections ancrées sur la même page.

Ça marche bien pour :

• Freelances présentant un petit portefeuille
• Pages de destination d'événements (mariage, conférence, lancement de produits)
• Petites entreprises de services (consultants, barbiers, designers)
• Pages à venir ou annonces MVP
• CV et portefeuilles personnels

Cela fonctionne moins bien pour :

• Blogs, qui nécessitent des URL de publication distinctes pour le référencement
• Boutiques en ligne avec plus d'une poignée de produits
• Sites ciblant plusieurs mots-clés à longue queue

Si votre contenu peut s'intégrer dans environ 7 à 12 sections sans se sentir encombré, un téléavertisseur unique est probablement le bon format.

Ce dont vous avez besoin avant de commencer

Trois ingrédients:

1. Une installation WordPress (auto-hébergée ou sur votre hôte préféré).
2. Gratuit Élémenteur et le gratuit Thème Hello Elementor. Bonjour les navires sans aucun style, ce qui est exactement ce que vous voulez quand Elementor dessine tout.
3. Le gratuit Plugin Addons Maître pour les widgets Elementor n'inclut pas (galeries filtrables, tableaux de prix, boîtes d'informations, carrousels d'équipe, style Formulaire de contact 7).

Vous pouvez construire la majeure partie de cela avec Elementor gratuit seul, mais quelques sections deviennent maladroites sans widgets supplémentaires Je les signalerai au fur et à mesure.

Choisissez le bon thème et le bon modèle de page

Installez Hello Elementor à partir de Apparence > Thèmes > Ajouter Nouveau. C'est une ardoise vierge : pas de barres latérales, pas de styles par défaut, pas d'opinions Elementor dessine toute la page.

Une fois qu'il est actif:

1. Créer une nouvelle page (Pages > Ajouter Nouveau).
2. Ouvrez-le dans Elementor.
3. Cliquez sur le rapport de réglage en bas à gauche, allez à Mise en pageet choisissez Toile Élémenteur.

Canvas supprime l'en-tête et le pied de page WordPress. Votre seul téléavertisseur devient la page entière.

Si vous souhaitez comparer les options du thème, le meilleurs thèmes WordPress légers pour Elementor roundup couvre les alternatives, mais Hello est la valeur par défaut pour une raison.

Les 11 sections d'une mise en page d'élément d'une page

Les one pagers les plus corrects suivent le même rythme Voici la pile que j'utilise :

1. Menu de navigation (collant)
2. Section héros
3. À propos
4. Services ou fonctionnalités
5. Équipe
6. Portfolio ou études de cas
7. Tarification
8. Témoignages
9. Formulaire de contact
10. Icônes sociales
11. Pied

Tous les sites n'ont pas besoin des onze Un freelance solo saute probablement l'équipe Un consultant B2 B pourrait sauter Tarification Choisissez ceux qui rapprochent réellement votre visiteur de vous contacter, et laissez tomber le reste.

Construire le Menu de Navigation

Tout d'abord, créez le menu dans WordPress : Apparence > Menus > Créer un nouveau menu.

Ajouter des Liens Personnalisés avec des URL d'espace réservé Pour l'instant, utilisez un hachage (#) suivi du nom de la section : #about, #services, #pricing. Vous les câblierez correctement à la fin, une fois que chaque section aura un identifiant correspondant.

Enregistrer le menu.

Maintenant, à l'intérieur d'Elementor, déposez une section en haut avec deux colonnes Mettez votre logo dans la colonne de gauche Pour la colonne de droite, vous avez deux options :

• Élémenteur gratuit : Utilisez le widget Menu WP.
• Additions maîtres : Utilisez le Widget du menu Navigation. Il prend en charge le méga menu, les effets de survol, le style de bascule mobile et reprend le menu que vous venez de créer sans configuration supplémentaire.

Rendre la section collante avec Paramètres de section > Avancé > Effets de mouvement > Collant : Haut. Si vous souhaitez une procédure pas à pas complète, le en-tête collant dans le guide Elementor le décompose.

Concevoir la Section Héros

Le héros donne le ton Gardez-le court : une promesse, une ligne de support, un bouton.

Ajouter une nouvelle section juste en dessous du menu Ouvrir les paramètres de section et définir :

• Largeur du contenu : Largeur complète
• Hauteur: Adapté à l'écran
• Alignement vertical : Moyen

Gouttez dans un grand en-tête, une ligne de texte descriptif et un bouton Utilisez une image d'arrière-plan ou une couleur unie dans le style de section Une superposition sombre facilite la lisibilité du texte lorsque la photo d'arrière-plan est occupée.

Si vous voulez une longueur d'avance, Master Addons expédie des modèles de section héros dans le Bibliothèque de modèles. Importez-en un, échangez la copie et l'image, et vous avez terminé en quelques minutes.

Ajouter la section À propos

Rien de fantaisiste ici Une section standard avec deux colonnes :

• Colonne de gauche : une photo (la vôtre, celle de votre équipe, ou de votre espace de travail)
• Colonne de droite : En-tête + Éditeur de texte + Bouton

Pointez le lien d'ancrage du bouton dans la section Services ci-dessous (“Voir ce que je fais”) afin que les visiteurs qui défilent sur About aient toujours un chemin clair vers l'avant.

Construire la Section des services

C'est là que le widget Infobox gagne sa place Free Elementor a une Icon Box, mais c'est limité Le Master Addons Widget Infobox vous offre plusieurs mises en page, un positionnement d'icônes, des états de survol et un champ URL sur toute la boîte afin que la carte entière puisse être cliquée.

Créer une section, ajouter un en-tête (“Services” ou “What I Do”), puis une section intérieure divisée en trois ou quatre colonnes Déposez une Infobox par colonne.

Chaque boîte devrait répondre à une question : quel est le service, à qui il s'adresse et quel résultat il délivre Ne videz pas les listes de fonctionnalités ici C'est à cela qu'est destinée une page de services dédiée, et vous n'en avez pas sur un seul téléavertisseur.

Ajouter une Section Équipe

Sautez cette section si vous êtes solo.

Pour 1-4 personnes : utilisez le widget Membre de l'équipe Chaque membre obtient une carte avec photo, nom, rôle, courte bio, et icônes sociales.

Pour les équipes plus importantes : utilisez le carrousel des membres de l'équipe Il montre trois ou quatre membres à la fois et défile horizontalement, ce qui maintient la section contenue visuellement.

Gardez toutes les photos de l'équipe dans le même rapport de recadrage et d'aspect Les tailles de tête incompatibles dans une grille semblent plus négligentes que ce à quoi vous vous attendez Documentation : Widget Membre de l'équipe et Carrousel des membres de l'équipe. Pour un guide autonome, voir comment créer une section des membres de l'équipe.

Ajouter un Portfolio Filtrable

La Galerie d'images d'Elementor gratuit convient parfaitement à une grille statique, mais elle ne filtre pas par catégorie.

Si vous voulez que les visiteurs cliquent sur “Branding” ou “Web” et qu'ils fassent le remaniement de grille, vous avez besoin d'une galerie filtrable Master Addons en a une Elle supporte les onglets de catégorie, les popup lightbox, les rubans (comme “NEW” ou “FEATURED” badges), et une superposition de métadonnées sur le vol stationnaire.

Configuration : baisse dans le Widget Galerie filtrable(en), téléchargez des images, marquez chacune avec une catégorie, et le style Plus de contexte dans le Rassemblement des plugins de galerie filtrables d'élément si vous voulez voir comment cela se compare aux alternatives.

Ajouter des Tables de Tarification

Si vous vendez des services produits ou des abonnements, une section de tarification convertit mieux qu'un vague contact d'“ pour devis.”

Free Elementor n'a pas de widget de tarification, c'est donc le territoire de Master Addons Le Widget de table de tarification est dans la version gratuite et vous donne des titres, prix, liste de fonctionnalités avec des icônes de chèque ou de croix, un badge pour le plan recommandé et un bouton CTA.

Trois colonnes est le point idéal pour un téléavertisseur Les visiteurs scannent les yeux de gauche à droite, et la colonne du milieu est l'endroit où vous mettez le plan que vous voulez réellement qu'ils choisissent Marquez-le “Most Popular” avec un ruban et le style légèrement différemment (bordure plus audacieuse, bouton rempli).Plus de conseils de motifs dans le Widget de table de tarification des éléments poste.

Ajouter Témoignages de clients

Deux ou trois vrais témoignages ont battu un mur de faux.

Free Elementor's Testimonial Carousel gère la mise en page de base Si vous voulez une version plus propre à une seule colonne (une grosse citation qui tourne), le Team Members Carousel dans Master Addons, curieusement, fonctionne également bien ici : déposez des photos des clients dans les emplacements des membres et mettez le devis dans le champ bio.

Demandez des témoignages qui mentionnent un résultat spécifique (“got 3 clients dans le premier mois”) plutôt que des éloges génériques (“greatgreat to work with”).Les spécificités sont convaincantes Les adjectifs vagues sont remplisseurs.

Ajouter un Formulaire de contact

Installez le gratuit Plugin Formulaire de contact 7 depuis le répertoire du plugin Créer un formulaire, saisissez le shortcode.

Dans Elementor, déposez un widget Text Editor et collez le shortcode Le formulaire s'affichera, mais il semblera clair.

C'est là que le widget Master Addons Contact Form 7 prend le relais Au lieu de coller un shortcode, il vous permet de styliser les étiquettes, les champs, les bordures, les messages d'erreur, et le bouton de soumission du panneau Elementor Pas de CSS personnalisé.

Procédure pas à pas complète dans le Contact Formulaire 7 personnalisation doc. Si vous souhaitez une icône Génial de police à l'intérieur du bouton Soumettre, il y a une publication distincte sur application des icônes Font Awesome aux boutons CF7.

Ajouter Icônes Sociales

Free Elementor inclut un widget Social Icons Il couvre Facebook, X (anciennement Twitter), LinkedIn, X Instagram, YouTube, et une poignée d'autres Vous contrôlez la couleur (marque ou coutume), la taille, la forme (carré arrondi ou cercle), et l'espacement.

Mettez-les au-dessus ou à l'intérieur de votre pied de page Gardez le compte à trois ou quatre plates-formes où vous êtes réellement actif Douze icônes, dont la moitié sont des comptes morts, semblent pires que trois saines.

Disposez le pied de page

Sur un téléavertisseur, le pied de page peut être une seule ligne.

Ajouter une section sous le formulaire de contact, colonne unique, centrée Une courte ligne de copyright (© 2026 Your Name. Tous droits réservés.) fait le travail Si vous avez besoin de liens de politique de confidentialité ou de termes, déposez-les ici aussi Rien d'autre n'appartient dans un pied de page d'un seul pager.

Liez le menu à chaque section (la partie dans laquelle la plupart des gens se trompent)

C'est l'étape qui fait trébucher les débutants Les éléments de menu que vous avez mis en place au début (#about, #services(et ainsi de suite) ne faites rien encore, car les sections n'ont pas d'identifiants correspondants.

Voici le correctif, fait une fois par section :

1. Survolez une section, cliquez sur la poignée à six points au milieu pour la sélectionner.
2. Aller à la Avancé onglet dans le panneau de gauche.
3. Faire défiler jusqu'à ID CSS.
4. Tapez l'ID sans le hachage. Donc about'non' #about.

Enregistrer. Répétez pour chaque section à laquelle vous souhaitez que le menu passe Si vous préférez ne pas filer les ancrages à la main, dites sur un long blog au lieu d'une page de destination, publiez un. Si vous préférez ne pas filer les ancrages à la main plugin table des matières construit ces liens de saut pour vous automatiquement.

Puis retournez à Apparence > Menus et confirmez que le lien de chaque élément de menu est la version de hachage (#about, #services, #pricing). Enregistrer le menu.

Rechargez le front-end, cliquez sur un élément de menu et la page doit faire défiler en douceur vers la section correspondante. S'il saute brusquement au lieu de défiler, il manque au thème la règle CSS à défilement en douceur Ajouter ceci à Personnaliser > CSS supplémentaire:

html { scroll-behavior: smooth; }

Fait.

Sauter le travail manuel : commencez à partir d'un kit de modèles

Si vous n'avez pas envie de construire onze sections à partir de zéro, Master Addons expédie plus de 30 exemplaires complets Kits de modèles(en), beaucoup d'entre eux sont des téléavertisseurs pour des secteurs spécifiques (agence, restaurant, portefeuille, SaaS, consultant).

Importez un kit, échangez les images et copiez, ajustez les couleurs pour qu'elles correspondent à votre marque, et vous êtes en direct dans un après-midi au lieu d'une semaine Le comment importer des modèles Elementor la publication couvre l'étape d'importation si vous ne l'avez jamais fait.

C'est aussi ainsi que je recommande aux débutants de commencer Construire à partir d'un modèle de travail, d'apprendre comment chaque section est structurée, puis de peaufiner à partir de là.

Conseils de vitesse et de performance pour les sites d'une page

Étant donné que l'ensemble du site vit sur une seule URL, cette URL doit charger chaque image, police et script pour chaque visiteur. Un téléavertisseur gonflé est un tueur de conversion.

Victoires rapides :

• Compresser chaque image avant de télécharger (TinyPNG, Squoosh, ou un plugin comme Imagify).
• Utiliser le format WebP lorsque c'est possible Le meilleurs plugins WordPress optimiseur d'images roundup couvre les options.
• Chargement paresseux des images inférieures au pli (Elementor gère cela par défaut dans les versions modernes).
• Limiter les polices Web à deux familles, max.
• Minify CSS et JS avec un plugin de mise en cache (LiteSpeed Cache, WP Rocket ou Autoptimize).

Plus dans comment accélérer les sites Web Elementor. Master Addons v3 est trois fois plus rapide que v2 et ne charge le widget CSS et JS que pour les widgets réellement utilisés, ce qui compte plus sur un site à URL unique que sur un site à plusieurs pages.

FAQ

Envelopper

Un site Web d'une page avec Elementor n'est pas difficile Choisissez Bonjour Elementor, définissez la page sur Canvas, créez onze sections (ou moins), attribuez des ID CSS et connectez le menu aux liens de hachage. Fait.

Où Master Addons accélère les choses :

• Widget de menu de navigation avec méga menu et bascule mobile
• Widget Infobox pour les services
• Galerie filtrable pour les portefeuilles
• Table de tarification (gratuite) avec ruban intégré et liste de fonctionnalités
• Contactez Form 7 style sans écrire CSS
• Membres de l'équipe et membres de l'équipe Carrousel
• Plus de 30 kits de modèles complets lorsque vous souhaitez ignorer la construction manuelle

Télécharger le plugin Master Addons gratuit et commencez par la section que vous êtes le moins confiant en construisant à partir de zéro Travaillez vers l'extérieur à partir de là.

Lecture connexe: 100 meilleurs modules complémentaires d'élément · Comment importer des modèles d'éléments · Widgets et extensions · Prix des modules complémentaires principaux