---
updatedAt: 2025-05-14T08:14:38.000Z
agentTools:
  projectIndex: https://learn.vtex.com/llms.txt
---

# Apresentando o Site Editor e alterando um banner de uma loja

<HTMLBlock>{`
<style>
      section#hub-content header h1, section#hub-content header h2 {
        color: #f71963
      }
    
      p {
        line-height: 1.5rem;
      }
    </style>
`}</HTMLBlock>

# Apresentando o Site Editor

## Introdução

O Site Editor é um painel que se encontra dentro da página de *admin* de uma loja que permite você alterar propriedades dos blocos referentes à frente de loja. A página de *admin* de sua loja pode ser acessada adicionando `/admin` na url. As mudanças que são feitas aqui são automaticamente refletidas na loja e todos os blocos que estão na frente de loja podem ser alterados através deste painel. Por exemplo, é possível alterar o conteúdo de um *rich text*, propriedades de uma prateleira, como as coleções sendo mostradas, entre outras coisas.

> O Site Editor pode ser acessado na seção *Configurações da Loja* do menu do *admin* e dentro da subseção *CMS*. Também pode ser acessado ao adicionar `/admin/cms/site-editor` na url.

![site-editor](https://user-images.githubusercontent.com/19495917/90414123-c181c180-e085-11ea-91f0-cd5a70a3b803.png)

## Adicionando um *banner* a um carrossel

É possível adicionar um novo *banner*, como a promoção de uma data em especial, ou uma oferta que precisa ser promovida na página inicial. Dentro do Site Editor, utilizando uma loja de demonstração, vamos selecionar o carrossel que está na página inicial, como visto abaixo:

![banner](https://user-images.githubusercontent.com/19495917/90414209-deb69000-e085-11ea-8d7b-39a1b411f9af.png)

Com o carrossel selecionado, há uma aba no lado direito da tela, que contém as propriedades do carrossel, como os *banners*. De forma a adicionar um novo, você precisa clicar em **Add**, ou **Adicionar**, escolher a imagem e fazer o *upload* (você pode encontrar uma imagem para utilizar de exemplo neste [link](https://drive.google.com/file/d/12J1CkfRrr_ogHp3GJlwfOQZH2EVheVIp/view?usp=sharing)). Feito isso, será possível ver uma prévia de como o carrossel ficará!

Você gostou? Se sim, apenas desça com o *scroll* até o fim da aba na direita e clique em **Apply**, ou **Salvar**. Uma vez que isso é feito, a mudança será feita imediatamente na loja.

![banner-changed](https://user-images.githubusercontent.com/19495917/90414222-e24a1700-e085-11ea-9927-2534b4741af5.png)

Vá até sua *home page* e veja seu novo *banner*!

<HTMLBlock>{`
<div id="finished-course">
  <div class="finish-elems"><b class="rebelPink">Parabéns</b>, você terminou o curso!</div>
  <img class="finish-elems" src="https://media.giphy.com/media/g9582DNuQppxC/giphy.gif"/>
  
  <div class="finish-elems">Ainda tem tempo sobrando?</div>
  <a class="finish-elems" href=course-content-workflow-challenge-lang-pt>Tenta nosso desafio para este curso!</a>

</div>
`}</HTMLBlock>

<HTMLBlock>{`
<div id="finish-course">
  <a id="finish-link" href="/page/learning-path-lang-pt">Finalizar Curso</a>
</div>
`}</HTMLBlock>

<hr/>
<div id="contribute-container">
  <p id="contribute-title"> 
    Ajude-nos a fazer este conteúdo melhor!
  </p>
  <p id="contribute-description">
    Os cursos do VTEX IO são de código aberto. Se você perceber algum problema, pode abrir um pull request!
  </p>

  <a id="contribute-button" href="https://github.com/vtex/vtex-courses/edit/master/courses/content-workflow/steps/04_site-editor/pt.md">
    Faça uma contribuição
  </a>

  <p id="contribute-issue">
    ou <a href="https://github.com/vtex/vtex-courses/issues/new/choose">abra uma issue</a>
  </p>

</div>