{"section":"tutorials","requestedLocale":"es","requestedSlug":"como-crear-una-pagina-personalizada-en-tiendas-cms-legado","locale":"es","slug":"como-crear-una-pagina-personalizada-en-tiendas-cms-legado","path":"docs/es/tutorials/storefront/layout/como-crear-una-pagina-personalizada-en-tiendas-cms-legado.md","branch":"main","content":"Esta guía describe cómo crear una página personalizada en tiendas desarrolladas con [CMS Portal (Legado)](https://help.vtex.com/es/docs/tracks/cms-portal-legado). Consulta a continuación las instrucciones para configurar una nueva página, asociar una plantilla y vincularla a una URL personalizada.\n\n## Instrucciones\n\n### Configura la plantilla\n\n1. En el Admin VTEX, accede a **Storefront > Layout**.\n2. En la sección **Layout**, haz clic en **CMS > HTML Templates**.\n3. Decide si deseas:\n * Reutilizar una plantilla existente que ya tenga el layout necesario.\n * Crear una nueva plantilla específica para la página personalizada. Si vas a crear una nueva plantilla sigue las instrucciones de la guía [Crear o editar un template de página](https://help.vtex.com/es/docs/tutorials/como-crear-un-template-de-pagina).\n4. Abre la plantilla que se utilizará en la página personalizada y configura la estructura de acuerdo con el diseño deseado:\n * Agrega marcadores de posición o componentes de contenido, como banners, bloques HTML y estanterías de productos.\n * Configura las opciones necesarias, como título, metatags u opciones de layout ofrecidas por los [controles nativos](https://developers.vtex.com/docs/guides/list-of-controls-for-templates) del Portal CMS (Legado).\n5. Haz clic en `Save Template` para guardar la plantilla.\n\n> ℹ️ Más información en [¿Qué son templates?](https://help.vtex.com/es/docs/tutorials/que-son-templates)\n\n![new-layout-es](https://cdn.jsdelivr.net/gh/vtexdocs/help-center-content@main/docs/es/tutorials/storefront/layout/new-layout-es.png)\n\n### Crea la URL de la página personalizada\n\nAhora debes crear la ruta URL de la página personalizada:\n\n1. En el Admin VTEX, accede a **Storefront > Layout**.\n2. En la sección **Layout**, accede a **CMS > Sites and channels**.\n3. Haz clic en el sitio web deseado.\n4. Haz clic en la carpeta raíz (`/`).\n5. En el lado derecho de la pantalla, haz clic en `new folder`.\n6. Llena los campos según se describe a continuación:\n * **Folder Name:** ruta de la URL\n * **Marketing Context (Default):** define si se puede acceder a la página mediante [parámetros UTM](https://help.vtex.com/es/docs/tutorials/que-son-utm-source-utm-campaign-y-utm-medium). Este campo es opcional.\n * **Search Context (Default):** agrega parámetros de búsqueda.\n * **Protocol:** define el protocolo de comunicación entre un servidor web y un navegador web. Recomendado: `HTTPS`.\n * **Cache Type:** define el comportamiento de almacenamiento en caché del navegador. Recomendado: `Local and Remote`.\n * **Authentication Required?:** define si solo se podrá acceder a la página después de la autenticación del usuario. Si esta opción está activada, solamente usuarios autenticados podrán acceder a la página.\n7. Haz clic en `Save Folder` para guardar la nueva página.\n\n![new-folder-es](https://cdn.jsdelivr.net/gh/vtexdocs/help-center-content@main/docs/es/tutorials/storefront/layout/new-folder-es.gif)\n\n### Crea el layout para la nueva página\n\nAhora debes crear un layout y asociarlo con la plantilla configurada en el [primer paso](#configura-la-plantilla):\n\n1. Haz clic en la carpeta (folder) creada en el [paso anterior](#crea-la-url-de-la-pagina-personalizada).\n2. En el lado derecho de la pantalla, haz clic en `new layout` para crear un nuevo layout.\n3. Llena los campos según se describe a continuación:\n * **Layout name:** nombre del layout en el CMS.\n * **Body Class:** (opcional) define una clase CSS aplicada al elemento `` de la página, utilizada para personalizar el estilo en el frontend.\n * **Template:** selecciona la plantilla HTML configurada en el [primer paso](#configura-la-plantilla).\n * **Active:** si marcas la casilla, la página queda activa y visible en la URL.\n * **Default page:** si marcas la casilla, la página se considerará la página predeterminada de esa carpeta (por ejemplo, la página de inicio de un directorio específico).\n4. Haz clic en `Save Layout` en la parte superior de la página para guardar el layout.\n\nPara más detalles, consulta la guía [Asociar un template con un layout](https://help.vtex.com/es/docs/tutorials/asociar-un-template-con-un-layout)."}