{"section":"tutorials","requestedLocale":"pt","requestedSlug":"como-criar-uma-pagina-customizada-em-lojas-cms-legado","locale":"pt","slug":"como-criar-uma-pagina-customizada-em-lojas-cms-legado","path":"docs/pt/tutorials/storefront/layout/como-criar-uma-pagina-customizada-em-lojas-cms-legado.md","branch":"main","content":"Este guia descreve como criar uma página customizada em lojas desenvolvidas com [CMS Portal (Legado)](https://help.vtex.com/pt/docs/tracks/cms-portal-legado). Ao seguir as instruções, você poderá configurar uma nova página, associar um template e disponibilizá-la em uma URL personalizada.\n\n## Instruções\n\n### Configure o template\n\n1. No Admin VTEX, acesse **Storefront > Layout** para abrir a seção **Layout**.\n2. Na seção **Layout**, clique em **CMS > HTML Templates**.\n3. Decida se você vai:\n * Reutilizar um template existente que já tenha o layout necessário.\n * Criar um novo template específico para a página customizada. Se for criar um novo template, siga as instruções do guia [Criar e editar um template de página](https://help.vtex.com/pt/docs/tutorials/como-criar-um-template-de-pagina).\n4. Abra o template que será utilizado na página customizada e configure a estrutura de acordo com o design desejado:\n * Adicione placeholders ou componentes de conteúdo, como banners, caixas HTML e prateleiras de produtos.\n * Configure as opções necessárias, como título, meta tags ou opções de layout oferecidas pelos [controles nativos](https://developers.vtex.com/docs/guides/list-of-controls-for-templates) do CMS Legado.\n5. Clique em `Save Template` para salvar o template.\n\n> ℹ️ Saiba mais em [O que são templates?](https://help.vtex.com/pt/docs/tutorials/o-que-sao-templates)\n\n![new-layout-pt](https://cdn.jsdelivr.net/gh/vtexdocs/help-center-content@main/docs/pt/tutorials/storefront/layout/new-layout-pt.png)\n\n### Crie a URL da página customizada\n\nAgora, você deve criar o caminho da URL da página customizada:\n\n1. No Admin VTEX, acesse **Storefront > Layout** para abrir a seção **Layout**.\n2. Na seção **Layout**, acesse **CMS > Sites and Channels**.\n3. Clique no website desejado.\n4. Clique na pasta raiz (`/`).\n5. No lado direito da tela, clique em `new folder`.\n6. Preencha os campos conforme as orientações a seguir:\n * **Folder Name:** caminho da URL.\n * **Marketing Context (Default):** define se a página pode ser acessada por [utms](https://help.vtex.com/pt/docs/tutorials/o-que-sao-utm-source-utm-campaign-e-utm-medium). Esse campo é opcional.\n * **Search Context (Default):** adiciona parâmetros de busca.\n * **Protocol:** define o protocolo de comunicação entre um servidor web e um navegador web. Recomendado: `HTTPS`.\n * **Cache Type:** define o comportamento de armazenamento de cache do navegador. Recomendado: `Local and Remote`.\n * **Authentication Required?:** define se a página só poderá ser acessada após autenticação do usuário. Se essa opção estiver ativada, apenas usuários autenticados poderão acessar a página.\n7. Clique em `Save Folder` para salvar a nova página.\n\n![new-folder-pt](https://cdn.jsdelivr.net/gh/vtexdocs/help-center-content@main/docs/pt/tutorials/storefront/layout/new-folder-pt.gif)\n\n### Crie o layout para a nova página\n\nAgora, você precisa criar um layout e associá-lo ao template configurado na [primeira etapa](#configure-o-template):\n\n1. Clique na pasta (folder) criada na [etapa anterior](#crie-a-url-da-pagina-customizada).\n2. No lado direito da tela, clique em `novo layout` para criar um novo layout.\n3. Preencha os campos conforme as orientações a seguir:\n * **Layout name:** nome do layout no CMS.\n * **Body Class:** (opcional) define uma classe CSS aplicada ao elemento `` da página, usada para personalizar o estilo no front-end.\n * **Template:** selecione o template HTML configurado na [primeira etapa](#configure-o-template).\n * **Active:** com o checkbox marcado, a página fica ativa e visível na URL.\n * **Default page:** com o checkbox marcado, a página será considerada a página padrão daquela pasta (por exemplo, a homepage de um diretório específico).\n4. Clique em `Save Layout` na parte superior da página para salvar o layout.\n\nPara mais detalhes, veja o guia [Associando um template a um layout](https://help.vtex.com/pt/docs/tutorials/associando-um-template-a-um-layout)."}