# Editar banners e cores

Neste tutorial, você aprenderá como **adicionar novos banners** para o seu site na **LOJINHA OCTAVUS** e como configurar esses banners tanto para a **versão desktop** quanto para a **versão móvel**, garantindo uma aparência otimizada em todos os dispositivos.

***

### Passo 1: Acesse o Painel de Administração

1. **Entre no painel de administração da sua LOJINHA OCTAVUS** utilizando seu login e senha.
   * Acesse o link de login fornecido pela plataforma (ex: `www.lojinhaoctavus.com.br`).
   * Insira suas credenciais e clique em **Entrar**.

***

### Passo 2: Acesse a Seção de Banners

2. **Na barra superior do painel**, localize e clique na opção **“Banners”**.
   * Essa opção está localizada na parte superior do painel de administração, no menu de personalização ou design.

***

### Passo 3: Adicionar um Novo Banner

3. **Clique em “Adicionar Novo Banner”**.
   * Após clicar em "Banners", você será redirecionado para a página onde poderá ver os banners existentes e adicionar novos.
   * Clique no botão **"Adicionar Novo Banner"** para começar a criar um novo banner para sua loja.

***

### Passo 4: Preencha as Informações do Banner

4. **Preencha os campos para criar o banner**:
   * **Imagem do Banner**: Clique em "Selecionar Arquivo" ou "Carregar Imagem" para adicionar a imagem que será exibida no banner.
   * **Texto do Banner**: Insira o texto que aparecerá no banner, como promoções, novidades ou qualquer outra mensagem que queira destacar para seus clientes.
   * **Link do Banner**: Se o banner for clicável, adicione um link para redirecionar os clientes a uma página específica (ex: "Categoria de Produtos", "Promoção Especial").
   * **Botões (Opcional)**: Se o banner tiver botões (ex: "Comprar Agora", "Saiba Mais"), você poderá adicionar os textos e definir os links para esses botões.

***

### Passo 5: Defina as Configurações para a Versão Desktop

5. **Configure o Banner para a Versão Desktop**:
   * Após adicionar a imagem, texto e links para o banner, você verá a opção de configurar a visualização para **desktop**.
   * Verifique se a imagem e o texto estão ajustados corretamente para telas maiores (computador).
   * Faça ajustes como **tamanho da imagem**, **posicionamento do texto** ou qualquer outro detalhe visual necessário para que o banner fique bem posicionado na versão desktop.

***

### Passo 6: Defina as Configurações para a Versão Móvel

6. **Configure o Banner para a Versão Móvel**:
   * Na mesma tela de criação do banner, você verá uma opção para configurar a versão **móvel**.
   * A imagem e o layout podem precisar de ajustes para que o banner se ajuste corretamente a telas menores de dispositivos móveis, como smartphones e tablets.
   * Caso a imagem precise ser cortada ou ajustada, ou o texto precise ser redimensionado, faça as alterações necessárias para que o banner seja visualmente agradável e funcional em dispositivos móveis.

***

### Passo 7: Visualize o Banner

7. **Visualize as versões de desktop e móvel**:
   * Muitas plataformas oferecem uma pré-visualização das versões do banner para computador e celular.
   * Utilize essa visualização para garantir que tanto o banner para **desktop** quanto o banner para **móvel** estejam aparecendo corretamente e atendam às suas expectativas.

***

### Passo 8: Salve o Banner

8. **Clique em “Salvar”** para finalizar a criação do banner.
   * Depois de revisar as configurações e as versões desktop e móvel, clique em **"Salvar"** para aplicar as alterações e adicionar o banner à sua loja.

***

### Passo 9: Verifique no Seu Site

9. **Verifique no seu site**:

   * Após salvar o banner, acesse o seu site tanto na versão desktop quanto na versão móvel para garantir que o banner esteja aparecendo corretamente em ambas as plataformas.
   * Se necessário, retorne à página de edição e faça ajustes para melhorar a apresentação.

<figure><img src="https://2547978245-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F4X2XmynPsOdUlCnp2DZ1%2Fuploads%2FyzBvzo5uhHBbfmoCt6eJ%2Fimage.png?alt=media&#x26;token=5f2a9877-891a-4f17-a0c5-b430b781cd0f" alt=""><figcaption></figcaption></figure>

***

### Dicas Importantes:

* **Tamanho das Imagens**: Certifique-se de que as imagens dos banners tenham um tamanho adequado tanto para desktop quanto para dispositivos móveis, garantindo que o site carregue rapidamente sem perder qualidade.
* **Texto Claro e Visível**: Em dispositivos móveis, o texto pode ser mais difícil de ler se for muito pequeno. Ajuste o tamanho da fonte ou o posicionamento para garantir que o conteúdo seja legível em todas as telas.
* **Atenção à Responsividade**: Ao configurar o banner para desktop e para dispositivos móveis, sempre teste a responsividade para garantir que a imagem e o texto se ajustem bem em diferentes tamanhos de tela.
* **Consistência Visual**: Para criar uma experiência visual consistente para os clientes, procure usar o mesmo estilo de imagem e mensagem tanto na versão desktop quanto na versão móvel.

***

Com esses passos, você poderá facilmente **adicionar e editar banners** na sua loja LOJINHA OCTAVUS, garantindo uma aparência atraente e otimizada para todas as plataformas. Se precisar de mais assistência ou tiver dúvidas, entre em contato com nosso suporte técnico.
