Si tienes algo de experiencia con el funcionamiento de la web, Webflow es una herramienta bastante intuitiva. No necesitas leer una biblioteca entera de documentación para empezar a crear un sitio web espectacular.
Pero existen algunos trucos profesionales que los diseñadores han descubierto por casualidad, además de otros compartidos por el equipo de Webflow en el foro. Sin duda, te ayudarán a agilizar tu flujo de trabajo de diseño de forma considerable.
Esta publicación apareció originalmente en el magnífico blog de Vincent, inb4.webflow. Se ha ampliado con algunos consejos adicionales del equipo de Webflow.
1. Usa enlaces que no sean HTTP añadiendo una tilde invertida (o acento grave)
Supongamos que, tras investigar un poco, has descubierto un fragmento de código que hace que un enlace funcione como el botón de retroceso del navegador: window.history.go(-1).
Pero cuando añades ese fragmento de código en el cuadro de URL de la configuración de un enlace, Webflow añade automáticamente http:// al principio, arruinando cualquier funcionalidad ingeniosa que no fuera HTTP que tuvieras en mente.
¡Pero hay una solución! Siempre que necesites añadir código especial en lugar de un enlace HTTP, simplemente coloca una tilde invertida (`) delante del código, pulsa Tab o haz clic fuera del campo, y Webflow no añadirá el famoso http://.
Esto es muy útil, ya que lo que puedes incluir en un atributo HREF evoluciona constantemente. Webflow ya cubre los enlaces HTTP, mailto, tel y de anclaje. Pero cualquier función nueva que surja requerirá esa tilde invertida.
2. Centra verticalmente el destino de un enlace de anclaje con atributos personalizados
Al hacer clic en un enlace de anclaje en Webflow, normalmente la sección anclada se desplaza a la parte superior de la página o justo debajo de la barra de navegación.
¿Pero qué pasa si quieres llevar la sección anclada al centro de la ventana gráfica? Es fácil: solo tienes que añadir un nuevo atributo personalizado a la sección llamado data-scroll y establecer su valor en mid.
Selecciona el elemento al que quieres anclar (no el enlace que activa el desplazamiento), ve a la pestaña de configuración (Settings) y haz clic en el icono + para añadir un nuevo atributo personalizado.
¡Y listo! Ahora la sección se centrará en la ventana gráfica cuando hagas clic en su enlace de anclaje.
Nota: Es posible que debas recargar el Designer para que esto funcione en el modo de vista previa. Además, si la sección anclada es más alta que la ventana gráfica, seguirá desplazándose hasta la parte superior de la misma.
3. Controla la velocidad del desplazamiento suave hacia un anclaje
Cuando un elemento tiene un ID de sección definido, puedes configurar un enlace para que se desplace hasta esa sección. Al hacer clic en ese enlace de anclaje, la página realizará un desplazamiento suave hacia ese ID con una transición de tipo ease-in-out durante 1000 ms (es decir, un segundo completo).
Ahora bien, un segundo es mucho tiempo cuando hablamos de una interacción. La mayoría de las interacciones de clic y desplazamiento del ratón duran entre 200 y 350 ms. Por supuesto, tiene sentido que un desplazamiento largo requiera un poco más de tiempo, pero para muchos, 1 segundo es demasiado. Y para quienes desean usar el desplazamiento suave como un efecto narrativo, 1 segundo puede resultar muy poco.
Afortunadamente, puedes cambiar esa velocidad de desplazamiento con atributos personalizados. Puedes hacerlo de dos maneras, dependiendo de si quieres que todas las interacciones de desplazamiento compartan el mismo tiempo o si necesitas un control más preciso:
- Añade el atributo personalizado data-scroll-time a la etiqueta <body> para afectar a todas las operaciones de desplazamiento en la página.
- Añade el atributo personalizado data-scroll-time al elemento específico al que te diriges con el enlace de anclaje para controlar la velocidad de desplazamiento hacia ese elemento.
Por supuesto, también puedes combinar ambos métodos: establece una velocidad de desplazamiento predeterminada para todos los enlaces de la página añadiendo el atributo personalizado al <body>, y anula esa configuración añadiendo otros valores directamente a los elementos específicos.
Aquí te explicamos cómo añadir un atributo personalizado: selecciona el elemento de destino o la etiqueta <body>, ve a la pestaña de Ajustes (Settings) y añade un atributo y su valor en la sección de Atributos Personalizados (Custom Attributes).
Puedes establecer el valor que quieras, siempre que sea un multiplicador del valor predeterminado de 1000 ms. Puedes usar la siguiente fórmula para calcular la duración del desplazamiento suave:
Duración del desplazamiento suave = valor introducido × 1000 ms
Así es como funcionan algunos ejemplos de valores para data-scroll-time:
- 0 = desplazamiento inmediato al elemento
- 0.75 = desplazamiento un poco más rápido que el predeterminado (750 ms)
- 1 = desplazamiento a la velocidad predeterminada (1000 ms)
- 1.25 = desplazamiento un poco más lento que el predeterminado (1250 ms)
- 2 = desplazamiento el doble de lento de lo habitual
- 20 = ModoTortuga™
Ten cuidado con los valores muy altos, ya que no podrás cancelar el desplazamiento una vez que haya comenzado, ni siquiera en el Diseñador. Un desplazamiento largo comenzará, se verá interrumpido por otro evento (por ejemplo, un clic) y luego continuará tan pronto como termine el otro evento.
Este truco fue publicado por Vlad Magdalin en el hilo del foro Customize Webflow Anchor Scrolling Behavior/Speed de febrero de 2014.
4. Selecciona un elemento con una clase combinada en una interacción
¡Sí, puedes seleccionar un elemento con una clase combinada en una interacción! Después de usarlo en prácticamente todas mis interacciones, he comprobado que es totalmente seguro. Es un poco más complejo, así que echa un vistazo a mi tutorial “Afectar a un elemento con una clase combinada”.
5. Haz cálculos directamente en un campo de Webflow
¿Alguna vez te has preguntado cuántos decimales deberías incluir para un elemento que ocupa 1/3 del ancho: 33.3% o 33.333333333333333333333? ¿Siempre tienes la calculadora abierta mientras diseñas?
Afortunadamente, no necesitas saber la respuesta. Ni tener la calculadora abierta. Porque Webflow puede hacer los cálculos por ti.
Solo tienes que introducir tu cálculo (por ejemplo, 100/3) en cualquiera de los campos de ancho o alto en la pestaña de Estilo, pulsa Intro o Tabulador y observa la magia. ¡No olvides añadir la unidad en la que quieres el resultado final!
Por qué tu equipo de diseño debería usar Webflow
Descubre cómo los equipos de diseño están optimizando sus flujos de trabajo —y creando mejores experiencias— con Webflow.
6. Resalta todos los elementos con la misma clase
A diferencia de los otros consejos, este está bastante documentado y es muy conocido. Pero también es fácil pasarlo por alto, y muchos usuarios nuevos en Webflow no lo conocen.
¿Ves la etiqueta debajo del campo del selector en la pestaña de Estilo? Te indica cuántas instancias del selector actual aparecen en la página en la que estás trabajando, además de en otras páginas.
Es muy práctico, ya que puede evitar que modifiques elementos que ya están perfectos y ayudarte a decidir cuándo crear una clase combinada o una totalmente nueva.
Pero, ¿sabías que puedes hacer clic en ese mensaje para resaltar visualmente todos los elementos con el mismo selector? Pues sí, puedes.
Así que, si seleccionas un objeto con la clase ".demo-image" y haces clic en el texto "X en esta página, Y en otras páginas", todos los demás objetos con esa clase aparecerán con un borde rosa. Incluso si tienen una clase combinada después del selector seleccionado.
Esta función también funciona cuando seleccionas un selector de nivel superior.
7. Borra estilos con Option/Alt + Clic
En las primeras etapas de un diseño, puedes acabar dando muchas vueltas a tus decisiones. (O al menos, eso me pasa a mí). Y a menudo, mientras trabajas en tus puntos de interrupción (breakpoints) responsivos, basta con borrar un estilo de las pantallas más grandes para solucionar el problema.
Por suerte, hay una forma rápida y sencilla de eliminar un ajuste de estilo de un elemento. Solo tienes que pasar el cursor sobre cualquier estilo resaltado en azul que hayas añadido, mantener pulsada la tecla Option (en Mac) o Alt (en Windows) y hacer clic.
¡Eso borrará inmediatamente el estilo que añadiste!
Nota: Si el estilo que añadiste sobrescribe un estilo predeterminado o heredado, esto actualizará el estilo al valor predeterminado o heredado, en lugar de eliminarlo por completo. Por ejemplo, los elementos de encabezado en Webflow tienen márgenes superior e inferior por defecto. Si los cambiaste para tus estilos H1, por ejemplo, hacer clic con Opción+clic restaurará los márgenes predeterminados, no los pondrá a cero.
8. Ajusta varios valores de margen o relleno a la vez con Alt/Shift + arrastrar
¿Establecer un margen del 5% en los cuatro lados de una tarjeta, uno por uno?
Nadie tiene tiempo para eso.
Así que mantén presionada la tecla Opción (Alt en Windows) mientras arrastras ese valor de margen o relleno para ajustar dos lados opuestos (arriba y abajo o izquierda y derecha), o mantén presionada la tecla Comando (Control en Windows) para ajustar los cuatro lados al mismo tiempo.
9. Acelera las actualizaciones de unidades con Shift
¿Necesitas subir tu titular principal de 3 a 4 em, pero no quieres escribirlo? ¿O pulsar la flecha hacia arriba 10 veces?
Solo mantén presionada la tecla Shift mientras pulsas la flecha hacia arriba o hacia abajo en cualquier cuadro de unidad (por ejemplo, margen, relleno, ancho, alto, tamaño de fuente, etc.) para moverte de diez en diez en lugar de uno en uno.
10. Muévete entre elementos en el orden del Navegador con Opción + flecha arriba o abajo
¿Necesitas llegar rápidamente a un elemento padre o hijo sin cambiar al Navegador? Solo selecciona un elemento y mantén presionada la tecla Opción mientras pulsas la flecha hacia arriba o hacia abajo. Esto te permite navegar rápidamente por elementos anidados y padres y, a diferencia de usar solo las flechas, te moverá entre secciones después de haber pasado el último hijo de la sección anterior.
11. Duplica elementos con Opción + arrastrar
Aquí tienes un truco muy útil que reconocerás al instante si conoces Photoshop o Sketch: la próxima vez que necesites duplicar un elemento que ya has diseñado, haz clic en él y mantén presionada la tecla Opción (o Alt en Windows) mientras arrastras el elemento a una nueva ubicación. En lugar de mover el elemento seleccionado, simplemente lo duplicará en la nueva ubicación, ¡incluyendo todos sus elementos hijos anidados!
