Un tempo creare un sito web sembrava un progetto per cui dovevi assumere qualcuno. Non più.
Ho utilizzato Hostinger Website Builder, e in questa guida ti guiderò attraverso l’intero processo, passo dopo passo, dal momento in cui effettui l’accesso a quando il tuo sito sarà online.
Iniziamo.
Cos’è Hostinger Website Builder?
Hostinger Website Builder è un costruttore di siti web con intelligenza artificiale e interfaccia drag-and-drop integrato direttamente nel tuo account Hostinger.
Non devi installare nulla, non devi conoscere il codice e non ti serve una formazione in design. Descrivi ciò che desideri, l’AI crea un sito completo per te e poi lo personalizzi per adattarlo al tuo marchio.
È uno dei modi più veloci per passare da zero a un sito professionale completamente online.
Passaggio 1: accedi e vai al builder
Quando accedi al tuo account Hostinger, arrivi sulla hPanel. Questo è il pannello di controllo principale di Hostinger, dove gestisci tutto, dai siti web ai domini, dalle email alla fatturazione.
Nella barra laterale sinistra vedrai l’elenco delle opzioni di navigazione. Clicca su Siti web. Sotto apparirà un piccolo menu a tendina con due opzioni: Elenco siti web e Migrazioni. Clicca su Elenco siti web.
Ora sei nella pagina Elenco siti web, che mostra tutti i siti collegati al tuo account.
In alto a destra, vedrai un pulsante viola + Aggiungi sito web. Cliccalo.
Si aprirà un piccolo menu a tendina con quattro opzioni:
- Hostinger Horizons
- WordPress
- Hostinger Website Builder
- E sito PHP/HTML personalizzato
Devi cliccare Hostinger Website Builder, descritto come “costruttore di siti web AI-powered drag-and-drop”.
Passaggio 2: descrivi il tuo sito all’AI
Dopo aver selezionato Hostinger Website Builder, verrai portato a una schermata di configurazione con il titolo “Lascia che l’AI crei la tua presenza online.”
Qui comunichi all’AI che tipo di sito vuoi creare.
Vedrai una grande casella di testo con il testo segnaposto “Describe your website or business.” Questo è il tuo prompt e ciò che scrivi qui determina tutto ciò che l’AI genera per te. Più dettagli fornisci, migliore sarà il risultato.
Sotto alla casella di testo, noterai anche una riga di suggerimenti rapidi. Include opzioni come “Create a business website,” “Create an online store,” “Design a portfolio,” “Launch an appointments website,” “Start a blog,” “Launch a restaurant website,” e “Create a one pager website.”
Cliccando su uno di questi verrà inserito un prompt di partenza che puoi poi modificare ed espandere.
In fondo alla schermata vedrai due link aggiuntivi: Modelli predefiniti e Sito link in bio.
Se preferisci saltare l’AI e sfogliare design esistenti, clicca Modelli predefiniti.
Se ti serve solo una pagina singola per i tuoi profili social, vale la pena dare un’occhiata all’opzione Link in bio.
Per la maggior parte delle persone che costruiscono un vero sito web, però, la casella del prompt AI è il posto giusto da cui partire.
Come scrivere un buon prompt per l’AI
Questa è la parte più importante di tutto il processo. Pensa al prompt come a un brief che dai a un designer. Più chiaro comunichi la tua visione, più il risultato sarà vicino a ciò che desideri realmente.
Ecco il prompt che ho usato per questa guida. Stavo costruendo un sito per un’agenzia creativa:
“Build a modern, professional website for a creative agency that offers branding, graphic design, web design, and digital marketing services. The website should feel creative, bold, and trustworthy while staying clean and easy to navigate. Use a modern layout with strong visuals, good spacing, and stylish typography. Include the following pages: Home, About, Services, Portfolio, Blog, and Contact. On the Home page, add a hero section with a powerful headline, short value-focused description, and a clear call-to-action button like ‘Start Your Project’ or ‘Get a Quote.’ Write simple, persuasive copy that explains what we do, who we help, and the results we deliver. Make the website mobile-friendly, fast-loading, and optimized for basic SEO.”
Nota quanto è specifico. Copre il settore, il tono, lo stile di layout, le pagine richieste, la struttura della homepage e gli obiettivi di contenuto. Quel livello di dettagli fornisce all’AI una solida base da cui partire.
Una volta digitata la tua descrizione, noterai un pulsante “Migliora descrizione” in alto a destra nella casella di testo.
Consiglio di cliccarlo prima di inviare. L’AI espanderà e perfezionerà il tuo prompt, spesso includendo cose che non avevi pensato di menzionare.
Quando sei pronto, clicca il pulsante viola freccia (l’icona di invio) in basso a destra nella casella di testo per inviare il prompt e avviare la generazione.
Passaggio 3: aspetta che l’AI costruisca il tuo sito
Dopo aver inviato il prompt, l’AI di Hostinger inizia subito a lavorare. Vedrai un’animazione a schermo intero su sfondo viola scuro con il messaggio “Looking for matching pictures…” e una barra di progresso che mostra quanto è avanzato il processo.
Questa fase normalmente richiede tra i 30 e i 60 secondi. Durante questo tempo, l’AI sta compiendo diverse operazioni: genera i layout delle pagine, scrive i testi, seleziona immagini coerenti da una libreria stock, costruisce la navigazione e struttura l’intero sito in base al tuo prompt.
Non chiudere la scheda mentre carica. Aspetta e lascialo lavorare.
Passaggio 4: rivedi ciò che l’AI ha creato
Quando l’AI termina, ti verrà mostrata un’anteprima del tuo nuovo sito. Questa è la schermata di risultato, ed è davvero emozionante vedere cosa è stato generato.
Sulla sinistra dello schermo vedrai un’anteprima live del sito generato. Sulla destra c’è un pannello chiamato “Riepilogo della tua idea”, che mostra il riassunto del prompt inviato e un pulsante “Modifica idea” se vuoi tornare indietro, aggiornare il prompt e rigenerare.
Nel mio caso, l’AI ha chiamato il sito “BoldCraft Studio” e ha creato una homepage con il titolo “Crafting Bold Brands That Shine”, una descrizione di supporto e due call-to-action: “Start Now” e “Get Quote.”
La barra di navigazione includeva tutte e sei le pagine richieste: Home, About, Services, Portfolio, Blog e Contact.
In alto a sinistra nella schermata di anteprima vedrai due pulsanti: Versioni precedenti, che ti permette di sfogliare design alternativi considerati dall’AI, e Valuta sito, che ti consente di lasciare feedback sul risultato.
In alto a destra dell’anteprima ci sono le icone per desktop e mobile. Usale per verificare in anticipo come il tuo sito appare su un telefono prima di procedere. È buona abitudine farlo subito.
Se sei soddisfatto della direzione generale, clicca il pulsante viola Continua nel pannello a destra. Questo ti porterà nell’editor completo dove avviene la vera personalizzazione.
Se non sei soddisfatto, clicca Modifica idea, rivedi il prompt e rigenera. Puoi farlo tutte le volte che vuoi.
Passaggio 5: familiarizza con l’editor
È nell’editor che trascorrerai la maggior parte del tempo. Appena ci entri, prenditi un momento per capire la struttura prima di iniziare a cliccare in giro.
L’editor ha due aree principali.
- La grande area centrale è la tela del tuo sito, dove puoi vedere e interagire con il sito in tempo reale.
- La stretta barra laterale verticale a sinistra è il pannello di controllo, contenente tutto ciò di cui hai bisogno.
Ecco cosa fa ogni voce nella barra laterale:
- Impostazioni ti dà accesso alle impostazioni di base del sito, al dominio collegato e alle informazioni sul piano.
- Elementi apre il pannello drag-and-drop dove puoi aggiungere nuovi blocchi di contenuto a qualsiasi pagina. Ne parlerò più in dettaglio tra poco.
- Pagine mostra tutte le pagine in un unico posto. Puoi passare da una pagina all’altra, aggiungerne di nuove, rinominarle, cambiare l’ordine o eliminarle.
- Stili controlla il design globale del sito. Qui imposti i font, la palette di colori e lo stile dei pulsanti. Qualsiasi modifica qui comprende tutto il sito, quindi è il modo giusto per applicare decisioni di design generali anziché modifiche sezione per sezione.
- Strumenti AI ti dà accesso alle AI di scrittura e contenuto di Hostinger. Puoi usarle per riscrivere parti di testo, generarne di nuove e altro ancora.
- Blog è dove crei e gestisci i post del blog, se il tuo sito ne include uno.
- Negozio è dove configuri il tuo e-commerce se vendi prodotti. Nota che le funzionalità e-commerce richiedono un piano di livello superiore.
- SEO apre il gestore SEO integrato dove puoi impostare titoli meta, descrizioni e altri dettagli di ottimizzazione per ogni pagina.
- Altro si espande in un secondo menu con strumenti aggiuntivi come Appuntamenti, Impostazioni generali, Integrazioni, Invii moduli, Analytics, Libreria media, Supporto multilingua, Gestione backup, Esporta contenuti in WordPress e Guida e risorse.
In alto nell’editor troverai anche la barra degli strumenti principale. Da sinistra a destra contiene: toggle anteprima desktop e mobile, pulsanti annulla e ripeti, un pulsante Collega dominio, un pulsante Anteprima e il pulsante verde Pubblica.
Passaggio 6: modifica i tuoi contenuti
Ora arriva la parte in cui rendi il sito davvero tuo. Clicca su qualsiasi punto della tela per iniziare a modificare.
Quando passi il mouse su una sezione della pagina, comparirà un’etichetta blu in alto a sinistra indicando il tipo di elemento, ad esempio “Section” o “Header”. Contemporaneamente, un piccolo toolbar fluttuante apparirà sopra la sezione con le opzioni di modifica.
La toolbar della sezione ti offre i seguenti controlli da sinistra a destra: Modifica sezione apre il pannello delle impostazioni della sezione, dove puoi cambiare immagine di sfondo o colore, regolare i padding e modificare le opzioni di layout.
Accanto c’è Genera immagine, che apre il generatore di immagini AI.
Poi trovi le icone Duplica, Nascondi/Mostra, Elimina, le frecce Sposta su e Sposta giù per riordinare le sezioni e un menu a tre puntini con altre opzioni.
Per modificare un testo, clicca direttamente su di esso e inizia a digitare. L’elemento di testo diventa modificabile e appariranno i controlli di formattazione. Puoi cambiare dimensione, peso, allineamento e colore del font direttamente da questi controlli.
Per cambiare un’immagine, cliccaci sopra. Vedrai opzioni per sostituirla con una foto caricata da te, sfogliare la libreria stock di Hostinger o generarne una nuova con l’AI.
Lavora prima sulla homepage, poi usa il pannello Pagine per passare alle varie pagine aggiuntive e modificare anche quelle.
Passaggio 7: usa il generatore di immagini AI
Una funzionalità che vale la pena approfondire è il generatore di immagini AI, perché è davvero utile se non hai foto professionali tue.
Per accedervi, passa con il mouse su una sezione e clicca Genera immagine nella toolbar fluttuante. Si aprirà un pannello scorrevole dal lato destro.
Nel pannello vedrai una casella “Descrizione immagine”. Digita la descrizione dell’immagine che vuoi creare.
Più dettagliata e visiva è la descrizione, migliore sarà il risultato. Il pannello mostra un limite di 3.000 caratteri e un indicatore di qualità in tempo reale che ti avvisa se la descrizione è abbastanza valida.
Ad esempio, quando ho digitato “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,” il pannello mostrava “Great description!” con le barre di qualità al massimo.
Quando sei soddisfatto, clicca Crea immagini. L’AI genererà una serie di immagini tra cui scegliere.
Una cosa da sapere: il generatore di immagini AI richiede il piano Business o superiore. Se sei sul piano Premium, vedrai un prompt per eseguire l’upgrade in fondo al pannello.
Passaggio 8: aggiungi nuovi elementi a qualsiasi pagina
Se vuoi aggiungere un blocco di contenuto non presente nella pagina, clicca Elementi nella barra laterale sinistra. Si aprirà il pannello “Aggiungi elementi.”
Vedrai una griglia di tutti gli elementi disponibili, tra cui Testo, Pulsante, Link affiliato, Aggiungi al carrello, Immagine, Galleria, Video, Forma, Scheda, Mappa, Feed Instagram e Modulo di contatto. Per aggiungerne uno, trascinalo dal pannello e rilascialo sulla tela nel punto desiderato.
Una volta aggiunto, clicca sull’elemento per accedere alle impostazioni e opzioni di stile individuali.
Questo approccio drag-and-drop significa che non sei mai vincolato al layout generato dall’AI. Puoi aggiungere, rimuovere e riorganizzare gli elementi liberamente.
Passaggio 9: gestisci le tue pagine
Clicca Pagine nella barra laterale sinistra per vedere tutte le pagine elencate. Clicca su qualsiasi nome di pagina per passare all’editor di quella pagina.
Per aggiungere una nuova pagina, usa il pulsante “+”. Per riordinare l’ordine dei link di navigazione, trascina le pagine su o giù nell’elenco.
Se ci sono pagine generate dall’AI che non ti servono, puoi eliminarle da qui. Allo stesso modo, se ti serve una pagina che l’AI non ha incluso, come Testimonianze o Prezzi, puoi aggiungerla qui e poi crearla usando il pannello Elementi.
Passaggio 10: configura la SEO
Prima di pubblicare, devi impostare la tua SEO. È un passaggio che molti saltano, ma è un errore.
Dedica 15 minuti a compilare correttamente le impostazioni SEO: può fare una grande differenza su quanto Google trovi il tuo sito.
Clicca SEO nella barra laterale sinistra per aprire il pannello intitolato “Fatti trovare su Google (SEO).”
Il pannello è diviso in due sezioni. A sinistra vedrai l’elenco delle pagine. A destra c’è la Panoramica del sito, che mostra il nome dell’azienda e la lingua del sito. Clicca Modifica per aggiornarli se non sono corretti.
Sotto alle informazioni del sito, vedrai una sezione chiamata “Alcune pagine richiedono la tua attenzione.”
Ogni pagina che necessita di intervento è contrassegnata da un’icona arancione. Clicca su una pagina nel pannello a sinistra per aprire le sue impostazioni SEO individuali, dove puoi scrivere un meta title e una meta description per quella pagina specifica.
Lavora su ogni pagina nell’elenco. Un buon meta title è chiaro, contiene la tua parola chiave principale ed è inferiore a 60 caratteri. Una buona meta description riassume il contenuto della pagina ed è inferiore a 160 caratteri. Queste sono le descrizioni che appaiono nei risultati di ricerca di Google, quindi vale la pena dedicarci qualche minuto per ciascuna.
Passaggio 11: collega il tuo dominio
Se non hai ancora collegato un dominio personalizzato, è arrivato il momento. Clicca il pulsante Collega dominio nella barra degli strumenti in alto nell’editor.
Hai due opzioni. Se possiedi già un dominio, puoi collegarlo aggiornando le impostazioni DNS per puntare ai server di Hostinger. Se non hai ancora un dominio, puoi acquistarne uno direttamente da Hostinger nella stessa schermata.
Finché non colleghi un dominio, il tuo sito sarà accessibile tramite un sottodominio temporaneo di Hostinger, ad esempio yoursite.builder-preview.com. Va bene per i test, ma prima di condividere pubblicamente il tuo sito vuoi un dominio vero e proprio.
Passaggio 12: anteprima e pubblica il tuo sito
Sei quasi arrivato. Prima di cliccare su pubblica, premi il pulsante Anteprima nella barra in alto a destra.
Questo apre un’anteprima a schermo intero di come il tuo sito apparirà ai visitatori. Usa le icone per passare tra le viste desktop e mobile in alto e controlla che tutto sia corretto su entrambi i dispositivi.
Presta particolare attenzione alla hero section della homepage su mobile, a come si comprime il menu di navigazione e se alcune immagini vengono ritagliate in modo indesiderato.
Quando sei soddisfatto, torna nell’editor e clicca il pulsante verde Pubblica in alto a destra. Il tuo sito è finalmente online.
Passaggio 13: esplora le integrazioni
Una volta che il tuo sito è live, vale la pena esplorare le integrazioni disponibili. Vai in Altro > Integrazioni nella barra laterale sinistra.
Il pannello Integrazioni ti permette di collegare il tuo sito a strumenti e servizi esterni. Le opzioni attuali includono Shippo per generare etichette di spedizione e gestire gli ordini, Printful per creare e vendere prodotti personalizzati print-on-demand, Hostinger Reach per il marketing via email e l’invio di newsletter, Google Ads per campagne pubblicitarie a pagamento e Codice personalizzato se vuoi aggiungere il tuo HTML, CSS o JavaScript per estendere le funzionalità del sito.
Per attivare un’integrazione, clicca Inizia accanto, segui i passaggi di connessione e poi ripubblica il sito.
Consigli per sfruttare al meglio Hostinger Website Builder
Sii generoso con il prompt per l’AI. Un prompt di due frasi ti darà un risultato generico. Un prompt dettagliato e specifico che copre settore, pubblico, preferenze di design, struttura delle pagine e tono di voce produrrà qualcosa di molto più vicino a ciò che desideri. Dedica cinque minuti a scrivere un brief ben fatto e risparmierai ore di modifiche successive.
Usa sempre il pulsante “Migliora descrizione”. È facile ignorarlo, ma è davvero utile. L’AI spesso individua aspetti che hai lasciato vaghi e li trasforma in istruzioni concrete di design e contenuto.
Modifica con cura i tuoi testi. L’AI scrive testi segnaposto decenti, ma non conosce la tua attività come te. Rivedi ogni pagina e riscrivi il testo per riflettere i tuoi servizi reali, il tuo valore autentico e il tuo vero tono di voce.
Controlla la vista mobile prima di pubblicare. Hostinger rende automaticamente il sito responsive, ma immagini e spaziature possono aver bisogno di piccole correzioni su schermi più piccoli. Controlla sempre la versione mobile.
Completa la SEO per ogni singola pagina. Non solo la homepage. Ogni pagina merita un meta title e una meta description. Ci vogliono pochi minuti per pagina e migliora significativamente la visibilità sui motori di ricerca.
Usa la Libreria media per organizzarti. In Altro > Libreria media puoi caricare e gestire tutte le tue immagini in un unico posto. È più facile riutilizzarle su più pagine e mantenere il sito coerente.
Torna a migliorare nel tempo. Pubblicare il sito non è la fine, è l’inizio. Torna regolarmente per aggiornare i contenuti, aggiungere nuovi post al blog e rifinire le pagine man mano che la tua attività evolve.
Hostinger Website Builder elimina quasi ogni barriera che un tempo ti separava da un sito professionale. L’AI fa il lavoro pesante di design e copy, l’editor rende la personalizzazione semplice e gli strumenti SEO e le integrazioni integrate offrono tutto in un’unica piattaforma.
Segui i passaggi di questa guida e puoi realisticamente avere un sito elegante e funzionante online in meno di un’ora.
