Volver a los artículos
5 Consejos y trucos de Webflow que apostamos a que no conocías
Recursos

5 Consejos y trucos de Webflow que apostamos a que no conocías

Si eres un profesional experimentado puede que conozcas todo esto, pero pensamos que sería una buena idea mirar algunos de nuestros trucos favoritos de flujo de web menos conocidos.

Flowbase
3 de noviembre de 2019

Truco Webflow 01

Ver CSS personalizado en el diseñador sin publicar

Puede que lo hayas hecho antes, has añadido algo de CSS personalizado en la configuración de la página y ahora tienes que esperar a que el sitio se publique para ver los cambios.

Estás perdiendo unos segundos preciosos! Podrías haber utilizado simplemente el componente embed-code, de esta manera puedes ver rápidamente esos cambios de CSS sin esperar a la publicación de la página para ver los cambios.

Puedes poner el HTML personalizado incrustado en cualquier parte de la página.

Cambiar el tamaño de la fuente de la clase "párrafo" a 18px



Truco Webflow 02

Cálculos matemáticos directamente en el campo de flujo de la red.

Alguna vez has estado trabajando en un sitio web y has tenido que sacar la calculadora para hacer algunas sumas rápidas... Bueno, lo siento, te vas a sentir un poco tonto.
Podrías haber introducido eso directamente en el campo y hacer que webflow calculara esos números por ti.

Introduces los campos así:
100/4
33 * 33
140 - 22

Seguido de la unidad que quieras, por ejemplo, %, px, EM, etc
.

Si estás construyendo columnas, no te conformes con un 33%. Eres MEJOR que eso.... Sinceramente... qué pensará la gente de ti si sabes que cortas estas esquinas así...
Solo escribe en el campo 100/3% y AHORA te importa. Eso es delicadeza hijo.

Truco Webflow 03

Cambie el desplazamiento a la velocidad de sección/anclaje

Alguna vez has utilizado los enlaces de anclaje de webflow y has pensado Maldita sea Webflow que es un poco rápido...
Quizás te has preguntado si puedes cambiar eso... Bueno, usted puede, y es muy fácil ...

Bueno, para hacer esto usted va a añadir un atributo personalizado data-scroll-time y luego establecer el valor con algo de abajo:

  • data-scroll-time = 0 se desplazará inmediatamente al elemento sin ningún tipo de retraso.
  • data-scroll-time = 0.75 se desplazará un poco más rápido que el valor por defecto
  • data-scroll-time = 1 se desplazará tan rápido como de costumbre
  • data-scroll-time = 1.25 se desplazará un poco más lento que el valor por defecto
  • data-scroll-time = 2 se desplazará dos veces más lento de lo habitual
  • data-scroll-time = 20 habilitará el TurtleMode
    Consejo útil - Puede utilizar este atributo personalizado en la etiqueta body que lo aplicará a todos los enlaces de anclaje.
Añadir atributo personalizado para cambiar la velocidad de desplazamiento

Truco Webflow 04

Cambiar el tamaño del contenedor predeterminado de Webflow

Si usted ha estado usando webflow por un tiempo es probable que utilice div-bloques para gestionar sus contenedores. Pero tal vez usted necesita para actualizar un sitio antiguo que los utiliza, o tal vez sólo como ser usted.

De cualquier manera, usted puede simplemente añadir este poco de código y cambiar el estándar 960px Contenedor


// Truco del flujo de la red 05

Cambiar los puntos deslizantes de Webflow por defecto

¿Cansado de esos viejos y aburridos puntos blancos para tu slide nav? Con el poder del código personalizado, es muy fácil hacer cambios de estilo. Como el Consejo 01 destacó, puede copiar su código en un HTML incrustado para ver los cambios directamente en la vista previa en vivo, o puede poner el código personalizado en la página o el código de configuración del proyecto.

Cambiar el tamaño y el color de los puntos de navegación del deslizador a púrpura y 20px


SOBRE EL AUTOR
Flowbase

Flowbase es la empresa líder en recursos de Webflow. Proporcionamos a los clientes una colección de recursos premium y gratuitos que les ayudan a crear mejores productos con Webflow.

¿Disfrutó de esta lectura?

Manténgase al día con las últimas noticias, estrategias e ideas sobre el negocio del vídeo enviadas directamente a su bandeja de entrada.

¡Gracias! Su presentación ha sido recibida!
¡Uy! Algo salió mal al enviar el formulario.

Recibe los recursos de la web directamente en tu buzón.

Inscríbete para recibir información semanal e inspiración en tu bandeja de entrada.

OTRAS GUÍAS Y LECCIONES

Impulsa más tu sitio web de flujo de datos.