Tutorial de Webflow: la guía definitiva para principiantes

Hay mucho revuelo en torno al movimiento "no-code", una ola de tecnologías que nos permiten crear software sin escribir código. Pero el código es el núcleo de internet. No se trata de prescindir de él para crear sitios web y aplicaciones.Este movimiento se centra, en realidad, en hacer que programar sea más fácil (y rápido) mediante la visualización. Es decir, tú solo diseñas y plataformas como Webflow escriben el código por ti.

Si te acercas a Webflow con la mentalidad de diseñar basándote en los fundamentos del código, podrás aprender rápidamente. Y, además, puede que termines aprendiendo a programar también.

¿Qué es Webflow?

Webflow es una herramienta de diseño y desarrollo web, además de una plataforma de comercio electrónico, CMS y alojamiento. Cada aspecto de la plataforma está representado por un conjunto específico de productos y funciones:

El Designer

Como herramienta de diseño web visual firmemente basada en los estándares y las mejores prácticas de la web, el Designer traduce tus decisiones de diseño en HTML, CSS y JavaScript limpios y listos para producción. Lo creamos para permitir que los diseñadores desarrollen sitios web de una forma familiar —es decir, visualmente— sin sacrificar la calidad.

Si te dedicas principalmente a crear prototipos, puedes usar el Designer por sí solo, ya sea compartiendo el prototipo con desarrolladores para que lo reproduzcan o exportando el código.

Pero para experimentar todo el potencial de Webflow, querrás combinar el Designer con el CMS y nuestro alojamiento.

El CMS

Al igual que el Designer, el CMS es una herramienta de desarrollo web sin código. Cuenta con elementos dentro del Designer (donde trabaja el diseñador del sitio) y elementos en el sitio (donde trabajan el cliente o los gestores de contenido). A este último elemento lo llamamos Editor, pero hablaremos de eso más adelante.

Por ahora, solo debes saber que, en el Designer, el CMS te permite estructurar tipos de contenido que publicarás una y otra vez —como entradas de blog, páginas de productos, etc.— combinando "campos" modulares. Una vez que hayas creado tus tipos de contenido, a los que llamamos Colecciones, puedes usar el Designer para determinar cómo se ven los elementos de la Colección en el sitio (como el aspecto de cada entrada de blog).

Comercio electrónico

Webflow Ecommerce te permite aprovechar el potencial del Designer y el CMS para crear una experiencia de comercio electrónico totalmente personalizada. Cualquier proyecto de Webflow puede convertirse en un sitio de comercio electrónico, aunque el precio del alojamiento difiere ligeramente del de un sitio web normal.

Puedes conectar tu sitio web de comercio electrónico con pasarelas de pago como Stripe, Apple Pay, Paypal o Google Pay, a la vez que amplías las capacidades de tus tiendas con diversas integraciones.

Hosting

La pieza final del rompecabezas de Webflow es nuestra plataforma de Hosting. Respaldada por Amazon Web Services (AWS) y Fastly, es increíblemente rápida, muy fiable, cuenta con seguridad de nivel empresarial y la necesitarás para disfrutar de algunas de nuestras mejores funciones, entre ellas:

• El CMS
• El Editor
• Gestión de formularios
• Imágenes adaptables (cambio automático de tamaño de las imágenes según el dispositivo para mejorar el rendimiento)
• SSL/HTTPS gratuito (seguridad mejorada del sitio que Google prácticamente está convirtiendo en un requisito indispensable para los sitios que solicitan información a los visitantes)
  

Muy bien, ahora que conocemos el terreno, hablemos de cómo empezar.

Diseñar y construir una página de inicio

Antes de crear nuestro primer proyecto desde cero, debemos entender cómo se construyen fundamentalmente los sitios web en la red: con HTML y CSS.

Los fundamentos: el modelo de caja

Los sitios web utilizan el modelo de caja, un principio de diseño que nos permite entender que todo en una página web es, básicamente, una caja dentro de otra. Estos componentes HTML se conocen como "divs".

