Cómo crear un sitio web gratis con Webflow y lanzarlo el mismo día

Webflow permite que tanto creativos como emprendedores alcancen sus objetivos en línea, ya que no necesitas saber programar para crear un sitio web de alta calidad y adaptable. Reduce drásticamente las barreras del diseño y desarrollo web, pero también es capaz de cumplir con las exigencias más complejas que internet pueda plantear.

Los siguientes cinco pasos te guiarán en el uso de Webflow, desde el registro hasta el lanzamiento, sin necesidad de conocimientos previos. Explora y crea tu propio espacio en internet.

Nota: para que quede claro, puedes registrarte y crear un sitio web con Webflow de forma gratuita, pero deberás pagar por el alojamiento.

Paso 1. Configuración (1-2 minutos)

El primer paso, obviamente, es registrarse. Empezar es gratis, ¿a qué esperas?

Una vez registrado, Webflow te pedirá que elijas tu nivel de habilidad de una breve lista de opciones. Yo elegí: "No soy diseñador/desarrollador. Solo necesito un sitio web para mí", pero tú deberías elegir la que mejor se adapte a ti, ya que eso determinará el tipo de correos electrónicos educativos que recibirás de Webflow.

Paso 2. Pon todo en marcha (3-5 minutos)

Primero, ponle un nombre a tu sitio. No te preocupes, podrás editarlo más adelante. Por ahora, considéralo solo un nombre de proyecto. Ya tendrás oportunidad de crear tu dominio personalizado después.

Por ahora, mantén la visibilidad de tu sitio en Privado. ¡Lo haremos público en el paso 5!

Nota: tu sitio privado inicial vivirá en <yoursitename>.webflow.io. Siempre tendrás acceso a esa versión de tu sitio, pero podrás conectar tu sitio de Webflow a tu dominio personalizado cuando esté listo para el público. Y si aún no tienes un dominio personalizado, no te preocupes: puedes comprar uno a través de Google Domains directamente desde Webflow.

Elegir una plantilla

Usar una plantilla para tu primer sitio web en Webflow es una forma genial de empezar a familiarizarte. Puedes personalizar fácilmente cualquier plantilla con tus colores, tipografía e imágenes, todo ello sin escribir ni una sola línea de código.

¡Pero no te detengas ahí! Webflow te da control total sobre tu diseño, así que cuando estés listo para añadir funciones personalizadas o cambiar la estructura, encontrarás un montón de tutoriales de Webflow que te guiarán durante todo el proceso de diseño.

Para este tutorial, estoy usando la plantilla Versus Portfolio, que incluye un sistema de gestión de contenidos (CMS) y una base excelente para el rumbo que quiero darle al sitio web de mi negocio. (Si no estás familiarizado con los sistemas de gestión de contenidos, por ahora, piensa en ellos simplemente como una forma sencilla de crear, editar y gestionar el contenido de tu sitio web).

Versus es perfecta para un sitio web tipo portafolio como el que voy a construir para mi agencia digital ficticia, Axe and Forest. Me proporcionará las páginas básicas que mi sitio necesita, como la página de inicio, la página "sobre nosotros" y la página de portafolio.

Para encontrar la plantilla que tú necesitas, usa los filtros de búsqueda.

Paso 3. Personaliza la plantilla de tu sitio web (1-3 horas)

Esta es tu oportunidad para personalizar al máximo el sitio web de tu negocio y hacerlo brillar. Puedes renovar el diseño por completo o hacer los cambios justos para reflejar tus objetivos y tu marca.

Para editar cualquier elemento de una página, solo tienes que hacer clic para seleccionarlo. Esto abrirá el elemento en la pestaña Estilo a la derecha, donde podrás personalizar su diseño, cambiando colores, fuentes, disposición y mucho más.

Empieza por tu página de inicio

Te recomiendo empezar por los cambios en la página de inicio. Esto se debe a que las decisiones de diseño que tomes aquí se verán reflejadas en otras páginas más profundas, como la de "Sobre nosotros" o el portafolio.

Tu página de inicio suele incluir elementos que aparecen en otras partes del sitio; cuando los editas aquí, las demás instancias se actualizan automáticamente para coincidir. Por ejemplo, cambiar la fuente de un título puede afectar a los títulos de todo el sitio.

Esto ocurre porque Webflow utiliza clases CSS para controlar el aspecto de los elementos de tus sitios, tal como lo haría un desarrollador web. Si conoces herramientas de diseño gráfico como Photoshop, Illustrator o Sketch, puedes pensar en las clases como el equivalente web de los estilos.

Edición de símbolos

El creador de la plantilla Versus tuvo la amabilidad de convertir algunos de sus elementos, incluida la barra de navegación principal, en símbolos. Cualquier edición que realices en un símbolo se aplicará automáticamente a todas las demás instancias de ese símbolo en tu sitio.

Los símbolos aparecen resaltados con un recuadro verde; para editarlos, solo tienes que hacer doble clic sobre ellos.

La mayoría de los elementos de navegación como este tienen el logotipo a la izquierda y los enlaces a las páginas a la derecha. Para editar cualquiera de ellos, selecciona el elemento y personalízalo en el panel de Estilo a la derecha.

