Glossário de Templates de Sites: Todos os Termos que Você Realmente Precisa

Seção 1: Termos Gerais de Templates

Template de site Uma estrutura de site pré-construída que oferece um ponto de partida em vez de uma página em branco. Inclui layout, tipografia, cores e frequentemente conteúdo placeholder. O que você recebe varia muito por plataforma: um template Webflow é um projeto completo e clonável com estrutura CMS e interações embutidas; um template Framer roda ao vivo no canvas do Framer; um tema Shopify vem como uma base de código Liquid empacotada. Os três são "templates" no sentido amplo, mas funcionam de forma muito diferente por baixo dos panos.

Tema No uso geral, "tema" e "template" significam aproximadamente a mesma coisa. No mundo Shopify especificamente, "tema" é o termo correto. Temas Shopify são bases de código Liquid empacotadas que controlam toda a aparência e comportamento da loja. Chamar um tema Shopify de "template" não é tecnicamente errado, mas na documentação e comunidade Shopify, "tema" é o padrão. No Webflow e Framer, "template" é a palavra certa.

Biblioteca de templates Uma coleção curada de templates, geralmente mantida por uma equipe que aplica critérios de qualidade consistentes. Uma biblioteca não é um marketplace. Nenhuma transação acontece lá. BestWebsiteTemplate.com é uma biblioteca: avaliamos templates de forma independente e listamos os que atendem nossos padrões de Design Score e Dev Score. A distinção importa porque bibliotecas têm intenção editorial; marketplaces têm intenção comercial.

Marketplace de templates Uma plataforma onde templates são comprados e vendidos. Webflow Marketplace, Shopify Theme Store e o marketplace de templates do Framer são todos exemplos. Marketplaces gerenciam licenciamento, pagamento e distribuição. A qualidade varia porque os critérios de seleção são geralmente comerciais, não editoriais.

Template gratuito Um template disponível sem custo. Gratuito não significa baixa qualidade. Os próprios templates gratuitos do Webflow são bem construídos. O tema Dawn do Shopify, que alimenta uma enorme porcentagem de lojas Shopify, é gratuito e open source. Dito isso, templates gratuitos frequentemente têm menos tipos de página, menor profundidade de CMS e menos interações que os premium. Sempre verifique os termos de licença mesmo em templates gratuitos.

Template premium Um template pago, tipicamente com mais cobertura de páginas, interações mais desenvolvidas e design mais polido. O preço premium varia de cerca de $20 para um template Framer básico a várias centenas de dólares por um tema Shopify totalmente construído com customização Liquid profunda. Preço sozinho não diz nada sobre qualidade. Por isso sistemas de pontuação existem.

Licença de template Os termos legais que governam como você pode usar um template. A maioria das licenças de template são de uso único: uma compra, um site ao vivo. Usar a mesma compra para um segundo projeto de cliente geralmente requer comprar novamente. Leia a licença antes de comprar, especialmente para trabalho de cliente. Alguns marketplaces (como Envato) têm camadas de licença específicas que afetam o uso comercial.

Licença de uso único A licença padrão para a maioria dos templates. Uma compra cobre um site ao vivo. Você não pode usar a mesma licença para construir múltiplos sites de clientes. Alguns designers compram templates em massa ou negociam licenças de agência para contornar isso para ativos de uso repetido.

Licença estendida Uma licença de camada superior que tipicamente permite que o template seja usado em múltiplos projetos, usado em um produto vendido a usuários finais ou usado sem a marca do criador original. Nem todas as plataformas oferecem licenças estendidas. Verifique cuidadosamente antes de construir um produto voltado ao cliente em cima de um template com apenas licença padrão.

Preview de template Uma prévia estática do template, geralmente uma captura de tela ou imagem renderizada. Mostra como o template parece mas não permite interagir com ele. Previews são úteis para uma avaliação visual de primeira passagem mas podem ser enganosos: animações não aparecem, layouts mobile frequentemente não aparecem, e páginas alimentadas por CMS podem não refletir como o template realmente se comporta com conteúdo real.

Demo de template Uma versão ao vivo e interativa do template que você pode navegar no navegador antes de comprar. Demos são significativamente mais úteis que previews. Você pode verificar responsividade mobile, testar interações, ver como as coleções CMS estão estruturadas e avaliar velocidade de carregamento da página. Se um template não tem demo ao vivo, isso é motivo para cautela.

Above the fold A porção de uma página web que está visível sem rolar, em um dado tamanho de tela. Não é uma medida fixa: o que está "above the fold" em um monitor desktop a 1440px de largura é completamente diferente de um iPhone SE. Na avaliação de templates, "above the fold" geralmente se refere à seção hero e se ela comunica o propósito do site claramente antes de qualquer rolagem acontecer.

Template de landing page Um template de página única ou mínimo construído especificamente para impulsionar uma ação: uma inscrição, uma compra, um agendamento. Templates de landing page são enxutos por design. Eles dispensam navegação global, complexidade de rodapé e expansão multi-seção. Se você está executando uma campanha ou lançando um produto, um template de landing page é geralmente um ponto de partida melhor que um template completo multi-página que você precisará reduzir.

