Antes, crear un sitio web se sentía como un proyecto para el que debías contratar a alguien. Ya no más.
He estado usando Hostinger Website Builder, y en esta guía, te guiaré a través de todo el proceso, paso a paso, desde el momento en que inicies sesión hasta que tu sitio esté en vivo.
Empecemos.
¿Qué es Hostinger Website Builder?
Hostinger Website Builder es un creador de sitios web de arrastrar y soltar potenciado 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 se ajuste a tu marca.
Es una de las formas más rápidas de pasar de cero a un sitio web en vivo con aspecto profesional.
Paso 1: Inicia sesión y navega hasta el 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.
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 personalizado en PHP/HTML
Debes hacer clic en Hostinger Website Builder, que se describe como el “creador de sitios web de arrastrar y soltar potenciado por IA”.
Paso 2: Describe tu sitio web a la IA
Después de seleccionar Hostinger Website Builder, serás llevado 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 tu sitio web o negocio”. Este es tu cuadro de indicaciones, y lo que escribas aquí determina todo lo que la IA generará para ti. Cuanto más detalle le proporciones, mejor será tu resultado.
Debajo del cuadro de texto, notarás ademá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 reservas”, “Iniciar un blog”, “Lanzar un sitio web de restaurante” y “Crear un sitio de una sola página”.
Al hacer clic en cualquiera de ellas, se completa una indicación 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 navegar por diseños existentes, haz clic en Plantillas prediseñadas.
Si solo necesitas un sitio de una sola página para tus perfiles de redes sociales, vale la pena echarle un vistazo a la opción Link in bio.
Sin embargo, para la mayoría de las personas que crean un sitio web real, el cuadro de indicaciones de la IA es el lugar adecuado para empezar.
Cómo redactar una buena indicación para la IA
Esta es la parte más importante de todo el proceso. Piensa en la indicación para la IA como 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í tienes la indicación que usé para esta guía. Estaba construyendo un sitio web para una agencia creativa:
“Crea 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 web debe transmitir creatividad, audacia y confianza, manteniéndose limpio y fácil de navegar. Utiliza un diseño moderno con imágenes impactantes, 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 hero con un titular potente, una breve descripción centrada en el valor y un botón claro de llamada a la acción como ‘Inicia tu proyecto’ o ‘Solicita una cotización’. Escribe texto simple y persuasivo que explique lo que hacemos, a quién ayudamos y los resultados que entregamos. Haz que el sitio sea compatible con dispositivos móviles, de carga rápida y optimizado para SEO básico.”
Observa lo específico que es. Cubre la industria, el tono, el estilo de maquetación, 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 que trabajar.
Una vez que hayas escrito tu descripción, verás que aparece un botón “Mejorar descripción” en la esquina superior derecha del cuadro de texto.
Te recomiendo hacer clic en él antes de enviar. La IA ampliará y refinará tu indicación, a menudo incluyendo cosas que no pensaste.
Cuando estés listo, haz clic en el botón morado de flecha (el icono de envío) en la esquina inferior derecha del cuadro de texto para enviar tu indicación y comenzar la generación.
Paso 3: Espera a que la IA construya tu sitio
Después de enviar tu indicación, la IA de Hostinger comienza a trabajar de inmediato. Verás una animación de carga a pantalla completa con un fondo púrpura intenso y el mensaje “Buscando imágenes coincidentes…” 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 mucho: genera los diseños de tus páginas, escribe el contenido de tu sitio, selecciona imágenes acordes de una biblioteca de stock, crea tu navegación y estructura todo tu sitio según tu indicación.
No cierres la pestaña mientras carga. Solo espera y deja que se ejecute.
Paso 4: Revisa lo que la IA construyó
Cuando la IA termina, se te muestra una vista previa de tu nuevo sitio web. Ésta es la pantalla de resultados, y realmente es 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 de la indicación que enviaste y un botón “Editar idea” si quieres volver y regenerar con una indicación diferente o actualizada.
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 vista previa, también verás dos botones: Versiones anteriores, que te permite revisar las versiones alternativas que consideró la IA; y Calificar sitio, que te permite dar tu opinión sobre el resultado.
En la parte superior derecha de la vista previa, verás íconos de alternancia 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 hacer esto desde el principio.
Si estás satisfecho con la dirección general, haz clic en el botón morado Continuar en el panel derecho. Esto te lleva al editor completo donde ocurre la verdadera personalización.
Si no estás conforme con el resultado, haz clic en Editar idea, revisa tu indicación y vuelve a generar. Puedes hacerlo 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 la disposición antes de empezar a hacer clic por todos lados.
El editor tiene dos áreas principales.
- El área central amplia es el lienzo de tu sitio, donde puedes ver e interactuar con tu sitio en tiempo real.
- La estrecha barra lateral vertical 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:
- Configuración te da acceso a la configuración básica de tu sitio, al dominio conectado y a la información de tu plan.
- Elementos 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.
- Páginas muestra todas tus páginas en un solo lugar. Puedes cambiar entre páginas, añadir nuevas, renombrar las existentes, cambiar su orden o eliminar las que no necesites.
- Estilos controla el diseño global de tu sitio. Aquí es donde configuras tus fuentes, paleta de colores y estilos de botón. Cualquier cambio que hagas aquí se aplicará en todo tu sitio, por lo que es el lugar adecuado para tomar decisiones de diseño generales en lugar de cambiar cosas sección por sección.
- Herramientas de IA 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 entradas de blog si tu sitio tiene un blog.
- Tienda 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.
- Más 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 alternador de vista previa de escritorio y móvil, botones de deshacer y rehacer, un botón Conectar dominio, un botón Vista previa y el botón verde Publicar.
Paso 6: Edita tu contenido
Ahora llega la parte en la que haces tuyo el sitio. Haz clic en cualquier parte del lienzo de tu sitio para empezar a editar.
Cuando pases el cursor sobre cualquier sección de la página, verás aparecer una etiqueta azul en la parte superior izquierda de esa sección que indica el tipo de elemento, por ejemplo “Sección” o “Encabezado”. 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 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 de fondo o el color, ajustar el espaciado y modificar las opciones de diseño.
Al lado está Generar imagen, que abre el generador de imágenes con IA.
Después tienes un icono de Duplicar, un interruptor Ocultar/Mostrar, un icono de Eliminar, flechas de Subir y Bajar para reordenar secciones y un menú de Más opciones 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 la 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.
Primero trabaja la página de inicio y luego usa el panel Páginas 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 que vale la pena destacar es el generador de imágenes con IA, porque es realmente útil si no tienes tus propias fotos profesionales.
Para acceder a él, pasa el cursor sobre cualquier sección de tu página y haz clic en Generar imagen en la barra de herramientas flotante de sección. Se deslizará un panel desde el lado derecho de la pantalla.
Dentro del panel, verás un cuadro de texto “Descripción de imagen”. 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 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ó “¡Descripción excelente!” con las barras de calidad completamente llenas.
Cuando estés conforme con tu descripción, haz clic en el botón Crear imágenes. La IA generará un conjunto de imágenes para que elijas.
Algo 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 añadir un bloque de contenido que no esté ya en tu página, haz clic en Elementos en la barra lateral izquierda. Esto abre el panel “Añadir elementos”.
Verás una cuadrícula con todos los elementos disponibles, incluidos Texto, Botón, Enlace de afiliado, Añadir al carrito, Imagen, Galería, Video, Forma, Tarjeta, Mapa, Feed de Instagram y Formulario de contacto. Para añadir cualquiera de estos 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 ajustes y opciones de estilo individuales.
Este enfoque de arrastrar y soltar significa que nunca estarás 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 Páginas 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, usa el botón más. Para reorganizar el orden en que aparecen las páginas en tu navegación, arrástralas hacia arriba o hacia abajo en la lista.
Si tienes páginas que generó la IA y que no necesitas, puedes eliminarlas desde aquí. De igual modo, si necesitas una página que la IA no incluyó, como Testimonios o Precios, puedes añadirla aquí y luego construirla usando el panel Elementos.
Paso 10: Configura tu SEO
Antes de publicar, necesitas configurar tu SEO. Este es un paso que mucha gente omite, y es un error.
Dedicar 15 minutos a completar adecuadamente tus ajustes 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 “Que te encuentren en 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 la Vista general del sitio, que muestra el nombre de tu empresa y el idioma del sitio. Haz clic en Editar para actualizar estos si no son correctos.
Debajo de la información del sitio, verás una sección llamada “Algunas páginas requieren tu atención”.
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 sus ajustes de SEO individuales, 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, 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, es el momento. Haz clic en el botón Conectar dominio 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 desde Hostinger en esta misma pantalla.
Hasta que conectes un dominio, tu sitio será accesible mediante un subdominio temporal de Hostinger, como yoursite.builder-preview.com. Esto 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 ponlo en línea
Ya casi terminas. Antes de publicar, haz clic en el botón Vista previa 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 íconos 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 tu navegación y si alguna imagen se recorta de una manera que no pretendías.
Cuando estés satisfecho con todo, vuelve al editor y haz clic en el botón verde Publicar en la esquina superior derecha. Tu sitio ya 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 Más > Integraciones en la barra lateral izquierda.
El panel de Integraciones 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 llevar a cabo campañas de publicidad paga y Código personalizado si deseas añadir tu propio HTML, CSS o JavaScript para extender la funcionalidad de tu sitio.
Para activar cualquier integración, haz clic en Comenzar junto a ella, sigue los pasos de conexión y luego actualiza tu sitio volviéndolo a publicar.
Consejos para sacar el máximo provecho de Hostinger Website Builder
Sé generoso con tu indicación para la IA. Una indicación de dos oraciones te dará un resultado genérico. Una indicación detallada y específica que cubra tu industria, público, preferencias de diseño, estructura de páginas y tono de voz te proporcionará algo mucho más cercano a lo que realmente deseas. Invierte cinco minutos en redactar un briefing adecuado y te ahorrará horas de edición después.
Usa el botón Mejorar descripción cada vez. Es fácil pasarlo por alto, pero es realmente útil. La IA a menudo capta cosas que has dejado vagas y las convierte en instrucciones concretas de diseño y contenido.
Edita tu texto con cuidado. La IA redacta un contenido de marcador de posición decente, pero no conoce tu negocio como tú. Revisa cada página y reescribe el texto para reflejar tus servicios reales, tu valor auténtico y tu voz genuina.
Revisa la vista móvil antes de publicar. Hostinger hace que tu sitio sea responsivo automáticamente, pero a veces las imágenes y los espaciados necesitan ajustes menores en pantallas pequeñas. Siempre previsualiza en móvil antes de ponerlo en línea.
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 cosas más sencillas que puedes hacer para mejorar tu visibilidad en los resultados de búsqueda.
Usa la biblioteca de medios para mantenerte organizado. En Más > Biblioteca de medios, 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 la coherencia de tu 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, agregar nuevas entradas de blog y perfeccionar tus páginas a medida que tu negocio evoluciona.
Hostinger Website Builder elimina casi todas las barreras que solían interponerse entre tú y un sitio web profesional. La IA hace el trabajo pesado de diseño y redacción, 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, tendrás un sitio web en vivo y pulido funcionando en menos de una hora.
