Glosario de plantillas web: todos los términos que realmente necesitas

Sección 1: Términos generales de plantillas

Plantilla web (Website template) Una estructura web preconstruida que te da un punto de partida en lugar de una página en blanco. Incluye diseño, tipografía, color y, a menudo, contenido de ejemplo. Lo que obtienes varía mucho según la plataforma: una plantilla de Webflow es un proyecto completo y clonable con estructura CMS e interacciones integradas; una plantilla de Framer se ejecuta en vivo en el canvas de Framer; un tema de Shopify viene como un código base Liquid empaquetado. Los tres son "plantillas" en sentido amplio, pero funcionan de manera muy diferente internamente.

Tema (Theme) En uso general, "theme" y "template" significan aproximadamente lo mismo. En el mundo de Shopify específicamente, "theme" es el término correcto. Los temas de Shopify son bases de código Liquid empaquetadas que controlan toda la apariencia y comportamiento de la tienda. Llamar a un tema de Shopify "template" no es técnicamente incorrecto, pero en la documentación y comunidad de Shopify, "theme" es el estándar. En Webflow y Framer, "template" es la palabra correcta.

Biblioteca de plantillas (Template library) Una colección curada de plantillas, usualmente mantenida por un equipo que aplica criterios de calidad consistentes. Una biblioteca no es un marketplace. No hay transacciones ahí. BestWebsiteTemplate.com es una biblioteca: evaluamos plantillas de manera independiente y listamos las que cumplen nuestros estándares de Design Score y Dev Score. La distinción importa porque las bibliotecas tienen intención editorial; los marketplaces tienen intención comercial.

Marketplace de plantillas (Template marketplace) Una plataforma donde se compran y venden plantillas. Webflow Marketplace, Shopify Theme Store y el marketplace de plantillas de Framer son ejemplos. Los marketplaces manejan licencias, pago y distribución. La calidad varía porque los criterios de selección suelen ser comerciales, no editoriales.

Plantilla gratis (Free template) Una plantilla disponible sin costo. Gratis no significa baja calidad. Las plantillas gratis de Webflow están bien construidas. El tema Dawn de Shopify, que alimenta un porcentaje enorme de tiendas Shopify, es gratis y de código abierto. Dicho esto, las plantillas gratis a menudo tienen menos tipos de página, menos profundidad de CMS y menos interacciones que las premium. Siempre revisa los términos de la licencia incluso en plantillas gratis.

Plantilla premium (Premium template) Una plantilla de pago, típicamente con más cobertura de páginas, interacciones más desarrolladas y un diseño más pulido. Los precios premium van desde alrededor de $20 para una plantilla básica de Framer hasta varios cientos de dólares para un tema de Shopify completamente construido con personalización profunda de Liquid. El precio por sí solo no dice nada sobre la calidad. Por eso existen los sistemas de puntuación.

Licencia de plantilla (Template license) Los términos legales que rigen cómo puedes usar una plantilla. La mayoría de las licencias de plantillas son de uso único: una compra, un sitio web en vivo. Usar la misma compra para un segundo proyecto de cliente usualmente requiere comprar de nuevo. Lee la licencia antes de comprar, especialmente para trabajo de clientes. Algunos marketplaces (como Envato) tienen niveles de licencia específicos que afectan el uso comercial.

Licencia de uso único (Single-use license) La licencia estándar para la mayoría de las plantillas. Una compra cubre un sitio web en vivo. No puedes usar la misma licencia para construir múltiples sitios de clientes. Algunos diseñadores compran plantillas al por mayor o negocian licencias de agencia para trabajar con activos de uso repetido.

Licencia extendida (Extended license) Una licencia de nivel superior que típicamente permite usar la plantilla en múltiples proyectos, usarla en un producto que se vende a usuarios finales, o usarla sin el branding del creador original. No todas las plataformas ofrecen licencias extendidas. Verifica cuidadosamente antes de construir un producto orientado al cliente sobre una plantilla con solo una licencia estándar.

Vista previa de plantilla (Template preview) Una vista previa estática de la plantilla, usualmente una captura de pantalla o una imagen renderizada. Te muestra cómo se ve la plantilla pero no te permite interactuar con ella. Las vistas previas son útiles para una evaluación visual de primera pasada pero pueden ser engañosas: las animaciones no se muestran, los diseños móviles a menudo no aparecen, y las páginas alimentadas por CMS pueden no reflejar cómo se comporta realmente la plantilla con contenido real.

Demo de plantilla (Template demo) Una versión en vivo e interactiva de la plantilla que puedes explorar en un navegador antes de comprar. Los demos son significativamente más útiles que las vistas previas. Puedes verificar la responsividad móvil, probar interacciones, ver cómo están estructuradas las colecciones de CMS y evaluar la velocidad de carga de página. Si una plantilla no tiene un demo en vivo, eso es una razón para ser cauteloso.

Above the fold La porción de una página web que es visible sin hacer scroll, en un tamaño de pantalla determinado. No es una medida fija: lo que está "above the fold" en un monitor de escritorio a 1440px de ancho es completamente diferente de un iPhone SE. En evaluación de plantillas, "above the fold" usualmente se refiere a la sección hero y si comunica el propósito del sitio claramente antes de cualquier scroll.

Plantilla de landing page (Landing page template) Una plantilla de una sola página o mínima construida específicamente para impulsar una acción: un registro, una compra, una reserva. Las plantillas de landing page son ligeras por diseño. Omiten navegación global, complejidad de footer y extensión de múltiples secciones. Si estás ejecutando una campaña o lanzando un producto, una plantilla de landing page es usualmente un mejor punto de partida que una plantilla multipágina completa que tendrás que reducir.