Template multi-página Um template com múltiplos tipos de página distintos construídos: home, sobre, serviços, blog, contato, e assim por diante. Templates multi-página fornecem um sistema de design coeso entre páginas, o que é útil quando você está construindo um site do zero e quer tipografia, espaçamento e padrões de componentes consistentes por todo o site.

Template de página única Um template onde todo o conteúdo vive em uma única página com rolagem, com navegação por links âncora pulando entre seções. Comum para portfólios, lançamentos de produtos e sites de pequenos negócios. O desafio de design com templates de página única é manter interesse visual através de uma longa rolagem sem o reset natural de um carregamento de página.

Customização de template O processo de modificar o design, conteúdo e estrutura de um template para adequar a um projeto específico. Quanta customização é possível depende inteiramente da plataforma. Webflow dá controle visual completo sobre cada elemento. Temas Shopify são customizáveis através do editor de tema e código Liquid, mas a estrutura subjacente é mais restrita. Framer dá controle no nível de componente. "Customizável" em uma listagem de template é quase sem significado como descritor; o que importa é a arquitetura da plataforma.

Template white-label Um template vendido sem a marca do criador original, permitindo ao comprador apresentá-lo como trabalho próprio. Relevante para agências que vendem construções de sites para clientes. Templates white-label frequentemente vêm com preço premium e geralmente requerem uma licença estendida ou de agência. Seja específico ao verificar: alguns templates são white-label no sentido de "nenhum crédito ao criador necessário"; outros explicitamente proíbem revenda ou entrega ao cliente.

---

Seção 2: Termos de Design

Design Score O eixo de pontuação do BestWebsiteTemplate.com para a qualidade visual de um template. Avalia cinco áreas: qualidade visual (coerência estética geral), tipografia (escolhas de tipos, escala e combinação), hierarquia (se o layout guia o olhar corretamente), espaçamento (consistência de sistemas de padding e margin) e layout (lógica composicional e uso de grid). Design Score é atribuído por múltiplos membros da equipe que revisam o template de forma independente antes de ser listado. A pontuação publicada é o resultado médio dessas avaliações individuais. Existe porque "parece bom" é subjetivo demais e facilmente manipulado por capturas de tela de marketing polidas.

Hierarquia visual A organização de elementos em uma página para que a informação mais importante seja notada primeiro. Em um template bem construído, hierarquia é criada através de escala de tipo, contraste de peso, cor, espaçamento e posição. Quando um template tem hierarquia fraca, tudo na página compete por atenção igualmente e nada funciona. É um dos modos de falha mais comuns em templates gratuitos.

Tipografia No contexto de templates web, tipografia cobre as escolhas de fonte, escala de tipo, altura de linha, espaçamento entre letras e como o texto é estilizado em diferentes contextos (títulos, corpo de texto, legendas, labels). Boa tipografia de template funciona em múltiplos tamanhos, através de múltiplos dispositivos e com conteúdo real de cliente, não apenas o texto placeholder usado na demo.

Escala de tipo Um conjunto definido de tamanhos de fonte usado consistentemente através de um template, geralmente seguindo uma proporção (como uma escala modular). Uma escala de tipo adequada significa que H1 até H6, corpo, legenda e tamanhos de label estão todos proporcionalmente relacionados. Templates sem uma escala de tipo coerente produzem inconsistência visual no momento em que você começa a adicionar seu próprio conteúdo.

Combinação de fontes A combinação de duas (ocasionalmente três) fontes usadas em um template, tipicamente uma fonte display ou de título e uma fonte de corpo. Combinações de fontes fortes têm contraste em personalidade mas harmonia em proporção. Na avaliação de templates, observamos se a combinação se mantém em todos os tamanhos, não apenas na seção hero onde tudo é grande e perdoador.

Sistema de grid A estrutura de colunas subjacente que organiza o layout de um template. A maioria dos templates web usa um grid de 12 colunas, embora alguns usem 10 ou 16. O que importa na prática é se os elementos se alinham consistentemente entre seções e se o grid é usado deliberadamente. Um template onde seções quebram aleatoriamente do grid ou usam contagens de coluna inconsistentes pontua mais baixo em layout.

Sistema de espaçamento Um conjunto de valores de espaçamento predefinidos (geralmente múltiplos de 4px ou 8px) usados para padding, margins e gaps através de um template. Um template com sistema de espaçamento consistente parece ordenado mesmo quando você não consegue articular o porquê. Um sem isso parece ligeiramente desalinhado em todo lugar. No Webflow, sistemas de espaçamento são frequentemente implementados como variáveis CSS ou um conjunto definido de classes.

Paleta de cores O conjunto de cores usadas através de um template: primária, secundária, background, texto, destaque e cores de estado (hover, erro, sucesso). Boas paletas de template são definidas no nível do sistema, não codificadas individualmente em elementos isolados. No Webflow, isso geralmente significa variáveis CSS. No Shopify, são configurações de tema. No Framer, são tokens de design.

Contraste de cor A diferença de luminância entre uma cor de primeiro plano (geralmente texto) e seu fundo. Contraste importa para acessibilidade: WCAG AA requer uma proporção mínima de 4.5:1 para corpo de texto. Muitos templates falham nisso, particularmente aqueles com texto cinza-claro sobre branco, ou texto colorido sobre imagens de fundo ocupadas. Um template que falha verificações de contraste exigirá remediação antes de ser utilizável para qualquer projeto sério.

