Formación

Flexbox: qué es y cómo dominarlo en Webflow de manera práctica y hasta divertida

Flexbox es sin duda una de las soluciones para el diseño web más espectacular y efectiva. Nos brinda un método para organizar y distribuir en el espacio de nuestra página web todos los elementos

2/2/2021

Webflow es una herramienta online basada en la tendencia NoCode, una filosofía que posibilita crear herramientas y servicios sin conocimientos de programación y con usos prácticos altamente interconectadas.

Flexbox es un poderoso mecanismo de diseño que permite resolver problemas comunes de diseño web responsive con facilidad. Y con Webflow, se puede hacer todo con dos simple métodos:

Ajustes Flex del elemento "padre": simplemente configura un elemento principal para que se muestre: elige Flex, luego define la alineación, envuelve (Wrap) los elementos secundarios en filas o invierte el diseño.

Ajustes Flex del elemento "hijo": luego, atribuye a los elementos secundarios su propio comportamiento de cambio de tamaño, opciones de alineación e incluso orden de visualización específico del dispositivo.

Flexbox puede ayudarte a resolver algunos problemas de diseño muy difíciles y/o creativos.

A continuación te facilitamos dos enlaces en los cuales Webflow nos muestra de manera visual todas las posibilidades de Flexbox con ejemplos prácticos y explicaciones de cada caso.

PUEDES ENCONTRAR CASO CUALQUIER TIPO DE COMPOSICIÓN Y SOLUCIÓN DE DISEÑO:

  • Cada ejemplo viene acompañado de capturas de pantallas explicativas.
  • También existen videos tutoriales para que puedas ver la creación paso a paso.
  • Además puedes editar la propia página en Webflow y averiguar cómo está estructurada.
  • Asimismo puedes acceder a un video de introducción a Flexbox.

Más información: https://flexbox.webflow.com

PRACTICAR, PRACTICAR Y PRACTICAR:

  • Para complementar lo indicado en la página anterior Webflow ofrece una "divertida" sección que deberás de usar con Webflow donde se te propone resolver 28 ejercicios prácticos de uso de Flexbox a modo de rompecabezas.

La dificultad va en aumento a medida de que vas pasando los niveles y te obliga a pensar con lógica.

Más información: https://www.flexboxgame.com

CONSEJO: Debo de indicar que Webflow es una herramienta muy versátil y potente pero que también es necesario aplicar una cierta metodología previa de diseño para que el resultado sea óptimo y sin desperdiciar un tiempo preciado intentando diseñar directamente en Webflow. Un paso previo imprescindible, a mi entender, es elaborar la maqueta y estilo de nuestro proyecto con herramientas de prototipado como Adobe XD o Figma, por citar solo dos de ellas. Sea para nosotros o un cliente ese paso nos ahorrará tiempo y recursos que nos permitirán una vez llegado a Webflow confeccionar el sitio web con más soltura y eficacia.

PRECIO: Gratuito, solo el tiempo que le quieras dedicar.

Una excelente manera de practicar y perfeccionar tu dominio de Flexbox con Webflow.

Explora la página y su contenido, seguro que sea cual sea tu nivel hay cosas que puedes aprender o perfeccionar.

Más información: https://webflow.com

Imagen
Formación

Aprende Webflow con estos veinte video tutoriales en castellano, de la A a la Z

En esta ocasión te propongo seguir una serie de videos en YouTube que te explican a lo largo de veinte videos el funcionamiento y uso de Webflow de la mano de Francisco Aguilera.

Leer...
Imagen
Formación

Formación Webflow en castellano con Academia WebTools

Academia WebTools te ofrece distintas módulos para aprender Webflow, desde uno gratuito hasta dos más por 25€ y 100€ respectivamente. Es un proyecto de reciente creación y que tiene la vocación de evolucionar sumando nuevos contenidos con el tiempo.

Leer...
Imagen
Formación

Formación Webflow en castellano con NoCodeHackers

NoCodeHackers ofrece a través de su curso de formación en castellano, que reúne 64 lecciones en más de 2 horas de videos y textos, un método no solo enfocado a aprender a usar Webflow pero, y sobre todo, una solución para realizar sitios web completos y atractivos sin tener que saber código.

Leer...