Para cambiar el texto o el destino de los enlaces de la derecha, simplemente haz doble clic sobre ellos.

Imágenes de fondo

Puedes cambiar la imagen de fondo de la plantilla seleccionando su contenedor, que en este caso se llama Hero. Puedes imaginar un contenedor como una caja que contiene el contenido de tu sitio.

A veces, resulta más sencillo seleccionar un elemento o contenedor desde la pestaña Navegador, situada a la derecha. Esta pestaña funciona como un esquema de la estructura de tu sitio.

Puedes reemplazar la imagen de fondo de dos formas:

1. Con el contenedor Hero seleccionado, desplázate hacia abajo hasta la sección "Fondo", haz clic en la miniatura de la imagen actual, pulsa el botón "Reemplazar imagen" y sube tu nueva imagen.
2. Añade tu imagen de reemplazo a la pestaña del Gestor de activos, en el extremo derecho de la pantalla. Una vez allí, sigue los pasos anteriores.

Edición de contenido dinámico mediante colecciones

A medida que trabajes en tu página de inicio, notarás que no puedes editar directamente las imágenes y el texto en el área de Proyectos anteriores. Todavía puedes aplicar estilos a esta área en la pestaña de Estilos, pero para editar sus elementos de texto e imagen, deberás dirigirte al panel de Colecciones a la izquierda.

Las colecciones representan el contenido dinámico de tu sitio. Probablemente estés más familiarizado con la idea de contenido dinámico a través de los blogs. El poder del contenido dinámico es que puedes publicar fragmentos del mismo en cualquier parte de tu sitio y, cada vez que realices ediciones, esos cambios se reflejarán en todo el sitio.

En esta plantilla, cada elemento de la colección de Proyectos requiere un nombre, una miniatura del proyecto, una descripción completa del proyecto y una categoría.

Cambiar el contenido de cualquiera de estos campos se actualizará dondequiera que se muestre, incluida la página de inicio y la página dedicada (o de detalle) del proyecto.

Para dominar realmente el uso de las colecciones en Webflow, echa un vistazo al excelente curso gratuito: Creación de sitios web dinámicos con Webflow.

O simplemente empieza a verlo ahora mismo:

Paso 4. SEO y configuración del sitio (más de 10 minutos)

Puedes editar la configuración de optimización para motores de búsqueda (SEO) de cada página abriendo el panel de Páginas y haciendo clic en el icono de engranaje que aparece a la derecha del nombre de la página al pasar el cursor.

Configuración del sitio

Hay un par de ajustes básicos del sitio que querrás revisar antes del lanzamiento, pero asegúrate de explorar toda esta área cuando tengas tiempo.

Subdominio: ¡tu dominio gratuito!

Cada sitio que creas con Webflow comienza su vida en un subdominio gratuito de webflow.io. Además de poder cambiar el nombre de tu sitio web, también puedes personalizar la URL de tu subdominio gratuito.

Cuando estés listo para usar tu propio dominio personalizado, dirígete a la pestaña de alojamiento en la Configuración del sitio y luego agrega tu dominio. Si aún no tienes uno, ¡puedes comprar uno nuevo a través de Google Domains directamente desde Webflow!

Incluso después de configurar tu dominio personalizado, seguirás teniendo acceso a tu subdominio gratuito de webflow.io. Esto te permite realizar cambios en tu sitio web sin publicarlos en tu dominio personalizado; ¡muy útil si quieres experimentar!

Formularios

Si tu sitio necesita un formulario de contacto, es posible que desees actualizar el correo electrónico que aparece en la pestaña Formularios. De forma predeterminada, será el correo electrónico con el que te registraste, pero puedes cambiarlo aquí.

Paso 5. Publicar (al instante)

Cuando estés satisfecho con tu sitio web y listo para lanzarlo, publicarlo es cuestión de un solo clic.

Ya sea que estés en la configuración del sitio desde tu panel de control o en el Diseñador, el botón de publicar se encuentra en la esquina superior derecha. Solo elige los dominios donde quieres publicar tu sitio y lánzalo haciendo clic en Publicar en los dominios seleccionados.

Gestionar tu sitio web después del lanzamiento

La web es un lugar en constante cambio, y una de las maravillas de Webflow es lo rápido y fácil que puedes actualizar tu sitio.

Una vez que tu sitio esté en línea, puedes actualizarlo al instante desde el Diseñador o la configuración del sitio y volver a publicarlo. Si hiciste cambios que aún no quieres mostrar al mundo, publícalos primero en tu subdominio webflow.io para revisarlos antes de lanzarlos oficialmente.

Si usaste Webflow CMS (es decir, tienes colecciones en tu sitio) y hosting CMS, también tendrás acceso al Editor, una herramienta potente para gestionar el contenido. Si has usado WordPress, puedes imaginarlo como una versión más intuitiva y despejada del panel de control.

¿Y lo mejor del Editor? Puedes escribir y editar directamente en la página, así verás al instante cómo quedarán los cambios en el sitio en vivo.

¿Listo para empezar?

Crea tu cuenta gratuita hoy y asegúrate de ver el curso de primeros pasos. ¡Te pondrá en marcha en un abrir y cerrar de ojos!