Componente Um elemento de design reutilizável, autocontido com sua própria lógica visual: um card, um botão, um bloco de depoimento, uma tabela de preços. Templates bem construídos têm um conjunto de componentes claramente definido que você pode usar entre páginas sem recriar do zero. Em termos de design, um componente deve parecer e se comportar consistentemente onde quer que apareça.

Seção No design de templates, uma seção é um bloco horizontal de conteúdo com largura total, tipicamente abrangendo a largura total do viewport. Páginas são construídas empilhando seções. Um template típico tem 6 a 15 seções em uma home page. O design de seção determina o ritmo geral de uma página: muitas seções similares tornam monótono; muitas radicalmente diferentes tornam incoerente.

Seção hero A seção superior de uma página, visível above the fold, projetada para comunicar a proposta de valor central do site imediatamente. Na avaliação de templates, seções hero são um proxy para qualidade geral de design. Uma hero fraca geralmente significa design fraco por todo o site. Uma hero forte precisa de hierarquia de título clara, tipografia intencional e uma abordagem visual que se sustenta em todos os tamanhos de tela comuns.

Call to action (CTA) Um prompt que pede ao usuário para fazer algo: "Começar", "Agendar uma ligação", "Comprar agora". No design de templates, CTAs são botões, links ou inputs de formulário. O que importa é como são priorizados visualmente no layout e se o sistema de componentes do template os trata consistentemente. Um template com quatro estilos diferentes de botão usados de forma intercambiável é um sinal de design de componentes fraco.

Espaço negativo As áreas vazias ou não marcadas de um layout. Frequentemente chamado espaço em branco, embora não precise ser branco. Espaço negativo cria respiro, direciona atenção e comunica confiança no design. Templates que aglomeram conteúdo em cada pixel disponível tipicamente pontuam mais baixo em espaçamento e qualidade visual geral. Espaço negativo é uma escolha de design ativa, não uma falha em preencher a página.

Design responsivo Design que se adapta a diferentes tamanhos de tela e dispositivos. Um template responsivo rearranja, redimensiona e esconde ou mostra elementos apropriadamente em diferentes breakpoints. Responsivo não significa "não quebra no mobile". Significa que o layout foi projetado com múltiplos viewports em mente, não apenas adaptado do desktop depois do fato.

Design mobile-first Uma abordagem de design que começa com a menor tela e adiciona complexidade conforme o tamanho do viewport aumenta. Templates mobile-first tendem a ter melhor desempenho em Core Web Vitals e ter interações de toque mais bem pensadas. Muitos templates alegam ser mobile-first mas foram claramente projetados em largura desktop 1440px e comprimidos para baixo.

Breakpoint Uma largura de viewport específica na qual o comportamento do layout muda. Breakpoints comuns são em torno de 480px (mobile), 768px (tablet), 1024px (desktop) e 1280px ou 1440px (desktop largo). Templates definem seus próprios breakpoints, e quão bem um template lida com transições entre eles é um indicador significativo de qualidade.

Design de interação O comportamento de elementos quando usuários agem sobre eles: estados de hover, respostas a cliques, feedback de validação de formulário, comportamento de modal, animações de menu. Na avaliação de templates, design de interação cobre se esses comportamentos são consistentes, intencionais e apropriadamente dimensionados. Design de interação é diferente de animações de scroll: cobre todas as respostas projetadas à entrada do usuário.

Micro-interação Uma interação pequena e contida que dá feedback para uma ação específica: um botão que muda de cor no hover, um campo de formulário que destaca no foco, um link de navegação que anima no clique. Micro-interações são a diferença entre um template que parece polido e um que parece estático. São fáceis de negligenciar e demoradas para adicionar após o fato.

Animação de scroll Uma animação disparada pela posição de scroll do usuário, tipicamente usando Intersection Observer em JavaScript ou uma biblioteca como GSAP. Animações de scroll são comuns em templates Webflow e Framer. Usadas bem, guiam atenção e adicionam profundidade. Usadas mal, desaceleram a página e distraem do conteúdo. Penalizamos templates onde animações de scroll afetam performance sem adicionar valor significativo à experiência.

---

Seção 3: Termos de Desenvolvimento

Dev Score O eixo de pontuação do BestWebsiteTemplate.com para a qualidade técnica de um template. Roda paralelamente ao Design Score porque um template pode parecer excepcional mas ser construído sobre código que é frágil, lento ou difícil de manter. Dev Score é o resultado médio de avaliações independentes por múltiplos membros da equipe, cada um revisando o template separadamente antes de ser listado. Cobre cinco áreas: qualidade de código (estrutura e limpeza), responsividade (quão completamente o template lida com diferentes viewports), estrutura CMS (quão bem o modelo de dados é construído), performance (velocidade de carregamento de página e Core Web Vitals) e lógica de classe/arquitetura (especificamente para Webflow, como o sistema de classes CSS é estruturado).