Plantilla multipágina (Multi-page template) Una plantilla con múltiples tipos de página distintos construidos: inicio, acerca de, servicios, blog, contacto, etc. Las plantillas multipágina te dan un sistema de diseño cohesivo a través de las páginas, lo cual es útil cuando estás construyendo un sitio desde cero y quieres tipografía, espaciado y patrones de componentes consistentes en todo.

Plantilla de una página (One-page template) Una plantilla donde todo el contenido vive en una sola página con scroll, con navegación por enlaces ancla saltando entre secciones. Común para portafolios, lanzamientos de productos y sitios de pequeños negocios. El desafío de diseño con plantillas de una página es mantener el interés visual a través de un scroll largo sin el reseteo natural de una carga de página.

Personalización de plantilla (Template customisation) El proceso de modificar el diseño, contenido y estructura de una plantilla para ajustarse a un proyecto específico. Cuánta personalización es posible depende enteramente de la plataforma. Webflow te da control visual completo sobre cada elemento. Los temas de Shopify son personalizables a través del editor de temas y código Liquid, pero la estructura subyacente está más restringida. Framer te da control a nivel de componente. "Personalizable" en un listado de plantilla es casi sin sentido como descriptor; lo que importa es la arquitectura de la plataforma.

Plantilla white-label (White-label template) Una plantilla vendida sin el branding del creador original, permitiendo al comprador presentarla como su propio trabajo. Relevante para agencias que venden construcciones de sitios web a clientes. Las plantillas white-label a menudo vienen con un precio premium y usualmente requieren una licencia extendida o de agencia. Sé específico al verificar: algunas plantillas son white-label en el sentido de "no se requiere crédito del creador"; otras prohíben explícitamente la reventa o entrega a clientes.

---

Sección 2: Términos de diseño

Design Score El eje de puntuación de BestWebsiteTemplate.com para la calidad visual de una plantilla. Evalúa cinco áreas: calidad visual (coherencia estética general), tipografía (elecciones de tipo, escala y emparejamiento), jerarquía (si el diseño guía correctamente la vista), espaciado (consistencia de sistemas de padding y margin), y layout (lógica compositiva y uso de grillas). El Design Score es asignado por múltiples miembros del equipo que revisan la plantilla de manera independiente antes de que se liste. El puntaje publicado es el resultado promediado de esas evaluaciones individuales. Existe porque "se ve bien" es demasiado subjetivo y demasiado fácil de manipular con capturas de pantalla de marketing pulidas.

Jerarquía visual (Visual hierarchy) La disposición de elementos en una página para que la información más importante se note primero. En una plantilla bien construida, la jerarquía se crea a través de escala de tipo, contraste de peso, color, espaciado y posición. Cuando una plantilla tiene jerarquía débil, todo en la página compite por atención igualmente y nada aterriza. Es uno de los modos de falla más comunes en plantillas gratis.

Tipografía (Typography) En el contexto de plantillas web, la tipografía cubre las elecciones de fuente, escala de tipo, altura de línea, espaciado de letras, y cómo se estiliza el texto en diferentes contextos (encabezados, cuerpo de texto, subtítulos, etiquetas). La buena tipografía de plantilla funciona en múltiples tamaños, a través de múltiples dispositivos, y con contenido real del cliente, no solo el texto placeholder usado en el demo.

Escala de tipo (Type scale) Un conjunto definido de tamaños de fuente usados consistentemente en toda una plantilla, usualmente siguiendo una proporción (como una escala modular). Una escala de tipo apropiada significa que H1 hasta H6, cuerpo, subtítulo y tamaños de etiqueta están todos proporcionalmente relacionados. Las plantillas sin una escala de tipo coherente producen inconsistencia visual en el momento en que empiezas a agregar tu propio contenido.

Emparejamiento de fuentes (Font pairing) La combinación de dos (ocasionalmente tres) tipos de letra usados en una plantilla, típicamente una fuente display o de encabezado y una fuente de cuerpo. Los emparejamientos de fuentes fuertes tienen contraste en personalidad pero armonía en proporción. En evaluación de plantillas, miramos si el emparejamiento se sostiene en todos los tamaños, no solo en la sección hero donde todo es grande y perdonador.

Sistema de grilla (Grid system) La estructura de columnas subyacente que organiza el diseño de una plantilla. La mayoría de las plantillas web usan una grilla de 12 columnas, aunque algunas usan 10 o 16. Lo que importa en la práctica es si los elementos se alinean consistentemente a través de las secciones y si la grilla se usa deliberadamente. Una plantilla donde las secciones rompen aleatoriamente con la grilla o usan conteos de columna inconsistentes puntúa más bajo en layout.

Sistema de espaciado (Spacing system) Un conjunto de valores de espaciado predefinidos (usualmente múltiplos de 4px u 8px) usados para padding, margins y gaps en toda una plantilla. Una plantilla con un sistema de espaciado consistente se siente ordenada incluso cuando no puedes articular por qué. Una sin él se siente ligeramente mal en todas partes. En Webflow, los sistemas de espaciado a menudo se implementan como variables CSS o un conjunto definido de clases.

Paleta de colores (Colour palette) El conjunto de colores usados en toda una plantilla: primario, secundario, fondo, texto, acento, y colores de estado (hover, error, éxito). Las buenas paletas de plantilla se definen a nivel de sistema, no codificadas puntualmente en elementos individuales. En Webflow, esto usualmente significa variables CSS. En Shopify, son configuraciones de tema. En Framer, son tokens de diseño.

