> 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/microsite-editor-explained.md).

# Explicação do editor de microsite

O editor de microsites permite que você controle o que os participantes do seu programa Advocate verão, permitindo que você personalize layouts, páginas, conteúdo e elementos de identidade visual, como fontes e cores.

Este artigo de ajuda explica a interface do editor e fornece informações gerais sobre como os microsites são estruturados, incluindo layouts, páginas e componentes. Saiba mais sobre [configurar 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) e [personalizar a identidade visual e o conteúdo](/brand/pt-br/what-would-you-like-to-learn-about/advocate-program/manage-advocate-participant-experiences/microsite-experiences/customize-microsite-layouts-and-pages.md) de seus layouts e páginas.

#### Abrir o editor de microsites

1. No menu de navegação à esquerda, selecione ![](https://526234278-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 *Microssite* cartão, selecione **Editar conteúdo**.

#### Interface do editor

O editor de microsites é composto por uma barra de menu superior, o canvas de edição, o painel deslizante do microsite e o menu de componentes.

<div data-with-frame="true"><figure><img src="https://526234278-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwMLlMoFBtKJa8ptd3zaw%2Fuploads%2F6kHBNQwam7HkEsoPhH3u%2FCanvas%20(1).png?alt=media&amp;token=96041e31-6e5e-449a-b018-f94859825093" alt=""><figcaption></figcaption></figure></div>

{% tabs %}
{% tab title="Barra de menu superior" %}
A barra de menu no topo da página é onde você pode desfazer ações, ver o código HTML e visualizar a versão final do microsite. Use os ícones de desktop, tablet ou celular para ver como seu microsite aparecerá em dispositivos com tamanhos de tela diferentes.
{% endtab %}

{% tab title="Tela" %}
A tela exibe o conteúdo atual do seu microsite. Você pode selecionar componentes individuais para editá-los ou adicionar novos e ver rapidamente como eles serão exibidos para os participantes. Esses componentes estão listados à esquerda, na seção do painel deslizante do microsite.

* Selecione **Camadas** para ver uma visualização detalhada de todos os componentes da sua página ou layout
* Selecione **Modelos** para ver os modelos disponíveis para as páginas do seu microsite.
* Você verá um terceiro menu contextual com base na página, no layout, no widget ou no e-mail selecionado

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

{% endtab %}

{% tab title="Painel deslizante do microsite" %}
O painel deslizante do microsite é um painel recolhível à esquerda da tela. Ele visualiza a estrutura de herança dos seus layouts e páginas em forma de árvore. Selecione layouts ou páginas individuais para ver o conteúdo e fazer ajustes. É também aqui que você pode adicionar mais páginas e layouts.

Para um nível ainda maior de estilo com base na identidade visual, selecione a opção Estilo do Microsite. Veja [Personalize Widgets e Microsites com o Editor de Conteúdo](/brand/pt-br/what-would-you-like-to-learn-about/advocate-program/manage-advocate-participant-experiences/customize-widgets-and-microsites-with-the-content-editor.md) para mais informações sobre as opções de estilo disponíveis para você.
{% endtab %}

{% tab title="Menu de componentes" %}
O menu de componentes é um painel à direita da tela. Use a *Adicionar* aba para inserir novos componentes na tela e a *Editar* aba para fazer ajustes no que já está lá.
{% endtab %}
{% endtabs %}

#### Estrutura do microsite

Há alguns blocos de construção importantes para entender à medida que você personaliza seu microsite: layouts, páginas e componentes.

<details>

<summary>Layouts</summary>

Os layouts funcionam como “molduras” para o seu microsite. É neles que você pode colocar componentes que deseja que apareçam de forma abrangente em todo o microsite, como cabeçalhos e imagens de banner.

Layouts e páginas estão ligados por meio de uma estrutura de herança. Tanto páginas quanto layouts podem herdar um layout. Páginas e layouts que tiverem um layout herdado terão seu conteúdo envolvido pelo conteúdo do layout herdado.

{% hint style="info" %}
**Exemplo:** Se o seu layout base contiver uma imagem de cabeçalho, quaisquer páginas que herdarem o layout base exibirão a mesma imagem de cabeçalho no mesmo local.
{% endhint %}

Se você usou a configuração automática para criar seu microsite, então seu site tem três layouts por padrão.

**Layout base**

O layout base é onde você pode colocar conteúdo que deseja que apareça independentemente de em qual página um participante esteja e se ele estiver autenticado no seu site. É onde você pode adicionar um cabeçalho ou rodapé que deseja que apareça em todo o site. O layout base também contém o contêiner da marca, que gerencia as cores e fontes em todo o site.

Tanto o *Layout para usuários autenticados* e o *Layout de usuário desconectado* herdam o *Layout base*.

<div data-with-frame="true"><figure><img src="https://526234278-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwMLlMoFBtKJa8ptd3zaw%2Fuploads%2F3NHdmPGgjMudnsCGd1Yy%2Fimage.png?alt=media&amp;token=54feac69-8c46-48be-9f14-32209f3c2539" alt="" width="312"><figcaption></figcaption></figure></div>

**Layout de autenticados**

O *Layout para usuários autenticados* é onde você pode adicionar componentes que todos os seus participantes autenticados verão, independentemente da página em que estiverem. Por exemplo, o menu de navegação lateral do seu microsite é criado por meio de um componente no layout. Como ele é adicionado ao layout, qualquer página que herdar esse layout incluirá essa barra lateral.

<div data-with-frame="true"><figure><img src="https://526234278-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwMLlMoFBtKJa8ptd3zaw%2Fuploads%2FRFRn1J9JxD4iYpmKIAv0%2Flogged-in-layout.jpg?alt=media&amp;token=4815b054-264d-46e5-bcc8-88ed3ea5a624" alt="" width="310"><figcaption></figcaption></figure></div>

**Layout de não autenticados**

O *Layout de usuário desconectado* é onde você pode personalizar o que qualquer participante que não esteja autenticado no momento verá.

<div data-with-frame="true"><figure><img src="https://526234278-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwMLlMoFBtKJa8ptd3zaw%2Fuploads%2Fzmg9mkIeow7cpu0katqi%2Flogged-out-layout.jpg?alt=media&amp;token=9bbd561b-237e-43f1-833b-d1076bf9e857" alt="" width="291"><figcaption></figcaption></figure></div>

</details>

<details>

<summary>Páginas</summary>

As páginas são onde você cria o conteúdo do seu site, como explicações sobre o programa, informações sobre indicação e compartilhamento e textos/imagens. Selecione uma página individual dentro de um dos seus layouts para abrir e editar seu conteúdo.

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

A visibilidade também pode ser definida no nível da página, permitindo que você restrinja o acesso à página a uma das seguintes opções:

* <mark style="color:$success;">**Verificado**</mark>: Apenas participantes autenticados.
* <mark style="color:$danger;">**Não verificado**</mark>: Participantes autenticados que ainda não verificaram seu endereço de e-mail.
* **Público**: Visível para qualquer pessoa.

Se você usou a configuração automática para criar seu microsite, então seu site vem equipado com várias páginas que herdam o *Layout para usuários autenticados* e o *Layout para usuários autenticados*.

**Páginas do layout de autenticados:**

* Atividade
* Painel
* Editar perfil
* Envio de leads
* Impostos e dinheiro

**Páginas do layout de não autenticados:**

* Verificação de e-mail
* Esqueceu a senha
* Login
* Sair
* Página não encontrada
* Cadastro
* Redefinir senha
* Verificar e-mail

</details>

<details>

<summary>Componentes</summary>

Componentes são elementos individuais que você pode adicionar às suas páginas e layouts para personalizar ainda mais a experiência do microsite dos seus participantes, como imagens principais ou um feed de indicações.

Os componentes são agrupados no menu de componentes. Consulte [Explicação sobre os componentes de widgets e microsites](/brand/pt-br/what-would-you-like-to-learn-about/advocate-program/manage-advocate-participant-experiences.md) para obter a lista completa dos agrupamentos de componentes e dos componentes individuais.

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

</details>


---

# 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/microsite-editor-explained.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.