HTML A linguagem de marcação que define a estrutura e conteúdo de uma página web. No contexto de templates, qualidade HTML importa porque HTML mal estruturado quebra acessibilidade, prejudica SEO e torna manutenção mais difícil. Webflow gera HTML de seu editor visual; temas Shopify usam Liquid que compila para HTML; Framer produz seu próprio HTML. Você raramente escreve HTML diretamente ao trabalhar com templates, mas a qualidade do HTML de saída ainda afeta a performance e indexabilidade do seu site.

CSS A linguagem que controla estilização visual. No Webflow, CSS é gerenciado através do painel de estilização do Designer. No Shopify, vive em arquivos de tema. No Framer, é abstraído em propriedades de componente. Dev Score de template é parcialmente um proxy para qualidade CSS: nomenclatura de classe consistente, sem overrides excessivos, um sistema de espaçamento e cor coerente implementado em variáveis.

JavaScript A linguagem de programação que lida com interatividade e lógica no navegador. Em templates, JavaScript alimenta interações, animações de scroll, manipulação de formulários e integrações de terceiros. JavaScript mal escrito em um template pode causar problemas de performance e conflitos quando você adiciona seus próprios scripts. Templates que carregam JavaScript desnecessário por padrão são um problema comum de Dev Score.

Site estático Um site onde cada página é pré-construída como um arquivo HTML e servida diretamente ao navegador sem processamento do lado do servidor no momento da requisição. Sites estáticos são rápidos e baratos para hospedar. A maioria dos templates Framer produz saída estática. Sites estáticos ainda podem ter elementos interativos através de JavaScript; o termo refere-se a como o servidor entrega páginas, não se a página em si é interativa.

Site dinâmico Um site onde páginas são geradas no servidor no momento da requisição, frequentemente puxando conteúdo de um banco de dados ou CMS. Lojas Shopify são dinâmicas: páginas de produtos, páginas de coleção e estados de carrinho são gerados usando templates Liquid e o banco de dados do Shopify. Sites Webflow com conteúdo CMS também são dinâmicos. Sites dinâmicos são mais complexos de fazer cache e hospedar corretamente, o que afeta performance.

Velocidade de carregamento de página Quão rapidamente uma página se torna utilizável no navegador. Medida em segundos desde a primeira requisição até estado interativo. Velocidade de carregamento de página é um fator de ranking do Google e um fator direto em taxas de conversão. Templates que carregam fontes pesadas, imagens grandes não otimizadas ou JavaScript excessivo por padrão pontuarão mais baixo no Dev Score. Sempre teste a demo ao vivo de um template no PageSpeed Insights antes de comprar.

Core Web Vitals O conjunto padronizado de métricas do Google para experiência de página: Largest Contentful Paint (LCP, performance de carregamento), Interaction to Next Paint (INP, interatividade) e Cumulative Layout Shift (CLS, estabilidade visual). Templates que pontuam bem em Core Web Vitals são geralmente bem construídos. Templates que pontuam mal iniciarão seu SEO em desvantagem e exigirão remediação antes do lançamento.

Código limpo No contexto de template, código limpo significa que a base de código é estruturada para que outro desenvolvedor possa entender, manter e estender sem fazer engenharia reversa do zero. Para templates Webflow, isso significa nomenclatura de classe consistente, sem estilos inline dispersos e aninhamento lógico. Para temas Shopify, significa Liquid bem comentado, arquivos de seção modulares e estrutura de schema coerente. Código limpo é parcialmente subjetivo mas consistentemente reconhecível.

Estrutura de classes No Webflow especificamente, estrutura de classes refere-se a como classes CSS são nomeadas, organizadas e aplicadas através do template. Webflow gera classes que aplicam estilos diretamente através do Designer. Um template Webflow bem estruturado usa uma convenção de nomenclatura (BEM ou algo similar), evita classes redundantes e torna claro o que cada classe faz. Estrutura de classes ruim torna um template Webflow extremamente difícil de modificar sem quebrar coisas.

Combo class Um termo específico do Webflow para uma classe secundária adicionada sobre uma classe base para criar uma variação. Por exemplo, uma classe base "button" com uma combo class "button-red" para criar uma versão vermelha. Combo classes são um padrão Webflow legítimo e necessário. O problema surge quando um template é construído com combo classes excessivas que sobrescrevem estilos base de forma imprevisível. Este é um ponto comum de falha do Dev Score: templates que parecem polidos mas têm CSS frágil e pesado em combo classes que quebra sob modificação.

Código customizado Código adicionado manualmente a um template, fora do editor visual da plataforma. No Webflow, isso tipicamente significa JavaScript ou CSS injetado através das configurações de página ou blocos de embed. No Shopify, significa edições em arquivos Liquid de tema ou scripts de app customizados. Código customizado dá capacidades que as ferramentas nativas da plataforma não têm, mas também adiciona complexidade de manutenção e potenciais conflitos em atualizações de template.

CDN (Content Delivery Network) Uma rede de servidores distribuídos geograficamente que servem os ativos estáticos de um site (imagens, fontes, scripts) da localização mais próxima ao usuário. Webflow, Framer e Shopify todos incluem hospedagem CDN por padrão. Da perspectiva de avaliação de templates, CDN importa porque templates que servem ativos grandes não otimizados ainda têm desempenho ruim mesmo em uma CDN. Uma CDN reduz latência; não corrige ativos inchados.