Contraste de color (Colour contrast) La diferencia de luminancia entre un color de primer plano (usualmente texto) y su fondo. El contraste importa para accesibilidad: WCAG AA requiere una proporción mínima de 4.5:1 para texto de cuerpo. Muchas plantillas fallan esto, particularmente aquellas con texto gris claro sobre blanco, o texto coloreado sobre imágenes de fondo ocupadas. Una plantilla que falla las verificaciones de contraste requerirá remediación antes de ser usable para cualquier proyecto serio.

Componente (Component) Un elemento de diseño reutilizable, autocontenido con su propia lógica visual: una tarjeta, un botón, un bloque de testimonial, una tabla de precios. Las plantillas bien construidas tienen un conjunto de componentes claramente definido que puedes usar a través de páginas sin recrear desde cero. En términos de diseño, un componente debe verse y comportarse consistentemente donde sea que aparezca.

Sección (Section) En diseño de plantillas, una sección es un bloque horizontal de contenido de ancho completo, típicamente abarcando el ancho completo del viewport. Las páginas se construyen apilando secciones. Una plantilla típica tiene 6 a 15 secciones a través de una página de inicio. El diseño de secciones determina el ritmo general de una página: demasiadas secciones similares la hacen monótona; demasiadas salvajemente diferentes la hacen incoherente.

Sección hero (Hero section) La sección superior de una página, visible above the fold, diseñada para comunicar la propuesta de valor central del sitio inmediatamente. En evaluación de plantillas, las secciones hero son un proxy para la calidad de diseño general. Un hero débil usualmente significa diseño débil en todo. Un hero fuerte necesita una jerarquía de encabezado clara, tipografía intencional, y un enfoque visual que se sostenga en todos los tamaños de pantalla comunes.

Call to action (CTA) Un prompt que pide al usuario hacer algo: "Comenzar", "Reservar una llamada", "Comprar ahora". En diseño de plantillas, los CTAs son botones, enlaces o inputs de formulario. Lo que importa es cómo están priorizados visualmente en el diseño y si el sistema de componentes de la plantilla los trata consistentemente. Una plantilla con cuatro estilos de botón diferentes usados intercambiablemente es una señal de diseño de componentes débil.

Espacio negativo (Negative space) Las áreas vacías o no marcadas de un diseño. A menudo llamado espacio en blanco, aunque no necesita ser blanco. El espacio negativo crea espacio para respirar, dirige la atención, y comunica confianza en el diseño. Las plantillas que apiñan contenido en cada píxel disponible típicamente puntúan más bajo en espaciado y calidad visual general. El espacio negativo es una elección activa de diseño, no un fracaso en llenar la página.

Diseño responsivo (Responsive design) Diseño que se adapta a diferentes tamaños de pantalla y dispositivos. Una plantilla responsiva reorganiza, escala, y oculta o muestra elementos apropiadamente en diferentes breakpoints. Responsivo no significa "no se rompe en móvil". Significa que el diseño fue diseñado con múltiples viewports en mente, no solo adaptado desde escritorio después del hecho.

Diseño mobile-first (Mobile-first design) Un enfoque de diseño que comienza con la pantalla más pequeña y agrega complejidad a medida que aumenta el tamaño del viewport. Las plantillas mobile-first tienden a funcionar mejor en Core Web Vitals y tener interacciones táctiles más reflexivas. Muchas plantillas afirman ser mobile-first pero claramente fueron diseñadas a 1440px de ancho de escritorio y comprimidas hacia abajo.

Breakpoint Un ancho de viewport específico en el cual un diseño cambia de comportamiento. Los breakpoints comunes son alrededor de 480px (móvil), 768px (tablet), 1024px (escritorio), y 1280px o 1440px (escritorio ancho). Las plantillas definen sus propios breakpoints, y qué tan bien maneja una plantilla las transiciones entre ellos es un indicador de calidad significativo.

Diseño de interacción (Interaction design) El comportamiento de los elementos cuando los usuarios actúan sobre ellos: estados hover, respuestas de clic, retroalimentación de validación de formulario, comportamiento modal, animaciones de menú. En evaluación de plantillas, el diseño de interacción cubre si estos comportamientos son consistentes, con propósito, y apropiadamente alcanzados. El diseño de interacción es diferente de las animaciones de scroll: cubre todas las respuestas diseñadas a la entrada del usuario.

Microinteracción (Micro-interaction) Una interacción pequeña y contenida que da retroalimentación para una acción específica: un botón que cambia de color en hover, un campo de formulario que se resalta en focus, un enlace de navegación que se anima al hacer clic. Las microinteracciones son la diferencia entre una plantilla que se siente pulida y una que se siente estática. Son fáciles de pasar por alto y consumen tiempo agregarlas después del hecho.

Animación de scroll (Scroll animation) Una animación disparada por la posición de scroll del usuario, típicamente usando Intersection Observer en JavaScript o una biblioteca como GSAP. Las animaciones de scroll son comunes en plantillas de Webflow y Framer. Usadas bien, guían la atención y agregan profundidad. Usadas mal, ralentizan la página y distraen del contenido. Penalizamos plantillas donde las animaciones de scroll afectan el rendimiento sin agregar valor significativo a la experiencia.

---

Sección 3: Términos de desarrollo

Dev Score El eje de puntuación de BestWebsiteTemplate.com para la calidad técnica de una plantilla. Corre junto al Design Score porque una plantilla puede verse excepcional pero estar construida sobre código que es frágil, lento o difícil de mantener. El Dev Score es el resultado promediado de evaluaciones independientes de múltiples miembros del equipo, cada uno revisando la plantilla por separado antes de que se liste. Cubre cinco áreas: calidad de código (estructura y limpieza), responsividad (qué tan minuciosamente maneja la plantilla diferentes viewports), estructura CMS (qué tan bien está construido el modelo de datos), rendimiento (velocidad de carga de página y Core Web Vitals), y lógica de clase/arquitectura (específicamente para Webflow, cómo está estructurado el sistema de clases CSS).