En la imagen de arriba, tenemos una sección (con borde negro), un contenedor (con borde rojo) para mantener todo adaptable dentro de la sección, y varios divs (con borde azul) que actúan como contenido dentro del contenedor.

La nomenclatura para sección, contenedor y div depende de cómo diseñes y etiquetes los divs, utilizando lo que se conoce como clases CSS.

Usamos CSS para el espaciado, posicionamiento, alineación, fuentes y estilos de estas cajas HTML y su contenido. Añadimos lo que se llama una clase CSS a cada caja, que es como un ajuste preestablecido que creas para la configuración de estilo. Las clases son reutilizables en todo el sitio y te permiten mantenerte organizado mientras construyes tu página web.

En resumen:

• HTML es el componente de la página
• CSS es el diseño de ese componente

¡Felicidades! Ahora tienes una idea general de cómo se construyen los sitios web. Un ejercicio divertido que puedes hacer ahora es ir a tu sitio web favorito, digamos apple.com, y abrir la herramienta de inspeccionar elementos de tu navegador.

Puedes ver el código (a la derecha) y observar cómo todo es una caja (o sea, un div). Dentro de esos divs a veces hay otros divs con contenido como encabezados, párrafos y botones. Todo esto es HTML. Puedes ver cómo el diseñador de apple.com etiquetó sus clases para cada componente/elemento y div, además de poder ver el CSS en la sección de Estilos.

Muy bien, manos a la obra.

Construyendo en el Diseñador

La mejor forma de aprender Webflow es construyendo directamente en Webflow. Para aprovechar al máximo esta guía, necesito que me sigas en todos los pasos que vamos a repasar.

El primer paso es crear un proyecto en blanco.

Aquí verás todo lo necesario para crear cualquier sitio web potente. En el lado izquierdo, verás todo lo que necesitas para añadir y editar componentes, y a la derecha, todo lo necesario para darles estilo.

En Webflow, los 3 primeros botones del lado izquierdo del Diseñador son los que usarás para los elementos HTML.

El primero es el panel Añadir elementos. Aquí puedes añadir componentes como divs, botones, texto, imágenes, formularios, etc. El segundo es donde puedes añadir y gestionar símbolos. Son secciones que puedes guardar previamente y reutilizar en varias páginas, como tu barra de navegación o el pie de página. El tercero es el Navegador, donde puedes ver la jerarquía y estructura de tus componentes.

Antes de soltar cualquier elemento en el lienzo, determinemos nuestra tipografía y el tamaño de fuente de nuestro Body (la página principal sobre la que construimos).

Empieza seleccionando Body en el Navegador. Luego, dirígete al panel de Estilo (a la derecha) y selecciona la clase "Body (All Pages)". Cualquier edición de estilo que hagamos en esta clase podrá reutilizarse en otras páginas de nuestro sitio. Por ejemplo, si queremos añadir un color de fondo principal a todas nuestras páginas, lo haríamos aquí. En este caso, mantendremos el color blanco predeterminado.

Querremos establecer nuestra fuente base y tamaños yendo a Tipografía y seleccionando una fuente de la lista. También puedes añadir una fuente personalizada en la configuración de tu proyecto, la cual se reflejará en el menú desplegable.

Seleccionamos la fuente Verdana y ahora queremos elegir el tamaño de fuente base. 16px es un estándar para el tamaño de fuente, y añadir "1.4" para la altura asegurará que la altura de la fuente sea 1.4 veces el tamaño de la misma. Si quieres aprender más sobre tipografía web avanzada y ajustes de fuente, echa un vistazo a este video:

Vamos a añadir algunos elementos. Empezaremos incorporando una barra de navegación preconfigurada.

A continuación, debajo, añadiremos un div de sección para nuestra sección principal (hero). Una vez que hayamos colocado el div de sección, podemos asignarle una clase y llamarla "Hero Section", así mantendremos todo organizado y veremos los elementos claramente en nuestro Navegador.