Pronto para SEO Uma alegação de marketing de que um template é construído com boas práticas de SEO. Tipicamente significa que o template usa HTML semântico, tem hierarquia de títulos correta, inclui suporte a tags Open Graph e gera sitemaps válidos. O que não significa: que seu site vai rankear. Pronto para SEO é uma fundação estrutural, não uma garantia de performance de busca. Verifique a estrutura de títulos e marcação real na demo antes de confiar no rótulo.

Schema markup Dados estruturados adicionados ao HTML de uma página usando vocabulário do Schema.org, que ajuda motores de busca a entender tipo e contexto do conteúdo. Para templates de e-commerce, isso inclui schema de produto (preço, disponibilidade, avaliações). Para templates de blog, inclui schema de artigo. Templates que incluem schema markup correto dão melhor contexto aos motores de busca, o que pode melhorar como resultados aparecem nas SERPs.

Tags Open Graph Meta tags HTML que controlam como uma página aparece quando compartilhada em plataformas de redes sociais. Definem o título, descrição e imagem usados em previews de links em plataformas como LinkedIn, X e Slack. Um template que suporta tags Open Graph significa que os campos existem no CMS ou configurações de página; ainda requer que você os preencha com conteúdo real.

Lazy loading Uma técnica onde imagens e outras mídias são carregadas apenas quando estão prestes a entrar no viewport, em vez de todas de uma vez no carregamento da página. Lazy loading reduz significativamente o tempo de carregamento inicial da página em páginas pesadas em conteúdo. A maioria dos templates modernos inclui lazy loading por padrão; vale verificar na demo de um template usando DevTools do navegador se performance é crítica para seu projeto.

Otimização de imagem O processo de reduzir o tamanho do arquivo de imagem sem perda de qualidade inaceitável, tipicamente através de escolhas de formato (WebP sobre JPEG ou PNG), compressão e servir imagens do tamanho correto para cada viewport. No contexto de template, otimização de imagem refere-se a se o template é construído para servir imagens corretamente: atributos de tamanho corretos, suporte de formato apropriado e manipulação de imagem responsiva. Webflow e Framer ambos lidam com conversão WebP automaticamente. A infraestrutura de tema do Shopify suporta isso mas requer implementação correta no Liquid.

Acessibilidade No contexto de template, acessibilidade significa que o site pode ser usado por pessoas com deficiências: usuários de leitores de tela, navegadores apenas por teclado, pessoas com baixa visão ou daltonismo. Templates acessíveis usam HTML semântico, labels ARIA corretos, elementos interativos navegáveis por teclado, contraste de cor suficiente e estados de foco em componentes interativos. Acessibilidade também é uma exigência legal em muitas jurisdições para sites comerciais e do setor público. Templates que ignoram isso criam responsabilidade e exclusão, não apenas dívida técnica.

---

Seção 4: Termos de CMS e Conteúdo

CMS (Content Management System) Software que permite criar, gerenciar e atualizar conteúdo do site sem editar código diretamente. No mundo dos templates, capacidades de CMS variam significativamente por plataforma. Webflow tem um CMS visual integrado. Framer tem seu próprio CMS. O catálogo de produtos, blog e páginas do Shopify são todos gerenciados através de seu admin integrado. CMSs de terceiros como Contentful ou Sanity também podem ser conectados a templates via API, embora isso esteja fora do escopo da maioria das compras de templates.

Template CMS Um template construído em torno de conteúdo dinâmico que é gerenciado através de um CMS, em vez de conteúdo de página estático e fixo. Um template CMS tipicamente inclui estruturas de coleção (para posts de blog, membros da equipe, estudos de caso, produtos), e as páginas do template puxam dessas coleções dinamicamente. Templates CMS são mais complexos de configurar que estáticos mas são essenciais para qualquer site onde o conteúdo é atualizado regularmente.

CMS collection Um termo específico do Webflow para um tipo de conteúdo estruturado. Uma CMS collection é aproximadamente equivalente a uma tabela de banco de dados: tem campos definidos, e cada entrada na coleção é um registro. Coleções comuns em templates Webflow incluem Posts (para blogs), Projects (para portfólios), Team Members e Case Studies. Coleções alimentam páginas dinâmicas: Webflow gera uma página por item de coleção usando um layout de template que você define.

Campo de coleção Um único campo de dados dentro de uma CMS collection. Campos têm tipos: texto simples, rich text, imagem, número, data, switch (booleano), cor, referência e multi-referência, entre outros. A estrutura de campo em uma CMS collection do Webflow determina que conteúdo você pode armazenar e exibir. Um template CMS bem construído tem estruturas de campo que refletem necessidades reais de conteúdo, não apenas o que foi necessário para a demo.

Campo de referência Um tipo de campo CMS específico do Webflow que conecta um item de coleção a outro. Por exemplo, uma coleção de posts de blog com um campo de referência apontando para uma coleção Author. Isso cria uma estrutura de dados relacional. Campos de referência permitem coisas como páginas de autor, páginas de categoria e módulos de conteúdo relacionado sem duplicar dados entre coleções.

