{"section":"tutorials","requestedLocale":"pt","requestedSlug":"para-que-serve-o-controle-customizado","locale":"pt","slug":"para-que-serve-o-controle-customizado","path":"docs/pt/tutorials/storefront/layout/para-que-serve-o-controle-customizado.md","branch":"main","content":"Em diversos projetos existe a necessidade de criar um banner, uma vitrine ou até mesmo um código HTML que será utilizado em várias páginas do site. Um exemplo é o banner de frete grátis e descontos, normalmente localizado no header, logo abaixo do menu.\n\nPara evitar o trabalho de adicionar manualmente o mesmo conteúdo várias vezes em cada página, temos a área de Controles Customizados (Custom Elements).\n\nOs controles customizados são muito úteis no desenvolvimento e facilitam a atualização do conteúdo. Podem ser usados em templates e subtemplates.\n\n## Criando um controle customizado\n\nPara criar um controle customizado, acesse o Admin e entre no **menu Storefront**. Clique em **Layout**, depois na pasta CMS e em **Custom Elements**.\n\nDentro da área de Controles Customizados, podemos criar até quatro tipos de características para personalizar cada tag.\n\nOs tipos são:\n- Banner\n- BannerDHTML\n- Coleção\n- HTML\n\nPara criar uma tag personalizada de controle customizado, basta clicar em __Add__ e cadastrar um nome e uma tag, e então selecionar o tipo.\n\n\n\n> ⚠️ **Atenção:** não crie um controle do tipo HTML com um elemento `title`. Isso pode interferir no funcionamento correto da sua loja.\n\n## Aplicando um controle customizado a um template de página\n\nA aplicação da tag de um controle customizado é semelhante ao uso de outros elementos como controles normais e subtemplates. A tag deve ser colocada no local onde queremos que o conteúdo seja carregado.\n\nPara identificar o controle customizado a ser usado, inserimos o nome da tag cadastrada na sintaxe do controle.\n\nAbaixo, seguem as sintaxes para cada tipo de controle:\n\n1. Tipo Banner: ``\n2. Tipo HTML: ``\n3. Tipo Coleção: ``"}