{"section":"tutorials","requestedLocale":"pt","requestedSlug":"o-que-e-o-cms-layout","locale":"pt","slug":"o-que-e-o-cms-layout","path":"docs/pt/tutorials/storefront/layout/o-que-e-o-cms-layout.md","branch":"main","content":"> Essa funcionalidade está disponível para lojas usando a tecnologia Portal Legada\n\nA seção [Layout](/pt/subcategory/layout--2g6LxtasS4iSeGEqeYUuGW) permite que você crie seu storefront usando HTML e CSS.\n\n## Sites and channels\n\nSe você ainda não criou um Web Site (ou deseja [criar um novo](/pt/docs/tutorials/como-criar-um-web-site)), é nesse diretório que você deve ir primeiro. Se você já tem um Web Site, é aqui que você vai acessar e gerenciar toda a sua estrutura de pastas.\n\n**Sites and channels** é também o lugar onde você vai poder criar e organizar os layouts do seu site, como veremos mais à frente.\n\n> Este recurso também está disponível para lojas que utilizam o Site Editor.\n\n## Binding\n\nAntes de começar a organizar o conteúdo do seu Web Site, ele precisa estar vinculado a um account name. Dessa forma, o sistema entende onde vão ser aplicadas todas as informações adicionadas ou modificadas nas pastas, arquivos ou código do Web Site.\n\nEsse é um processo fundamental para o perfeito funcionamento da sua loja, mas também é muito simples. Basta seguir os passos [deste artigo](/pt/docs/tutorials/vincular-um-account-name-a-um-website-binding).\n\n![Binding](https://cdn.statically.io/gh/vtexdocs/help-center-content/refs/heads/main/docs/pt/tutorials/storefront/layout/o-que-e-o-cms-layout_1.png)\n\n## Layouts e templates\n\nCom seu Web Site criado e já vinculado a um account name, você vai precisar definir templates e layouts.\n\n- **Template**: é aqui que fica o código propriamente dito. Entre outras coisas, é ele que determina como as informações vão aparecer na tela, inclusive a posição em que os placeholders vão aparecer. Os templates ficam reunidos nas pastas **HTML Templates** e **Shelves Templates** (Templates de prateleira).\n- **Layout**: é responsável por determinar quais elementos vão aparecer em uma página. É ele que configura os placeholders (elementos como banners, coleções e outros), que serão exibidos para o usuário final. Para funcionar, cada layout precisa estar vinculado a um único template. Você encontra os layouts do seu Web Site organizados por pastas, no diretório **Sites and channels**.\n\n## Placeholders\n\nSão elementos (Banner DHTML, HTML, Coleção, Banner, Produtos relacionados) que podem ou não ser usados nas páginas do seu Web Site. Eles são configurados nos layouts (que ficam armazenados no diretório **Sites and channels**), mas sua posição na página é determinada pelo código presente nos templates (armazenados no diretório **HTML Templates**). \n\nO layout define quais placeholders vão ser usados, e o que eles exibem, mas é o código (ou seja, o template) que vai dizer onde eles aparecem na página.\n\n## Coleção\nPara o CMS, coleções são placeholders que exibem grupos de produtos (product clusters) em uma determinada página. Esses grupos precisam ser definidos no diretório **Product Clusters (Collections)**.\n\n## Controles\nOs controles nativos da VTEX renderizam diversas funcionalidades úteis e replicáveis nos templates do seu site. Por exemplo, ao inserir o controle `<vtex.cmc:productName/>` na sua página de produto, o sistema renderizará automaticamente o nome do produto.\n\nVeja a lista completa de controles nativos para templates [neste artigo](/pt/tutorial/lista-de-controles-para-templates).\n\n## Custom Elements\nAlém dos controles nativos da VTEX, o sistema permite que você crie controles customizados. Eles ficam armazenados no diretório Custom Elements, e podem ser usados em qualquer template, da mesma maneira que os controles nativos.\n\n## URL Builder\nNesta seção você pode construir URLs mais amigáveis, tornando as páginas do seu Web Site mais fáceis de serem encontradas pelo usuário.\n\n## Files Manager\nPara gerenciar os arquivos do seu Web Site, você pode acessar este diretório. Nele, é possível adicionar, deletar e modificar arquivos CSS, JavaScript, XML e imagens.\n\n### Referências\n\n- [Layout](/pt/subcategory/layout--2g6LxtasS4iSeGEqeYUuGW)\n- [Configurações](/pt/subcategory/configuracoes-de-cms--6kovkwzMRyeOOc2iEC4suM)\n- [O que são templates?](/pt/tutorial/o-que-sao-templates--4l7BQBYO9ycumsqua2CU88?&utm_source=autocomplete)\n- [O que é um web site?](/pt/tutorial/o-que-e-um-web-site--5sPUdFEv9C02i0MMqqSo0U?&utm_source=autocomplete)\n- [O que são controles?](/pt/tutorial/o-que-sao-controles--6e2qsk9zu8IQuyEysKweag?&utm_source=autocomplete)\n- [O que são layouts?](/pt/tutorial/o-que-sao-layouts--CckPh00rZIcIUG60y8Gse?&utm_source=autocomplete)\n- [O que são prateleiras?](/pt/tutorial/o-que-sao-prateleiras--28D8d6GFfuAsuAoeWC8eq0?&utm_source=autocomplete)\n- [O que é binding?](/pt/tutorial/o-que-e-binding--4NcN3NJd0IeYccgWCI8O2W?&utm_source=autocomplete)\n\n### Artigos relacionados\n- [Como criar um web site](/pt/docs/tutorials/como-criar-um-web-site)\n- [Vincular um account name a um web site (binding)](/pt/docs/tutorials/vincular-um-account-name-a-um-website-binding)\n- [Lista de controles para templates](/pt/tutorial/lista-de-controles-para-templates)\n\n- [Criar e editar um template de página](/pt/docs/tutorials/como-criar-um-template-de-pagina)\n\n- [Associar um template a um layout](/pt/tutorial/associando-um-template-a-um-layout--7CkgOHRj7DVbsRxyR8YQrK?&utm_source=autocomplete)\n\n- [Gerenciando placeholders](/pt/docs/tutorials/gerenciandoplaceholders)\n\n- [Usando controles nativos da VTEX](/pt/tracks/cms--2YcpgIljVaLVQYMzxQbc3z/7mGkGmo8l6wf4fXJCkWwPi?&utm_source=autocomplete)\n\n- [Para que serve o Controle Customizado?](/pt/docs/tutorials/para-que-serve-o-controle-customizado)"}