Curso de Webflow

Lección 1 • Configuración de su cuenta de Webflow

Guía a través de la creación de la cuenta, la selección del plan y la configuración del espacio de trabajo. Establece el entorno que usará durante todo el curso.

Lección 2 • Páginas, carpetas y estructura del proyecto

Explica cómo crear y organizar páginas, definir la configuración de página y planificar la arquitectura del sitio. Una estructura adecuada evita tener que rehacer trabajo cuando los proyectos crecen en capítulos posteriores.

Lección 3 • Comprensión del modelo de caja (Box Model) en Webflow

Enseña margen, relleno, borde y dimensionamiento tal como Webflow los expone visualmente. Este conocimiento es la base de cada decisión de diseño y espaciado que se tome en capítulos posteriores.

Lección 4 • Navegación por la interfaz del Designer

Describe cada panel, barra de herramientas y área del lienzo en el Designer. Usted adquiere la fluidez espacial necesaria para trabajar eficientemente en todos los capítulos posteriores.

Lección 1 • Construcción de una escala tipográfica

Enseña a crear una jerarquía armoniosa de tamaños de encabezados y cuerpo usando los estilos a nivel de etiqueta de Webflow. Una escala tipográfica definida acelera el estilo consistente en todas las páginas.

Lección 2 • Sistema de color global de Webflow

Introduce el selector de color, el panel de muestras y las variables de color globales. Los colores globales permiten actualizaciones de marca en todo el sitio con un solo clic.

Lección 3 • Estilizado de elementos de texto en el lienzo

Aplica el conocimiento de fuentes y color a encabezados, párrafos, enlaces y bloques de texto enriquecido. Conecta configuraciones abstractas con componentes de página reales que usted reutilizará.

Lección 1 • Construcción del diseño de una página completa

Aplica Flexbox, Grid y posicionamiento en conjunto para construir una página completa de múltiples secciones. Esta sección final consolida todas las habilidades de maquetación antes de pasar a la adaptabilidad responsiva.

Lección 2 • Diseños con Flexbox en Webflow

Cubre cómo activar Flexbox en un Div Block y controlar la dirección, alineación, ajuste y espaciado. Flexbox es la herramienta principal para diseños de componentes unidimensionales.

Lección 3 • Div Blocks y contenedores

Explica el Div Block como el elemento estructural principal de Webflow y el Contenedor como un envoltorio de ancho máximo. Estos son los bloques de construcción para cada técnica de diseño que sigue.

Lección 4 • Posicionamiento: relativo, absoluto y fijo

Explica los modos de posicionamiento CSS tal como Webflow los expone y cuándo usar cada uno. El posicionamiento permite elementos superpuestos, encabezados fijos y componentes de interfaz flotantes.

Lección 1 • Optimización para dispositivos móviles

Enseña ajustes para móvil en horizontal y vertical, incluyendo diseños apilados, áreas táctiles más grandes y escalado de fuentes. La optimización móvil es crítica para la experiencia de usuario y el posicionamiento en búsquedas.

Lección 2 • Tipografía y espaciado fluidos

Introduce unidades relativas al viewport y dimensionamiento fluido basado en clamp para texto y espaciado. Los valores fluidos reducen la cantidad de anulaciones de breakpoint necesarias en un proyecto.

Lección 3 • Adaptación de diseños para tableta

Cubre el cambio al breakpoint de tableta y el ajuste de dirección de Flexbox, columnas de cuadrícula y espaciado. La tableta suele ser el breakpoint más complejo debido a los anchos de pantalla intermedios.

Lección 4 • Prueba y depuración de la adaptabilidad responsiva

Cubre el uso del redimensionamiento del lienzo de Webflow, las DevTools del navegador y las pruebas en dispositivos reales para detectar problemas de diseño. Las pruebas sistemáticas previenen regresiones cuando se actualizan los estilos.

Lección 1 • Explicación del sistema de clases de Webflow

