> For the complete documentation index, see [llms.txt](https://help.impact.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://help.impact.com/brand/pt-br/what-would-you-like-to-learn-about/advocate-program/manage-advocate-participant-experiences/microsite-experiences/customize-microsite-layouts-and-pages.md).

# Personalizar layouts e páginas do microsite

Os microssites são um dos principais pontos de contato dos participantes para o seu programa de indicação. Este artigo de ajuda explica como usar o *editor de microsite* para personalizar seu microssite existente em um espaço que reflita sua marca e proporcione uma experiência envolvente aos seus usuários finais.

Se você ainda não [configurado](/brand/pt-br/what-would-you-like-to-learn-about/advocate-program/manage-advocate-participant-experiences/microsite-experiences/set-up-a-microsite.md) um microssite, primeiro será necessário fazer isso.

1. No menu de navegação à esquerda, selecione ![](/files/160944180402269557074f48f2ece20bc35e8b4d) **\[Engage] → Conteúdo**.
2. Na *Microsite* cartão, selecione **Editar conteúdo**.
   * Essa ação abre o editor do microssite e exibe o *Microsite* slideout.
3. Use o editor do microssite para atualizar sua identidade visual ou adicionar novo conteúdo, como layouts e páginas.

   <div data-with-frame="true"><figure><img src="/files/8651cd625c4eb0ba799ae1ac7fee0dde1662358d" alt="" width="563"><figcaption></figcaption></figure></div>

{% hint style="warning" %}
**Aviso:** O editor do microssite não salva suas alterações automaticamente. Salve com frequência para garantir que você não perca seu trabalho.
{% endhint %}

{% stepper %}
{% step %}
**Etapa 1: Altere a identidade visual do seu microssite (opcional)**

{% tabs %}
{% tab title="Cores e fonte" %}
Seu layout Base inclui um componente contêiner de marca que controla a fonte e as cores da marca do seu microssite. As cores da marca são aplicadas a várias partes do microssite, incluindo cores de destaque e cores dos botões.

1. em *Microsite* painel deslizante, selecione o **Layout base**.
2. À esquerda, em *Layout atual*, selecione **Camadas**.
3. Selecione o **Contêiner da marca**.
4. À direita, no *Contêiner da marca* menu, edite a **cor da marca** e **fonte da marca**.

   <div data-with-frame="true"><figure><img src="/files/c86893795ec35da9aeebfcef522b71c506a646dc" alt="" width="223"><figcaption></figcaption></figure></div>
5. Selecione **Salvar** no canto superior direito.
   {% endtab %}

{% tab title="Cabeçalho do site" %}
Você pode adicionar uma imagem de cabeçalho clicável que redireciona seus participantes para uma página que você definir. Configure isso no layout Base.

1. em *Microsite* painel deslizante, selecione o **Layout base**.
2. À esquerda, em *Layout atual* ou *Página atual*, selecione **Camadas**.
3. À direita, no *Conteúdo do cabeçalho da estrutura do microssite* menu, forneça uma imagem e ajuste a altura e a largura conforme desejar.
4. Defina o caminho de redirecionamento. É para lá que seus participantes serão redirecionados ao clicar na imagem.
5. Selecione **Salvar**.
   {% endtab %}
   {% endtabs %}
   {% endstep %}

{% step %}
**Etapa 2: Crie um layout ou uma página**

{% tabs %}
{% tab title="Adicionar uma página" %}

1. em *Microsite* no painel deslizante, selecione **Microsite**.
   * Essa ação abre a visualização de estrutura do seu microssite, que exibe todos os layouts e páginas.
2. Selecione o **Adicionar página** botão.
3. Opcionalmente, use a **Layout herdado** lista suspensa para selecionar o layout que você deseja que atue como layout pai.

   <div data-gb-custom-block data-tag="hint" data-style="info" class="hint hint-info"><p><strong>Exemplo:</strong> Se você quiser adicionar uma página de destino ao seu site que qualquer pessoa possa ver, independentemente de ser um participante conectado, você pode aninhar uma nova página dentro do layout Base.</p></div>
4. Insira o **Título da página** ou nome do layout.
5. Opcionalmente, ajuste a **chave da página** para sua página. Uma chave da página é gerada automaticamente com base no título da página, mas você pode alterá-la se desejar.
6. Insira o **URL** da sua página.
   * Adicione uma barra antes do nome que você quer usar e use hífens no caso de uma URL com várias palavras, por exemplo, `/company-info`.
7. Na **Usuários permitidos** na lista suspensa, selecione o grupo de usuários que pode acessar a página.
   * **Público:** Visível para qualquer pessoa.
   * **Verificado:** Apenas participantes conectados.
   * **Não verificado:** Participantes conectados que ainda não verificaram seus endereços de e-mail.
8. Na **Redirecionamento para usuários sem permissão** na lista suspensa, selecione a página para a qual você quer que os participantes sem permissão sejam enviados.
9. Selecione **Adicionar**.
10. No canto superior direito da página, selecione **Salvar**.
    {% endtab %}

{% tab title="Adicionar um layout" %}

1. em *Microsite* no painel deslizante, selecione **Microsite**.
   * Essa ação abre a visualização de estrutura do seu microssite, que exibe todos os layouts e páginas.
2. Selecione **Adicionar layout**.
3. Opcionalmente, use a **Layout herdado** lista suspensa para selecionar o layout que você deseja que atue como layout pai. Isso é útil principalmente para fins de organização do site.
4. Insira o **Nome do layout** para o seu layout.
5. Opcionalmente, ajuste a **Chave do layout** para o seu layout. Uma chave de layout é gerada automaticamente com base no título da página, mas você pode alterá-la se desejar.
6. Selecione **Adicionar**.
7. No canto superior direito da página, selecione **Salvar**.
   {% endtab %}
   {% endtabs %}
   {% endstep %}

{% step %}
**Etapa 3: Aplicar um modelo**

Você pode aplicar um modelo ao seu novo layout ou página se não quiser começar do zero.

1. Na *Microsite* No slideout, use a visualização de estrutura para selecionar o layout ou a página para a qual deseja usar o modelo.
2. À esquerda, abaixo de *Layout atual* ou *Página atual*, selecione **Modelos**.
3. Navegue pelos modelos disponíveis e, em seguida, selecione **Aplicar modelo** no cartão do modelo que você quer usar.

   <div data-with-frame="true"><figure><img src="/files/cbeaba4df5b7078ec5ecd1888cb0e070667a36a1" alt="" width="267"><figcaption></figcaption></figure></div>
4. No canto superior direito da página, selecione **Salvar**.
   {% endstep %}

{% step %}
**Etapa 4: Edite a barra lateral do microssite**

Isso é recomendado se você quiser que os participantes conectados consigam acessar uma página pelo menu de navegação da barra lateral do microssite. Estas etapas mostrarão como fazer isso, mas você pode adaptá-las se quiser adicionar um item de barra lateral a outro layout.

1. Na *Microsite* no painel deslizante, selecione **Layout de usuário conectado** a partir da visualização de estrutura.
   * Selecione ![](/files/b8a16cc0edf2c0ee0b601a8d1e4b19db5e3c6230) **\[Ícone de sair]** para fechar o slideout e acessar a tela de edição.
2. À direita, dentro do *Adicionar* menu, expanda a *Componentes de Microsite* categoria e, em seguida, selecione **Item da Barra Lateral**.

   <div data-with-frame="true"><figure><img src="/files/e8e9000e39e57e7a1804336128309e086398194a" alt=""><figcaption></figcaption></figure></div>
3. Na tela de edição, selecione uma posição válida para adicionar o *item da barra lateral* componente. As posições disponíveis são indicadas por uma **Adicionar ao conteúdo da barra lateral** mensagem.
   * Em telas menores, selecione o ![](/files/6d9e56cca914e41e71d8cd184c2ed69282bcea1e) **\[Menu hambúrguer]** para acessar o **menu Adicionar ao conteúdo da barra lateral, selecione um** botão.
4. À direita, dentro do *Editar* um **Ícone** e **Rótulo** para representar a página.
5. Na **Caminho de navegação** na lista suspensa, selecione o caminho de URL da página para a qual os usuários devem ser direcionados.
6. No canto superior direito da página, selecione **Salvar**.
   {% endstep %}

{% step %}
**Etapa 5: Pré-visualize e salve**

{% tabs %}
{% tab title="Pré-visualize seu microssite" %}
Você pode visualizar como o microssite aparecerá para seus participantes.

1. Na barra de menu superior, alterne entre ![](/files/5ec8d4218fb76e95608cab85e28bf62a95e35b2e) **\[Desktop]**, ![](/files/d6ea6015817afd8711ebfaa6331247e2bfc6747e) **\[Tablet]** ou ![](/files/8658c3a2cfe473c52dc4326f2a507f1cab9f7eee) **\[Mobile]** para ver como o microssite aparecerá em cada dispositivo.
2. Para entrar na pré-visualização, selecione ![](/files/7690a838f10ec69b0214882ce08128678ac02e66) **\[Visualizar]** na barra de menu superior.
3. Para voltar à interface de edição, selecione ![](/files/1c1c47b5cadd83c83d461b13f670329263a1cdc2) **\[Editar]** na barra de menu superior.
   {% endtab %}

{% tab title="Salve seu microssite" %}
O editor do microssite não salva suas alterações automaticamente. Salve com frequência para garantir que você não perca seu trabalho.

1. Depois de fazer todas as alterações relevantes, selecione **Salvar** no canto superior direito.
2. Depois de salvo, as alterações aparecerão instantaneamente na versão ao vivo do seu microssite.
   {% endtab %}
   {% endtabs %}
   {% endstep %}
   {% endstepper %}

Visite nosso artigo sobre [Componentes de Widget e Microssite explicados](/brand/pt-br/what-would-you-like-to-learn-about/advocate-program/manage-advocate-participant-experiences/widget-and-microsite-components-explained.md) para saber mais sobre os aspectos de componentes de Microssites e Widgets.


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter, and the optional `goal` query parameter:

```
GET https://help.impact.com/brand/pt-br/what-would-you-like-to-learn-about/advocate-program/manage-advocate-participant-experiences/microsite-experiences/customize-microsite-layouts-and-pages.md?ask=<question>&goal=<endgoal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.

The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.