HTML El lenguaje de marcado que define la estructura y contenido de una página web. En el contexto de plantillas, la calidad HTML importa porque HTML mal estructurado rompe la accesibilidad, daña el SEO, y hace el mantenimiento más difícil. Webflow genera HTML desde su editor visual; los temas de Shopify usan Liquid que compila a HTML; Framer produce su propio HTML. Raramente escribes HTML directamente cuando trabajas con plantillas, pero la calidad del HTML de salida aún afecta el rendimiento e indexabilidad de tu sitio.

CSS El lenguaje que controla el estilo visual. En Webflow, CSS se gestiona a través del panel de estilo del Designer. En Shopify, vive en archivos de tema. En Framer, se abstrae en propiedades de componente. El Dev Score de plantilla es parcialmente un proxy para calidad CSS: nomenclatura de clases consistente, sin overrides excesivos, un sistema coherente de espaciado y color implementado en variables.

JavaScript El lenguaje de programación que maneja interactividad y lógica en el navegador. En plantillas, JavaScript alimenta interacciones, animaciones de scroll, manejo de formularios e integraciones de terceros. JavaScript mal escrito en una plantilla puede causar problemas de rendimiento y conflictos cuando agregas tus propios scripts. Las plantillas que cargan JavaScript innecesario por defecto son un problema común de Dev Score.

Sitio estático (Static site) Un sitio web donde cada página está pre-construida como un archivo HTML y servida directamente al navegador sin procesamiento del lado del servidor en el momento de la solicitud. Los sitios estáticos son rápidos y baratos de alojar. La mayoría de las plantillas de Framer producen salida estática. Los sitios estáticos aún pueden tener elementos interactivos a través de JavaScript; el término se refiere a cómo el servidor entrega páginas, no si la página misma es interactiva.

Sitio dinámico (Dynamic site) Un sitio web donde las páginas se generan en el servidor en el momento de la solicitud, a menudo extrayendo contenido de una base de datos o CMS. Las tiendas de Shopify son dinámicas: páginas de productos, páginas de colecciones, y estados del carrito se generan usando plantillas Liquid y la base de datos de Shopify. Los sitios de Webflow con contenido CMS también son dinámicos. Los sitios dinámicos son más complejos para cachear y alojar correctamente, lo que afecta el rendimiento.

Velocidad de carga de página (Page load speed) Qué tan rápido una página se vuelve usable en un navegador. Medido en segundos desde la primera solicitud hasta el estado interactivo. La velocidad de carga de página es un factor de ranking de Google y un factor directo en tasas de conversión. Las plantillas que cargan fuentes pesadas, imágenes grandes sin optimizar, o JavaScript excesivo por defecto puntuarán más bajo en Dev Score. Siempre prueba el demo en vivo de una plantilla en PageSpeed Insights antes de comprar.

Core Web Vitals El conjunto de métricas estandarizadas de Google para experiencia de página: Largest Contentful Paint (LCP, rendimiento de carga), Interaction to Next Paint (INP, interactividad), y Cumulative Layout Shift (CLS, estabilidad visual). Las plantillas que puntúan bien en Core Web Vitals están generalmente bien construidas. Las plantillas que puntúan mal comenzarán tu SEO en desventaja y requerirán remediación antes del lanzamiento.

Código limpio (Clean code) En contexto de plantilla, código limpio significa que la base de código está estructurada para que otro desarrollador pueda entender, mantener y extender sin hacer ingeniería inversa desde cero. Para plantillas de Webflow, esto significa nomenclatura de clases consistente, sin estilos inline sueltos, y anidamiento lógico. Para temas de Shopify, significa Liquid bien comentado, archivos de sección modulares, y estructura de schema coherente. El código limpio es parcialmente subjetivo pero consistentemente reconocible.

Estructura de clases (Class structure) En Webflow específicamente, la estructura de clases se refiere a cómo se nombran, organizan y aplican las clases CSS a través de la plantilla. Webflow genera clases que aplican estilos directamente a través del Designer. Una plantilla de Webflow bien estructurada usa una convención de nomenclatura (BEM o algo similar), evita clases redundantes, y deja claro qué hace cada clase. La estructura de clases pobre hace que una plantilla de Webflow sea extremadamente difícil de modificar sin romper cosas.

Combo class Un término específico de Webflow para una clase secundaria agregada sobre una clase base para crear una variación. Por ejemplo, una clase base "button" con una combo class "button-red" para crear una versión roja. Las combo classes son un patrón legítimo y necesario de Webflow. El problema surge cuando una plantilla está construida con combo classes excesivas que sobrescriben estilos base de manera impredecible. Este es un punto de falla común de Dev Score: plantillas que se ven pulidas pero tienen CSS frágil y pesado en combo classes que se rompe bajo modificación.

Código personalizado (Custom code) Código agregado manualmente a una plantilla, fuera del editor visual de la plataforma. En Webflow, esto típicamente significa JavaScript o CSS inyectado a través de la configuración de página o bloques embed. En Shopify, significa ediciones a archivos Liquid de tema o scripts de app personalizados. El código personalizado te da capacidades que las herramientas nativas de la plataforma no tienen, pero también agrega complejidad de mantenimiento y conflictos potenciales en actualizaciones de plantilla.

