Contenido
⇨ ¿Qué es Webflow?
Webflow es una herramienta visual de diseño web y gestión de contenido (CMS). La principal ventaja de Webflow es su constructor visual, muy completo e intuitivo, que genera automáticamente el código HTML, CSS y Javascript a medida que se va desarrollando el sitio.
Por otro lado, también merece la pena destacar sus herramientas colaborativas, que te permiten añadir a otras personas para que colaboren en el proyecto o compartirlo con clientes para que puedan supervisar el avance del trabajo.
Este tipo de constructores -presentes ya en otros CMS- permiten a los diseñadores centrarse en el aspecto visual sin perder tiempo en resolver incidencias de código.
La mayor parte de las funciones de Webflow se pueden utilizar de forma gratuita, aunque hay otras más avanzadas que son de pago.
En este artículo vamos a ver con más detalle cómo puedes generar una página web gratis desde el inicio con Webflow.
⇨ Creación de una cuenta en Webflow
Lo primero que tienes que hacer es acceder a la página de inicio de Webflow y crear una cuenta gratuita. Para ello solo necesitarás introducir una cuenta de correo electrónico, tu nombre y una contraseña.
A continuación, la aplicación te formulará una serie de preguntas -suponemos que con propósitos estadísticos y de marketing- sobre cuál es tu perfil profesional, qué experiencia tienes diseñando webs y cuál es el tipo de proyecto en el que vas a utilizar Webflow.
Tras estos pasos iniciales, ya podrás avanzar a la galería de plantillas.
⇨ Galería de plantillas
En la galería de plantillas encontrarás multitud de diseños predefinidos para tu sitio web. Algunas de ellas son gratuitas y luego hay muchas otras de pago.
La verdad es que la galería es muy amplia, pero puedes ayudarte de los filtros y palabras clave para acotar tu búsqueda. Te recomendamos que al llegar a este punto ya tengas más o menos claro lo que estás buscando porque de lo contrario puedes perder bastante tiempo en este punto.
También cabe destacar que puedes encontrar otras plantillas premium tanto en Themeforest como en CreativeMarket. Y si tienes la habilidad suficiente, puedes poner vender tus propias plantillas.
¿De qué va tu proyecto? ¿Es una página de empresa? ¿Es una tienda online? ¿O tal vez un blog de viajes? Para este ejemplo hemos seleccionado una plantilla gratuita enfocada a montar un blog de fotografía.
Una vez elegida la plantilla, solo nos queda elegir el nombre del proyecto y avanzar hacia el siguiente paso, donde la cosa se pone realmente interesante.
⇨ El constructor
A continuación, llegarás al corazón de Webflow y donde la magia de esta herramienta comienza a funcionar de verdad, su constructor, también llamado “Designer”.
Aunque la interfaz sea completamente nueva, tras unos minutos empezarás a apreciar que los elementos están colocados de una forma muy intuitiva y son fáciles de reconocer.
En la parte superior izquierda encontrarás un menú de navegación con diferentes pestañas que te ayudará a añadir elementos al sitio e ir avanzando en su construcción: secciones, columnas, botones, bloques de texto, páginas, e-commerce, imágenes y gráficos, etc… Más abajo tienes otras herramientas para mostrar u ocultar elementos y un buscador para la ayuda, así como guías y tutoriales.
En la parte superior tienes los botones para cambiar la vista responsive y comprobar cómo se va adaptando el sitio web a los diferentes dispositivos: ordenador, Tablet, móvil horizontal y móvil vertical. Además, hay otros botones como exportar código, compartir proyecto o publicar en Webflow o en tu propio dominio, lo cual veremos más adelante.
En la columna de la derecha se encuentran los módulos de propiedades de los elementos. Por ejemplo, si añades un párrafo de texto a la página, en esta columna podrás cambiar el color del texto, su alineación o el tamaño y familia de la fuente. También hay otras pestañas para realizar modificaciones más complejas sobre el código CSS o añadir operaciones de Javascript en los botones.
En el centro del constructor, como es lógico, encontramos el lienzo. Aquí podrás seleccionar directamente los elementos contenidos en la página y verás cómo cambia la estructura del navegador en la columna izquierda y las propiedades del elemento en la columna derecha. Además, haciendo clic con el botón derecho sobre el elemento podrás acceder rápidamente a las principales funciones.
⇨ Finalización del proyecto
Imagina que ya has terminado de diseñar tu nueva web con todas sus páginas, y que se adapta perfectamente a los diferentes dispositivos. A la hora de finalizar un proyecto tienes 3 opciones que te vamos a detallar a continuación:
Alojar el proyecto en webflow.io
Es una opción gratuita y muy recomendable si estás en la fase de prototipado y quieres enseñarle a un cliente el boceto de su página web. Tu página se alojará en un subdominio del tipo mipaginaweb.webflow.io/
Alojar el proyecto con un dominio propio
En este caso tendrás que recurrir a un plan de sitio web de pago. Estos planes van desde los 12$ para un sitio web pequeño (hasta 25.000 visitas/mes) hasta 212$ para tiendas online con mayores necesidades de tráfico y múltiples opciones.
Exportar el código
Esta opción es muy útil si quieres utilizar Webflow únicamente como herramienta de diseño. Al terminar, podrás exportar tanto tu código HTMl como el CSS y el Javascript y solo tendrás que subirlo a tu propio plan de hosting personalizado.
Para poder utilizar esta opción, también tendrás que contratar un plan de pago, en este caso denominado “de cuenta”. Tienes una opción de 16$/mes que te permite exportar hasta 10 proyectos o 35$/mes para proyectos ilimitados.
⇨ Conclusión
Webflow tiene un modelo de financiación freemium bastante interesante, pero sin duda lo mejor que ofrece es su magnífica herramienta de diseño web. También son destacables las posibilidades que ofrece de realizar un proyecto completo y mostrarlo a un cliente o compartirlo con colaboradores antes de pasarlo a producción.
Veremos si finalmente este tipo de CMS consiguen competir con los pesos pesados del mercado como WordPress, Joomla o Shopify.
Como siempre, te damos las gracias por pasarte y esperamos que este artículo haya sido de tu interés.
6 comentarios en «¿Qué es Webflow y para qué sirve?»
Muy buen post, vamos a animarnos a probarlo!
Gracias por vuestro comentario
Excelente post, muy interesante, no tienes un post donde describas el proceso para exportar el còdigo a un hosting y dominio propio?
Hola Julio Muchas gracias por mandarnos tu consulta.
simplemnte cuando exportas te genera los ficheros html, java y css. Solo tienes que subirlo en tu hosting en la carpeta public_html en caso de cpanel y httpdocs en caso de plesk .
Hola una duda si realizamos una tienda online con webflow a la hora de exportarlo tambien nos exportaría las bases de datos y el PHP necesario?
Hola Ivan, gracias por tu comentario. Webflow permite guardar restaurar backups completos de tu tienda online, así como exportarlos en código html y css puro. También se pueden realizar integraciones de tus bases de datos con otras herramientas como Zapier o Mailchimp.