Campo multi-referência Um tipo de campo CMS do Webflow que permite que um item de coleção referencie múltiplos itens de outra coleção. Um post de blog marcado com múltiplas categorias, por exemplo. Campos multi-referência são mais poderosos que campos de referência única mas também mais difíceis de filtrar e exibir corretamente no CMS nativo do Webflow. Quão bem um template usa campos multi-referência é um indicador razoável de profundidade de arquitetura CMS.

Conteúdo dinâmico Conteúdo que é puxado de um CMS ou banco de dados no momento de renderização, em vez de fixado na página. Posts de blog, listagens de produtos, perfis de membros da equipe e estudos de caso de projetos são todos tipicamente dinâmicos. Conteúdo dinâmico é o que torna um template escalável: você adiciona um novo post de blog ao CMS e a página índice, a página de arquivo e o módulo de posts relacionados todos atualizam automaticamente.

Conteúdo estático Conteúdo que é fixado diretamente na página ou template, em vez de puxado de um CMS. A navegação principal do site, um aviso legal ou um parágrafo fixo "Sobre Nós" podem ser estáticos. Conteúdo estático é adequado para coisas que raramente mudam. O erro é usar conteúdo estático para coisas que precisarão de atualizações regulares, o que força você a editar templates manualmente toda vez.

Campo rich text Um campo CMS que armazena conteúdo formatado: títulos, parágrafos, negrito, itálico, links, imagens e às vezes mídia incorporada. Campos rich text são usados para corpos de posts de blog e conteúdo de forma longa. No Webflow, estilização rich text é controlada por um elemento Rich Text com seu próprio CSS com escopo. Uma das falhas de qualidade de template mais comuns são elementos rich text que não têm estilo ou têm estilo inconsistente comparado ao resto do design.

Slug O identificador seguro para URL usado no final da URL de uma página. Para um post de blog intitulado "Como Escolher um Template Webflow", o slug pode ser "como-escolher-um-template-webflow". Slugs devem ser legíveis por humanos, em minúsculas e separados por hífens. Em templates CMS, slugs são geralmente gerados automaticamente do título do conteúdo mas devem ser revisados e limpos antes do lançamento.

Sitemap Um arquivo (geralmente XML) que lista todas as páginas de um site, usado por motores de busca para descobrir e indexar conteúdo. Templates CMS que geram sitemaps automaticamente estão melhor posicionados para SEO pronto para uso. Webflow, Framer e Shopify todos geram sitemaps para sites hospedados. O que importa é se as páginas de coleção CMS estão incluídas e se o sitemap é submetido ao Google Search Console.

Template de blog Um template construído especificamente para publicação de conteúdo. Inclui uma página índice (listando todos os posts), páginas de post individuais com layout rich text e frequentemente páginas de arquivo de categoria ou tag. Templates de blog no Webflow usam CMS collections para posts, com filtragem dinâmica para categorias. A qualidade do template de blog é fortemente determinada pela tipografia do corpo do post, já que é onde a maior parte da leitura acontece.

Template de portfólio Um template construído para mostrar trabalho: estudos de caso, projetos, fotografia ou design. Templates de portfólio tipicamente usam uma CMS collection para projetos com campos para imagens, descrições, tags e informações de cliente. Layout de grid, tratamento de imagem e a estrutura da página de projeto individual são os principais indicadores de qualidade.

Template de e-commerce Um template construído para vender produtos online. No contexto Shopify, isso significa um tema com páginas de produto, páginas de coleção, carrinho e fluxo de checkout. Templates de e-commerce são avaliados diferentemente de templates de conteúdo porque o objetivo primário é conversão: layout de fotografia de produto, UX de adicionar ao carrinho e clareza de checkout importam mais que tipografia editorial.

---

Seção 5: Termos Específicos de Plataforma

Webflow

Webflow Designer O editor visual onde você constrói e estiliza sites Webflow. O Designer é uma ferramenta de layout completa que dá controle CSS preciso sem escrever CSS diretamente. Produz HTML e CSS limpos e prontos para produção. Trabalhar com um template Webflow significa abri-lo no Designer, modificar o layout, trocar conteúdo e ajustar estilos no nível de elemento ou classe.

Webflow Editor Uma interface separada e mais simples colocada em cima de um site Webflow publicado para edição de conteúdo. É projetada para clientes e editores não técnicos que precisam atualizar texto, imagens e conteúdo CMS sem acessar o Designer. O Editor não expõe controles de layout, apenas campos de conteúdo. Templates Webflow projetados para entrega ao cliente devem ter estruturas CMS que tornam o Editor utilizável sem acesso ao Designer.

Webflow CMS O sistema de gerenciamento de conteúdo integrado do Webflow, construído diretamente na plataforma. Lida com CMS collections, páginas dinâmicas e relacionamentos de conteúdo. Conteúdo Webflow CMS é gerenciado no Designer e no Editor. O CMS tem limites baseados em plano sobre o número de itens de coleção e coleções. Entender a estrutura Webflow CMS é essencial para avaliar se um template Webflow CMS é realmente bem construído ou apenas visualmente polido.

