Crear un sitio web solía sentirse como un proyecto para el que tenías que contratar a alguien. Ya no es así.
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 creador 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 experiencia en diseño. 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 cero a un sitio web completamente activo y de aspecto profesional.
Paso 1: Inicia sesión y navega 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 desplegable 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.
Aparece un pequeño menú desplegable con cuatro opciones:
- Hostinger Horizons
- WordPress
- Hostinger Website Builder
- Y sitio web PHP/HTML personalizado
Tienes que 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, 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 crear.
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 indicaciones, 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 también notarás una fila de sugerencias rápidas. Estas incluyen opciones como “Crear un sitio web empresarial”, “Crear una tienda en línea”, “Diseñar un portafolio”, “Lanzar un sitio de citas”, “Iniciar un blog”, “Lanzar un sitio de restaurante” y “Crear un sitio de una sola página”.
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: Plantillas prediseñadas y Sitio link in bio.
Si prefieres omitir la IA y explorar diseños existentes, haz clic en Plantillas prediseñadas.
Si solo necesitas un sitio sencillo de una sola página para tus perfiles de redes sociales, vale la pena probar la opción Link in bio.
Para la mayoría de las personas que construyen un sitio web real, sin embargo, el cuadro de indicaciones de la IA es el lugar correcto 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 se acercará el resultado a lo que realmente deseas.
Aquí está el prompt que utilicé para esta guía. Estaba creando un sitio web para una agencia creativa:
“Construye un sitio web moderno y profesional para una agencia creativa que ofrezca servicios de branding, diseño gráfico, diseño web y marketing digital. El sitio debe transmitir creatividad, audacia y confianza sin dejar de ser limpio y fácil de navegar. Usa un diseño moderno con imágenes potentes, buen espaciado y tipografía elegante. Incluye las siguientes páginas: Inicio, Acerca de, Servicios, Portafolio, Blog y Contacto. En la página de Inicio, agrega una sección principal con un titular impactante, una breve descripción centrada en el valor y un claro botón de llamada a la acción como ‘Iniciar tu proyecto’ o ‘Solicitar un presupuesto’. Escribe un texto simple y persuasivo que explique lo que hacemos, a quién ayudamos y los resultados que ofrecemos. Asegúrate de que el sitio sea amigable con móviles, cargue rápido y esté optimizado para un SEO básico.”
Fíjate en lo específico que es. Cubre la industria, el tono, el estilo de diseño, las páginas necesarias, la estructura de la página de inicio y los objetivos de contenido. Ese nivel de detalle le brinda a la IA una base sólida sobre la cual trabajar.
Una vez que hayas escrito tu descripción, verás un botón “Mejorar descripción” que aparece en la esquina superior derecha del cuadro de texto.
Recomiendo hacer clic en él antes de enviar. La IA ampliará y refinará tu prompt, a menudo captando cosas que tal vez no pensaste incluir.
Cuando estés listo, haz clic en el botón morado con la flecha (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 a pantalla completa sobre un fondo morado oscuro con 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 bastante: genera los diseños de las páginas, escribe el texto del sitio, selecciona imágenes adecuadas de una biblioteca de stock, crea la 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 ha creado 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 “Resumen de tu idea” que muestra un resumen del prompt que enviaste y un botón “Editar idea” si quieres 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 navegar por las versiones alternativas que consideró la IA, y Rate site, que te permite dar tu opinión sobre el resultado.
En la parte superior derecha de la vista previa verás iconos de 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 práctica hacerlo pronto.
Si estás satisfecho con la dirección general, haz clic en el botón morado Continue en el panel derecho. Esto te llevará 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 hacerlo tantas veces como necesites.
Paso 5: Familiarízate con el editor
El editor es donde pasarás la mayor parte del tiempo. Cuando llegues por primera vez, tómate un momento para entender la disposición antes de empezar a hacer clic por todas partes.
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 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 de la barra lateral:
- Setup te da acceso a la configuración básica de tu sitio, el dominio conectado y la información del plan.
- Elements abre el panel de arrastrar y soltar donde puedes añadir nuevos bloques de contenido a cualquier página. Cubriré esto con más detalle en breve.
- 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í defines tus fuentes, paleta de colores y estilos de botones. Cualquier cambio que hagas aquí se aplica a todo tu sitio, por lo que este es el lugar adecuado para tomar decisiones de diseño integrales 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 las publicaciones del blog si tu sitio tiene uno.
- 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 configurar títulos meta, descripciones y otros detalles de optimización de búsqueda para cada página.
- More se expande a un segundo menú con herramientas adicionales, incluyendo Appointments, Configuración general, Integraciones, Envíos 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 alternador 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 en la que haces que el sitio sea tuyo. Haz clic en cualquier lugar de tu lienzo del sitio para comenzar a editar.
Cuando pases el cursor sobre cualquier sección de la página, verás una etiqueta azul en la esquina superior izquierda de esa sección que indica el tipo de elemento, por ejemplo “Section” o “Header”. Al mismo tiempo, aparece una pequeña barra de herramientas flotante sobre 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: Editar sección abre el panel de configuración de la sección, donde puedes cambiar la imagen o color de fondo, ajustar el relleno y modificar las opciones de diseño.
A su lado está Generate image, que abre el generador de imágenes con IA.
Después tienes un icono de duplicar, un interruptor Hide/Show, un icono de eliminar, flechas Move up y Move down para reordenar las secciones y un menú de tres puntos Más opciones.
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 aparecerán los 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 sobre ella. Verás opciones para reemplazarla con una foto de tus archivos, explorar la biblioteca de imágenes de stock de Hostinger o generar una nueva con IA.
Trabaja primero en tu página de inicio, luego usa 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 función en la que vale la pena detenerse es el AI image generator, porque resulta realmente útil si no tienes fotos profesionales propias.
Para acceder, haz hover 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 quieras 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 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 mensaje de actualización en la parte inferior del panel.
Paso 8: Añade 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 estos a tu página, arrástralo desde el panel y suéltalo en tu lienzo donde quieras que aparezca.
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 quedas atado al diseño que generó la IA. Puedes añadir, 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 el nombre de cualquier página para ir directamente a editarla.
Para añadir una nueva página, utiliza el botón de más. Para reorganizar 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 la IA generó y que no necesitas, puedes eliminarlas desde aquí. De igual manera, si necesitas una página que la IA no incluyó, como una página de Testimonios o una de Precios, puedes añadirla 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 mucha gente omite, y es un error.
Tomarte 15 minutos para completar correctamente la configuración de tu 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 de SEO, titulado “Let’s be found on Google (SEO).”
El panel se divide 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 actualizar estos datos 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 del 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.
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, 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, 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 DNS para apuntar a los servidores de Hostinger. Si aún no tienes un dominio, puedes comprar uno directamente desde Hostinger en 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 pruebas, pero querrás un dominio propio antes de empezar a compartir tu sitio públicamente.
Paso 12: Previsualiza tu sitio y publícalo
Estás casi listo. Antes de publicar, haz clic en el botón Preview en la barra de herramientas superior derecha.
Esto abre una vista previa a 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 verifica que todo se vea bien en ambas.
Presta especial atención a cómo se ve la sección principal de tu página de inicio en móvil, cómo se colapsa tu navegación y si alguna imagen se está recortando de manera inesperada.
Cuando estés satisfecho con todo, regresa 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 pagas y Custom code si deseas agregar 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 volviéndolo a publicar.
Consejos para aprovechar al máximo Hostinger Website Builder
Sé generoso con tu prompt de IA. Un prompt de dos oraciones 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 brindará algo mucho más cercano a lo que realmente deseas. Dedica cinco minutos a escribir un brief adecuado y te ahorrará horas de edición después.
Utiliza el botón Mejorar descripción cada vez. 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 contenido con cuidado. La IA escribe textos de marcador de posición decentes, 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 que tu sitio sea responsive automáticamente, pero a veces las imágenes y los espacios necesitan ajustes menores en pantallas pequeñas. Siempre previsualiza en móvil antes de publicar.
Completa el SEO de cada página. No solo de 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 que puedes hacer para mejorar tu visibilidad en los resultados de búsqueda.
Utiliza 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 volver a usar imágenes en varias páginas y mantener la coherencia de tu sitio.
Vuelve y mejora con el tiempo. Publicar tu sitio no es el fin del proceso, es el comienzo. Regresa regularmente para actualizar tu contenido, agregar nuevas publicaciones 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 se encarga del trabajo pesado de diseño y texto, el editor hace que la personalización sea sencilla, 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, de manera realista, podrás tener un sitio web pulido y en línea en menos de una hora.
