> For the complete documentation index, see [llms.txt](https://ajuda.iset.com.br/inicio/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://ajuda.iset.com.br/inicio/minha-loja/personalizacao/vitrines/elemento-bloco-html.md).

# Elemento Bloco HTML

Para aprender a criar e utilizar um elemento HTML em sua loja virtual, siga o tutorial abaixo:

1- Acesse o painel administrativo de sua loja virtual e, no menu lateral esquerdo, clique em **Minha loja** e depois em **Vitrines** >> **Elementos**.

![](https://935039236-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FtC5RsRPAz28LAb5rFkZl%2Fuploads%2FaWH2I6CAdwtGZIuY4Eja%2F0.jpeg?alt=media)

 2- Na tela **Elementos**, clique em **Novo elemento** para criar um novo elemento para sua vitrine.

![](https://935039236-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FtC5RsRPAz28LAb5rFkZl%2Fuploads%2FJWynj34P3zPuIMNMwBdg%2F1.jpeg?alt=media)

 4- Selecione a opção **Bloco HTML** como o tipo de elemento.

![](https://935039236-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FtC5RsRPAz28LAb5rFkZl%2Fuploads%2FrTIBfM8KQmvtEhl6nmIP%2F2.jpeg?alt=media)

 5- Ao selecionar a opção **Bloco HTML** , a tela **Novo Elemento de Visualização** será aberta, apresentando um editor de HTML onde você pode inserir códigos personalizados.

6- Clique no botão **Código fonte**.

![](https://935039236-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FtC5RsRPAz28LAb5rFkZl%2Fuploads%2FipRyIVILbvBKBZl7s61A%2F3.jpeg?alt=media)

 7- Em seguida, você poderá **colar o código no editor**.

![](https://935039236-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FtC5RsRPAz28LAb5rFkZl%2Fuploads%2FzYXuLgsytTCwp9m9nfwD%2F4.jpeg?alt=media)

 8- Na área **Referenciamento do elemento** você pode adicionar uma Tag para auxiliar na personalização do seu elemento.

Caso você queira exibir um elemento só em determinado aparelho, é possível utilizar uma tag para fazer isso de forma simples.

Como por exemplo, você quer exibir um elemento apenas para o visitante que está acessando pelo computador, basta adicionar a Tag **desktop** e pronto! Seu elemento não será exibido para mobile.

Além disso, a tag criada irá para o código da sua loja virtual, oferecendo mais liberdade e amplitude para suas personalizações.

![](https://935039236-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FtC5RsRPAz28LAb5rFkZl%2Fuploads%2FE7PEnQgc96tRDCQV2dI8%2F5.jpeg?alt=media)

 9- Em seguida, selecione a opção de **Template de exibição**.

![](https://935039236-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FtC5RsRPAz28LAb5rFkZl%2Fuploads%2Fnd1R3qPJt3fP9shISeUj%2F6.jpeg?alt=media)

 9- Por último, clique em **Inserir**.

![](https://935039236-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FtC5RsRPAz28LAb5rFkZl%2Fuploads%2F78YiZvBBLENIixjbyO9M%2F7.jpeg?alt=media)

 Ficou com alguma dúvida? Entre em contato com o nosso suporte via chat online.