# Personalizar layouts e páginas do microsite

Microsites são um dos principais pontos de contato dos participantes para o 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 proporcione uma experiência envolvente para seus usuários finais.

Se você não [configurou](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) um microsite ainda, então você precisará fazê-lo primeiro.

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 *Microsite* selecione **Editar conteúdo**.
   * Esta ação abre o editor de microsite e exibe o *Microsite* painel deslizante.
3. Use o editor de microsite para atualizar seu branding ou adicionar novo conteúdo, como layouts e 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%2Fgit-blob-b86511b064633eb26a6b404d647528e31dcb5a12%2Fb13e0c9a76f7d38a693d8072ff7115433720c38466813323241c794fda4856ca.png?alt=media" alt=""><figcaption></figcaption></figure></div>

{% hint style="warning" %}
**Aviso:** O editor de microsite não salva automaticamente suas alterações. Salve com frequência para garantir que você não perca seu trabalho.
{% endhint %}

{% stepper %}
{% step %}
**Passo 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 sua marca no microsite. As cores da marca são aplicadas a várias partes do microsite, incluindo cores de destaque e cores de botão.

1. Na *Microsite* no painel deslizante, selecione o **Layout Base**.
2. À esquerda, em *Layout Atual*, selecione **Camadas**.
3. Selecione o **Contêiner de Marca**.
4. À direita, no *Contêiner de Marca* menu, edite a **cor da marca** e **fonte da marca**.

   <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-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 redirecione seus participantes para uma página que você designar. Configure isso no layout Base.

1. Na *Microsite* no painel deslizante, selecione o **Layout Base**.
2. À esquerda, em *Layout Atual* ou *Página Atual*, selecione **Camadas**.
3. À direita, no *Conteúdo do Cabeçalho da Estrutura do Microsite* menu, forneça uma imagem e ajuste sua altura e largura conforme desejado.
4. Defina o caminho de redirecionamento. É para onde seus participantes serão redirecionados ao clicar na imagem.
5. Selecione **Salvar**.
   {% endtab %}
   {% endtabs %}
   {% endstep %}

{% step %}
**Passo 2: Crie um layout ou página**

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

1. Na *Microsite* no painel deslizante, selecione **Microsite**.
   * Esta ação abre a visualização de estrutura do seu microsite, que exibe todos os layouts e páginas.
2. Selecione o **Adicionar Página** botão.
3. Opcionalmente, use o **Layout Herdado** menu suspenso para selecionar o layout que você deseja que atue como layout pai.

   <div data-gb-custom-block data-tag="hint" data-style="info" class="hint hint-info"><p><strong>Exemplo:</strong> Se você quiser adicionar uma página de destino ao seu site que qualquer pessoa possa ver independentemente de estar logada como participante, você pode aninhar uma nova página dentro do layout base.</p></div>
4. Insira o **Título da página** ou nome do layout.
5. Opcionalmente, ajuste o **Chave da página** para 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** para sua página.
   * Adicione uma barra à frente do nome que você deseja usar e use hífens no caso de uma URL com várias palavras, por exemplo, `/company-info`.
7. Do **Usuários permitidos** no menu suspenso, selecione o grupo de usuários que pode acessar a página.
   * **Público:** Visualizável por qualquer pessoa.
   * **Verificados:** Apenas participantes logados.
   * **Não verificados:** Participantes logados que não verificaram seus endereços de e-mail.
8. Do **Redirecionar para usuários não permitidos** no menu suspenso, selecione a página para a qual você deseja que participantes não autorizados sejam enviados.
9. Selecione **Adicionar**.
10. No canto superior direito da página, selecione **Salvar**.
    {% endtab %}

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

1. Na *Microsite* no painel deslizante, selecione **Microsite**.
   * Esta ação abre a visualização de estrutura do seu microsite, que exibe todos os layouts e páginas.
2. Selecione **Adicionar Layout**.
3. Opcionalmente, use o **Layout Herdado** menu suspenso para selecionar o layout que você deseja que atue como layout pai. Isso é principalmente útil para fins de organização do site.
4. Insira o **Nome do layout** para seu layout.
5. Opcionalmente, ajuste o **Chave do layout** para 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 %}
**Passo 3: Aplique um modelo**