Webflow Hosting A infraestrutura de hospedagem própria do Webflow, construída na AWS e servida via CDN da Fastly. Sites Webflow hospedados nos servidores do Webflow se beneficiam de HTTPS automático, otimização de ativos e distribuição global. Hospedagem Webflow é necessária para sites usando CMS, Memberships ou Logic. Exportações estáticas são possíveis para sites mais simples mas perdem funcionalidade dinâmica.

Webflow Cloneable Um projeto Webflow compartilhado publicamente para que outros possam cloná-lo em seu próprio workspace Webflow. Cloneables são diferentes de templates de marketplace: são gratuitos, compartilhados pela comunidade e variam enormemente em qualidade. Alguns dos melhores recursos educacionais do Webflow são cloneables; alguns são demos instáveis não adequadas para produção. BestWebsiteTemplate.com lista tanto templates de marketplace quanto cloneables de alta qualidade onde atendem nossos limites de pontuação.

Webflow Marketplace O marketplace oficial do Webflow para comprar e vender templates construídos por criadores terceiros. Templates no Webflow Marketplace são revisados antes da listagem, embora os critérios de revisão sejam primariamente funcionais em vez de profundamente editoriais. Comprar um template do Webflow Marketplace dá uma licença para usá-lo em um projeto e transfere uma cópia do projeto para seu workspace.

Made in Webflow O showcase comunitário do Webflow para sites construídos na plataforma. É uma galeria navegável, não uma biblioteca de templates. É útil para inspiração e para ver como templates se comportam com conteúdo real. Alguns sites listados lá são construídos sobre templates; outros são construções totalmente customizadas.

Symbol vs Component A terminologia do Webflow mudou. Symbols eram o termo original para elementos reutilizáveis no Webflow: projete uma vez, use em todo lugar, e mudanças se propagam pelo site. Webflow renomeou Symbols para Components com o lançamento de Component Properties, que adicionou suporte a variante e propriedade similar a componentes do Figma. Se você está trabalhando com um template Webflow mais antigo, ele pode ainda usar Symbols. Templates mais novos devem ser construídos com Components. A função é similar; as capacidades de Components são significativamente mais poderosas.

Interaction No sistema do Webflow, uma Interaction é uma animação ou comportamento definido disparado por um evento específico: carregamento de página, elemento entrando na rolagem, hover, clique. O painel Interactions do Webflow permite encadear múltiplas animações com controles de tempo. A qualidade das interações de um template Webflow é um diferenciador de design significativo. Interações mal temporizadas, travadas em certos dispositivos ou disparadas sem propósito são um problema de qualidade comum.

Breakpoint (Webflow) Webflow lida com breakpoints de forma diferente do código. O Designer tem um conjunto de breakpoints predefinidos: Desktop (base), Tablet, Mobile Landscape e Mobile Portrait, mais um breakpoint XXL opcional. Estilos cascateiam para baixo do Desktop: se você define um padding no Desktop, ele se aplica a todos os breakpoints menores a menos que seja sobrescrito. Isso significa que a qualidade mobile de um template Webflow depende inteiramente de quão completamente o designer construiu os breakpoints menores. Sempre teste as visualizações Tablet e Mobile Portrait antes de comprar.

---

Framer

Framer Canvas O espaço de trabalho principal no Framer onde você constrói páginas e componentes visualmente. O Canvas é um ambiente de design de forma livre com saída CSS direta. Diferente do sistema de layout mais restrito do Webflow, o Canvas do Framer dá posicionamento preciso ao pixel. Templates Framer são publicados diretamente do Canvas para a infraestrutura de hospedagem do Framer.

Framer CMS O sistema de gerenciamento de conteúdo do Framer, integrado à plataforma. Suporta coleções de conteúdo estruturado, similar ao Webflow CMS mas com um conjunto de campos mais simples. Framer CMS é adequado para posts de blog, membros de equipe e listagens de projetos. É menos rico em recursos que Webflow CMS, particularmente em torno de campos relacionais e filtragem dinâmica.

Framer Components Elementos reutilizáveis e autocontidos no Framer com suas próprias propriedades e variantes. Framer Components são similares em conceito a Webflow Components e componentes Figma. Suportam estados de variante (default, hover, pressed) e propriedades configuráveis. Templates Framer bem construídos têm um conjunto de componentes que cobre toda a gama de padrões de UI usados através do template.

Framer Variants Estados visuais definidos para um Framer Component. Um componente de botão pode ter uma variante Default, uma variante Hover e uma variante Disabled. Variantes permitem ao Framer animar entre estados, criando feedback de interação suave. A qualidade das variantes de um template Framer determina quão polida a experiência interativa parece em produção.

Framer Interactions O sistema do Framer para definir animações disparadas por eventos do usuário ou posição de scroll. Framer tem capacidades de animação particularmente fortes, parcialmente herdadas da biblioteca Framer Motion. Templates Framer frequentemente usam animações vinculadas a scroll, efeitos stagger e animações de transição que são mais fluidas que o possível nativamente no Webflow sem código customizado.

Framer Template Marketplace O marketplace integrado do Framer para comprar templates diretamente dentro do app Framer. Templates são listados por criadores terceiros e pelo próprio Framer. Compras dão uma cópia do template em seu workspace Framer. O marketplace cresceu significativamente conforme o Framer expandiu seu ecossistema de criadores.