Ahora podemos hacer algunos cambios de estilo en nuestra barra de navegación, empezando por poner el fondo del mismo color que nuestro cuerpo (Body).

Solo tienes que seleccionar la barra de navegación en el Navegador y cambiar el color de fondo en el panel de Estilo.

Ahora vamos a añadir un logotipo. Asegúrate de tener tu logo guardado en formato PNG o SVG y súbelo al gestor de recursos de tu proyecto en Webflow. Desde ahí, puedes arrastrar y soltar el icono directamente en tu lienzo.

Ahora ajustemos el relleno (padding) del logotipo y añadamos un enlace de navegación extra.

Añadir un nuevo enlace a la barra de navegación es tan sencillo como copiar y pegar: Comando C y Comando V en Mac, Control C y Control V en Windows.

¡Genial! Ya tenemos una barra de navegación sencilla. Vamos a ponernos manos a la obra con la sección principal.

Empezaremos añadiendo un contenedor (Container) a nuestra sección principal. Queremos recrear la página de inicio actual de Webflow (más o menos), así que también necesitaremos añadir una cuadrícula (Grid) a nuestro contenedor.

Una vez añadida la cuadrícula, podemos hacer clic derecho sobre ella y eliminar la fila extra que viene por defecto. Así nos quedará una cuadrícula sencilla de dos columnas dentro de nuestro contenedor.

Volviendo al modelo de caja, también querremos añadir un div en cada columna y asignarles clases (Left Column Grid y Right Column Grid) para tenerlas bien etiquetadas y poder darles estilo más adelante.

Hemos añadido un elemento de imagen a nuestra cuadrícula de la columna derecha y ahora podemos añadir nuestro contenido dentro de la cuadrícula de la columna izquierda.

Empezamos con un encabezado, un párrafo y un botón. Como puedes ver en el vídeo de arriba, podemos añadir elementos arrastrándolos y soltándolos en el lienzo, o directamente en nuestro Navegador. Al trabajar con cuadrículas, es más fácil alinear las cosas desde el Navegador. Como ves, añadimos el párrafo en el Navegador en lugar de en el lienzo, porque el elemento no se estaba colocando donde queríamos.

Ahora podemos añadir nuestro contenido y darle estilo usando el panel de Estilo a la derecha. Ajustemos el tamaño de la fuente y añadamos margen para el espaciado.

Vamos a hacer que esto se vea un poco mejor, empezando por el botón de llamada a la acción (CTA).

Cambiemos el color del botón y añadamos más relleno entre el texto del botón y los bordes internos del botón propiamente dicho.

Usamos el relleno (padding) para crear espacio dentro de los elementos, y el margen (margin) para crear espacio fuera de ellos. Para separar el encabezado, el párrafo y el botón, usamos margen porque queríamos crear espacio entre estos elementos. Pero para nuestro botón, queríamos crear más espacio dentro del propio elemento, así que usamos relleno.

Esto nos lleva perfectamente a la parte en la que añadimos relleno a nuestra sección principal para darle a nuestra cuadrícula un poco de aire respecto a la barra de navegación.

Después de añadir relleno a nuestra sección principal, también queremos centrar nuestra imagen dentro de la cuadrícula de la columna derecha para alinearla con la de la izquierda.

Para hacer esto, simplemente seleccionamos la cuadrícula de la columna derecha que creamos antes y, en el panel de estilo, hacemos clic en alinear al centro. Esto asegurará que todo el contenido dentro de la cuadrícula de la columna derecha quede centrado en el cuadro.

Ahora vamos a añadir una sección para mostrar todos los clientes que tenemos.

Después de crear nuestra cuadrícula de cinco columnas, vamos a establecer el nombre de clase en la cuadrícula como Client Logo Grid. Ahora, querremos subir nuestros logotipos al gestor de recursos. Usaré un logotipo cinco veces para fines de demostración.