Você pode aplicar um modelo ao seu novo layout ou página se não quiser começar do zero.

1. Do *Microsite* no painel deslizante, use a visualização de estrutura para selecionar o layout ou página para o qual você deseja usar o modelo.
2. À esquerda, abaixo de *Layout Atual* ou *Página Atual*, selecione **Modelos**.
3. Procure os modelos disponíveis, então selecione **Aplicar modelo** no cartão do modelo que você deseja usar.

   <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-a0bfe48f82a572dff145227f203272771f6b739a%2F259af004a6a8f554bcfff90975d56b1ec1ec45ce65356cd232fdd4a091cf8c48.jpg?alt=media" alt="" width="310"><figcaption></figcaption></figure></div>
4. No canto superior direito da página, selecione **Salvar**.
   {% endstep %}

{% step %}
**Passo 4: Edite a barra lateral do microsite**

Isto é recomendado se você quer que participantes logados possam acessar uma página pelo menu de navegação da barra lateral do microsite. Estes passos mostrarão como fazer isso, mas você pode adaptá-los se quiser adicionar um item de barra lateral a outro layout.

1. Do *Microsite* no painel deslizante, selecione **Layout Logado** a partir da visualização de estrutura.
   * Selecione ![](https://526234278-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwMLlMoFBtKJa8ptd3zaw%2Fuploads%2Fgit-blob-90673bb8db696bdefe7b207cfc07c46caf1d43f1%2Fce7a994978f06dd84cc6a31b890071502b4831990afd8fdd73f73c6d2e203660.png?alt=media) **\[Ícone de sair]** para fechar o painel deslizante e acessar a tela de edição.
2. À direita, dentro do *Adicionar* menu, expanda a *Componentes do Microsite* categoria, então selecione **Item da 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%2Fgit-blob-87da46ebfa6e69752ed1c574a17d0036746d311d%2F125bfdb46d75238f2772523663950b1311a17055d85a39bca25033bc56a45d5e.jpg?alt=media" alt=""><figcaption></figcaption></figure></div>
3. Dentro da tela de edição, selecione uma posição válida para adicionar o *item da barra lateral* componente. Posições disponíveis são designadas por um **Adicionar ao Conteúdo da Barra Lateral** mensagem.
   * Em telas menores, selecione o ![](https://526234278-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwMLlMoFBtKJa8ptd3zaw%2Fuploads%2Fgit-blob-71ccc0ed9e3023e12691656e4a063341060fe3bd%2F69bc484dc36b22c013f4fde7e0360a7ae9b8d39164beff2b6fabc9ea6d0efb1d.svg?alt=media) **\[Menu de hambúrguer]** para acessar o **Adicionar 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. Do **Caminho de Navegação** no menu suspenso, 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 %}
**Passo 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://526234278-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwMLlMoFBtKJa8ptd3zaw%2Fuploads%2Fgit-blob-9a50309ee9d0e10094bf68c9b9ae1999dbec4f48%2F7cf9c6c1f6544aa358de22e77201e216647a70ab22c854c02334f51f45892424.svg?alt=media) **\[Desktop]**, ![](https://526234278-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://526234278-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwMLlMoFBtKJa8ptd3zaw%2Fuploads%2Fgit-blob-04b329f4eb244c77b35e32d9988afc78f428a88f%2Fe05ee6fbf869c562df0a7fbc8a38b177082975c06ddf6adcda9d4c00bd0e43ac.svg?alt=media) **\[Mobile]** para ver como o microsite aparecerá em cada dispositivo.
2. Para entrar na visualização, selecione ![](https://526234278-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://526234278-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 de microsite não salva automaticamente suas alterações. 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. Uma vez salvo, as mudanças aparecerão instantaneamente na versão ao vivo do seu microsite.
   {% endtab %}
   {% endtabs %}
   {% endstep %}
   {% endstepper %}

Visite nosso artigo sobre [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/widget-and-microsite-components-explained) para saber mais sobre os aspectos de componentes de Microsites e Widgets.