La création d’un site web donnait autrefois l’impression d’être un projet pour lequel il fallait engager quelqu’un. Ce n’est plus le cas.
J’utilise Hostinger Website Builder, et dans ce guide, je vais vous guider à travers l’ensemble du processus, pas à pas, depuis le moment où vous vous connectez jusqu’à celui où votre site est en ligne.
Allons-y.
Qu’est-ce que Hostinger Website Builder ?
Hostinger Website Builder est un créateur de site web par glisser-déposer alimenté par l’IA, intégré directement dans votre compte Hostinger.
Vous n’avez rien à installer, vous n’avez pas besoin de savoir coder, et vous n’avez pas besoin de connaissances en design. Vous décrivez ce que vous voulez, l’IA construit un site complet pour vous, puis vous le personnalisez pour qu’il corresponde à votre marque.
C’est l’une des façons les plus rapides de passer de rien à un site professionnel, entièrement en ligne.
Étape 1 : Connectez-vous et naviguez vers le constructeur
Lorsque vous vous connectez à votre compte Hostinger, vous arrivez sur l’hPanel. C’est le tableau de bord principal de Hostinger, et c’est là que vous gérez tout : vos sites web, domaines, courriels 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îtra en dessous avec deux options : Websites list et Migrations. Cliquez sur Websites list.
Vous êtes maintenant sur la page Websites list, qui affiche tous les sites web connecté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
- Site web personnalisé en PHP/HTML
Vous devez cliquer sur Hostinger Website Builder, décrit comme le « créateur de site web par glisser-déposer alimenté par l’IA ».
Étape 2 : Décrivez votre site web à l’IA
Après avoir sélectionné Hostinger Website Builder, vous arrivez sur un écran de configuration intitulé « Laissez l’IA créer votre présence en ligne ».
C’est ici que vous indiquez à l’IA quel type de site vous voulez créer.
Vous verrez une grande zone de texte avec le texte indicatif « Describe your website or business. ». C’est votre boîte de saisie, et ce que vous y tapez détermine tout ce que l’IA générera pour vous. Plus vous fournissez de détails, meilleur sera le résultat.
Sous la zone de texte, vous remarquerez également une rangée de suggestions rapides. Elles incluent des options telles que « 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 une requête de départ que vous pouvez ensuite modifier et développer.
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 seulement besoin d’un site simple d’une seule page pour vos profils de réseaux sociaux, l’option Link in bio vaut le détour.
Pour la plupart des personnes souhaitant créer un véritable site, cependant, la boîte de saisie de l’IA est le bon point de départ.
Comment rédiger une bonne requête pour l’IA
C’est la partie la plus importante de tout le processus. Considérez la requête à l’IA comme un brief que vous remettez à un designer. Plus vous communiquez clairement votre vision, plus le résultat sera proche de ce que vous souhaitez réellement.
Voici la requête que j’ai utilisée pour ce guide. Je créais un site pour une agence créative :
“Créez un site moderne et professionnel pour une agence créative offrant des services de branding, design graphique, web design et marketing numérique. Le site doit évoquer la créativité, l’audace et la confiance tout en restant épuré et facile à naviguer. Utilisez une mise en page moderne avec des visuels marquants, de bons espacements et une typographie élégante. Incluez les pages suivantes : Accueil, À propos, Services, Portefeuille, Blog et Contact. Sur la page d’Accueil, ajoutez une section d’introduction avec un titre percutant, une courte description axée sur la valeur et un bouton d’appel à l’action clair comme « Démarrez votre projet » ou « Obtenez un devis ». Rédigez un texte simple et persuasif qui explique ce que nous faisons, qui nous aidons et les résultats que nous apportons. Assurez-vous que le site soit adapté aux mobiles, rapide à charger et optimisé pour le référencement de base.”
Remarquez à quel point c’est précis. Cela couvre le secteur, le ton, le style de mise en page, les pages requises, la structure de la page d’accueil et les objectifs de contenu. Ce niveau de détail donne à l’IA une base solide sur laquelle travailler.
Une fois votre description saisie, vous verrez apparaître un bouton Improve description dans le coin supérieur droit de la zone de texte.
Je vous recommande de cliquer dessus avant de soumettre. L’IA développera et affinera votre requête, en ajoutant souvent des éléments auxquels vous n’aviez pas pensé.
Lorsque vous êtes prêt, cliquez sur le bouton violet en forme de flèche (l’icône d’envoi) en bas à droite de la zone de texte pour soumettre votre requête et lancer la génération.
Étape 3 : Attendez que l’IA construise votre site
Après avoir soumis votre requête, l’IA de Hostinger se met immédiatement au travail. Vous verrez une animation de chargement 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 fait beaucoup de choses : elle génère la mise en page de vos pages, rédige le contenu de votre site, sélectionne des images correspondantes dans une banque d’images, construit votre navigation et structure l’ensemble de votre site en fonction de votre requête.
Ne fermez pas l’onglet pendant le chargement. Attendez simplement que le processus se termine.
Étape 4 : Examinez ce que l’IA a construit
Lorsque l’IA a terminé, une prévisualisation de votre nouveau site vous est présentée. C’est l’écran de résultat, et il est vraiment excitant de voir ce qui a été généré.
Le côté gauche de l’écran affiche un aperçu en direct de votre site généré. Le côté droit montre un panneau intitulé « Your idea summary », qui présente un résumé de la requête que vous avez soumise et un bouton « Edit idea » si vous souhaitez revenir en arrière et régénérer avec une requête différente ou mise à jour.
Dans mon cas, l’IA a nommé le site « BoldCraft Studio » et a 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 que j’avais demandées : Home, About, Services, Portfolio, Blog et Contact.
En haut à gauche de l’écran de prévisualisation, vous verrez également deux boutons : Previous versions, qui vous permet de parcourir les designs alternatifs considérés par l’IA, et Rate site, qui vous permet de donner votre avis sur le résultat.
En haut à droite de la prévisualisation, vous verrez des icônes de bascule desktop et mobile. Utilisez-les pour vérifier l’apparence de votre site sur un téléphone avant de continuer. 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édez 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 requête et régénérez. Vous pouvez le faire autant de fois que nécessaire.
Étape 5 : Familiarisez-vous avec l’éditeur
C’est dans l’éditeur que vous passerez le plus de temps. Lorsque vous arrivez pour la première fois, prenez un moment pour comprendre la mise en page avant de commencer à cliquer partout.
L’éditeur se compose de deux zones principales. La grande zone centrale est votre canevas de site, 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, et elle 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 sur votre offre.
- Elements ouvre le panneau de glisser-déposer où vous pouvez ajouter de nouveaux blocs de contenu à n’importe quelle page. J’aborderai cela plus en détail ultérieurement.
- Pages affiche toutes vos pages en un seul endroit. Vous pouvez passer d’une page à l’autre, en ajouter de nouvelles, renommer les pages existantes, modifier leur ordre ou supprimer celles dont vous n’avez pas besoin.
- Styles contrôle le design global de votre site. C’est là que vous définissez vos polices, votre palette de couleurs et les styles de boutons. Toute modification effectuée ici s’applique à l’ensemble du site, ce qui en fait l’endroit idéal pour prendre des décisions de design à grande échelle plutôt que de changer les choses section par section.
- AI tools vous donne accès à l’IA de rédaction et de contenu de Hostinger. Vous pouvez l’utiliser pour réécrire des sections de texte, générer de nouveaux contenus, et plus encore.
- Blog est l’endroit où vous créez et gérez vos articles de blog si votre site en possède un.
- Store est l’endroit pour configurer votre boutique en ligne si vous vendez des produits. Notez que les fonctionnalités eCommerce nécessitent un plan de niveau supérieur.
- SEO ouvre le gestionnaire SEO intégré où vous pouvez définir les balises meta title, description et d’autres détails d’optimisation pour chaque page.
- More développe un second menu avec des outils supplémentaires, notamment 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 bouton de bascule pour prévisualisation desktop et mobile, des boutons annuler et rétablir, un bouton Connect domain, un bouton Preview et le bouton vert Go live.
Étape 6 : Modifiez votre contenu
Vient maintenant la partie où vous personnalisez le site. Cliquez n’importe où sur votre canevas pour commencer à éditer.
Lorsque vous survolez n’importe quelle section de la page, une étiquette bleue apparaît en haut à gauche de cette section indiquant le type d’élément, par exemple « Section » ou « Header ». Parallèlement, une petite barre d’outils flottante apparaît au-dessus de la section avec vos options d’édition.
La barre d’outils de la section vous offre les commandes suivantes de gauche à droite : Edit section ouvre le panneau des réglages de section, où vous pouvez changer l’image ou la couleur d’arrière-plan, ajuster les marges internes (padding) et modifier les options de mise en page. À côté se trouve Generate image, qui ouvre le générateur d’images par IA.
Ensuite, vous avez une icône Dupliquer, un bouton Masquer/Afficher, une icône Supprimer, des flèches Monter et Descendre pour réorganiser les sections, et un menu Plus d’options (trois points).
Pour modifier un texte sur la page, cliquez simplement dessus et commencez à taper. L’élément texte deviendra éditable, et les contrôles de formatage apparaîtront. Vous pouvez changer la taille de la police, la graisse, l’alignement et la couleur directement depuis ces contrôles.
Pour changer une image, cliquez dessus. Vous verrez des options pour la remplacer par une photo de vos propres fichiers, parcourir la bibliothèque d’images libres de Hostinger ou en générer une nouvelle avec l’IA.
Commencez par votre page d’accueil, puis utilisez le panneau Pages pour passer à chaque page supplémentaire et les modifier à votre tour.
Étape 7 : Utilisez le générateur d’images par IA
Une fonctionnalité sur laquelle il vaut la peine de s’attarder est le AI image generator, car il est vraiment utile si vous ne disposez pas de photos professionnelles.
Pour y accéder, survolez n’importe quelle section de votre page et cliquez sur Generate image dans la barre d’outils flottante de la section. Un panneau glissera depuis la droite de l’écran.
Dans le panneau, vous verrez une zone de texte « Image description ». Tapez-y une description de l’image que vous souhaitez créer.
Plus votre description est spécifique 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 vous indiquant si votre description est suffisamment claire.
Par exemple, quand j’ai saisi « 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 a affiché « Great description! » avec les barres de qualité entièrement remplies.
Lorsque vous êtes satisfait de votre description, cliquez sur le bouton Create images. L’IA générera un ensemble d’images parmi lesquelles vous pourrez choisir.
À noter : le générateur d’images par IA nécessite le plan Business ou supérieur. Si vous êtes sur le plan Premium, vous verrez une invite de mise à niveau en bas du panneau.
Étape 8 : Ajoutez de nouveaux éléments à n’importe quelle page
Si vous souhaitez ajouter un bloc de contenu qui n’est pas encore sur 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, notamment Text, Button, Affiliate link, Add to bag, Image, Gallery, Video, Shape, Card, Map, Instagram feed, et Contact form. Pour ajouter l’un de ces éléments à votre page, 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 réglages individuels et à ses options de style.
Cette approche par glisser-déposer signifie que vous n’êtes jamais coincé 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 gauche pour voir toutes vos pages listées en un seul endroit. Vous pouvez cliquer sur n’importe quel nom de page pour passer directement à son édition.
Pour ajouter une nouvelle page, utilisez le bouton plus. Pour réorganiser l’ordre d’apparition des pages dans votre navigation, faites-les glisser vers le haut ou vers le bas dans la liste.
Si vous avez des pages générées par l’IA dont vous n’avez pas besoin, vous pouvez les supprimer depuis ici. De même, si vous avez besoin d’une page que l’IA n’a pas incluse, comme une page Témoignages ou Tarifs, vous pouvez l’ajouter ici, puis la créer à l’aide du panneau Elements.
Étape 10 : Configurez votre SEO
Avant de publier, vous devez configurer votre SEO. C’est une étape que beaucoup de gens sautent, et c’est une erreur.
Prendre 15 minutes pour remplir correctement vos réglages SEO peut vraiment faire la différence quant aux chances que les gens trouvent votre site via Google.
Cliquez sur SEO dans la barre latérale gauche pour ouvrir le panneau SEO, intitulé « Let’s be found on Google (SEO) ».
Le panneau est divisé en deux sections. À gauche, vous verrez la liste de toutes vos pages. À droite, vous trouverez la Website overview, qui affiche le nom de votre entreprise et la langue du site. Cliquez sur Edit pour les mettre à jour si nécessaire.
Sous les informations du site, vous verrez une section intitulée « Some pages require your attention ». Chaque page nécessitant des ajustements est marquée d’une icône d’avertissement orange. Cliquez sur n’importe quelle page dans le panneau de gauche pour ouvrir ses réglages SEO individuels, où vous pourrez rédiger un meta title et une meta description pour cette page spécifique.
Passez en revue 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 ce dont la page parle et fait moins de 160 caractères. Ce sont ces extraits qui apparaissent dans les résultats de recherche Google, alors cela vaut la peine de passer quelques minutes sur chacun d’eux.
É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, vous pouvez le connecter en mettant à jour vos paramètres DNS pour qu’ils pointent vers les serveurs de Hostinger. Si vous ne possédez pas encore de domaine, vous pouvez en acheter un directement depuis Hostinger sur cet écran.
Tant que vous n’aurez pas connecté de domaine, votre site sera accessible via un sous-domaine temporaire de Hostinger, comme yoursite.builder-preview.com. C’est suffisant pour des tests, mais vous voudrez un domaine approprié avant de partager votre site 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 de prévisualisation et vérifiez que tout est correct sur les deux.
Accordez une attention particulière à l’apparence de la section hero de votre page d’accueil sur mobile, au comportement de votre navigation lorsque celle-ci se replie et à l’éventuel recadrage non désiré des images.
Lorsque tout vous convient, retournez dans l’éditeur et cliquez sur le bouton vert Go live en haut à droite. Votre site est maintenant publié et en ligne sur Internet.
Étape 13 : Explorez les intégrations
Une fois votre site en ligne, il est intéressant d’explorer 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 la logistique des commandes, Printful pour créer et vendre des produits personnalisés en impression à la demande, Hostinger Reach pour le marketing par e-mail 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 requête à l’IA. Une requête de deux phrases vous donnera un résultat générique. Une requête détaillée et spécifique, qui aborde votre secteur, votre audience, vos préférences de design, la structure des pages et le ton, vous rapprochera beaucoup plus de ce que vous voulez réellement. Prenez cinq minutes pour rédiger un brief approprié, cela vous fera gagner des heures de retouches par la suite.
Utilisez le bouton Improve description à chaque fois. Il est facile de l’oublier, mais il est vraiment utile. L’IA capte souvent les éléments que vous avez laissés vagues et les transforme en instructions concrètes de design et de contenu.
Retravaillez soigneusement vos textes. L’IA rédige des textes de remplacement corrects, 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 véritable valeur et votre voix authentique.
Vérifiez la vue mobile avant de publier. Hostinger rend automatiquement votre site responsive, mais les images et l’espacement peuvent nécessiter de petits ajustements sur les petits écrans. Prévisualisez toujours sur mobile avant de mettre en ligne.
Remplissez le SEO pour chaque page. Pas seulement pour la page d’accueil. Chaque page de votre site 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 Media library pour rester organisé. Sous More > Media library, vous pouvez téléverser et gérer toutes vos images en un seul endroit. Cela facilite grandement la réutilisation des images sur plusieurs pages et maintient la cohérence de votre site.
Revenez et améliorez au fil du temps. La publication de votre site n’est pas la fin du processus, mais le début. Revenez régulièrement pour mettre à jour votre contenu, ajouter de nouveaux articles de blog et peaufiner vos pages à mesure que votre entreprise évolue.
Hostinger Website Builder supprime presque toutes les barrières qui vous séparaient d’un site professionnel. L’IA s’occupe du plus gros du travail en matière de design et de rédaction, l’éditeur facilite la personnalisation, et les outils SEO et d’intégrations intégrés signifient que vous avez tout ce dont vous avez besoin en un seul endroit.
Suivez les étapes de ce guide et vous pourrez raisonnablement avoir un site en ligne, soigné, opérationnel en moins d’une heure.
