Introducción a Webflow - Ayuda de Webflow
Aprende a manejar Webflow.
En Webflow, puedes estructurar, construir y diseñar tu sitio a través de páginas, ramas y localidades. Webflow te permite crear y gestionar contenido dinámico y datos de manera efectiva y proporciona herramientas para analizar y optimizar el rendimiento del sitio. También puedes compartir tu trabajo, solicitar comentarios y, finalmente, publicar tu sitio en entornos dedicados (es decir, pruebas y producción).
Puedes acceder a Webflow desde el Panel de control haciendo clic en la miniatura de tu sitio o desde Configuración del sitio haciendo clic en Abrir sitio en la barra de herramientas superior. Las herramientas a las que tienes acceso en Webflow varían según tu rol en el sitio (por ejemplo, revisor, editor de contenido, etc.), para que puedas acceder rápidamente a las herramientas que necesitas y olvidarte de las que no.
Antes de comenzar
Consulta los navegadores, dispositivos y resoluciones de pantalla compatibles con Webflow.
Colaboración de múltiples usuarios
Varios compañeros de equipo pueden colaborar en un sitio juntos en Webflow. Para mantener el proceso de diseño fluido, puedes transferir el control de diseño entre tus compañeros y ver en tiempo real dónde están trabajando otras personas dentro de tu sitio.
Visión general de la interfaz de Webflow
Cuando abres tu sitio en Webflow, la pantalla principal que muestra tu sitio es el lienzo. Alrededor del lienzo se encuentran las siguientes barras de herramientas y paneles:
- La barra superior incluye navegación con pestañas, la barra de contexto y acciones del sitio (por ejemplo, herramientas de colaboración y publicación).
- La barra del lienzo incluye deshacer/rehacer, navegación de migas de pan, puntos de interrupción expandidos y configuraciones del lienzo.
- La barra de herramientas izquierda incluye el menú principal, varios paneles de herramientas y navegación, configuraciones, auditoría del sitio y tutoriales.
- La barra de herramientas derecha incluye estilos de elementos, configuraciones e interacciones.
El lienzo
El área más grande en Webflow es el lienzo. Aquí puedes interactuar con la página y diseñar en tiempo real. Puedes seleccionar elementos, moverlos y editar contenido directamente en la página. Webflow guarda tu trabajo automáticamente, pero puedes guardar manualmente tu sitio presionando Command + S (en Mac) o Control + S (en Windows).
La barra superior
La barra superior te da acceso rápido a modos de diseño, el CMS, Analizar, Optimizar, locales, un conmutador de páginas y acciones del sitio.
La navegación principal con pestañas incluye la pestaña Diseño, la pestaña CMS y la pestaña Insights.
- Pestaña de diseño — Esta pestaña indica el modo actual (por ejemplo, diseño, construcción, etc.) y te permite cambiar entre modos o crear ramas de página. El rol en el sitio de un miembro determina qué modos están disponibles. Por ejemplo, los gestores de sitio y diseñadores pueden acceder al modo de diseño, mientras que los mercadólogos solo pueden acceder al modo de construcción.
- Pestaña CMS — Abre el panel CMS (Sistema de Gestión de Contenidos), donde puedes crear y gestionar Colecciones, Elementos de colección y productos y categorías de Ecommerce.
- Pestaña Insights — Abre el panel de Insights, donde puedes acceder a Analizar y Optimizar. Analizar proporciona analíticas del sitio con insights accionables. Optimizar te permite realizar experimentos en tu sitio para probar diferentes estilos, diseños, flujos, textos, imágenes y más.
Barra de contexto
La barra de contexto te permite gestionar las optimizaciones del sitio con Optimize y cambiar entre locales, páginas, páginas de colección y elementos de colección. También indica cuando estás editando el componente principal (en lugar de una instancia de componente), así como el estado de aprobación de diseño.
Acciones del sitio
Las acciones del sitio están relacionadas con la página específica en la que te encuentras o con el sitio en sí. Los miembros del equipo que colaboran en el sitio en tiempo real también se enumeran aquí con un avatar o un conteo.
- Modo de análisis — Obtén análisis e insights a nivel de página (por ejemplo, hasta dónde se desplazan los visitantes y dónde hacen clic).
- Comentarios — Revisa los comentarios que dejaron otros miembros del equipo o añade tus propios comentarios/notas.
- Vista previa — Cambia a modo de vista previa.
- Compartir — Genera un enlace de sitio de solo lectura.
- Publicar — Publica tu sitio.
La barra de lienzo
La barra de lienzo está posicionada por defecto sobre el lienzo, pero puedes moverla debajo en la configuración del lienzo.
- Iconos de deshacer/rehacer — Revertir o aplicar cambios rápidamente.
- Navegación de migas de pan — Muestra la jerarquía de elementos del elemento seleccionado.
- Configuración del lienzo — Diferentes opciones (por ejemplo, reglas, guías, vista previa de zoom de texto).
- Puntos de interrupción — Vista previa y edición para diferentes tamaños de dispositivos.
La barra de herramientas izquierda
Contiene el menú principal y paneles para la estructuración del sitio web.
Haz clic en el logo de Webflow para acceder al menú principal.
- Búsqueda rápida de elementos, componentes, páginas, etc.
- Acciones de deshacer/rehacer
- Exportar código
- Atajos de teclado
- Abrir vista previa de CSS
- Obtener ayuda o enviar comentarios
Paneles y registro de actividad del sitio
- Panel de añadir — Atajo: A
- Panel de páginas — Atajo: P
- Panel de navegación — Atajo: Z
- Panel de componentes — Atajo: Shift + A
- Panel de variables — Atajo: G
- Panel de selectores de estilo — Atajo: J
- Panel de activos — Atajo: L
- Panel de bibliotecas — Atajo: L
- Panel de aplicaciones — Atajo: E
- Registro de actividad del sitio — Cambios de diseño realizados en tu sitio
Configuraciones, asistente de aprendizaje AI, auditorías, búsqueda rápida y tutoriales
- Panel de configuraciones — Interfaz, búsqueda, respaldo, localización.
- Asistente de aprendizaje AI — Ayuda impulsada por AI.
- Panel de auditoría — Atajo: U.
- Búsqueda rápida — Atajo: Command + E (Mac), Control + E (Windows).
- Panel de tutoriales en video — Cursos en video gratuitos.
La barra de herramientas derecha
Contiene paneles para estilos de elementos, configuraciones e interacciones.
- Panel de estilo — Atajo: S.
- Panel de configuración de elementos — Atajo: D.
- Panel de interacciones — Atajo: H.
Preguntas Frecuentes
¿Qué navegadores soporta Webflow?
Webflow soporta oficialmente las últimas tres versiones principales de todos los navegadores modernos: Chrome, Edge, Firefox y Safari. Esto se aplica tanto a la plataforma como a los sitios publicados.
Para características con soporte limitado, consulte los artículos relacionados:
Webflow no soporta Internet Explorer.
¿Qué resoluciones de pantalla/dispositivos soporta Webflow?
Webflow requiere una computadora de escritorio/portátil con un ancho de pantalla de al menos 1268px.
¿Por qué es Webflow una aplicación en línea/alojada y no una aplicación descargable?
Webflow está en línea/alojada para permitir el diseño en el navegador y actualizaciones rápidas.
- Diseño WYSIWYG — efecto directo en HTML/CSS.
- Actualizaciones rápidas — Siempre la última versión, sin actualizaciones manuales.