CDN (Content Delivery Network) Una red de servidores distribuidos geográficamente que sirven los activos estáticos de un sitio (imágenes, fuentes, scripts) desde la ubicación más cercana al usuario. Webflow, Framer y Shopify incluyen alojamiento CDN por defecto. Desde una perspectiva de evaluación de plantillas, el CDN importa porque las plantillas que sirven activos grandes sin optimizar aún funcionan mal incluso en un CDN. Un CDN reduce la latencia; no arregla activos inflados.

Listo para SEO (SEO-ready) Un reclamo de marketing de que una plantilla está construida con mejores prácticas de SEO. Típicamente significa que la plantilla usa HTML semántico, tiene jerarquía de encabezados correcta, incluye soporte de etiquetas Open Graph, y genera sitemaps válidos. Lo que no significa: que tu sitio ranqueará. Listo para SEO es una base estructural, no una garantía de rendimiento de búsqueda. Verifica la estructura de encabezados y marcado real en el demo antes de confiar en la etiqueta.

Marcado Schema (Schema markup) Datos estructurados agregados al HTML de una página usando un vocabulario de Schema.org, que ayuda a los motores de búsqueda a entender el tipo y contexto del contenido. Para plantillas de e-commerce, esto incluye schema de producto (precio, disponibilidad, reseñas). Para plantillas de blog, incluye schema de artículo. Las plantillas que incluyen marcado schema correcto dan a los motores de búsqueda mejor contexto, lo que puede mejorar cómo aparecen los resultados en SERPs.

Etiquetas Open Graph (Open Graph tags) Etiquetas meta HTML que controlan cómo aparece una página cuando se comparte en plataformas de redes sociales. Definen el título, descripción e imagen usados en vistas previas de enlaces en plataformas como LinkedIn, X y Slack. Una plantilla que soporta etiquetas Open Graph significa que los campos existen en el CMS o configuración de página; aún requiere que los llenes con contenido real.

Lazy loading Una técnica donde las imágenes y otros medios solo se cargan cuando están a punto de entrar al viewport, en lugar de todos a la vez en la carga de página. El lazy loading reduce significativamente el tiempo de carga inicial de página en páginas pesadas en contenido. La mayoría de las plantillas modernas incluyen lazy loading por defecto; vale la pena verificar en el demo de una plantilla usando DevTools del navegador si el rendimiento es crítico para tu proyecto.

Optimización de imágenes (Image optimisation) El proceso de reducir el tamaño de archivo de imagen sin pérdida de calidad inaceptable, típicamente a través de elecciones de formato (WebP sobre JPEG o PNG), compresión, y servir imágenes del tamaño correcto para cada viewport. En contexto de plantilla, la optimización de imágenes se refiere a si la plantilla está construida para servir imágenes correctamente: atributos de tamaño correctos, soporte de formato apropiado, y manejo de imágenes responsivas. Webflow y Framer manejan la conversión WebP automáticamente. La infraestructura de temas de Shopify lo soporta pero requiere implementación correcta en el Liquid.

Accesibilidad (Accessibility) En contexto de plantilla, accesibilidad significa que el sitio puede ser usado por personas con discapacidades: usuarios de lectores de pantalla, navegadores solo por teclado, personas con baja visión o daltonismo. Las plantillas accesibles usan HTML semántico, etiquetas ARIA correctas, elementos interactivos navegables por teclado, contraste de color suficiente, y estados de focus en componentes interactivos. La accesibilidad también es un requisito legal en muchas jurisdicciones para sitios web comerciales y del sector público. Las plantillas que la ignoran crean responsabilidad y exclusión, no solo deuda técnica.

---

Sección 4: Términos de CMS y contenido

CMS (Content Management System) Software que te permite crear, gestionar y actualizar contenido de sitio web sin editar código directamente. En el mundo de las plantillas, las capacidades de CMS varían significativamente según la plataforma. Webflow tiene un CMS visual integrado. Framer tiene su propio CMS. El catálogo de productos, blog y páginas de Shopify se gestionan todos a través de su admin integrado. CMSs de terceros como Contentful o Sanity también pueden conectarse a plantillas vía API, aunque esto está fuera del alcance de la mayoría de las compras de plantillas.

Plantilla CMS (CMS template) Una plantilla construida alrededor de contenido dinámico que se gestiona a través de un CMS, en lugar de contenido de página estático y codificado. Una plantilla CMS típicamente incluye estructuras de colección (para posts de blog, miembros de equipo, casos de estudio, productos), y las páginas de la plantilla extraen de esas colecciones dinámicamente. Las plantillas CMS son más complejas de configurar que las estáticas pero son esenciales para cualquier sitio donde el contenido se actualiza regularmente.

Colección CMS (CMS collection) Un término específico de Webflow para un tipo de contenido estructurado. Una colección CMS es aproximadamente equivalente a una tabla de base de datos: tiene campos definidos, y cada entrada en la colección es un registro. Las colecciones comunes en plantillas de Webflow incluyen Posts (para blogs), Projects (para portafolios), Team Members, y Case Studies. Las colecciones alimentan páginas dinámicas: Webflow genera una página por elemento de colección usando un diseño de plantilla que defines.

Campo de colección (Collection field) Un único campo de datos dentro de una colección CMS. Los campos tienen tipos: texto plano, texto enriquecido, imagen, número, fecha, switch (booleano), color, referencia y multi-referencia, entre otros. La estructura de campos en una colección CMS de Webflow determina qué contenido puedes almacenar y mostrar. Una plantilla CMS bien construida tiene estructuras de campo que reflejan necesidades de contenido realistas, no solo lo que se necesitaba para el demo.

