Construir um site costumava parecer um projeto para o qual você precisava contratar alguém. Não mais.
Tenho usado Hostinger Website Builder, e neste guia, vou conduzi-lo por todo o processo, passo a passo, desde o momento em que você faz login até o instante em que seu site fica no ar.
Vamos começar.
O que é o Hostinger Website Builder?
Hostinger Website Builder é um construtor de sites com IA e função de arrastar e soltar, integrado diretamente à sua conta Hostinger.
Você não precisa instalar nada, não precisa saber codificar e não precisa ter experiência em design. Você descreve o que deseja, a IA cria um site completo para você e depois você o personaliza para combinar com sua marca.
É uma das formas mais rápidas de sair do zero e ter um site profissional totalmente no ar.
Etapa 1: Faça login e navegue até o construtor
Quando você faz login na sua conta Hostinger, você chega ao hPanel. Esse é o painel principal da Hostinger, onde você gerencia tudo, incluindo seus sites, domínios, e-mails e faturamento.
Na barra lateral esquerda, você verá uma lista de opções de navegação. Clique em Websites. Um pequeno menu suspenso aparecerá abaixo com duas opções: Websites list e Migrations. Clique em Websites list.
Agora você está na página Websites list, que exibe todos os sites conectados à sua conta.
No canto superior direito da página, você verá um botão roxo + Add website. Clique nele.
Um pequeno menu suspenso aparece com quatro opções:
- Hostinger Horizons
- WordPress
- Hostinger Website Builder
- E site PHP/HTML personalizado
Você deve clicar em Hostinger Website Builder, descrito como o “construtor de sites com IA e arrastar e soltar”.
Etapa 2: Descreva seu site para a IA
Depois de selecionar Hostinger Website Builder, você é levado a uma tela de configuração com o título “Deixe a IA criar sua presença online.”
É aqui que você informa à IA qual tipo de site deseja criar.
Você verá uma grande caixa de texto com o texto de espaço reservado “Describe your website or business.” Essa é a sua caixa de prompt, e o que você digitar aqui determina tudo o que a IA gerará para você. Quanto mais detalhes você fornecer, melhor será o resultado.
Abaixo da caixa de texto, você também notará uma linha de sugestões rápidas. Estas incluem opções como “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”.
Clicar em qualquer uma delas preenche um prompt inicial que você pode editar e expandir em seguida.
No rodapé da tela, você verá dois links adicionais: Pre-made templates e Link in bio website.
Se preferir pular a IA e explorar designs existentes, clique em Pre-made templates.
Se você precisa apenas de um site de página única simples para seus perfis de rede social, vale a pena conferir a opção Link in bio.
Para a maioria das pessoas construindo um site de verdade, porém, a caixa de prompt da IA é o lugar certo para começar.
Como escrever um bom prompt para a IA
Esta é a parte mais importante de todo o processo. Pense no prompt da IA como um briefing que você está dando a um designer. Quanto mais claramente você comunicar sua visão, mais próximo o resultado ficará do que você realmente deseja.
Aqui está o prompt que usei para este guia. Eu estava criando um site para uma agência criativa:
“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.”
Observe como isso é específico. Ele cobre o setor, tom, estilo de layout, páginas necessárias, estrutura da página inicial e objetivos de conteúdo. Esse nível de detalhe fornece à IA uma base sólida para trabalhar.
Depois de digitar sua descrição, você notará que um botão “Improve description” aparece no canto superior direito da caixa de texto.
Recomendo clicar nele antes de enviar. A IA expandirá e refinará seu prompt, muitas vezes captando aspectos que você não pensou em incluir.
Quando estiver pronto, clique no botão roxo arrow button (o ícone de envio) no canto inferior direito da caixa de texto para enviar seu prompt e iniciar a geração.
Etapa 3: Aguarde a IA criar seu site
Depois de enviar seu prompt, a IA da Hostinger começa a trabalhar imediatamente. Você verá uma animação de carregamento em tela cheia com fundo roxo escuro e a mensagem “Looking for matching pictures…” e uma barra de progresso indicando o andamento do processo.
Essa etapa geralmente leva de 30 a 60 segundos. Durante esse período, a IA faz bastante coisa: gera os layouts das páginas, escreve o texto do site, seleciona imagens correspondentes de uma biblioteca de estoque, cria sua navegação e estrutura todo o site com base no seu prompt.
Não feche a aba enquanto estiver carregando. Apenas espere e deixe o processo ocorrer.
Etapa 4: Revise o que a IA criou
Quando a IA terminar, será exibida uma prévia do seu novo site. Esta é a tela de resultado, e é realmente empolgante ver o que foi gerado.
O lado esquerdo da tela exibe uma prévia ao vivo do site gerado. O lado direito mostra um painel chamado “Your idea summary,” que exibe um resumo do prompt que você enviou e um botão “Edit idea” caso queira voltar e regenerar com um prompt diferente ou atualizado.
No meu caso, a IA nomeou o site de “BoldCraft Studio” e gerou uma página inicial com o título “Crafting Bold Brands That Shine”, uma descrição de apoio e dois botões de call-to-action: “Start Now” e “Get Quote”.
A barra de navegação incluiu todas as seis páginas que pedi: Home, About, Services, Portfolio, Blog e Contact.
No canto superior esquerdo da tela de prévia, você também verá dois botões: Previous versions, que permite navegar pelas versões alternativas consideradas pela IA, e Rate site, que permite fornecer feedback sobre o resultado.
No canto superior direito da prévia, você verá ícones de alternância para desktop e mobile. Use-os para verificar como seu site fica em um celular antes de prosseguir. É um bom hábito fazer isso cedo.
Se ficar satisfeito com a direção geral, clique no botão roxo Continue no painel da direita. Isso o levará ao editor completo, onde ocorre a verdadeira customização.
Se não estiver satisfeito com o resultado, clique em Edit idea, revise seu prompt e regenere. Você pode fazer isso quantas vezes precisar.
Etapa 5: Familiarize-se com o editor
O editor é onde você passará a maior parte do tempo. Quando chegar aqui pela primeira vez, reserve um momento para entender o layout antes de começar a clicar por aí.
O editor possui duas áreas principais.
- A grande área central é a tela do seu site, onde você pode ver e interagir com seu site em tempo real.
- A barra lateral vertical estreita à esquerda é o seu painel de controle e contém tudo o que você precisa.
Veja o que cada item na barra lateral faz:
- Setup fornece acesso às configurações básicas do seu site, domínio conectado e informações do plano.
- Elements abre o painel de arrastar e soltar onde você pode adicionar novos blocos de conteúdo a qualquer página. Abordarei isso em mais detalhes em breve.
- Pages mostra todas as suas páginas em um só lugar. Você pode alternar entre páginas, adicionar novas, renomear as existentes, alterar a ordem ou excluir as que não precisar.
- Styles controla o design global do seu site. É onde você define suas fontes, paleta de cores e estilos de botões. Quaisquer alterações feitas aqui se aplicam em todo o site, então este é o lugar certo para tomar decisões de design abrangentes em vez de alterar seções individuais.
- AI tools dá acesso às ferramentas de escrita e conteúdo com IA da Hostinger. Você pode usá-las para reescrever seções de texto, gerar novo conteúdo e mais.
- Blog é onde você cria e gerencia postagens de blog, caso seu site tenha um blog.
- Store é onde você configura sua loja online se estiver vendendo produtos. Note que os recursos de eCommerce exigem um plano de nível superior.
- SEO abre o gerenciador de SEO integrado onde você pode definir meta titles, descrições e outros detalhes de otimização para cada página.
- More expande para um segundo menu com ferramentas adicionais, incluindo Appointments, General settings, Integrations, Form submissions, Analytics, Media library, Multi-language support, Manage backups, Export content to WordPress e Help and Resources.
No topo do editor, você também encontrará a barra de ferramentas principal. Da esquerda para a direita, ela contém: um alternador de visualização desktop e mobile, botões de desfazer e refazer, um botão Connect domain, um botão Preview e o botão verde Go live.
Etapa 6: Edite seu conteúdo
Agora chega a parte onde você faz o site ser seu. Clique em qualquer lugar na tela do site para começar a editar.
Quando você passar o mouse sobre qualquer seção da página, verá um rótulo azul no canto superior esquerdo dessa seção indicando que tipo de elemento é, por exemplo “Section” ou “Header”. Ao mesmo tempo, uma pequena barra de ferramentas flutuante aparece acima da seção com suas opções de edição.
A barra de ferramentas da seção fornece os seguintes controles, da esquerda para a direita: Edit section abre o painel de configurações da seção, onde você pode alterar a imagem ou cor de fundo, ajustar o espaçamento interno e modificar opções de layout.
Ao lado está Generate image, que abre o gerador de imagens com IA.
Em seguida, você tem um ícone Duplicate, um alternador Hide/Show, um ícone Delete, setas Move up e Move down para reordenar seções e um menu de três pontos More options.
Para editar qualquer texto na página, basta clicar diretamente nele e começar a digitar. O elemento de texto ficará editável, e você verá controles de formatação aparecerem. Você pode alterar o tamanho da fonte, peso, alinhamento e cor diretamente nesses controles.
Para alterar uma imagem, clique nela. Você verá opções para substituí-la por uma foto dos seus próprios arquivos, navegar pela biblioteca de imagens da Hostinger ou gerar uma nova com IA.
Trabalhe primeiro em sua página inicial e depois use o painel Pages para alternar para cada página adicional e editá-las por sua vez.
Etapa 7: Use o gerador de imagens com IA
Um recurso que vale a pena destacar é o AI image generator, pois é realmente útil se você não tiver fotos profissionais próprias.
Para acessá-lo, passe o mouse sobre qualquer seção da sua página e clique em Generate image na barra de ferramentas flutuante da seção. Um painel deslizará a partir do lado direito da tela.
Dentro do painel, você verá uma caixa de texto “Image description”. Digite uma descrição da imagem que deseja criar.
Quanto mais específica e visual for sua descrição, melhor será o resultado. O painel mostra um limite de 3.000 caracteres e um indicador de qualidade em tempo real que informa se sua descrição é forte o suficiente.
Por exemplo, quando digitei “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”, o painel exibiu “Great description!” com as barras de qualidade totalmente preenchidas.
Quando estiver satisfeito com sua descrição, clique no botão Create images. A IA gerará um conjunto de imagens para você escolher.
Uma coisa a observado: o gerador de imagens com IA requer o plano Business ou superior. Se você estiver no plano Premium, verá um prompt de upgrade na parte inferior do painel.
Etapa 8: Adicione novos elementos a qualquer página
Se você quiser adicionar um bloco de conteúdo que ainda não esteja na sua página, clique em Elements na barra lateral esquerda. Isso abre o painel “Add elements”.
Você verá uma grade com todos os elementos disponíveis, incluindo Text, Button, Affiliate link, Add to bag, Image, Gallery, Video, Shape, Card, Map, Instagram feed e Contact form. Para adicionar qualquer um deles à sua página, arraste-o do painel e solte-o na tela onde quiser que apareça.
Uma vez posicionado, clique no elemento para acessar suas configurações individuais e opções de estilo.
Essa abordagem de arrastar e soltar significa que você nunca fica preso ao layout gerado pela IA. Você pode adicionar, remover e reorganizar elementos livremente.
Etapa 9: Gerencie suas páginas
Clique em Pages na barra lateral esquerda para ver todas as suas páginas listadas em um só lugar. Você pode clicar em qualquer nome de página para ir diretamente à edição dessa página.
Para adicionar uma nova página, use o botão de mais. Para reorganizar a ordem em que as páginas aparecem na sua navegação, arraste-as para cima ou para baixo na lista.
Se houver páginas que a IA gerou e você não precisar, pode excluí-las daqui. Da mesma forma, se precisar de uma página que a IA não incluiu, como uma página de Testimonials ou de Pricing, você pode adicioná-la aqui e depois desenvolvê-la usando o painel Elements.
Etapa 10: Configure seu SEO
Antes de publicar, você precisa configurar seu SEO. Esta é uma etapa que muitas pessoas pulam, e isso é um erro.
Dedicar 15 minutos para preencher corretamente suas configurações de SEO pode fazer uma grande diferença para que as pessoas encontrem seu site no Google.
Clique em SEO na barra lateral esquerda para abrir o painel de SEO, intitulado “Let’s be found on Google (SEO).”
O painel é dividido em duas seções. À esquerda, você verá uma lista de todas as suas páginas. À direita, verá o Website overview, que exibe o nome do seu negócio e o idioma do site. Clique em Edit para atualizar esses itens se não estiverem corretos.
Abaixo das informações do site, você verá uma seção chamada “Some pages require your attention.”
Cada página que precisa de atenção é marcada com um ícone de aviso laranja. Clique em qualquer página no painel esquerdo para abrir suas configurações de SEO individuais, onde você pode escrever um meta title e uma meta description para essa página específica.
Trabalhe em cada página da lista. Um bom meta title é claro, contém sua palavra-chave principal e tem menos de 60 caracteres. Uma boa meta description resume o que a página aborda e tem menos de 160 caracteres. Esses são os trechos que aparecem nos resultados de pesquisa do Google, então vale a pena dedicar alguns minutos a cada um.
Etapa 11: Conecte seu domínio
Se ainda não conectou um domínio personalizado ao seu site, agora é a hora. Clique no botão Connect domain na barra de ferramentas superior do editor.
Você tem duas opções. Se já possui um domínio, pode conectá-lo atualizando suas configurações de DNS para apontar para os servidores da Hostinger. Se ainda não possui um domínio, pode comprar um diretamente da Hostinger nesta mesma tela.
Até conectar um domínio, seu site estará acessível por um subdomínio temporário da Hostinger, como yoursite.builder-preview.com. Isso é adequado para testes, mas você vai querer um domínio próprio antes de começar a compartilhar seu site publicamente.
Etapa 12: Pré-visualize seu site e publique
Você está quase lá. Antes de publicar, clique no botão Preview na barra de ferramentas no canto superior direito.
Isso abre uma pré-visualização em tela cheia de como seu site ficará para os visitantes. Alterne entre as visualizações desktop e mobile usando os ícones no topo da tela de pré-visualização e verifique se tudo está correto em ambas.
Preste atenção especial em como a seção hero da sua página inicial aparece no mobile, como a navegação é recolhida e se alguma imagem está sendo cortada de forma indesejada.
Quando estiver satisfeito com tudo, volte ao editor e clique no botão verde Go live no canto superior direito. Seu site agora está publicado e ativo na internet.
Etapa 13: Explore as integrações
Depois que seu site estiver ativo, vale a pena explorar as integrações disponíveis. Vá em More > Integrations na barra lateral esquerda.
O painel Integrations permite conectar seu site a ferramentas e serviços externos. As opções atuais incluem Shippo para gerar etiquetas de envio e gerenciar o cumprimento de pedidos, Printful para criar e vender produtos personalizados sob demanda, Hostinger Reach para marketing por e-mail e envio de newsletters aos seus assinantes, Google Ads para executar campanhas de publicidade paga e Custom code se você quiser adicionar seu próprio HTML, CSS ou JavaScript para estender a funcionalidade do seu site.
Para ativar qualquer integração, clique em Get started ao lado dela, siga as etapas de conexão e atualize seu site republicando-o.
Dicas para aproveitar ao máximo o Hostinger Website Builder
Seja generoso com seu prompt para a IA. Um prompt de duas frases fornecerá um resultado genérico. Um prompt detalhado e específico que aborde seu setor, público-alvo, preferências de design, estrutura das páginas e tom de voz lhe dará algo muito mais próximo do que você realmente deseja. Dedique cinco minutos para escrever um briefing adequado e isso economizará horas de edição depois.
Use o botão Improve description sempre. É fácil ignorá-lo, mas é realmente útil. A IA frequentemente percebe coisas que você deixou vagas e as transforma em instruções concretas de design e conteúdo.
Edite seu texto com cuidado. A IA escreve um texto padrão razoável, mas ela não conhece seu negócio como você conhece. Revise cada página e reescreva o texto para refletir seus serviços reais, seu valor genuíno e sua voz autêntica.
Verifique a visualização em mobile antes de publicar. A Hostinger torna seu site responsivo automaticamente, mas imagens e espaçamentos às vezes precisam de ajustes mínimos em telas menores. Sempre pré-visualize em mobile antes de ir ao ar.
Preencha o SEO para cada página. Não apenas para a página inicial. Cada página do seu site merece um meta title e uma descrição adequados. Leva alguns minutos por página e é uma das coisas mais simples que você pode fazer para melhorar sua visibilidade nos resultados de busca.
Use a Media library para manter-se organizado. Em More > Media library, você pode fazer upload e gerenciar todas as suas imagens em um único lugar central. Isso torna muito mais fácil reutilizar imagens em várias páginas e manter a consistência do site.
Volte e melhore ao longo do tempo. Publicar seu site não é o fim do processo, é o começo. Volte regularmente para atualizar seu conteúdo, adicionar novas postagens no blog e refinar suas páginas conforme seu negócio evolui.
Hostinger Website Builder remove quase todas as barreiras que antes existiam entre você e um site profissional. A IA faz o trabalho pesado de design e texto, o editor torna a customização simples e as ferramentas integradas de SEO e integrações significam que você tem tudo o que precisa em um só lugar.
Siga as etapas deste guia e você pode realisticamente ter um site polido e funcional no ar em menos de uma hora.
