Introducción a webflow

¿Qué es webflow?

Webflow es una herramienta nocode de desarrollo web que permite a los usuarios crear páginas web sin código, de manera visual.

Puedes construir directamente interactuando con el navegador de manera visual y se generará el código HTML, CSS y Javascript de tu web.

Si quieres conocer todo sobre webflow, hemos escrito un artículo en el que encontrarás las diferentes funcionalidades y características, pros y contras de la herramienta, puedes encontrarlo aquí.

¿Cómo empezar con webflow?

Los elementos

Para empezar en Webflow es indispensable conocer la barra de navegación que tenemos a la izquierda y, lo es más aun, conocer el panel para agregar elementos (”add elements”) en la esquina superior izquierda. En él se encontrarán todos los elementos que podremos arrastrar y soltar para empezar a diseñar la estructura de nuestra página web.

Empezaremos añadiendo elementos estructurales (”structure elements”) ya que tienen un rol indispensable a la hora de construir una página web, actúan como contenedores (wrappers) para los elementos “hijo” y divide la página en segmentos.

La web se trata de construir cajas que están construidas en HTML, darles propiedades y nombres gracias al CSS y, al darle esa combinación de cajas, nombres y propiedades podemos construir la estructura de cualquier web que queramos.

El navegador

A medida que vayamos añadiendo elementos a nuestra página web veremos como en la barra de navegación izquierda, en el navegador (”navigator”) irán mostrándose las diferentes capas que vayan conformando nuestra página y podremos moverlas de sitio, seleccionarlas, etc. e ir cambiando la estructura de nuestra web.

Panel derecho

Al arrastrar y soltar cualquiera de los elementos que añadamos en nuestra página web y seleccionarlo se nos abrirá a la derecha un panel con diferentes secciones:

• Estilo: cambia el espaciado, el tamaño, la posición y otras pequeñas características de estilo de cualquier elemento.
• Configuración: propiedades únicas para diferentes tipos de bloques; por ejemplo, puedes cambiar la URL a la que se vincula un botón.
• Administrador de estilos: una lista de todas las clases y etiquetas personalizadas de tu proyecto.
• Interacciones: diseña animaciones personalizadas para cualquier elemento del sitio.

El CMS

Además de su enfoque en el diseño visual, Webflow también proporciona un conjunto completo de herramientas de CMS, lo que permite a los usuarios crear y gestionar contenido dinámico, como blogs, portfolios, tiendas en línea y mucho más. Permite controlar la estructura del contenido, crear relaciones entre diferentes tipos de contenido y gestionar fácilmente la información en la base de datos.

Plantillas

La forma más sencilla de empezar en una herramienta con una curva de aprendizaje elevada como es webflow es apalancándote en las plantillas que la misma ofrece, puedes encontrar aquí más de 2.000 plantillas para no tener que empezar de 0.

O también puedes utilizar Relume, la mayor librería de componentes para webflow del mercado. Si quieres saber más sobre Reluma hemos redactado un artículo explicando todo sobre la herramienta aquí.

‍

Si quieres ver todo esto en la práctica puedes ver este video en el que Álex Vaughtton (el creador de Nocodehackers) recrea una página web real en menos de 15 mins.