Campo de referencia (Reference field) Un tipo de campo CMS específico de Webflow que vincula un elemento de colección a otro. Por ejemplo, una colección de posts de blog con un campo de referencia apuntando a una colección de Author. Esto crea una estructura de datos relacional. Los campos de referencia permiten cosas como páginas de autor, páginas de categoría y módulos de contenido relacionado sin duplicar datos a través de colecciones.

Campo de multi-referencia (Multi-reference field) Un tipo de campo CMS de Webflow que permite que un elemento de colección referencie múltiples elementos de otra colección. Un post de blog etiquetado con múltiples categorías, por ejemplo. Los campos de multi-referencia son más poderosos que los campos de referencia única pero también más difíciles de filtrar y mostrar correctamente en el CMS nativo de Webflow. Qué tan bien una plantilla usa campos de multi-referencia es un indicador razonable de profundidad de arquitectura CMS.

Contenido dinámico (Dynamic content) Contenido que se extrae de un CMS o base de datos en tiempo de renderizado, en lugar de codificado en la página. Posts de blog, listados de productos, perfiles de miembros de equipo y casos de estudio de proyectos son todos típicamente dinámicos. El contenido dinámico es lo que hace que una plantilla sea escalable: agregas un nuevo post de blog al CMS y la página índice, la página de archivo y el módulo de posts relacionados se actualizan automáticamente.

Contenido estático (Static content) Contenido que está fijo directamente en la página o plantilla, en lugar de extraído de un CMS. La navegación principal del sitio, un descargo de responsabilidad legal, o un párrafo fijo de "Acerca de nosotros" podrían ser estáticos. El contenido estático está bien para cosas que raramente cambian. El error es usar contenido estático para cosas que necesitarán actualizaciones regulares, lo que te obliga a editar plantillas manualmente cada vez.

Campo de texto enriquecido (Rich text field) Un campo CMS que almacena contenido formateado: encabezados, párrafos, negrita, cursiva, enlaces, imágenes, y a veces medios embebidos. Los campos de texto enriquecido se usan para cuerpos de posts de blog y contenido de formato largo. En Webflow, el estilo de texto enriquecido se controla por un elemento Rich Text con su propio CSS con alcance. Una de las fallas de calidad de plantilla más comunes es elementos de texto enriquecido que están sin estilizar o inconsistentemente estilizados comparados con el resto del diseño.

Slug El identificador seguro para URL usado al final de la URL de una página. Para un post de blog titulado "Cómo elegir una plantilla de Webflow", el slug podría ser "como-elegir-plantilla-webflow". Los slugs deben ser legibles para humanos, en minúsculas, y separados por guiones. En plantillas CMS, los slugs usualmente se autogeneran desde el título del contenido pero deben ser revisados y limpiados antes del lanzamiento.

Sitemap Un archivo (usualmente XML) que lista todas las páginas en un sitio, usado por motores de búsqueda para descubrir e indexar contenido. Las plantillas CMS que generan sitemaps automáticamente están mejor posicionadas para SEO desde el principio. Webflow, Framer y Shopify todos generan sitemaps para sitios alojados. Lo que importa es si las páginas de colección CMS están incluidas y si el sitemap se envía a Google Search Console.

Plantilla de blog (Blog template) Una plantilla construida específicamente para publicación de contenido. Incluye una página índice (listando todos los posts), páginas de post individuales con diseño de texto enriquecido, y a menudo páginas de archivo de categoría o etiqueta. Las plantillas de blog en Webflow usan colecciones CMS para posts, con filtrado dinámico para categorías. La calidad de la plantilla de blog está fuertemente determinada por la tipografía del cuerpo del post, ya que ahí es donde ocurre la mayor parte de la lectura.

Plantilla de portafolio (Portfolio template) Una plantilla construida para mostrar trabajo: casos de estudio, proyectos, fotografía o diseño. Las plantillas de portafolio típicamente usan una colección CMS para proyectos con campos para imágenes, descripciones, etiquetas e información del cliente. El diseño de grilla, tratamiento de imagen y la estructura de la página de proyecto individual son los indicadores de calidad primarios.

Plantilla de e-commerce (E-commerce template) Una plantilla construida para vender productos en línea. En el contexto de Shopify, esto significa un tema con páginas de productos, páginas de colección, carrito y flujo de checkout. Las plantillas de e-commerce se evalúan diferente de las plantillas de contenido porque el objetivo principal es conversión: diseño de fotografía de producto, UX de agregar al carrito, y claridad de checkout importan más que tipografía editorial.

---

Sección 5: Términos específicos de plataforma

Webflow

Webflow Designer El editor visual donde construyes y estilizas sitios de Webflow. El Designer es una herramienta de diseño completa que te da control CSS preciso sin escribir CSS directamente. Produce HTML y CSS limpios y de grado de producción. Trabajar con una plantilla de Webflow significa abrirla en el Designer, modificar el diseño, intercambiar contenido, y ajustar estilos a nivel de elemento o clase.

Webflow Editor Una interfaz separada y más simple en capas sobre un sitio de Webflow publicado para edición de contenido. Está diseñada para clientes y editores no técnicos que necesitan actualizar texto, imágenes y contenido CMS sin acceder al Designer. El Editor no expone controles de diseño, solo campos de contenido. Las plantillas de Webflow diseñadas para entrega a clientes deben tener estructuras CMS que hagan el Editor usable sin acceso al Designer.

Webflow CMS El sistema de gestión de contenido integrado de Webflow, construido directamente en la plataforma. Maneja colecciones CMS, páginas dinámicas y relaciones de contenido. El contenido del CMS de Webflow se gestiona en el Designer y el Editor. El CMS tiene límites basados en plan sobre el número de elementos de colección y colecciones. Entender la estructura del CMS de Webflow es esencial para evaluar si una plantilla CMS de Webflow está realmente bien construida o solo visualmente pulida.