Cubre cómo interactúan las clases, las etiquetas y el selector de todos los elementos en el panel de estilos de Webflow. Una estrategia de clases sólida es la base de cada proyecto de Webflow mantenible.

Lección 2 • Construcción de clases de componentes reutilizables

Enseña a crear clases de botón, tarjeta e insignia que se pueden aplicar en todo el sitio. Las clases reutilizables reducen el estilizado redundante y refuerzan la consistencia visual.

Lección 3 • Página de guía de estilos como referencia viva

Guía a los estudiantes en la construcción de una página de guía de estilos interna que documente todas las clases y componentes. Una página de guía de estilos acelera la incorporación y previene la duplicación de clases con el tiempo.

Lección 1 • Animaciones activadas por desplazamiento (Scroll-Triggered)

Enseña animaciones de aparición gradual, deslizamiento de entrada y escalonamiento que se activan cuando los elementos entran en el viewport. Las animaciones de desplazamiento aumentan la calidad percibida y guían la atención del usuario hacia abajo en la página.

Lección 2 • Descripción general del panel de interacciones

Describe el panel de Interacciones, los tipos de activadores y la línea de tiempo de animación. Entender la estructura del panel es un prerrequisito para construir cualquier interacción en Webflow.

Lección 3 • Desplazamiento de página y efectos de paralaje

Explica el activador de desplazamiento de página y cómo mapear propiedades de elementos a la posición de desplazamiento. Los efectos de paralaje y basados en progreso añaden profundidad a las secciones principales y de narración.

Lección 4 • Lottie y animaciones con código personalizado

Cubre la inserción de animaciones Lottie JSON y su activación a través de Interacciones de Webflow. Lottie extiende la capacidad de animación más allá de las transformaciones CSS para ilustraciones complejas.

Lección 1 • Diseño de colecciones del CMS

Cubre la creación de Colecciones, la definición de tipos de campo y la planificación de la arquitectura de datos. Un buen diseño de Colecciones previene reestructuraciones costosas a medida que crece el contenido.

Lección 2 • Construcción de páginas de plantilla del CMS

Cubre el diseño de la página de Plantilla de Colección que autogenera una página por cada elemento del CMS. Las páginas de plantilla impulsan blogs, casos de estudio, perfiles de equipo y páginas de detalle de producto.

Lección 3 • Adición y gestión de contenido del CMS

Enseña a agregar elementos a través del Editor del CMS, importar datos CSV y usar el Editor para la entrega al cliente. Los flujos de trabajo de gestión de contenido determinan qué tan mantenible es un sitio después del lanzamiento.

Lección 4 • Listas de colección anidadas y soluciones alternativas

Aborda la limitación de listas de colección anidadas de Webflow y soluciones prácticas usando referencias y código personalizado. Los patrones avanzados de CMS desbloquean casos de uso complejos de directorios y filtrado.

Lección 1 • Alojamiento y publicación en Webflow

Cubre el alojamiento basado en CDN de Webflow, la publicación en el subdominio de preparación y la publicación en un dominio personalizado. Comprender los niveles de alojamiento previene desajustes de planes en el lanzamiento.

Lección 2 • SEO en la página en Webflow

Cubre la configuración de meta títulos, descripciones, imágenes de Open Graph y etiquetas canónicas por página. Un SEO en la página adecuado asegura que las páginas se indexen y compartan correctamente desde el primer día.

Lección 3 • Optimización del rendimiento del sitio

Enseña compresión de imágenes, carga diferida, subconjunto de fuentes y la minificación integrada de Webflow. El rendimiento afecta directamente el posicionamiento en búsquedas y la retención de usuarios.

Lección 4 • Redirecciones 301 y lista de verificación de lanzamiento

Cubre la configuración de redirecciones 301 para URLs migradas y la ejecución de una auditoría previa al lanzamiento. Una lista de verificación de lanzamiento estructurada previene enlaces rotos, páginas faltantes y errores de indexación.