Créer un site web donnait autrefois l’impression d’un projet pour lequel il fallait embaucher quelqu’un. Ce n’est plus le cas.
J’utilise Hostinger Website Builder, et dans ce guide, je vais vous accompagner tout au long du processus, étape par étape, depuis le moment où vous vous connectez jusqu’à la mise en ligne de votre site.
Allons-y.
Qu’est-ce que Hostinger Website Builder ?
Hostinger Website Builder est un constructeur de site web par glisser-déposer alimenté par l’IA, intégré directement à votre compte Hostinger.
Vous n’avez rien à installer, vous n’avez pas besoin de connaissances en codage et vous n’avez pas besoin de compétences en design. Vous décrivez ce que vous souhaitez, l’IA génère un site complet pour vous, puis vous le personnalisez pour qu’il corresponde à votre marque.
C’est l’un des moyens les plus rapides pour passer de rien à un site entièrement en ligne et à l’apparence professionnelle.
Étape 1 : Connectez-vous et allez dans le constructeur
Lorsque vous vous connectez à votre compte Hostinger, vous arrivez sur l’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 Sites web. Un petit menu déroulant apparaît avec deux options : Liste des sites et Migrations. Cliquez sur Liste des sites.
Vous êtes maintenant sur la page Liste des sites, qui affiche tous les sites 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
- Et site PHP/HTML personnalisé
Vous devez cliquer sur Hostinger Website Builder, décrit comme le « constructeur de site web par glisser-déposer alimenté 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 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 construire.
Vous verrez une grande zone de texte avec le texte d’espace réservé « Décrivez votre site ou votre entreprise ». C’est votre boîte de saisie de prompt, et ce que vous tapez ici détermine tout ce que l’IA générera pour vous. Plus vous donnerez de détails, meilleur sera le résultat.
Sous la zone de texte, vous remarquerez également une rangée de puces de suggestions rapides. Celles-ci incluent des options telles que « Créer un site d’entreprise », « Créer une boutique en ligne », « Concevoir un portfolio », « Lancer un site de prise de rendez-vous », « Démarrer un blog », « Lancer un site de restaurant » et « Créer un site one page ».
Cliquer sur l’une d’elles remplit un prompt de départ que vous pouvez ensuite modifier et étendre.
En bas de l’écran, vous verrez deux liens supplémentaires : Modèles prédéfinis et Site Link in bio.
Si vous préférez passer l’IA et parcourir des designs existants, cliquez sur Modèles prédéfinis.
Si vous avez juste besoin d’un site simple d’une seule page pour vos profils de réseaux sociaux, l’option Link in bio vaut le coup d’œil.
Pour la plupart des personnes créant un vrai site, toutefois, la boîte de prompt IA est l’endroit idéal pour commencer.
Comment rédiger un bon prompt pour l’IA
C’est la partie la plus importante de tout le processus. Considérez le prompt IA comme un brief que vous donnez à un designer. Plus vous communiquez clairement votre vision, plus le résultat sera proche de ce que vous souhaitez réellement.
Voici le prompt que j’ai utilisé pour 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, design graphique, web design et marketing digital. Le site doit être créatif, audacieux et digne de confiance, tout en restant épuré et facile à naviguer. Utilisez une mise en page moderne avec de fortes visuels, un bon espacement et une typographie stylée. Incluez les pages suivantes : Accueil, À propos, Services, Portfolio, Blog et Contact. Sur la page d’accueil, ajoutez une section héros avec un titre percutant, une brève description axée sur la valeur et un bouton d’appel à l’action clair comme « Commencez votre projet » ou « Demandez un devis ». Rédigez un contenu simple et persuasif qui explique ce que nous faisons, qui nous aidons et les résultats que nous obtenons. Assurez-vous que le site est adapté aux mobiles, rapide à charger et optimisé pour le SEO de base.”
Remarquez à quel point c’est spécifique. 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 pour travailler.
Une fois votre description tapée, vous verrez un bouton « Améliorer la description » apparaître en haut à droite de la zone de texte.
Je recommande de cliquer dessus avant de soumettre. L’IA élargit et affine votre prompt, en ajoutant souvent des éléments auxquels vous n’aviez pas pensé.
Lorsque vous êtes prêt, cliquez sur le bouton violet flèche (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 avoir soumis 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 « Recherche d’images correspondantes… » et une barre de progression indiquant l’avancement.
Cette étape prend généralement entre 30 et 60 secondes. Pendant ce temps, l’IA génère vos mises en page, rédige votre contenu, sélectionne des images adéquates dans une bibliothèque de stock, construit votre navigation et structure l’ensemble de votre site en fonction de votre prompt.
Ne fermez pas l’onglet pendant le chargement. Attendez simplement que le processus soit terminé.
Étape 4 : Examinez ce que l’IA a construit
Lorsque l’IA a terminé, un aperçu de votre nouveau site s’affiche. C’est l’écran de résultat, et il est vraiment enthousiasmant 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 présente un panneau intitulé « Résumé de votre idée », qui montre un résumé du prompt que vous avez soumis et un bouton « Modifier l’idée » si vous souhaitez revenir en arrière et régénérer avec un prompt différent ou mis à jour.
Dans mon cas, l’IA avait nommé le site « BoldCraft Studio » et généré une page d’accueil avec le titre « Crafting Bold Brands That Shine », une description de soutien et deux boutons d’appel à l’action : « Start Now » et « Get Quote ».
La barre de navigation incluait les six pages demandées : Accueil, À propos, Services, Portfolio, Blog et Contact.
En haut à gauche de l’aperçu, vous verrez également deux boutons : Versions précédentes, qui vous permet de faire défiler les designs alternatifs envisagés par l’IA, et Noter le site, qui vous permet de donner votre avis sur le résultat.
En haut à droite de l’aperçu, vous verrez des icônes pour basculer entre la vue bureau et mobile. Utilisez-les pour vérifier l’affichage sur téléphone avant de continuer. C’est une bonne habitude à prendre dès le départ.
Si la direction générale vous convient, cliquez sur le bouton violet Continuer dans le panneau de droite. Cela vous mène à l’éditeur complet où la véritable personnalisation commence.
Si vous n’êtes pas satisfait du résultat, cliquez sur Modifier l’idée, révisez votre prompt 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 la majeure partie de votre temps. Lorsque vous y arriverez, prenez un moment pour comprendre la disposition avant de commencer à cliquer partout.
L’éditeur comporte 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 étroite à gauche est votre panneau de contrôle, qui contient tout ce dont vous avez besoin.
Voici la fonction de chaque élément de la barre latérale :
- Configuration donne accès aux paramètres de base de votre site, au domaine connecté et aux informations de votre abonnement.
- Éléments ouvre le panneau de glisser-déposer où vous pouvez ajouter de nouveaux blocs de contenu à n’importe quelle page. J’y reviendrai plus en détail sous peu.
- Pages affiche toutes vos pages en un seul endroit. Vous pouvez passer d’une page à l’autre, en ajouter, renommer, réorganiser ou supprimer celles dont vous n’avez pas besoin.
- Styles contrôle le design global de votre site. C’est ici que vous définissez vos polices, votre palette de couleurs et le style des boutons. Tout changement ici s’applique à l’ensemble du site, c’est donc l’endroit pour prendre des décisions de design globales plutôt que de modifier section par section.
- Outils IA donne accès aux outils d’écriture et de contenu AI de Hostinger. Vous pouvez les utiliser pour réécrire des sections de texte, générer du nouveau contenu, et plus encore.
- Blog est l’endroit où vous créez et gérez les articles de blog si votre site en possède un.
- Boutique est l’endroit où vous configurez votre boutique en ligne si vous vendez des produits. Notez que les fonctionnalités e-commerce nécessitent un abonnement 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.
- Plus déploie un second menu avec des outils supplémentaires, dont Rendez-vous, Paramètres généraux, Intégrations, Soumissions de formulaires, Analytique, Bibliothèque média, Support multilingue, Gestion des sauvegardes, Export de contenu vers WordPress, et Aide et ressources.
En haut de l’éditeur, vous trouverez aussi la barre d’outils principale. De gauche à droite : un toggle bureau/mobile, les boutons annuler et refaire, un bouton Connecter domaine, un bouton Aperçu et le bouton vert Mettre en ligne.
Étape 6 : Modifiez votre contenu
Voici la partie où vous personnalisez le site. Cliquez n’importe où sur le canevas pour commencer à éditer.
Lorsque vous survolez une section, une étiquette bleue apparaît en haut à gauche de cette section, indiquant le type d’élément, par exemple « Section » ou « En-tête ». En même temps, une petite barre d’outils flottante apparaît au-dessus avec vos options d’édition.
La barre d’outils de section vous offre, de gauche à droite : Éditer la section ouvre le panneau des paramètres de section, où vous pouvez changer l’image ou la couleur de fond, ajuster les marges internes et modifier les options de mise en page.
Ensuite vient Générer une image, qui ouvre le générateur d’images IA.
Viennent ensuite les icônes Dupliquer, Masquer/Afficher, Supprimer, les flèches Monter/Descendre pour réorganiser les sections, et un menu à trois points pour Plus d’options.
Pour modifier un texte, cliquez simplement dessus et commencez à taper. L’élément texte devient modifiable et les contrôles de mise en forme apparaissent. Vous pouvez changer la taille, le poids, l’alignement et la couleur de la police directement depuis ces contrôles.
Pour changer une image, cliquez dessus. Vous verrez des options pour la remplacer par une de vos images, parcourir la bibliothèque de stock de Hostinger ou en générer une nouvelle avec l’IA.
Commencez par modifier votre page d’accueil, puis utilisez le panneau Pages pour passer à chaque page supplémentaire et les éditer à leur tour.
Étape 7 : Utilisez le générateur d’images IA
Une fonctionnalité qui mérite qu’on s’y attarde est le générateur d’images IA, car il est vraiment utile si vous n’avez pas de photos professionnelles.
Pour y accéder, survolez une section et cliquez sur Générer une image dans la barre d’outils flottante. Un panneau glissera depuis la droite de l’écran.
Dans le panneau, vous verrez une zone de texte « Description de l’image ». Tapez une description de l’image que vous souhaitez créer.
Plus votre description est spécifique et visuelle, meilleur sera le résultat. Le panneau affiche une limite de 3000 caractères et un indicateur de qualité en temps réel qui vous indique si votre description est suffisamment précise.
Par exemple, quand j’ai tapé « Un espace de travail moderne d’une agence créative avec des designers collaborant autour d’ordinateurs portables et d’écrans affichant des designs de branding, des maquettes de sites et des illustrations numériques. Bureau lumineux, épuré et stylé », le panneau affichait « Excellente description ! » avec la barre de qualité entièrement remplie.
Lorsque vous êtes satisfait de votre description, cliquez sur Créer des images. L’IA vous proposera une sélection d’images parmi lesquelles choisir.
Notez que le générateur d’images 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 inexistant sur votre page, cliquez sur Éléments dans la barre latérale gauche. Le panneau « Ajouter des éléments » s’ouvrira.
Vous verrez une grille de tous les éléments disponibles, notamment Texte, Bouton, Lien d’affiliation, Ajouter au panier, Image, Galerie, Vidéo, Forme, Carte, Carte Google, Flux Instagram et Formulaire de contact. Pour ajouter l’un de ces éléments à votre page, faites-le glisser depuis le panneau et déposez-le où vous le souhaitez sur le canevas.
Une fois placé, cliquez sur l’élément pour accéder à ses réglages et options de style individuelles.
Cette approche par glisser-déposer signifie que vous n’êtes jamais enfermé dans la mise en page générée par l’IA. Vous pouvez ajouter, supprimer et réorganiser librement les éléments.
Étape 9 : Gérez vos pages
Cliquez sur Pages dans la barre latérale gauche pour voir toutes vos pages listées. Vous pouvez cliquer sur un nom de page pour passer directement à l’édition de cette page.
Pour ajouter une nouvelle page, utilisez le bouton plus. Pour réorganiser l’ordre d’affichage dans la navigation, faites glisser les pages vers le haut ou vers le bas dans la liste.
Si certaines pages générées par l’IA ne vous sont pas utiles, vous pouvez les supprimer d’ici. De même, si vous avez besoin d’une page non incluse, comme Témoignages ou Tarifs, vous pouvez l’ajouter ici et la construire à l’aide du panneau Éléments.
Étape 10 : Configurez votre SEO
Avant de publier, vous devez configurer votre SEO. C’est une étape que beaucoup de gens omettent, et c’est une erreur.
Prendre 15 minutes pour remplir correctement vos réglages SEO peut faire une réelle différence pour que les gens trouvent votre site via Google.
Cliquez sur SEO dans la barre latérale gauche pour ouvrir le panneau SEO, intitulé « Soyons trouvés sur Google (SEO) ».
Le panneau est divisé en deux sections. À gauche, vous verrez la liste de toutes vos pages. À droite, vous verrez l’aperçu du site, qui affiche le nom de votre entreprise et la langue du site. Cliquez sur Modifier pour les mettre à jour si nécessaire.
Sous les informations du site, vous verrez une section intitulée « Certaines pages nécessitent votre attention ».
Chaque page nécessitant du travail est marquée par une icône d’avertissement orange. Cliquez sur une page dans le panneau gauche pour ouvrir ses réglages SEO individuels, où vous pouvez rédiger une balise meta title et une meta description spécifiques à cette page.
Travaillez 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 les extraits qui apparaissent dans les résultats de recherche Google, alors prenez quelques minutes pour chaque page.
É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 Connecter domaine dans la barre d’outils en haut de l’éditeur.
Vous avez deux options. Si vous possédez déjà un domaine, vous pouvez le connecter en mettant à jour vos DNS pour pointer vers les serveurs de Hostinger. Si vous n’en avez pas, vous pouvez en acheter un directement depuis Hostinger sur cet écran.
Tant que vous n’avez pas connecté de domaine, votre site sera accessible via un sous-domaine temporaire Hostinger, par exemple votresite.builder-preview.com. Cela convient pour tester, mais vous voulez un vrai domaine avant de partager votre site publiquement.
Étape 12 : Prévisualisez et mettez en ligne
Vous y êtes presque. Avant de publier, cliquez sur le bouton Aperçu dans la barre d’outils en haut à droite.
Cela ouvre une prévisualisation plein écran de la façon dont votre site apparaîtra aux visiteurs. Basculez entre les vues bureau et mobile à l’aide des icônes en haut de l’écran de prévisualisation et vérifiez que tout est en ordre sur les deux.
Portez une attention particulière à l’apparence de la section héros sur mobile, à la manière dont la navigation se replie et à l’éventuel recadrage non souhaité des images.
Lorsque tout vous satisfait, revenez à l’éditeur et cliquez sur le bouton vert Mettre en ligne en haut à droite. Votre site est maintenant publié et accessible sur Internet.
Étape 13 : Découvrez les intégrations
Une fois votre site en ligne, il est utile d’explorer les intégrations disponibles. Allez dans Plus > Intégrations dans la barre latérale gauche.
Le panneau Intégrations 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 en impression à la demande, Hostinger Reach pour l’email marketing et l’envoi de newsletters, Google Ads pour lancer des campagnes publicitaires payantes, et Code personnalisé si vous voulez ajouter votre propre HTML, CSS ou JavaScript pour étendre les fonctionnalités de votre site.
Pour activer une intégration, cliquez sur Commencer à 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 avec 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 des pages et le ton de la voix fournira quelque chose de bien plus proche de ce que vous souhaitez réellement. Passez cinq minutes à rédiger un brief complet et vous gagnerez des heures d’édition par la suite.
Utilisez le bouton Améliorer la description à chaque fois. Il est facile de l’oublier, mais il est vraiment utile. L’IA repère souvent les zones floues et les transforme en instructions de design et de contenu concrètes.
Relisez attentivement vos textes. L’IA rédige un contenu de substitution correct, mais elle ne connaît pas votre entreprise comme vous. Parcourez 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 l’espacement peuvent nécessiter des ajustements mineurs sur les petits écrans. Prévisualisez toujours en mobile avant de mettre en ligne.
Remplissez le SEO pour chaque page. Pas seulement la page d’accueil. Chaque page mérite une balise meta title et une meta description soignées. 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 bibliothèque média pour rester organisé. Sous Plus > Bibliothèque média, vous pouvez télécharger et gérer toutes vos images au même endroit. Cela facilite grandement la réutilisation des images sur plusieurs pages et maintient la cohérence de votre site.
Revenez améliorer au fil du temps. Publier votre site n’est pas la fin du processus, c’est le début. Revenez régulièrement pour mettre à jour votre contenu, ajouter de nouveaux articles de blog et affiner vos pages à mesure que votre entreprise évolue.
Hostinger Website Builder élimine presque toutes les barrières qui vous séparaient autrefois d’un site web professionnel. L’IA prend en charge le gros du design et de la rédaction, l’éditeur simplifie la personnalisation, et les outils intégrés de SEO et d’intégrations vous offrent tout ce dont vous avez besoin en un seul endroit.
Suivez les étapes de ce guide et vous pouvez raisonnablement avoir un site en ligne et soigné en moins d’une heure.