Webflow Hosting La infraestructura de alojamiento propia de Webflow, construida sobre AWS y servida vía CDN de Fastly. Los sitios de Webflow alojados en los servidores de Webflow se benefician de HTTPS automático, optimización de activos y distribución global. El alojamiento de Webflow es requerido para sitios que usan el CMS, Memberships o Logic. Las exportaciones estáticas son posibles para sitios más simples pero pierden funcionalidad dinámica.

Webflow Cloneable Un proyecto de Webflow compartido públicamente para que otros puedan clonarlo en su propio workspace de Webflow. Los cloneables son diferentes de las plantillas de marketplace: son gratis, compartidos por la comunidad, y varían salvajemente en calidad. Algunos de los mejores recursos educativos de Webflow son cloneables; algunos son demos inestables no adecuados para producción. BestWebsiteTemplate.com lista tanto plantillas de marketplace como cloneables de alta calidad donde cumplen nuestros umbrales de puntuación.

Webflow Marketplace El marketplace oficial de Webflow para comprar y vender plantillas construidas por creadores de terceros. Las plantillas en el Webflow Marketplace se revisan antes de listarse, aunque los criterios de revisión son principalmente funcionales en lugar de profundamente editoriales. Comprar una plantilla del Webflow Marketplace te da una licencia para usarla para un proyecto y transfiere una copia del proyecto a tu workspace.

Made in Webflow La vitrina comunitaria de Webflow para sitios web construidos en la plataforma. Es una galería navegable, no una biblioteca de plantillas. Es útil para inspiración y para ver cómo funcionan las plantillas con contenido real. Algunos sitios listados ahí están construidos sobre plantillas; otros son construcciones completamente personalizadas.

Symbol vs Component La terminología de Webflow ha cambiado. Symbols era el término original para elementos reutilizables en Webflow: diseña una vez, usa en todas partes, y los cambios se propagan a través del sitio. Webflow renombró Symbols a Components con el lanzamiento de Component Properties, que agregó soporte de variante y propiedad similar a los componentes de Figma. Si estás trabajando con una plantilla de Webflow más antigua, puede seguir usando Symbols. Las plantillas más nuevas deben estar construidas con Components. La función es similar; las capacidades de Components son significativamente más poderosas.

Interaction En el sistema de Webflow, una Interaction es una animación o comportamiento definido disparado por un evento específico: carga de página, scroll de elemento a la vista, hover, clic. El panel de Interactions de Webflow te permite encadenar múltiples animaciones con controles de tiempo. La calidad de las interacciones de una plantilla de Webflow es un diferenciador de diseño significativo. Las interacciones que están mal cronometradas, entrecortadas en ciertos dispositivos, o disparadas sin propósito son un problema de calidad común.

Breakpoint (Webflow) Webflow maneja breakpoints diferente del código. El Designer tiene un conjunto de breakpoints predefinidos: Desktop (base), Tablet, Mobile Landscape, y Mobile Portrait, más un breakpoint XXL opcional. Los estilos se heredan hacia abajo desde Desktop: si estableces un padding en Desktop, se aplica a todos los breakpoints más pequeños a menos que se sobrescriba. Esto significa que la calidad móvil de una plantilla de Webflow depende enteramente de qué tan minuciosamente el diseñador construyó los breakpoints más pequeños. Siempre prueba las vistas Tablet y Mobile Portrait antes de comprar.

---

Framer

Framer Canvas El espacio de trabajo principal en Framer donde construyes páginas y componentes visualmente. El Canvas es un ambiente de diseño de forma libre con salida CSS directa. A diferencia del sistema de diseño más restringido de Webflow, el Canvas de Framer te da posicionamiento preciso al píxel. Las plantillas de Framer se publican directamente desde el Canvas a la infraestructura de alojamiento de Framer.

Framer CMS El sistema de gestión de contenido de Framer, integrado en la plataforma. Soporta colecciones de contenido estructurado, similar al CMS de Webflow pero con un conjunto de campos más simple. El CMS de Framer es adecuado para posts de blog, miembros de equipo y listados de proyectos. Es menos rico en características que el CMS de Webflow, particularmente alrededor de campos relacionales y filtrado dinámico.

Framer Components Elementos reutilizables y autocontenidos en Framer con sus propias propiedades y variantes. Los Framer Components son similares en concepto a Webflow Components y componentes de Figma. Soportan estados de variante (predeterminado, hover, presionado) y propiedades configurables. Las plantillas de Framer bien construidas tienen un conjunto de componentes que cubre el rango completo de patrones de UI usados a través de la plantilla.

Framer Variants Estados visuales definidos para un Framer Component. Un componente de botón podría tener una variante Default, una variante Hover, y una variante Disabled. Las variantes permiten a Framer animar entre estados, creando retroalimentación de interacción suave. La calidad de las variantes de una plantilla de Framer determina qué tan pulida se siente la experiencia interactiva en producción.

Framer Interactions El sistema de Framer para definir animaciones disparadas por eventos de usuario o posición de scroll. Framer tiene capacidades de animación particularmente fuertes, parcialmente heredadas de la biblioteca Framer Motion. Las plantillas de Framer a menudo usan animaciones vinculadas al scroll, efectos de stagger, y animaciones de transición que son más fluidas que lo que es posible nativamente en Webflow sin código personalizado.

