Guía de estilo de Webflow: arranca cualquier proyecto con Acme

Webflow es tan fácil de usar y tan flexible como se puede pedir, pero cuando empiezas un proyecto puedes pasar horas dando estilo a los elementos básicos y luego repetir lo mismo en el siguiente. Hay quien prepara una guía de estilo desde el principio, de modo que al añadir un párrafo o lo que sea, el estilo base de ese elemento ya está ahí. Así es como debería ser: un sistema de diseño sólido lo vuelve todo más simple y rápido, y las reglas de tu proyecto quedan establecidas. El problema es que a nadie le apetece añadir todos los elementos de etiquetas base, como <p>, <h1>, <h2> y demás, cada vez que empieza un proyecto nuevo. Sí, a la larga ahorra tiempo, pero ¿para qué hacerlo cuando los expertos de Webflow ya lo han hecho por ti? Y sí, otra vez: por eso adoramos al equipo de Webflow.

Solo tienes que seguir el enlace al práctico proyecto clonable que creó Webflow University, clonarlo, abrirlo, copiar todo y pegarlo en la página de guía de estilo de tu proyecto nuevo y vacío, y después dar estilo a los elementos y listo. Webflow hizo todo el trabajo, y el proyecto contiene todos los elementos de etiquetas base de Webflow. Solo te queda darles estilo y tendrás un sistema de diseño para tu proyecto de Webflow, algo que todo estudio o diseñador de Webflow necesita.

Entra aquí para encontrar el proyecto.

¿Qué es la plantilla de guía de estilo de Webflow?

Es un proyecto de Webflow gratuito y clonable (la guía de estilo "Acme") que reúne en una sola página las etiquetas HTML a las que puedes dar estilo en Webflow: títulos, párrafos, enlaces, listas, imágenes, citas, etiquetas, código y más. Piensa en ella como un sistema de diseño en blanco. No partes de una página vacía, sino de una página que ya enumera todo lo que vas a necesitar estilizar.

Cómo usarla en un proyecto nuevo

Abre el enlace de arriba y clona el proyecto en tu propio espacio de trabajo.
Abre el clon en el Designer y ve a su página de guía de estilo.
Selecciona la sección de guía de estilo de esa página (todo su contenido) y cópiala.
Abre tu proyecto nuevo y pégala en una página de guía de estilo en blanco.
Da estilo a cada elemento una sola vez (tus títulos, párrafo, enlaces y demás) y todo lo que construyas después heredará esas reglas.
Da estilo tú mismo a la etiqueta Body (All pages): el body de una página no se puede copiar, así que no viene en la plantilla. Selecciona el elemento Body en tu nueva página de guía de estilo y define ahí tu fuente por defecto, el tamaño de fuente, la altura de línea y el fondo (guía de etiquetas HTML de Webflow).

Una cosa que conviene saber: según Webflow, los estilos aplicados a las etiquetas HTML base no se trasladan al pegar entre proyectos. La página pegada trae la estructura y las clases, así que el estilo lo haces en tu nuevo proyecto, que de todos modos es el objetivo del ejercicio (nota de Webflow sobre copiar y pegar entre proyectos).

¿Por qué empezar cada proyecto con una guía de estilo?

Porque das estilo a cada elemento base una sola vez en lugar de una y otra vez. Cambia el estilo de un título o de un párrafo en un solo lugar y se propaga por todo el sitio, lo que mantiene el proyecto coherente y te ahorra tiempo en cada página que construyas después. Si quieres ir un paso más allá, nuestro artículo sobre Finsweet Client-First explica un sistema de nomenclatura de clases que combina muy bien con una guía de estilo, y nuestra selección de extensiones de Chrome imprescindibles para Webflow reúne algunas herramientas más para acelerar el Designer. Encontrarás más herramientas y consejos en el artículo sobre herramientas gratuitas y de pago para pequeñas agencias y freelancers, y si la especificidad te da problemas al dar estilo, lee cómo dominar la especificidad CSS en Webflow.

Para tutoriales de Webflow en profundidad, entra aquí.

Preguntas frecuentes

¿Existe una plantilla gratuita de guía de estilo para Webflow?

Sí. Webflow University publica un proyecto de guía de estilo gratuito y clonable que contiene las etiquetas HTML base a las que puedes dar estilo en Webflow. Clónalo, copia la sección de guía de estilo y pégala en tu propio proyecto.

¿Los estilos de las etiquetas base se trasladan al pegar entre proyectos?

No. Webflow indica que los estilos aplicados a las etiquetas HTML base no se importan al pegar de un proyecto a otro, así que planea dar estilo a los elementos base en tu nuevo proyecto, incluida la etiqueta Body (All pages), que no se puede copiar en absoluto.

¿Necesito una página de guía de estilo en cada proyecto de Webflow?

No es obligatoria, pero merece la pena. Dar estilo a los elementos base en un solo lugar al principio hace que cada página que construyas después herede las mismas reglas.