Simplemente arrastra y suelta tus logotipos en cada columna de la cuadrícula. Después de soltar la primera imagen, queremos asegurarnos de que nuestro logotipo esté en el medio de la cuadrícula. Para centrar el logotipo, selecciona la imagen y, en el panel de estilo, haz clic en justificar al centro.

Como estoy usando el mismo logotipo para las cinco columnas, simplemente los copié y pegué (Comando C y Comando V en Mac, Control C y Control V en Windows) en el vídeo de arriba.

¡Acabamos de construir nuestra primera página de inicio!

No soy un gran diseñador web, pero espero que ahora entiendas mejor cómo abordar Webflow como principiante. Si logras llegar hasta aquí, tus habilidades de desarrollo en Webflow mejorarán en poco tiempo.

Como referencia, así es como se ve mi navegador. Observa la ubicación de nuestros componentes:

Pero espera, solo sabemos que esto se ve bien en escritorio. ¿Qué pasa con la tableta o el móvil?

Hazlo adaptable

Ahora, si alguna vez has trabajado con diseño adaptable, sabrás que las cosas pueden complicarse un poco en esta etapa.

La buena noticia es que Webflow ya ha hecho gran parte del trabajo duro por ti. Para verlo en acción, vamos a recorrer las distintas vistas previas de dispositivos disponibles en el centro de la barra superior del diseñador:

Ahora alterna entre cada punto de interrupción y observa cómo afecta a tu diseño.

Si diseñas de la forma en que lo hicimos, Webflow intentará automáticamente que todo sea adaptable. Pero a veces necesitas reducir el tamaño o mover las cosas si usas una cuadrícula (que es nuestro caso).

Podemos ver que cualquier cosa en modo tableta, o más pequeño, hace que nuestra imagen destacada se vea rara. El tamaño de nuestra fuente también es un poco grande, además de que nuestro contenido está demasiado cerca de los bordes.

Vamos a arreglar todo esto.

Cualquier cambio de diseño que hagamos en el modo tableta se reflejará en los tamaños más pequeños. Así que empieza en el modo tableta y avanza hacia abajo según sea necesario.

Primero, empieza por arreglar la forma en que se muestra la imagen destacada. En lugar de que la imagen esté aplastada a la derecha, queremos moverla a la parte inferior de la sección principal.

Para hacer esto, haz clic en editar cuadrícula. Desde ahí, añade una fila adicional y haz clic derecho para eliminar la columna izquierda en la que está nuestra imagen destacada. Esto forzará automáticamente a nuestra cuadrícula de la columna derecha, con nuestra imagen dentro, a la nueva fila inferior que creamos.

Una vez que eso suceda, haz clic en la cuadrícula de la columna derecha y mueve la imagen al centro del div haciendo clic en justificar al centro. Desde ahí, añade un poco de margen superior a la cuadrícula de la columna derecha para bajarla.

Todo se ve bien, pasemos al modo horizontal para móviles.

Lo primero que notamos es que el tamaño de la fuente es demasiado grande, así que vamos a reducirlo. Luego, queremos separar el contenido de los bordes. Para arreglar esto, selecciona el contenedor donde está toda la cuadrícula y añade relleno a los lados.

Por último, vayamos al modo vertical para móviles.

De nuevo, la fuente es muy grande. Vamos a reducir el tamaño del título, el párrafo y el texto del botón.

¡Listo!

Como puedes ver, los logotipos de los clientes en la parte inferior se mantuvieron adaptables y se ajustaron solos. Pero si quieres que los logotipos se apilen uno sobre otro, sigue el mismo proceso que usamos para la cuadrícula en nuestra sección principal.

Lo lograste: tu primera página de inicio adaptable, creada en Webflow.

Deberías estar orgulloso, yo lo estoy. Acabamos de desarrollar visualmente una página de inicio completa con código. Crear en Webflow nos permite experimentar el poder del código sin tener que escribirlo. Echa un vistazo a todo el HTML y CSS que escribimos visualmente en esta guía:

Eso es genial, ¿no crees? Si tienes alguna pregunta, déjala en los comentarios de abajo. ¡Feliz creación!