Framer Template Marketplace El marketplace integrado de Framer para comprar plantillas directamente dentro de la app de Framer. Las plantillas están listadas por creadores de terceros y por Framer mismo. Las compras te dan una copia de la plantilla en tu workspace de Framer. El marketplace ha crecido significativamente a medida que Framer ha expandido su ecosistema de creadores.

Override Un concepto específico de Framer donde adjuntas código personalizado (un componente o función de React) a un elemento del Canvas para controlar su comportamiento más allá de lo que soporta el editor visual. Los Overrides son cómo Framer permite interacciones avanzadas, animaciones personalizadas, y extracción de datos dinámicos que no se puede hacer a través de la UI estándar. Las plantillas que usan Overrides efectivamente son más poderosas pero requieren algo de familiaridad con código para modificar.

---

Shopify

Shopify Theme La capa visual y funcional completa de una tienda de Shopify. Un tema de Shopify controla cada aspecto de la apariencia de la tienda y la mayoría de su comportamiento de frontend. Los temas están construidos con Liquid, HTML, CSS, y JavaScript. Se empaquetan como un conjunto estructurado de archivos y se instalan a través del admin de Shopify. A diferencia de las plantillas de Webflow o Framer, los temas de Shopify están profundamente vinculados al modelo de datos de Shopify (productos, colecciones, carrito, checkout).

Liquid El lenguaje de plantillas de código abierto de Shopify, creado por Shopify y usado en todos los temas de Shopify. Liquid inserta contenido dinámico en HTML usando dos tipos de etiquetas: etiquetas de salida ({{ }}) que renderizan valores, y etiquetas lógicas ({% %}) que manejan condicionales y bucles. Una línea como {% for product in collection.products %} recorre todos los productos en una colección. Entender Liquid es requerido para cualquier personalización significativa de temas de Shopify más allá del editor de temas.

Liquid Section Un bloque de contenido modular y reutilizable en un tema de Shopify, definido en su propio archivo .liquid. Los temas de Online Store 2.0 están construidos alrededor de secciones: la página de inicio, páginas de productos y la mayoría de otras plantillas se ensamblan de secciones que pueden agregarse, reordenarse y configurarse a través del editor de temas. Las secciones hacen los temas de Shopify mucho más flexibles que la estructura rígida y antigua de plantillas Liquid.

Section Schema El bloque de configuración JSON dentro de un archivo de sección de Shopify que define qué configuraciones aparecen en el editor de temas. El schema controla qué campos (texto, imagen, color, referencia de producto, etc.) un comerciante puede editar sin tocar código. Un schema de sección bien diseñado hace que un tema sea altamente configurable; uno mal diseñado obliga a los comerciantes a codificar contenido o contratar un desarrollador para cambios básicos.

Shopify Theme Store El marketplace oficial de Shopify para comprar temas. Los temas listados en la Shopify Theme Store han pasado el proceso de revisión de Shopify. La tienda incluye tanto temas gratis (como Dawn y sus variantes) como temas premium de desarrolladores de terceros. Los temas de Theme Store deben cumplir los requisitos técnicos de Shopify, lo que establece un piso de calidad razonable.

Shopify Online Store 2.0 La actualización de arquitectura mayor que Shopify introdujo que movió los temas de una estructura rígida basada en plantillas a una completamente basada en secciones. OS2.0 agregó secciones en todas partes (no solo en la página de inicio), plantillas JSON (reemplazando plantillas Liquid para estructura de página), y soporte de Metafields. Cualquier tema de Shopify que valga la pena usar hoy debe estar construido sobre arquitectura de Online Store 2.0. Los temas construidos sobre la estructura antigua son más difíciles de personalizar y reciben menos soporte de plataforma.

Metafields Campos de datos personalizados que extienden los datos estándar de producto, colección, cliente y pedido de Shopify con contenido estructurado adicional. Los Metafields te permiten almacenar contenido como la composición de material de un producto, instrucciones de cuidado, o una etiqueta de insignia personalizada, y mostrarlo a través de Liquid en el tema. Los temas OS2.0 que soportan Metafields bien son significativamente más flexibles para catálogos de productos complejos.

Dawn El tema de referencia oficial de código abierto de Shopify, lanzado como el tema predeterminado para nuevas tiendas y como base para desarrolladores de temas. Dawn está construido sobre OS2.0, está optimizado para rendimiento, y es mantenido por el equipo de temas propio de Shopify. No es el tema visualmente más distintivo, pero es técnicamente correcto, bien documentado, y ampliamente usado. Muchos temas premium de Shopify están construidos sobre o inspirados por la arquitectura de Dawn. Entender Dawn hace mucho más fácil evaluar otros temas de Shopify.

Shopify POS El sistema de punto de venta de Shopify para comercio minorista en persona. Es relevante para el espacio de plantillas cuando un comerciante opera tanto una tienda en línea como una operación de comercio minorista física. Los temas de Shopify no afectan directamente el comportamiento del POS, pero los datos de producto, inventario y registros de clientes se comparten a través de canales en línea y en persona. Los temas construidos para comerciantes omnicanal deben tener en cuenta las estructuras de datos de producto que el POS requiere.

---

El espacio de plantillas se mueve rápidamente. Las actualizaciones de plataforma, nuevas características y cambios de terminología ocurren regularmente a través de Webflow, Framer y Shopify. Actualizamos este glosario a medida que las plataformas evolucionan y cuando encontramos términos que necesitan aclaración en el contexto de la evaluación actual de plantillas.

Explora la biblioteca completa de plantillas en: BestWebsiteTemplate.com

Cada plantilla en la biblioteca ha sido puntuada de manera independiente usando nuestra metodología de Design Score y Dev Score. Lee más sobre cómo evaluamos plantillas.