# Explicação do editor de microsite

O editor de microsites dá a você controle sobre o que os participantes do seu programa de Advocacia verão, permitindo personalizar layouts, páginas, conteúdo e elementos de marca 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](https://help.impact.com/brand/pt-br/sobre-o-que-voce-gostaria-de-aprender/advocate-program/manage-advocate-participant-experiences/microsite-experiences/set-up-a-microsite) e [personalizar a marca e o conteúdo](https://help.impact.com/brand/pt-br/sobre-o-que-voce-gostaria-de-aprender/advocate-program/manage-advocate-participant-experiences/microsite-experiences/customize-microsite-layouts-and-pages) dos seus layouts e páginas.

#### Abrir o editor de microsite

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. No *cartão Microsite* selecione **Editar conteúdo**.

#### Interface do editor

O editor de microsite consiste em uma barra de menu superior, a área de edição (canvas), 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%2Fgit-blob-6147ebf2ae47ca4606bdd34277af56999a671280%2Fc61b460557871deb1aecbb27a3518982408cf45b72156fca43f3e46dbc54f913.png?alt=media" 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 móvel para ver como seu microsite aparecerá em dispositivos com tamanhos de tela diferentes.
{% endtab %}

{% tab title="Canvas" %}
O canvas 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. Esses componentes estão listados à esquerda dentro da seção deslizante do microsite.

* Selecione **Camadas** para ver uma visão detalhada de todos os componentes da sua página ou layout
* Selecione **Modelos** para visualizar 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://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 do canvas. Ele visualiza a estrutura de herança dos seus layouts e páginas como uma árvore. Selecione layouts ou páginas individuais para visualizar o conteúdo e fazer ajustes. É também onde você pode adicionar mais páginas e layouts.

Para ainda mais estilos em nível de marca, selecione a opção Estilo do Microsite. Veja [Personalizar Widgets e Microsites com o Editor de Conteúdo](https://help.impact.com/brand/pt-br/sobre-o-que-voce-gostaria-de-aprender/advocate-program/manage-advocate-participant-experiences/customize-widgets-and-microsites-with-the-content-editor) para obter 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 do canvas. Use a *Adicionar* guia para inserir novos componentes no canvas e a *Editar* guia para fazer ajustes no que já está lá.
{% endtab %}
{% endtabs %}

#### Estrutura do microsite

Existem alguns blocos de construção que são importantes de entender ao personalizar seu microsite: layouts, páginas e componentes.

<details>

<summary>Layouts</summary>

Layouts atuam como “molduras” para o seu microsite. É onde você pode colocar componentes que deseja que apareçam de forma abrangente no microsite, como cabeçalhos e imagens de banner.

Layouts e páginas estão vinculados por meio de uma estrutura de herança. Tanto páginas quanto layouts podem herdar um layout. Páginas e layouts que têm 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 qual página um participante esteja e se ele está 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 de marca, que gerencia cores e fontes em todo o site.

Tanto o *Layout com usuário logado* quanto o *Layout com usuário deslogado* 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&#x26;token=54feac69-8c46-48be-9f14-32209f3c2539" alt="" width="312"><figcaption></figcaption></figure></div>

**Layout com usuário logado**

É onde você pode adicionar componentes que todos os seus participantes logados verão, independentemente de qual página eles estejam. Por exemplo, o menu de navegação da barra lateral do seu microsite é criado por meio de um componente no layout. Como ele é adicionado ao layout, qualquer página que herde esse layout incluirá essa barra lateral. *Layout com usuário logado* Layout com usuário deslogado

<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&#x26;token=4815b054-264d-46e5-bcc8-88ed3ea5a624" alt="" width="310"><figcaption></figcaption></figure></div>

**é onde você pode personalizar o que qualquer participante que não esteja autenticado atualmente verá.**

É onde você pode adicionar componentes que todos os seus participantes logados verão, independentemente de qual página eles estejam. Por exemplo, o menu de navegação da barra lateral do seu microsite é criado por meio de um componente no layout. Como ele é adicionado ao layout, qualquer página que herde esse layout incluirá essa barra lateral. *Layout com usuário deslogado* Páginas

<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&#x26;token=9bbd561b-237e-43f1-833b-d1076bf9e857" alt="" width="291"><figcaption></figcaption></figure></div>

</details>

<details>

<summary>Páginas são onde você constrói o conteúdo do seu site, como explicações do 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.</summary>

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:

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

Verificado

* <mark style="color:: Apenas participantes logados.;">**$success**</mark>Não verificado
* <mark style="color:: Participantes logados que não verificaram seu endereço de e-mail.;">**$danger**</mark>Público
* **: Visualizável por qualquer pessoa.**&#x53;e 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

Páginas do layout com usuário logado: *Layout com usuário logado* quanto o *Layout com usuário logado*.

**Atividade**

* Painel
* Editar Perfil
* Envio de Leads
* Impostos e Pagamentos
* Páginas do layout com usuário deslogado:

**Verificação de E-mail**

* Esqueci Minha Senha
* Login
* Logout
* Página Não Encontrada
* Registrar
* Redefinir Senha
* Verificar E-mail
* Componentes

</details>

<details>

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

Os componentes estão agrupados no menu de componentes. Consulte

Componentes de Widget e Microsite Explicados [para uma lista completa dos agrupamentos de componentes e dos componentes individuais.](https://help.impact.com/brand/pt-br/sobre-o-que-voce-gostaria-de-aprender/advocate-program/manage-advocate-participant-experiences) para uma 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>