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 guiaré por todo el proceso, paso a paso, desde el momento en que inicias sesión hasta que tu sitio esté en línea.
Vamos a ello.
¿Qué es Hostinger Website Builder?
Hostinger Website Builder es un constructor de sitios web con arrastrar y soltar impulsado por IA integrado directamente en tu cuenta de Hostinger.
No necesitas instalar nada, no necesitas saber programar y no necesitas formación en diseño. Tú describes lo que quieres, la IA crea un sitio web completo para ti y luego lo personalizas para que coincida con tu marca.
Es una de las formas más rápidas de pasar de no tener nada a un sitio web profesional y totalmente operativo.
Paso 1: Inicia sesión y accede al constructor
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 con dos opciones: Websites list y Migrations. Haz clic en Websites list.
Estás ahora 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 púrpura + Add website. Haz clic en él.
Aparece un pequeño menú desplegable con cuatro opciones:
- Hostinger Horizons
- WordPress
- Hostinger Website Builder
- And Custom PHP/HTML website
Quieres hacer clic en Hostinger Website Builder, descrito como el “constructor de sitios web con arrastrar y soltar impulsado por IA”.
Paso 2: Describe tu sitio web a la IA
Después de seleccionar Hostinger Website Builder, llegarás a una pantalla de configuración con el título “Let AI create your online presence.”
Aquí es donde le dices a la IA qué tipo de sitio web quieres crear.
Verás un cuadro de texto grande con el texto de marcador “Describe your website or business”. Este es tu cuadro de instrucciones (prompt), y lo que escribas aquí determina todo lo que la IA generará para ti. Cuantos más detalles le des, mejor será el resultado.
Debajo del cuadro de texto verás una fila de sugerencias rápidas, como “Crear un sitio web de negocios”, “Crear una tienda en línea”, “Diseñar un portafolio”, “Lanzar un sitio de reservas”, “Iniciar un blog”, “Lanzar un sitio para restaurante” y “Crear un sitio de una sola página”.
Al hacer clic en cualquiera de ellas se rellena 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 navegar por 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 quienes crean un sitio real, sin embargo, el cuadro de prompt de la IA es el punto de partida adecuado.
Cómo escribir un buen prompt de IA
Esta es la parte más importante de todo el proceso. Piensa en el prompt de la IA como en un briefing que le das a un diseñador. Cuanto más claramente comuniques tu visión, más se acercará 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 de 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 verás que aparece un botón “Improve description” en la esquina superior derecha del cuadro de texto.
Recomiendo hacer clic en él antes de enviar. La IA ampliará y perfeccionará tu prompt, a menudo captando cosas que no pensaste incluir.
Cuando estés listo, haz clic en el botón púrpura con el ícono de flecha (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 a pantalla completa con un fondo púrpura oscuro y el mensaje “Looking for matching pictures…” y una barra de progreso que muestra el avance del proceso.
Esta etapa suele tardar entre 30 y 60 segundos. Durante este tiempo, la IA hace bastantes cosas: genera los diseños de las páginas, escribe el contenido, selecciona imágenes coincidentes de una biblioteca de stock, construye la navegación y estructura todo el sitio según tu prompt.
No cierres la pestaña mientras se carga. Espera y deja que siga en ejecución.
Paso 4: Revisa lo que ha creado la IA
Cuando la IA termina, se muestra una vista previa de tu nuevo sitio. Esta es la pantalla de resultado y es realmente emocionante ver lo que se ha generado.
En el lado izquierdo de la pantalla aparece una vista previa en vivo de tu sitio generado. En el lado derecho encontrarás un panel llamado “Your idea summary”, que muestra un resumen del prompt que enviaste y un botón “Edit idea” por 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 titular “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 incluyó las seis páginas que pedí: Home, About, Services, Portfolio, Blog y Contact.
En la parte superior izquierda de la pantalla de vista previa también verás dos botones: Previous versions, que te permite recorrer las versiones alternativas que la IA consideró, y Rate site, que te permite enviar tu valoración del resultado.
En la esquina superior derecha de la vista previa verás iconos para alternar entre la vista de escritorio y móvil. Úsalos para comprobar cómo se ve tu sitio en un teléfono antes de continuar. Es una buena práctica hacerlo al principio.
Si estás satisfecho con la dirección general, haz clic en el botón púrpura Continue del panel derecho. Esto te llevará al editor completo donde sucede la verdadera personalización.
Si no estás contento con el resultado, haz clic en Edit idea, revisa tu prompt y regenera. Puedes repetir este proceso tantas veces como necesites.
Paso 5: Familiarízate con el editor
El editor es donde pasarás la mayor parte del tiempo. Cuando llegues aquí por primera vez, tómate un momento para entender la disposición antes de empezar a explorar.
El editor tiene dos áreas principales.
- El área central grande es tu lienzo de sitio web, donde puedes ver e interactuar con tu sitio en tiempo real.
- La barra lateral vertical estrecha a la izquierda 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, dominio conectado e información del plan.
- Elements abre el panel de arrastrar y soltar donde puedes añadir nuevos bloques de contenido a cualquier página. Lo cubriré con más detalle pronto.
- Pages muestra todas tus páginas en un solo lugar. Aquí puedes cambiar entre páginas, añadir nuevas, renombrar las existentes, cambiar su orden o eliminar las que no necesites.
- Styles controla el diseño global de tu sitio. Aquí configuras tus fuentes, paleta de colores y estilos de botones. Cualquier cambio que hagas aquí se aplica en todo el sitio, por lo que es el lugar adecuado para tomar decisiones de diseño a gran escala en lugar de cambiar secciones específicas una por una.
- AI tools te da acceso a la IA de Hostinger para redacción y contenidos. Puedes usarla para reescribir secciones de texto, generar nuevo contenido y más.
- Blog es donde creas y gestionas las entradas del blog si tu sitio incluye uno.
- Store es donde configuras tu tienda en línea si vas a vender 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 configurar los metatítulos, descripciones y otros detalles de optimización para cada página.
- More se expande en un segundo menú con herramientas adicionales, como Appointments, Configuración general, Integraciones, Presentaciones de formularios, Analíticas, Biblioteca multimedia, Soporte multilingüe, Administrar copias de seguridad, Exportar contenido a WordPress y Ayuda y recursos.
En la parte superior del editor también encontrarás la barra de herramientas principal. De izquierda a derecha contiene: un interruptor de vista 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 del lienzo de tu sitio para comenzar a editar.
Al pasar el cursor sobre cualquier sección de la página, 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, aparecerá 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 espacio interior (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 están el icono de duplicar, el interruptor de ocultar/mostrar, el icono de eliminar, las flechas de mover hacia arriba y hacia abajo para reordenar las secciones y un menú de tres puntos Más opciones.
Para editar cualquier texto de la página, haz clic directamente en él y comienza a escribir. El elemento de texto se volverá editable y verás controles de formato. Puedes cambiar el tamaño de la fuente, el grosor, 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.
Trabaja primero en la página de inicio y luego usa el panel Pages para cambiar a cada página adicional y editarlas por turno.
Paso 7: Usa el generador de imágenes con IA
Una característica en la que vale la pena detenerse es el generador de imágenes con IA, porque resulta realmente útil si no dispones de fotos profesionales propias.
Para acceder a él, pasa el cursor sobre 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 caracteres de 3,000 y un indicador de calidad en tiempo real que te informa si tu descripción es lo suficientemente sólida.
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 detalle a tener en cuenta: el generador de imágenes con IA requiere el plan Business o superior. Si estás en el plan Premium, verás un aviso para actualizar en la parte inferior del panel.
Paso 8: Agrega nuevos elementos a cualquier página
Si quieres añadir un bloque de contenido que no esté ya 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 añadir cualquiera de ellos a tu página, arrástralo desde el panel y suéltalo en el lienzo donde quieras que aparezca.
Una vez colocado, haz clic en el elemento para acceder a sus opciones de configuración y estilo individuales.
Este enfoque de arrastrar y soltar significa que nunca quedas atrapado en el diseño que la IA generó. 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 añadir una nueva página, usa el botón de más. Para reordenar el orden en que las páginas aparecen en tu navegación, arrástralas hacia arriba o hacia abajo en la lista.
Si tienes páginas que la IA generó y no necesitas, puedes eliminarlas desde aquí. De manera similar, si necesitas una página que la IA no incluyó, como una página de Testimonios o de Precios, puedes añadirla aquí y luego construirla 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 la configuración de SEO puede marcar una gran diferencia para que las personas encuentren tu sitio a través de Google.
Haz clic en SEO en la barra lateral izquierda para abrir el panel de SEO, titulado “Let’s be found on Google (SEO).”
El panel está dividido en dos secciones. A la izquierda verás una lista de todas tus páginas. A la derecha verás el Website overview, que muestra el nombre de tu negocio y el idioma del sitio. Haz clic en Edit para actualizarlos si no son correctos.
Debajo de la información del sitio verás una sección llamada “Some pages require your attention.”
Cada página que necesita atención está marcada con un icono de advertencia naranja. Haz clic en cualquier página en el panel izquierdo para abrir su configuración de SEO individual, donde puedes escribir un meta título y una meta descripción para esa página específica.
Trabaja en cada página de la lista. Un buen metatí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, así 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, este 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 a través de un subdominio temporal de Hostinger, como yoursite.builder-preview.com. Eso está bien para fines de prueba, 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 pulsar publicar, haz clic en el botón Preview de la barra de herramientas superior derecha.
Esto abre una vista previa a pantalla completa de exactamente 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 ambos casos.
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 recorta de forma no deseada.
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 ahora está publicado y en línea.
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 email marketing y envío de boletines a tus suscriptores, Google Ads para gestionar campañas de publicidad 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 aprovechar al máximo Hostinger Website Builder
Sé generoso con tu prompt de IA. Un prompt de dos frases te dará un resultado genérico. Un prompt detallado y específico que cubra tu industria, audiencia, preferencias de diseño, estructura de páginas y tono de voz te dará algo mucho más cercano a lo que realmente quieres. Dedica cinco minutos a redactar un buen briefing y te ahorrarás horas de edición después.
Usa el botón Improve description cada vez. Es fácil pasarlo por alto, pero es realmente útil. La IA a menudo capta aspectos que dejaste vagos y los convierte en instrucciones concretas de diseño y contenido.
Edita tu texto con cuidado. La IA escribe textos de relleno decentes, pero no conoce tu negocio como tú. Revisa cada página y reescribe el texto para reflejar tus servicios reales, tu valor verdadero y tu voz genuina.
Comprueba la vista móvil antes de publicar. Hostinger hace tu sitio responsive automáticamente, pero algunas imágenes y espaciados pueden requerir ajustes menores en pantallas pequeñas. Siempre previsualiza en móvil antes de publicar.
Completa el SEO de cada página. No solo la página de inicio. Cada página de tu sitio merece un metatítulo y meta descripción adecuados. Toma unos minutos por página y es una de las cosas más sencillas que puedes hacer para mejorar tu visibilidad en buscadores.
Usa la Biblioteca multimedia para mantenerte organizado. En More > Media library, puedes subir y gestionar todas tus imágenes en un solo lugar. Esto facilita mucho reutilizar imágenes en varias páginas y mantener la coherencia del sitio.
Vuelve y mejora con el tiempo. Publicar tu sitio no es el final del proceso, es el comienzo. Regresa regularmente para actualizar tu contenido, añadir nuevas entradas al blog y perfeccionar tus páginas a medida que tu negocio evoluciona.
Hostinger Website Builder elimina casi todas las barreras que antes se interponían entre tú y un sitio web profesional. La IA se encarga de la mayor parte del diseño y el contenido, 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 publicado, pulido y en línea en menos de una hora.