Override Um conceito específico do Framer onde você anexa código customizado (um componente React ou função) a um elemento Canvas para controlar seu comportamento além do que o editor visual suporta. Overrides são como o Framer permite interações avançadas, animações customizadas e busca de dados dinâmicos que não podem ser feitos através da UI padrão. Templates que usam Overrides efetivamente são mais poderosos mas requerem alguma familiaridade com código para modificar.

---

Shopify

Shopify Theme A camada visual e funcional completa de uma loja Shopify. Um tema Shopify controla cada aspecto da aparência da loja e a maior parte de seu comportamento frontend. Temas são construídos com Liquid, HTML, CSS e JavaScript. São empacotados como um conjunto estruturado de arquivos e instalados através do admin Shopify. Diferente de templates Webflow ou Framer, temas Shopify são profundamente vinculados ao modelo de dados do Shopify (produtos, coleções, carrinho, checkout).

Liquid A linguagem de template open-source do Shopify, criada pelo Shopify e usada em todos os temas Shopify. Liquid insere conteúdo dinâmico em HTML usando dois tipos de tags: tags de output ( {{ }} ) que renderizam valores, e tags de lógica ({% %}) que lidam com condicionais e loops. Uma linha como {% for product in collection.products %} faz loop através de todos os produtos em uma coleção. Entender Liquid é necessário para qualquer customização significativa de tema Shopify além do editor de tema.

Liquid Section Um bloco de conteúdo modular e reutilizável em um tema Shopify, definido em seu próprio arquivo .liquid. Temas Online Store 2.0 são construídos em torno de seções: a homepage, páginas de produtos e a maioria dos outros templates são montados de seções que podem ser adicionadas, reordenadas e configuradas através do editor de tema. Seções tornam temas Shopify muito mais flexíveis que a estrutura de template Liquid mais antiga e rígida.

Section Schema O bloco de configuração JSON dentro de um arquivo de seção Shopify que define quais configurações aparecem no editor de tema. O schema controla quais campos (texto, imagem, cor, referência de produto, etc.) um comerciante pode editar sem tocar no código. Um section schema bem projetado torna um tema altamente configurável; um mal projetado força comerciantes a fixar conteúdo no código ou contratar um desenvolvedor para mudanças básicas.

Shopify Theme Store O marketplace oficial do Shopify para comprar temas. Temas listados na Shopify Theme Store passaram pelo processo de revisão do Shopify. A loja inclui tanto temas gratuitos (como Dawn e suas variantes) quanto temas premium de desenvolvedores terceiros. Temas da Theme Store devem atender aos requisitos técnicos do Shopify, o que estabelece um piso de qualidade razoável.

Shopify Online Store 2.0 A atualização de arquitetura importante que o Shopify introduziu que moveu temas de uma estrutura rígida baseada em templates para uma totalmente baseada em seções. OS2.0 adicionou seções em todo lugar (não apenas na homepage), templates JSON (substituindo templates Liquid para estrutura de página) e suporte a Metafields. Qualquer tema Shopify que vale a pena usar hoje deve ser construído na arquitetura Online Store 2.0. Temas construídos na estrutura mais antiga são mais difíceis de customizar e recebem menos suporte da plataforma.

Metafields Campos de dados customizados que estendem os dados padrão de produto, coleção, cliente e pedido do Shopify com conteúdo estruturado adicional. Metafields permitem armazenar conteúdo como composição de material de um produto, instruções de cuidado ou um label de badge customizado, e exibi-lo através de Liquid no tema. Temas OS2.0 que suportam Metafields bem são significativamente mais flexíveis para catálogos de produtos complexos.

Dawn O tema de referência oficial open-source do Shopify, lançado como tema padrão para novas lojas e como fundação para desenvolvedores de temas. Dawn é construído no OS2.0, é otimizado para performance e é mantido pela própria equipe de temas do Shopify. Não é o tema mais visualmente distintivo, mas é tecnicamente correto, bem documentado e amplamente usado. Muitos temas premium Shopify são construídos sobre ou inspirados pela arquitetura do Dawn. Entender o Dawn torna muito mais fácil avaliar outros temas Shopify.

Shopify POS O sistema de ponto de venda do Shopify para varejo presencial. É relevante para o espaço de templates quando um comerciante opera tanto uma loja online quanto uma operação de varejo física. Temas Shopify não afetam diretamente o comportamento POS, mas dados de produtos, inventário e registros de clientes são compartilhados entre canais online e presenciais. Temas construídos para comerciantes omnichannel devem considerar as estruturas de dados de produto que o POS requer.

---

O espaço de templates se move rapidamente. Atualizações de plataforma, novos recursos e mudanças de terminologia acontecem regularmente no Webflow, Framer e Shopify. Atualizamos este glossário conforme as plataformas evoluem e conforme encontramos termos que precisam ser esclarecidos no contexto da avaliação atual de templates.

Navegue pela biblioteca completa de templates em: BestWebsiteTemplate.com

Cada template na biblioteca foi pontuado de forma independente usando nossa metodologia de Design Score e Dev Score. Leia mais sobre como avaliamos templates.