Crear un sitio web solía sentirse como un proyecto para el que necesitabas contratar a alguien. Ya no más.
He estado usando Hostinger Website Builder, y en esta guía te voy a guiar por todo el proceso, paso a paso, desde el momento en que inicias sesión hasta que tu sitio se publica.
Vamos a ello.
¿Qué es Hostinger Website Builder?
Hostinger Website Builder es un creador de sitios web con IA, de arrastrar y soltar, integrado directamente en tu cuenta de Hostinger.
No necesitas instalar nada, no necesitas saber programar y no necesitas conocimientos de diseño. Describes lo que quieres, la IA crea un sitio web completo por ti y luego lo personalizas para que coincida con tu marca.
Es una de las formas más rápidas de pasar de nada a un sitio web profesional y completamente en línea.
Paso 1: Inicia sesión y navega al creador
Cuando inicias sesión en tu cuenta de Hostinger, llegas al hPanel. Este es el panel principal de Hostinger y es donde gestionas todo, incluidos tus sitios web, dominios, correos electrónicos y facturación.
En la barra lateral izquierda verás una lista de opciones de navegación. Haz clic en Websites. Aparecerá un pequeño menú desplegable debajo con dos opciones: Websites list y Migrations. Haz clic en Websites list.
Ahora estás en la página Websites list, que muestra todos los sitios web conectados a tu cuenta.
En la esquina superior derecha de la página verás un botón morado + Add website. Haz clic en él.
Aparecerá un pequeño menú desplegable con cuatro opciones:
- Hostinger Horizons
- WordPress
- Hostinger Website Builder
- y sitio web personalizado en PHP/HTML
Debes hacer clic en Hostinger Website Builder, que se describe como el “creador de sitios web con IA de arrastrar y soltar”.
Paso 2: Describe tu sitio web a la IA
Después de seleccionar Hostinger Website Builder, accedes a una pantalla de configuración con el título “Deja que la IA cree tu presencia en línea”.
Aquí es donde le dices a la IA qué tipo de sitio web quieres construir.
Verás un cuadro de texto grande con el texto de marcador de posición “Describe your website or business”. Este es tu cuadro de solicitud, y lo que escribas aquí determina todo lo que la IA generará para ti. Cuantos más detalles le des, mejor será tu resultado.
Debajo del cuadro de texto, también notarás una fila de etiquetas de sugerencias de inicio rápido. Estas incluyen opciones como “Create a business website”, “Create an online store”, “Design a portfolio”, “Launch an appointments website”, “Start a blog”, “Launch a restaurant website” y “Create a one pager website”.
Al hacer clic en cualquiera de ellas, se completa un prompt inicial que luego puedes editar y ampliar.
En la parte inferior de la pantalla verás dos enlaces adicionales: Pre-made templates y Link in bio website.
Si prefieres omitir la IA y explorar diseños existentes, haz clic en Pre-made templates.
Si solo necesitas un sitio de una sola página para tus perfiles de redes sociales, vale la pena echar un vistazo a la opción Link in bio.
Para la mayoría de las personas que construyen un sitio web real, sin embargo, el cuadro de prompt de la IA es el lugar adecuado para comenzar.
Cómo escribir un buen prompt para la IA
Esta es la parte más importante de todo el proceso. Piensa en el prompt de la IA como un brief que le das a un diseñador. Cuanto más claramente comuniques tu visión, más cercano estará el resultado a lo que realmente deseas.
Aquí está el prompt que usé para esta guía. Estaba construyendo un sitio web para una agencia 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.”
Fíjate en lo específico que es. Cubre la industria, el tono, el estilo del diseño, las páginas requeridas, la estructura de la página de inicio y los objetivos de contenido. Ese nivel de detalle le da a la IA una base sólida sobre la cual trabajar.
Una vez que hayas escrito tu descripción, notarás que aparece un botón “Improve description” en la esquina superior derecha del cuadro de texto.
Te recomiendo hacer clic en él antes de enviar. La IA ampliará y refinará tu prompt, y a menudo captará cosas que no pensaste incluir.
Cuando estés listo, haz clic en el botón morado arrow button (el icono de enviar) en la esquina inferior derecha del cuadro de texto para enviar tu prompt y comenzar la generación.
Paso 3: Espera a que la IA construya tu sitio
Después de enviar tu prompt, la IA de Hostinger se pone a trabajar de inmediato. Verás una animación de carga en pantalla completa sobre un fondo púrpura intenso con el mensaje “Looking for matching pictures…” y una barra de progreso que muestra cuánto ha avanzado el proceso.
Esta fase suele tardar entre 30 y 60 segundos. Durante este tiempo, la IA realiza muchas tareas: genera los diseños de tus páginas, redacta el texto de tu sitio, selecciona imágenes coincidentes de una biblioteca de stock, crea tu navegación y estructura todo tu sitio según tu prompt.
No cierres la pestaña mientras carga. Solo espera y deja que se ejecute.
Paso 4: Revisa lo que construyó la IA
Cuando la IA termina, se te muestra una vista previa de tu nuevo sitio web. Esta es la pantalla de resultados, y es realmente emocionante ver lo que se ha generado.
El lado izquierdo de la pantalla muestra una vista previa en vivo de tu sitio generado. El lado derecho muestra un panel llamado “Your idea summary”, que muestra un resumen del prompt que enviaste y un botón “Edit idea” si deseas volver y regenerar con un prompt diferente o actualizado.
En mi caso, la IA nombró el sitio “BoldCraft Studio” y generó una página de inicio con el encabezado “Crafting Bold Brands That Shine”, una descripción de apoyo y dos botones de llamada a la acción: “Start Now” y “Get Quote”.
La barra de navegación incluía las seis páginas que pedí: Home, About, Services, Portfolio, Blog y Contact.
En la esquina superior izquierda de la pantalla de vista previa también verás dos botones: Previous versions, que te permite recorrer los diseños alternativos que consideró la IA, y Rate site, que te permite dar retroalimentación sobre el resultado.
En la esquina superior derecha de la vista previa verás íconos para alternar entre escritorio y móvil. Úsalos para comprobar cómo se ve tu sitio en un teléfono antes de continuar. Es una buena costumbre hacerlo desde el principio.
Si estás satisfecho con la dirección general, haz clic en el botón morado Continue en el panel derecho. Esto te lleva al editor completo donde ocurre la verdadera personalización.
Si no estás satisfecho con el resultado, haz clic en Edit idea, revisa tu prompt y regenera. Puedes hacer esto tantas veces como necesites.
Paso 5: Familiarízate con el editor
El editor es donde pasarás la mayor parte de tu tiempo. Cuando llegues por primera vez, tómate un momento para entender el diseño antes de empezar a explorar.
El editor tiene dos áreas principales.
- El área central grande es tu lienzo del sitio web, donde puedes ver e interactuar con tu sitio en tiempo real.
- La estrecha barra lateral vertical en el lado izquierdo es tu panel de control, y contiene todo lo que necesitas.
Esto es lo que hace cada elemento en la barra lateral:
- Setup te da acceso a la configuración básica de tu sitio, al dominio conectado y a la información del plan.
- Elements abre el panel de arrastrar y soltar donde puedes agregar nuevos bloques de contenido a cualquier página. Cubriré esto con más detalle más adelante.
- Pages muestra todas tus páginas en un solo lugar. Puedes cambiar entre páginas, agregar nuevas, renombrar las existentes, cambiar su orden o eliminar las que no necesites.
- Styles controla el diseño global de tu sitio. Aquí es donde configuras tus fuentes, la paleta de colores y los estilos de botones. Cualquier cambio que hagas aquí se aplica a todo tu sitio, así que este es el lugar adecuado para tomar decisiones de diseño generales en lugar de cambiar cosas sección por sección.
- AI tools te da acceso a la IA de redacción y contenido de Hostinger. Puedes usarla para reescribir secciones de texto, generar nuevo contenido y más.
- Blog es donde creas y gestionas entradas de blog si tu sitio tiene un blog.
- Store es donde configuras tu tienda en línea si vendes productos. Ten en cuenta que las funciones de comercio electrónico requieren un plan de nivel superior.
- SEO abre el gestor de SEO integrado donde puedes establecer títulos meta, descripciones y otros detalles de optimización de búsqueda para cada página.
- More se expande en un segundo menú con herramientas adicionales que incluyen Appointments, General settings, Integrations, Form submissions, Analytics, Media library, Multi-language support, Manage backups, Export content to WordPress y Help and Resources.
En la parte superior del editor también encontrarás la barra de herramientas principal. De izquierda a derecha, contiene: un conmutador de vista previa de escritorio y móvil, botones de deshacer y rehacer, un botón Connect domain, un botón Preview y el botón verde Go live.
Paso 6: Edita tu contenido
Ahora llega la parte donde haces el sitio tuyo. Haz clic en cualquier lugar de tu lienzo web para comenzar a editar.
Cuando pases el cursor sobre cualquier sección de la página, verás aparecer una etiqueta azul en la esquina superior izquierda de esa sección que muestra qué tipo de elemento es, por ejemplo “Section” o “Header”. Al mismo tiempo, aparece una pequeña barra de herramientas flotante encima de la sección con tus opciones de edición.
La barra de herramientas de la sección te ofrece los siguientes controles de izquierda a derecha: Edit section abre el panel de configuración de la sección, donde puedes cambiar la imagen o el color de fondo, ajustar el padding y modificar las opciones de diseño.
A continuación está Generate image, que abre el generador de imágenes con IA.
Después de eso, tienes un icono de Duplicate, un conmutador Hide/Show, un icono de Delete, flechas Move up y Move down para reordenar secciones, y un menú de More options de tres puntos.
Para editar cualquier texto en la página, simplemente haz clic directamente sobre él y comienza a escribir. El elemento de texto se volverá editable y verás aparecer controles de formato. Puedes cambiar el tamaño de fuente, el peso, la alineación y el color directamente desde estos controles.
Para cambiar una imagen, haz clic en ella. Verás opciones para reemplazarla con una foto de tus propios archivos, explorar la biblioteca de imágenes de stock de Hostinger o generar una nueva con IA.
Empieza por trabajar en tu página de inicio, luego utiliza el panel Pages para cambiar a cada página adicional y editarlas a su vez.
Paso 7: Usa el generador de imágenes con IA
Una característica en la que vale la pena detenerse es el AI image generator, porque es realmente útil si no dispones de fotos profesionales propias.
Para acceder a él, pasa el cursor por cualquier sección de tu página y haz clic en Generate image en la barra de herramientas flotante de la sección. Se deslizará un panel desde el lado derecho de la pantalla.
Dentro del panel, verás un cuadro de texto “Image description”. Escribe una descripción de la imagen que deseas crear.
Cuanto más específica y visual sea tu descripción, mejor será el resultado. El panel muestra un límite de 3,000 caracteres y un indicador de calidad en tiempo real que te dice si tu descripción es lo suficientemente buena.
Por ejemplo, cuando escribí “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”, el panel mostró “Great description!” con las barras de calidad completamente llenas.
Cuando estés satisfecho con tu descripción, haz clic en el botón Create images. La IA generará un conjunto de imágenes para que elijas.
Un aspecto a tener en cuenta: el generador de imágenes con IA requiere el plan Business o superior. Si tienes el plan Premium, verás un aviso de actualización en la parte inferior del panel.
Paso 8: Agrega nuevos elementos a cualquier página
Si quieres agregar un bloque de contenido que aún no esté en tu página, haz clic en Elements en la barra lateral izquierda. Esto abre el panel “Add elements”.
Verás una cuadrícula con todos los elementos disponibles, incluidos Text, Button, Affiliate link, Add to bag, Image, Gallery, Video, Shape, Card, Map, Instagram feed y Contact form. Para agregarlos a tu página, arrástralos desde el panel y suéltalos en tu lienzo donde quieras que aparezcan.
Una vez colocado, haz clic en el elemento para acceder a su configuración y opciones de estilo individuales.
Este enfoque de arrastrar y soltar significa que nunca estás atado al diseño generado por la IA. Puedes agregar, eliminar y reorganizar elementos libremente.
Paso 9: Gestiona tus páginas
Haz clic en Pages en la barra lateral izquierda para ver todas tus páginas listadas en un solo lugar. Puedes hacer clic en cualquier nombre de página para saltar a la edición de esa página.
Para agregar una nueva página, usa el botón más. Para cambiar el orden en que las páginas aparecen en tu navegación, arrástralas hacia arriba o hacia abajo en la lista.
Si hay páginas que generó la IA y que no necesitas, puedes eliminarlas desde aquí. De manera similar, si necesitas una página que la IA no incluyó, como una página de Testimonials o Pricing, puedes agregarla aquí y luego desarrollarla usando el panel Elements.
Paso 10: Configura tu SEO
Antes de publicar, necesitas configurar tu SEO. Este es un paso que muchas personas omiten, y es un error.
Dedicar 15 minutos a completar correctamente tus ajustes de SEO puede marcar una gran diferencia en si las personas encuentran tu sitio a través de Google.
Haz clic en SEO en la barra lateral izquierda para abrir el panel SEO, titulado “Que te encuentren en Google (SEO)”.
El panel está dividido en dos secciones. A la izquierda verás una lista con todas tus páginas. A la derecha verás el Website overview, que muestra el nombre de tu negocio y el idioma del sitio web. Haz clic en Edit para actualizarlos si no son correctos.
Debajo de la información del sitio web, verás una sección llamada “Some pages require your attention”.
Cada página que necesita trabajo está marcada con un icono de advertencia naranja. Haz clic en cualquier página del panel izquierdo para abrir sus ajustes SEO individuales, donde puedes escribir un meta título y una meta descripción para esa página en específico.
Revisa cada página de la lista. Un buen meta título es claro, contiene tu palabra clave principal y tiene menos de 60 caracteres. Una buena meta descripción resume de qué trata la página y tiene menos de 160 caracteres. Estos son los fragmentos que aparecen en los resultados de búsqueda de Google, por lo que vale la pena dedicar unos minutos a cada uno.
Paso 11: Conecta tu dominio
Si aún no has conectado un dominio personalizado a tu sitio, ahora es el momento. Haz clic en el botón Connect domain en la barra de herramientas superior del editor.
Tienes dos opciones. Si ya posees un dominio, puedes conectarlo actualizando tus ajustes de DNS para apuntar a los servidores de Hostinger. Si aún no tienes un dominio, puedes comprar uno directamente en Hostinger desde esta misma pantalla.
Hasta que conectes un dominio, tu sitio será accesible mediante un subdominio temporal de Hostinger, como yoursite.builder-preview.com. Eso está bien para pruebas, pero querrás un dominio propio antes de empezar a compartir tu sitio públicamente.
Paso 12: Previsualiza tu sitio y publícalo
Ya casi lo tienes. Antes de presionar publicar, haz clic en el botón Preview en la barra de herramientas superior derecha.
Esto abre una vista previa en pantalla completa de cómo se verá tu sitio a los visitantes. Alterna entre las vistas de escritorio y móvil usando los iconos en la parte superior de la pantalla de vista previa y comprueba que todo se vea bien en ambas.
Presta especial atención a cómo se ve la sección hero de tu página de inicio en móvil, cómo se colapsa la navegación y si alguna imagen se está recortando de una manera que no pretendías.
Cuando estés satisfecho con todo, vuelve al editor y haz clic en el botón verde Go live en la esquina superior derecha. Tu sitio ya está publicado y en línea en Internet.
Paso 13: Explora las integraciones
Una vez que tu sitio esté en línea, vale la pena explorar las integraciones disponibles. Ve a More > Integrations en la barra lateral izquierda.
El panel Integrations te permite conectar tu sitio web con herramientas y servicios externos. Las opciones actuales incluyen Shippo para generar etiquetas de envío y gestionar el cumplimiento de pedidos, Printful para crear y vender productos personalizados bajo demanda, Hostinger Reach para marketing por correo electrónico y envío de boletines a tus suscriptores, Google Ads para ejecutar campañas publicitarias de pago y Custom code si quieres añadir tu propio HTML, CSS o JavaScript para ampliar la funcionalidad de tu sitio.
Para activar cualquier integración, haz clic en Get started junto a ella, sigue los pasos de conexión y luego actualiza tu sitio republicándolo.
Consejos para sacar el máximo partido a Hostinger Website Builder
Sé generoso con tu prompt para la IA. Un prompt de dos frases te dará un resultado genérico. Un prompt detallado y específico que cubra tu industria, público, preferencias de diseño, estructura de páginas y tono de voz te dará algo mucho más cercano a lo que realmente deseas. Dedica cinco minutos a redactar un buen brief y ahorrarás horas de edición después.
Usa el botón Improve description siempre. Es fácil pasarlo por alto, pero es realmente útil. La IA a menudo capta aspectos que has dejado vagos y los convierte en instrucciones concretas de diseño y contenido.
Edita tu texto con cuidado. La IA escribe un texto de relleno decente, pero no conoce tu negocio como tú. Revisa cada página y reescribe el texto para reflejar tus servicios reales, tu verdadero valor y tu voz auténtica.
Revisa la vista móvil antes de publicar. Hostinger hace tu sitio responsive automáticamente, pero a veces las imágenes y los espacios necesitan ajustes menores en pantallas más pequeñas. Previsualiza siempre en móvil antes de lanzar.
Completa el SEO de cada página. No solo la página de inicio. Cada página de tu sitio merece un meta título y una meta descripción adecuados. Lleva unos minutos por página y es una de las acciones más sencillas para mejorar tu visibilidad en los resultados de búsqueda.
Usa la biblioteca de medios para mantenerte organizado. En More > Media library, puedes subir y gestionar todas tus imágenes en un lugar central. Esto hace mucho más fácil reutilizar imágenes en varias páginas y mantener tu sitio consistente.
Vuelve y mejora con el tiempo. Publicar tu sitio no es el final del proceso, es el comienzo. Regresa regularmente para actualizar tu contenido, agregar nuevas entradas de blog y refinar tus páginas a medida que tu negocio evoluciona.
Hostinger Website Builder elimina casi todas las barreras que antes existían entre tú y un sitio web profesional. La IA hace el trabajo pesado de diseño y texto, el editor facilita la personalización y las herramientas integradas de SEO e integraciones significan que tienes todo lo que necesitas en un solo lugar.
Sigue los pasos de esta guía y puedes tener un sitio activo y pulido en menos de una hora.
