# Editor de Microsite Explicado

O editor de microsite dá a você controle sobre o que os participantes do seu programa Advocate 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 tela 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 na parte superior 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 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, 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 na 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 ver o conteúdo e fazer ajustes. É também onde você pode adicionar mais páginas e layouts.

Para ainda mais estilização 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 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 *Aba Adicionar* para inserir novos componentes no canvas e a *Aba Editar* para fazer ajustes no que já está lá.
{% endtab %}
{% endtabs %}

#### Estrutura do microsite

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

<details>

<summary>Layouts</summary>

Layouts atuam como “quadros” para o seu microsite. É onde você pode colocar componentes que deseja que apareçam de forma pervasiva pelo 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 contém 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 o 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 Logado* quanto o *Layout Desconectado* herdar 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 de usuário autenticado**

O *Layout Logado* é onde você pode adicionar componentes que todos os seus participantes autenticados verão, independentemente da página em que estejam. Por exemplo, o menu de navegação da barra lateral do seu microsite é criado através 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&#x26;token=4815b054-264d-46e5-bcc8-88ed3ea5a624" alt="" width="310"><figcaption></figcaption></figure></div>

**Layout de usuário não autenticado**

O *Layout Desconectado* é onde você pode personalizar o que qualquer participante que não esteja atualmente autenticado 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&#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ê constrói 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://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 restringir o acesso à página a uma das seguintes opções:

* <mark style="color:$success;">**Verificado**</mark>: Somente participantes autenticados.
* <mark style="color:$danger;">**Não verificado**</mark>: Participantes autenticados que não verificaram seu endereço de e-mail.
* **Público**: Visualizável por 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 Logado* quanto o *Layout Logado*.

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

* Atividade
* Painel
* Editar Perfil
* Envio de Lead
* Impostos e Dinheiro

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

* Verificação de E-mail
* Esqueceu a Senha
* Entrar
* Sair
* Página Não Encontrada
* Registrar
* 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 participante no microsite, como imagens principais ou um feed de indicações.

Os componentes estão agrupados no menu de componentes. Consulte [Componentes de Widget e Microsite Explicados](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>
