> 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 sobre o editor de microsite

O editor de microsite permite que você controle o que os participantes do seu programa Advocate verão, permitindo personalizar 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 [a configuração de 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 [a personalização da identidade visual e do 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.

## Abra o editor de microsite

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**.

## Interface do editor

O editor de microsite é composto por uma barra de menu superior, a tela de edição, o painel lateral do microsite e o menu de componentes.

<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%2F6kHBNQwam7HkEsoPhH3u%2FCanvas%20(1).png?alt=media&#x26;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, visualizar o código HTML e pré-visualizar o microsite finalizado. Use os ícones de desktop, tablet ou celular para ver como seu microsite será exibido em dispositivos com diferentes tamanhos de tela.
{% 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 de relance como eles aparecerão para seus participantes. Arraste um componente para uma nova posição na tela para reordená-lo. Esses componentes estão listados à esquerda na seção lateral do microsite.

* Selecione **Camadas** para ver uma visão detalhada de todos os componentes na 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 dependente do contexto com base na página, layout, widget ou e-mail selecionado

  <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-3de3488148e89adc893ddbf2940d67dedea36a75%2F6564954dd5c2ac36c28fe92e6602750c13ebe01d18f84f6781593d1ec66448f5.jpg?alt=media" alt="" width="122"><figcaption></figcaption></figure></div>

{% endtab %}

{% tab title="Painel lateral do microsite" %}
O painel lateral 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 estilo ainda mais refinado em nível de branding, 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 *aba Editar* para fazer ajustes no que já está lá.
{% endtab %}
{% endtabs %}

## Estrutura do microsite

Há alguns blocos de construção importantes para entender ao personalizar 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 são vinculados por 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 da página em que um participante esteja e de estar autenticado no seu site ou não. É aqui que 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 de marca, que gerencia cores e fontes em todo o site.

Tanto o *Layout de usuário logado* quanto o *Layout de usuário deslogado* herdam o *Layout base*.

<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%2F3NHdmPGgjMudnsCGd1Yy%2Fimage.png?alt=media&#x26;token=54feac69-8c46-48be-9f14-32209f3c2539" alt="" width="312"><figcaption></figcaption></figure></div>

**Layout de usuário logado**

O *Layout de usuário logado* é onde você pode adicionar componentes que todos os seus participantes logados verão, independentemente da página em que estejam. 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://4048883401-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwMLlMoFBtKJa8ptd3zaw%2Fuploads%2FRFRn1J9JxD4iYpmKIAv0%2Flogged-in-layout.jpg?alt=media&#x26;token=4815b054-264d-46e5-bcc8-88ed3ea5a624" alt="" width="310"><figcaption></figcaption></figure></div>

**Layout de usuário deslogado**

O *Layout de usuário deslogado* é 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://4048883401-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwMLlMoFBtKJa8ptd3zaw%2Fuploads%2Fzmg9mkIeow7cpu0katqi%2Flogged-out-layout.jpg?alt=media&#x26;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 do programa, informações de 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://4048883401-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 restringir o acesso à página a uma das seguintes opções:

* <mark style="color:$success;">**Verificado**</mark>: Apenas participantes logados.
* <mark style="color:$danger;">**Não verificado**</mark>: Participantes logados que ainda não verificaram o 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 as *Layout de usuário logado* quanto o *Layout de usuário logado*.

**páginas do layout de usuário logado:**

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

**páginas do layout de usuário deslogado:**

* Verificação de e-mail
* Esqueci minha senha
* Entrar
* Sair
* Página não encontrada
* Cadastrar-se
* Redefinir senha
* Verificar e-mail

</details>

<details>

<summary>Componentes</summary>

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

Consulte [Explicação dos componentes de widgets e microsites](/brand/pt-br/what-would-you-like-to-learn-about/advocate-program/manage-advocate-participant-experiences/widget-and-microsite-components-explained.md) para ver a lista completa dos grupos de componentes e componentes individuais.

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