{"section":"tutorials","requestedLocale":"es","requestedSlug":"para-que-serve-o-controle-customizado","locale":"es","slug":"para-que-serve-o-controle-customizado","path":"docs/es/tutorials/storefront/layout/para-que-serve-o-controle-customizado.md","branch":"main","content":"En diversos proyectos es necesario crear un banner, una vitrina o incluso un código HTML que se utilizará en varias páginas del sitio web. Un ejemplo es el banner de flete gratis y descuentos que habitualmente está ubicado en la parte superior de la página, debajo del menú.\n\nPara evitar el trabajo de añadir manualmente el mismo contenido varias veces en cada página, tenemos el área de Custom Elements.\n\nLos controles personalizados son muy útiles en el desarrollo y facilitan la actualización del contenido. Se pueden utilizar en templates y subtemplates de las páginas.\n\n## Creando un control personalizado\n\nPara crear un control personalizado, acceda al Admin y al **menú Storefront**. Haga clic en **Layout**. Después haga clic en la carpeta CMS y en **Custom Elements**.\n\nEn Custom Elements, podemos crear hasta cuatro tipos de características para personalizar las tags.\n\nEstos tipos son:\n- Banner\n- BannerDHTML\n- Colección\n- HTML\n\nPara crear una tag de control personalizado, basta hacer clic en __Add__, registrar un nombre y una tag, luego seleccionar el tipo.\n\n![cms-custom-elements EN / ES](https://cdn.statically.io/gh/vtexdocs/help-center-content/refs/heads/main/docs/es/tutorials/storefront/layout/para-que-serve-o-controle-customizado_1.png)\n\n> ⚠️ **Atención:** no cree un control del tipo HTML con un elemento `title`. Esto puede interferir con el buen funcionamiento de su tienda.\n\n## Aplicando un control personalizado a un template de página\n\nLa aplicación de una tag de control personalizado es semejante al uso de otros elementos como los controles normales y subtemplates. La tag se debe colocar en el lugar donde queremos que el contenido sea cargado.\n\nPara identificar el control personalizado que se utilizará, insertamos el nombre de la tag registrada en la sintaxis del control.\n\nLas sintaxis para cada tipo de control son las siguientes:\n\n1. Tipo Banner: `<vtex:nombredelatag />`\n2. Tipo HTML: `<vtex.cmc:nombredelatag />`\n3. Tipo Colección: `<vtex.cmc:nombredelatag />`"}