Guía / Artículo

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

Flowbase
28 de enero de 2021
5 Consejos y trucos de Webflow que apostamos a que no conocías

// Webflow Trick 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.

// Webflow Trick 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í...
Sólo escribe en el campo 100/3% y AHORA te importa. Eso es delicadeza hijo.

// Webflow Trick 03

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

Alguna vez has utilizado los enlaces de anclaje de Webflow y has pensado Maldito Webflow que es un poco rápido...
Tal vez te has preguntado si puedes cambiar eso... Bueno, usted puede, y es condenadamente 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á TurtleMode


BUENOS CONOCIMIENTOS - puedes usar este atributo personalizado en la etiqueta body que se aplicará a todos los enlaces de anclaje.

// Webflow Trick 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


.w-container {
max-width: 1140px; }
}

// Truco del flujo de la red 05

Cambiar los puntos deslizantes de Webflow por defecto


.w-slider-dot {

background: teal;font-size: 20px;}

.w-slider-dot.w-active {
background: aqua;
font-size: 20px;}
Flowbase
28 de enero de 2021

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.