Créer un site web donnait l’impression d’un projet nécessitant de faire appel à un prestataire. Ce n’est plus le cas.
J’utilise Hostinger Website Builder et dans ce guide, je vais vous accompagner pas à pas, depuis votre connexion jusqu’à la mise en ligne de votre site.
C’est parti.
Qu’est-ce que Hostinger Website Builder ?
Hostinger Website Builder est un constructeur de site web par glisser-déposer, propulsé par l’IA et intégré directement à votre compte Hostinger.
Vous n’avez rien à installer, pas besoin de coder ni de posséder des compétences en design. Vous décrivez ce que vous souhaitez, l’IA génère un site complet, puis vous le personnalisez selon votre marque.
C’est l’un des moyens les plus rapides de passer de zéro à un site professionnel et opérationnel.
Étape 1 : Connectez-vous et accédez au constructeur
Quand vous vous connectez à votre compte Hostinger, vous arrivez sur le hPanel. C’est le tableau de bord principal de Hostinger, où vous gérez tout, y compris vos sites web, domaines, e-mails et facturation.
Dans la barre latérale gauche, vous verrez une liste d’options de navigation. Cliquez sur Websites. Un petit menu déroulant apparaît avec deux options : Websites list et Migrations. Cliquez sur Websites list.
Vous êtes maintenant sur la page Websites list, qui affiche tous les sites liés à votre compte.
En haut à droite de la page, vous verrez un bouton violet + Add website. Cliquez dessus.
Un petit menu déroulant apparaît avec quatre options :
- Hostinger Horizons
- WordPress
- Hostinger Website Builder
- Et site web PHP/HTML personnalisé
Vous devez cliquer sur Hostinger Website Builder, décrit comme le « constructeur de site web par glisser-déposer propulsé par l’IA ».
Étape 2 : Décrivez votre site à l’IA
Après avoir sélectionné Hostinger Website Builder, vous arrivez sur un écran de configuration avec le titre « Laissez l’IA créer votre présence en ligne ».
C’est ici que vous indiquez à l’IA le type de site web que vous souhaitez créer.
Vous verrez une grande zone de texte avec comme texte indicatif “Describe your website or business.” C’est votre zone de saisie, et ce que vous y tapez détermine tout ce que l’IA générera. Plus vous serez précis, meilleur sera le résultat.
Sous la zone de texte, vous trouverez également une rangée de suggestions rapides. Elles incluent des options comme “Create a business website”, “Create an online store”, “Design a portfolio”, “Launch an appointments website”, “Start a blog”, “Launch a restaurant website” et “Create a one pager website”.
Cliquer sur l’une d’elles remplit un prompt de base que vous pouvez ensuite modifier et étoffer.
Tout en bas de l’écran, vous verrez deux liens supplémentaires : Pre-made templates et Link in bio website.
Si vous préférez passer l’IA et parcourir des designs existants, cliquez sur Pre-made templates.
Si vous avez juste besoin d’un site simple d’une seule page pour vos profils sociaux, l’option Link in bio vaut le détour.
Pour la plupart des gens qui créent un vrai site, la zone de prompt IA est toutefois le point de départ idéal.
Comment rédiger un bon prompt pour l’IA
C’est la partie la plus cruciale du processus. Considérez le prompt IA comme un brief que vous donnez à un designer. Plus vous exprimerez clairement votre vision, plus le résultat correspondra à vos attentes.
Voici le prompt que j’ai utilisé dans ce guide. Je construisais un site pour une agence créative :
“Créez un site moderne et professionnel pour une agence créative offrant des services de branding, de design graphique, de web design et de marketing digital. Le site doit évoquer créativité, audace et fiabilité tout en restant épuré et facile à naviguer. Utilisez une mise en page moderne avec de forts visuels, un bon espacement et une typographie élégante. Incluez les pages suivantes : Accueil, À propos, Services, Portfolio, Blog et Contact. Sur la page d’accueil, ajoutez une section hero avec un titre percutant, une brève description axée sur la valeur, et un bouton d’appel à l’action clair comme ‘Démarrer votre projet’ ou ‘Obtenir un devis’. Rédigez un texte simple et persuasif qui explique ce que nous faisons, à qui nous nous adressons et les résultats que nous obtenons. Rendez le site adapté aux mobiles, rapide à charger et optimisé pour le SEO de base.”
Vous remarquerez le niveau de précision : cela couvre le secteur, le ton, le style de mise en page, les pages nécessaires, la structure de la page d’accueil et les objectifs de contenu. Ce degré de détail donne à l’IA une base solide.
Une fois votre description saisie, un bouton « Improve description » apparaît en haut à droite de la zone de texte.
Je vous recommande de cliquer dessus avant de soumettre. L’IA va étoffer et affiner votre prompt, en captant souvent des éléments auxquels vous n’aviez pas pensé.
Quand vous êtes prêt, cliquez sur le bouton violet arrow button (l’icône d’envoi) en bas à droite de la zone de texte pour soumettre votre prompt et lancer la génération.
Étape 3 : Attendez que l’IA construise votre site
Après l’envoi de votre prompt, l’IA de Hostinger se met immédiatement au travail. Vous verrez une animation de chargement en plein écran sur fond violet foncé avec le message « Looking for matching pictures… » et une barre de progression indiquant l’avancement.
Cette étape prend généralement entre 30 et 60 secondes. Pendant ce temps, l’IA réalise de nombreuses tâches : générer vos mises en page, rédiger le contenu de votre site, sélectionner des images adaptées dans une bibliothèque, construire votre navigation et structurer l’ensemble du site selon votre prompt.
Ne fermez pas l’onglet pendant le chargement. Patientez simplement.
Étape 4 : Passez en revue ce que l’IA a généré
Une fois l’IA terminée, un aperçu de votre nouveau site s’affiche. C’est l’écran de résultat, et c’est vraiment enthousiasmant de voir ce qui a été créé.
Le côté gauche de l’écran affiche un aperçu en direct de votre site généré. Le côté droit présente un panneau intitulé « Your idea summary », qui résume le prompt que vous avez soumis, ainsi qu’un bouton « Edit idea » si vous voulez revenir en arrière et régénérer avec un prompt différent ou mis à jour.
Dans mon cas, l’IA a nommé le site « BoldCraft Studio » et généré une page d’accueil avec le titre « Crafting Bold Brands That Shine », une description d’accompagnement et deux boutons d’appel à l’action : « Start Now » et « Get Quote ».
La barre de navigation comprenait les six pages demandées : Home, About, Services, Portfolio, Blog et Contact.
En haut à gauche de l’écran d’aperçu, vous verrez également deux boutons : Previous versions, qui vous permet de parcourir les designs alternatifs envisagés par l’IA, et Rate site, qui vous permet de donner votre avis sur le résultat.
En haut à droite de l’aperçu, vous trouverez des icônes de basculement desktop/mobile. Utilisez-les pour vérifier l’affichage mobile avant de poursuivre. C’est une bonne habitude à prendre dès le début.
Si la direction générale vous convient, cliquez sur le bouton violet Continue dans le panneau de droite. Vous accéderez alors à l’éditeur complet où la véritable personnalisation a lieu.
Si le résultat ne vous satisfait pas, cliquez sur Edit idea, révisez votre prompt et régénérez. Vous pouvez répéter l’opération autant de fois que nécessaire.
Étape 5 : Prenez en main l’éditeur
C’est dans l’éditeur que vous passerez la majeure partie de votre temps. À votre arrivée, prenez un moment pour comprendre l’agencement avant de commencer à cliquer.
L’éditeur se compose de deux zones principales.
- La grande zone centrale est votre canevas, où vous pouvez voir et interagir avec votre site en temps réel.
- La barre latérale verticale étroite à gauche est votre panneau de contrôle, qui contient tout ce dont vous avez besoin.
Voici à quoi sert chaque élément de la barre latérale :
- Setup vous donne accès aux paramètres de base de votre site, au domaine connecté et aux informations de votre offre.
- Elements ouvre le panneau glisser-déposer où vous pouvez ajouter de nouveaux blocs de contenu à n’importe quelle page. J’en parlerai plus en détail bientôt.
- Pages affiche toutes vos pages. Vous pouvez passer de l’une à l’autre, en ajouter de nouvelles, renommer, changer l’ordre ou supprimer celles dont vous n’avez pas besoin.
- Styles gère le design global de votre site. C’est ici que vous définissez vos polices, votre palette de couleurs et le style des boutons. Toute modification s’applique sur l’ensemble du site, c’est donc l’endroit idéal pour les décisions de design global plutôt que pour modifier section par section.
- AI tools donne accès aux outils d’IA de Hostinger pour l’écriture et le contenu. Vous pouvez les utiliser pour réécrire des textes, générer de nouveaux contenus, etc.
- Blog c’est l’endroit pour créer et gérer vos articles de blog si votre site en contient.
- Store c’est là que vous configurez votre boutique en ligne si vous vendez des produits. Notez que les fonctionnalités e-commerce nécessitent un plan supérieur.
- SEO ouvre le gestionnaire SEO intégré où vous pouvez définir les balises méta titres, descriptions et autres détails d’optimisation pour chaque page.
- More donne accès à un second menu avec des outils additionnels incluant Appointments, General settings, Integrations, Form submissions, Analytics, Media library, Multi-language support, Manage backups, Export content to WordPress, et Help and Resources.
En haut de l’éditeur, vous trouverez également la barre d’outils principale. De gauche à droite, elle contient : un sélecteur Desktop/Mobile, des boutons annuler/refaire, un bouton Connect domain, un bouton Preview, et le bouton vert Go live.
Étape 6 : Modifiez votre contenu
Vous arrivez à la partie où vous personnalisez votre site. Cliquez n’importe où sur le canevas pour commencer l’édition.
Quand vous survolez une section de la page, une étiquette bleue apparaît en haut à gauche de la section indiquant le type d’élément, par exemple « Section » ou « Header ». Simultanément, une petite barre d’outils flottante apparaît au-dessus de la section avec vos options d’édition.
La barre d’outils de section offre les contrôles suivants, de gauche à droite : Edit section ouvre le panneau de paramètres de la section, où vous pouvez changer l’image de fond ou la couleur, ajuster les marges internes et modifier les options de mise en page.
À côté se trouve Generate image, qui ouvre le générateur d’images IA.
Ensuite, vous avez une icône Dupliquer, un bouton Masquer/Afficher, une icône Supprimer, des flèches Monter/Descendre pour réorganiser les sections, et un menu Plus d’options (trois points).
Pour modifier un texte, cliquez simplement dessus et commencez à taper. L’élément textuel devient éditable et vous verrez apparaître les contrôles de mise en forme. Vous pouvez changer la taille, le poids, l’alignement et la couleur du texte directement depuis ces contrôles.
Pour remplacer une image, cliquez dessus. Vous aurez le choix entre une photo depuis vos fichiers, la bibliothèque d’images de stock de Hostinger ou la création d’une nouvelle image avec l’IA.
Commencez par votre page d’accueil, puis utilisez le panneau Pages pour passer aux autres pages et les modifier à leur tour.
Étape 7 : Utilisez le générateur d’images IA
Une fonctionnalité à ne pas négliger est le AI image generator, particulièrement utile si vous n’avez pas vos propres photos professionnelles.
Pour y accéder, survolez une section de la page et cliquez sur Generate image dans la barre d’outils flottante. Un panneau glissera depuis le côté droit de l’écran.
Dans le panneau, vous verrez une zone de texte « Image description ». Tapez une description de l’image que vous souhaitez créer.
Plus votre description est précise et visuelle, meilleur sera le rendu. Le panneau affiche une limite de 3 000 caractères et un indicateur de qualité en temps réel qui vous indique si votre description est suffisamment détaillée.
Par exemple, quand j’ai tapé « A modern creative agency workspace with designers collaborating around laptops and large screens, displaying branding designs, website mockups, and digital artwork. Bright, clean, and stylish office », le panneau affichait « Great description! » avec les barres de qualité entièrement remplies.
Quand vous êtes satisfait de votre description, cliquez sur le bouton Create images. L’IA génèrera une série d’images parmi lesquelles choisir.
À noter : le générateur d’images IA nécessite le plan Business ou supérieur. Si vous êtes sur le plan Premium, un message d’invitation à passer à la formule supérieure s’affichera en bas du panneau.
Étape 8 : Ajoutez de nouveaux éléments à n’importe quelle page
Si vous voulez ajouter un bloc de contenu absent de votre page, cliquez sur Elements dans la barre latérale gauche. Cela ouvre le panneau « Add elements ».
Vous verrez une grille de tous les éléments disponibles, dont Text, Button, Affiliate link, Add to bag, Image, Gallery, Video, Shape, Card, Map, Instagram feed et Contact form. Pour en ajouter un, faites-le glisser depuis le panneau et déposez-le sur votre canevas à l’endroit souhaité.
Une fois placé, cliquez sur l’élément pour accéder à ses paramètres et options de style.
Cette approche glisser-déposer signifie que vous n’êtes jamais figé dans la mise en page générée par l’IA. Vous pouvez ajouter, supprimer et réorganiser les éléments librement.
Étape 9 : Gérez vos pages
Cliquez sur Pages dans la barre latérale pour voir toutes vos pages répertoriées. Cliquez sur n’importe quel nom de page pour accéder à son édition.
Pour ajouter une nouvelle page, utilisez le bouton plus. Pour réorganiser l’ordre des pages dans votre menu, faites-les glisser vers le haut ou le bas de la liste.
Si l’IA a généré des pages dont vous n’avez pas besoin, vous pouvez les supprimer d’ici. De même, si vous avez besoin d’une page non incluse par l’IA, comme une page Témoignages ou Tarifs, vous pouvez l’ajouter ici puis la construire avec le panneau Elements.
Étape 10 : Configurez votre SEO
Avant de publier, vous devez configurer votre SEO. Beaucoup de gens sautent cette étape, et c’est une erreur.
Consacrer 15 minutes à remplir correctement vos paramètres SEO peut vraiment faire la différence pour que votre site soit trouvé via Google.
Cliquez sur SEO dans la barre latérale pour ouvrir le panneau SEO, intitulé « Let’s be found on Google (SEO). »
Le panneau est divisé en deux. À gauche, la liste de toutes vos pages. À droite, la section Website overview, qui affiche le nom de votre entreprise et la langue du site. Cliquez sur Edit pour les modifier si nécessaire.
Sous les informations du site, vous trouverez une section intitulée « Some pages require your attention. »
Chaque page nécessitant un réglage est marquée d’une icône d’avertissement orange. Cliquez sur une page dans le panneau de gauche pour ouvrir ses paramètres SEO individuels, où vous pouvez rédiger un meta title et une meta description spécifiques.
Traitez chaque page de la liste. Un bon meta title est clair, contient votre mot-clé principal et fait moins de 60 caractères. Une bonne meta description résume le contenu de la page et fait moins de 160 caractères. Ce sont ces extraits qui apparaissent dans les résultats Google, donc prenez quelques minutes pour chacune.
Étape 11 : Connectez votre domaine
Si vous n’avez pas encore connecté de domaine personnalisé à votre site, c’est le moment. Cliquez sur le bouton Connect domain dans la barre d’outils supérieure de l’éditeur.
Vous avez deux options. Si vous possédez déjà un domaine, connectez-le en modifiant vos paramètres DNS pour pointer vers les serveurs Hostinger. Si vous n’en avez pas, vous pouvez en acheter un directement depuis Hostinger sur ce même écran.
Jusqu’à la connexion d’un domaine, votre site restera accessible via un sous-domaine temporaire Hostinger, comme yoursite.builder-preview.com. Cela convient pour des tests, mais veillez à obtenir un vrai domaine avant de publier publiquement.
Étape 12 : Prévisualisez votre site et mettez-le en ligne
Vous y êtes presque. Avant de publier, cliquez sur le bouton Preview dans la barre d’outils en haut à droite.
Cela ouvre une prévisualisation plein écran de l’apparence exacte de votre site pour les visiteurs. Basculez entre les vues desktop et mobile à l’aide des icônes en haut de l’écran et vérifiez que tout s’affiche correctement sur les deux.
Portez une attention particulière à la section hero de la page d’accueil sur mobile, à la façon dont la navigation se replie et au recadrage éventuel des images.
Lorsque vous êtes satisfait, retournez dans l’éditeur et cliquez sur le bouton vert Go live en haut à droite. Votre site est désormais publié et en ligne.
Étape 13 : Explorez les intégrations
Une fois votre site en ligne, explorez les intégrations disponibles. Allez dans More > Integrations dans la barre latérale gauche.
Le panneau Integrations vous permet de connecter votre site à des outils et services externes. Les options actuelles incluent Shippo pour générer des étiquettes d’expédition et gérer le traitement des commandes, Printful pour créer et vendre des produits personnalisés en impression à la demande, Hostinger Reach pour l’email marketing et l’envoi de newsletters à vos abonnés, Google Ads pour lancer des campagnes publicitaires payantes, et Custom code si vous souhaitez ajouter votre propre HTML, CSS ou JavaScript pour étendre les fonctionnalités de votre site.
Pour activer une intégration, cliquez sur Get started à côté, suivez les étapes de connexion, puis mettez à jour votre site en le republiant.
Conseils pour tirer le meilleur parti de Hostinger Website Builder
Soyez généreux dans votre prompt IA. Un prompt de deux phrases donnera un résultat générique. Un prompt détaillé et spécifique, couvrant votre secteur, votre audience, vos préférences de design, la structure de vos pages et le ton, vous rapprochera de ce que vous souhaitez vraiment. Prenez cinq minutes pour rédiger un brief complet, cela vous fera gagner des heures de retouches.
Utilisez le bouton Improve description à chaque fois. Il est facile de l’ignorer, mais il est vraiment utile. L’IA saisit souvent les éléments que vous avez laissés vagues et les transforme en instructions concrètes de design et de contenu.
Soignez attentivement votre rédaction. L’IA génère un contenu de remplacement correct, mais elle ne connaît pas votre entreprise comme vous. Passez en revue chaque page et réécrivez le texte pour refléter vos services réels, votre vraie valeur et votre voix authentique.
Vérifiez la vue mobile avant de publier. Hostinger rend automatiquement votre site responsive, mais les images et espacements nécessitent parfois des ajustements mineurs sur petits écrans. Prévisualisez toujours en mobile avant la mise en ligne.
Remplissez le SEO pour chaque page. Pas seulement la page d’accueil. Chaque page mérite un meta title et une meta description appropriés. Cela prend quelques minutes par page et c’est l’une des actions les plus simples pour améliorer votre visibilité dans les résultats de recherche.
Utilisez la médiathèque pour rester organisé. Sous More > Media library, vous pouvez importer et gérer toutes vos images en un seul endroit. Cela facilite grandement la réutilisation d’images sur plusieurs pages et assure la cohérence de votre site.
Revenez améliorer au fil du temps. Publier votre site n’est pas la fin, c’est le début. Revenez régulièrement pour mettre à jour votre contenu, ajouter de nouveaux articles de blog et affiner vos pages au fur et à mesure de l’évolution de votre entreprise.
Hostinger Website Builder supprime presque toutes les barrières qui se dressaient entre vous et un site professionnel. L’IA s’occupe du gros du travail en design et rédaction, l’éditeur facilite la personnalisation, et les outils intégrés SEO et intégrations vous offrent tout ce dont vous avez besoin au même endroit.
Suivez les étapes de ce guide et vous pourrez, de manière réaliste, avoir un site en ligne et soigné en moins d’une heure.
