# Personalizar widgets e microsites com o editor de conteúdo O editor de conteúdo permite que você crie widgets e microsites que combinam perfeitamente com a identidade da sua marca, garantindo uma experiência consistente e confiável para seus clientes. Um ponto de contato bem alinhado à marca é crucial para impulsionar alto engajamento e adoção do programa. #### Controles de branding centralizados Você pode encontrar e atualizar os elementos principais de design da sua marca com facilidade usando a opção de estilo do widget ou microsite. Todas as configurações de branding estão localizadas em uma seção dedicada ao branding. Widgets ou microsites aparentam diferentes dependendo do contexto do usuário, como se ele está conectado, enfrentando um erro ou visualizando em um dispositivo móvel. Nossas pré-visualizações no editor permitem alternar facilmente entre todos os estados possíveis do seu widget ou microsite. {% hint style="info" %} **Observação**: A pré-visualização é mais aplicável a widgets (por exemplo, widgets de acesso instantâneo) e componentes (por exemplo, troca de dinheiro, recompensa). Para visualizar microsites, você precisaria navegar pelas diferentes páginas dos microsites para ver os estados. {% endhint %} Isso elimina a necessidade de concluir ações manualmente para ver como um componente ficará. Agora você pode editar com confiança o texto e o design para cada etapa da jornada do usuário, incluindo: * Visualizações conectado vs. desconectado * Mensagens de erro e sucesso * Diferentes etapas em um fluxo multipartes (como verificação de pagamento em dinheiro) Para personalizar seu estilo de branding: 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**. * Para widgets, selecione **Editar Widgets** e para microsites, selecione **Editar Conteúdo**. 2. No menu à esquerda, selecione se deseja editar o Microsite ou o Widget. 3. Selecione o modelo de página que deseja editar, em seguida selecione **Estilo do widget**/**Estilo do microsite**. 4. Selecione a cor da sua marca para alterar a cor principal presente no seu widget ou microsite. 5. Em seguida, selecione o estilo de fonte que você gostaria de usar. 6. **\[Opcional]** Continue pelas opções de estilo restantes para personalizar completamente a identidade da sua marca dentro do widget ou microsite.
Referência dos elementos do editor de estilo | Elemento de estilo | Descrição | | ---------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | | Cor principal da marca |

Essa cor será usada em diferentes elementos do seu widget ou microsite, por isso é importante concluir esta etapa. Selecione a cor principal da sua marca.

Essa cor também é usada nas seções Botão primário e Botão secundário mais abaixo nas opções de edição.

| | Fonte |

Selecione o estilo de fonte que você deseja que apareça no seu widget ou microsite.

| | Cor |

Selecione as várias cores e acentos que você gostaria que aparecessem no seu widget ou microsite:

• Fundo

Selecione a cor que você deseja que seja o fundo do seu widget ou microsite.

• Texto

Você pode alterar a cor da fonte tanto do texto principal quanto do texto secundário dentro do widget ou microsite.

• Cor de destaque

Altere as cores dos seus acentos. Isso inclui elementos como abas ou ícones dentro do widget ou microsite.

• Cores adicionais

Você pode ajustar ainda mais as cores e acentos para cada elemento com base no tipo de widget ou microsite.

| | Botão primário |

Selecione o esquema de cores que você deseja para seu botão primário ou principal. Você também pode ajustar a quantidade de pixels do raio da borda ao redor do botão.

Expanda o Estado Hover da seção para selecionar ou alterar ainda mais a cor para a qual seu botão muda quando um usuário passa o mouse sobre ele ou interage com o botão.

| | Botão secundário |

Selecione o esquema de cores que você deseja para seu botão secundário. Você também pode ajustar a quantidade de pixels do raio da borda ao redor do botão.

Expanda o Estado Hover da seção para selecionar ou alterar ainda mais a cor para a qual seu botão muda quando um usuário passa o mouse sobre ele ou interage com o botão.

| | Borda |

Altere a cor e o contorno da borda dos seus componentes, como tabelas ou cartões, dentro do seu widget ou microsite.

• Cor

Selecione a cor da sua borda.

• Espessura

Insira uma unidade em pixels para determinar a espessura da sua borda.

• Raio da borda

Insira uma unidade em pixels para determinar o raio da sua borda.

| | Campos de formulário |

Selecione a cor que você deseja para os vários campos de formulário dentro do seu widget ou microsite. Isso inclui quaisquer campos de entrada que o usuário preencha. Você também pode inserir uma unidade em pixels para alterar o tamanho do raio da borda.

Expanda o Opções Avançadas seção para personalizar ainda mais as cores do estado selecionado ou do estado hover dos seus campos de formulário.

| | Tamanho do widget |

Altere o tamanho dos seus widgets dentro do modelo. Você pode ajustar as dimensões tanto para widgets incorporados quanto para widgets pop-up. Selecione um tamanho mínimo e máximo e, nas opções suspensas, selecione a unidade de medida. Escolha definir as medidas em pixels ou em percentual.

|