> 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 microsites são um dos principais pontos de contato dos participantes do seu programa de indicação. Este artigo de ajuda explica como usar o *editor de microsite* para personalizar seu microsite existente em um espaço que reflita sua marca e ofereça uma experiência envolvente para seus usuários finais.

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

1. No menu de navegação à esquerda, selecione ![](https://4048883401-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwMLlMoFBtKJa8ptd3zaw%2Fuploads%2Fgit-blob-230534471fef5f40808e921e41ee44e4a06ded03%2Fe6cb9548999afdc1ed3ce4942e4cb5b45b5cecbd323267aac2a7cd1915fccc09.svg?alt=media) **\[Engage] → Conteúdo**.
2. Na *Microsite* cartão, selecione **Editar conteúdo**.
   * Esta ação abre o editor do microsite e exibe o *Microsite* painel lateral.
3. Use o editor do microsite para atualizar sua identidade visual ou adicionar novo conteúdo, como layouts e páginas.

<div data-with-frame="true"><figure><img src="https://4048883401-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwMLlMoFBtKJa8ptd3zaw%2Fuploads%2Fu8WZu3QIIhdEbGgIEptB%2FScreenshot%202026-05-18%20at%2010.44.26.png?alt=media&#x26;token=45c65550-6e83-4e79-8372-ec2793c4c913" alt="" width="563"><figcaption></figcaption></figure></div>

{% hint style="warning" %}
**Aviso:** O editor do microsite 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 microsite (opcional)**

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

1. No *Microsite* painel lateral, 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="https://4048883401-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwMLlMoFBtKJa8ptd3zaw%2Fuploads%2Fgit-blob-f58dfdd168765b914fd22b232cabd8030450c27f%2F6f54642b7524983137442de4c4ecc2a20984c511b5e26423a5edadc0060f9a45.png?alt=media" 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 os participantes para uma página que você definir. Configure isso no layout Base.

1. No *Microsite* painel lateral, selecione o **Layout Base**.
2. À esquerda, em *Layout atual* ou *Página atual*, selecione **Camadas**.
3. À direita, no *Conteúdo do cabeçalho da moldura do microsite* menu, forneça uma imagem e ajuste sua altura e largura conforme desejado.
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 página**

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

1. No *Microsite* painel lateral, selecione **Microsite**.
   * Esta ação abre a visualização da estrutura do seu microsite, que exibe todos os layouts e páginas.
2. Selecione o **Adicionar página** botão.
3. Opcionalmente, use a lista suspensa **Layout herdado** para selecionar o layout que você quer que atue como layout pai.

{% hint style="info" %}
**Exemplo:** 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.
{% endhint %}

4. Insira o **título da página** ou nome do layout.
5. Opcionalmente, ajuste a **chave da página** da sua página. Uma chave de 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 deseja usar e use hífens em URLs com várias palavras, por exemplo, `/company-info`.
7. Na **Usuários permitidos** lista suspensa, selecione o grupo de usuários que pode acessar a página.
   * **Público:** Visível para qualquer pessoa.
   * **Verificado:** Somente participantes conectados.
   * **Não verificado:** Participantes conectados que não verificaram seus endereços de e-mail.
8. Na **Redirecionamento para usuários não permitidos** lista suspensa, selecione a página para a qual deseja enviar os participantes não permitidos.
9. Selecione **Adicionar**.
10. No canto superior direito da página, selecione **Salvar**.
    {% endtab %}

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

1. No *Microsite* painel lateral, selecione **Microsite**.
   * Esta ação abre a visualização da estrutura do seu microsite, que exibe todos os layouts e páginas.
2. Selecione **Adicionar layout**.
3. Opcionalmente, use a lista suspensa **Layout herdado** lista suspensa para selecionar o layout que você quer que atue como layout pai. Isso é especialmente útil para fins de organização do site.
4. Insira o **Nome do layout** do seu layout.
5. Opcionalmente, ajuste a **Chave do layout** do 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* painel lateral, use a visualização da estrutura para selecionar o layout ou a página para a qual deseja usar o modelo.
2. À esquerda, abaixo *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 deseja usar.

<div data-with-frame="true"><figure><img src="https://4048883401-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwMLlMoFBtKJa8ptd3zaw%2Fuploads%2FmANLKNh0KRWXP8G7Abj6%2FScreenshot%202026-05-18%20at%2010.40.44.png?alt=media&#x26;token=6fec0d57-89af-4cbc-8e23-2fe243a13882" 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 microsite**

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

1. Na *Microsite* painel lateral, selecione **Layout de usuário conectado** na visualização da estrutura.
   * Selecione ![](https://4048883401-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwMLlMoFBtKJa8ptd3zaw%2Fuploads%2Fgit-blob-90673bb8db696bdefe7b207cfc07c46caf1d43f1%2Fce7a994978f06dd84cc6a31b890071502b4831990afd8fdd73f73c6d2e203660.png?alt=media) **\[Ícone de saída]** para fechar o painel lateral e acessar a tela de edição.
2. À direita, dentro do *Adicionar* menu, expanda a categoria *Componentes do Microsite* e então selecione **Item da barra lateral**.

<div data-with-frame="true"><figure><img src="https://4048883401-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwMLlMoFBtKJa8ptd3zaw%2Fuploads%2Fgit-blob-87da46ebfa6e69752ed1c574a17d0036746d311d%2F125bfdb46d75238f2772523663950b1311a17055d85a39bca25033bc56a45d5e.jpg?alt=media" alt=""><figcaption></figcaption></figure></div>

3. Na tela de edição, arraste o componente *item da barra lateral* para uma posição válida. As posições disponíveis são indicadas por uma mensagem **Adicionar ao conteúdo da barra lateral** .
   * Em telas menores, selecione o ![](https://4048883401-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwMLlMoFBtKJa8ptd3zaw%2Fuploads%2Fgit-blob-71ccc0ed9e3023e12691656e4a063341060fe3bd%2F69bc484dc36b22c013f4fde7e0360a7ae9b8d39164beff2b6fabc9ea6d0efb1d.svg?alt=media) **\[Menu hambúrguer]** para acessar o **Adicionar ao conteúdo da barra lateral** botão.
4. À direita, dentro do *Editar* menu, selecione um **Ícone** e **Rótulo** para representar a página.
5. Na **Caminho de navegação** 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: Visualize e salve**

{% tabs %}
{% tab title="Visualize seu microsite" %}
Você pode visualizar como o microsite aparecerá para seus participantes.

1. Na barra de menu superior, alterne entre ![](https://4048883401-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwMLlMoFBtKJa8ptd3zaw%2Fuploads%2Fgit-blob-9a50309ee9d0e10094bf68c9b9ae1999dbec4f48%2F7cf9c6c1f6544aa358de22e77201e216647a70ab22c854c02334f51f45892424.svg?alt=media) **\[Desktop]**, ![](https://4048883401-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwMLlMoFBtKJa8ptd3zaw%2Fuploads%2Fgit-blob-02123f07d293035e9e37f19e086187c0e90e7dd0%2F1b889798dd233ebb71c2adcc44be0e2887772538ce7c6357d7ef1ea246c0e564.svg?alt=media) **\[Tablet]** ou ![](https://4048883401-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwMLlMoFBtKJa8ptd3zaw%2Fuploads%2Fgit-blob-04b329f4eb244c77b35e32d9988afc78f428a88f%2Fe05ee6fbf869c562df0a7fbc8a38b177082975c06ddf6adcda9d4c00bd0e43ac.svg?alt=media) **\[Celular]** para ver como o microsite aparecerá em cada dispositivo.
2. Para entrar na visualização, selecione ![](https://4048883401-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwMLlMoFBtKJa8ptd3zaw%2Fuploads%2Fgit-blob-190c6a03e6a68d67509d00452b10fd803bee5c87%2F57c7cba09bd1b97dd75b7c245e517c8d1ca0469d7c57bdc13ee6e427b75a860a.svg?alt=media) **\[Visualizar]** na barra de menu superior.
3. Para retornar à interface de edição, selecione ![](https://4048883401-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwMLlMoFBtKJa8ptd3zaw%2Fuploads%2Fgit-blob-60e9ace573178da411cb3be9c6f3b0f4b7e5b524%2F4094fadf599e544cfc618c18eb22087defdb9be38a580cd0041a242a88294e1e.svg?alt=media) **\[Editar]** na barra de menu superior.
   {% endtab %}

{% tab title="Salve seu microsite" %}
O editor do microsite 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 microsite.
   {% endtab %}
   {% endtabs %}
   {% endstep %}
   {% endstepper %}

Visite nosso artigo sobre [Explicação dos Componentes de Widget e Microsite](/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 Microsites 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 by asking a question.

Perform an HTTP GET request on the following URL with the `ask` and `goal` query parameters:

```
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=<user_goal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is what the user is ultimately trying to achieve, the reason they need the answer. Sharing it helps GitBook give you a better, more relevant answer. A goal is most helpful when it describes the outcome the user wants rather than restating the question. For example, with `ask=how do I create an API token`, a goal like `automate deployments from our CI pipeline` lets GitBook tailor the answer to that use case.

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.
