> ## Documentation Index
> Fetch the complete documentation index at: https://docs.kiwify.com.br/llms.txt
> Use this file to discover all available pages before exploring further.

# Personalização da Área de Membros

> Um guia completo para criar experiências personalizadas de membros com Temas Kiwify

## Visão Geral

O sistema de temas da Área de Membros permite que você:

* Personalize sua área de membros com código (usando templates Liquid)
* Crie experiências de aprendizado personalizadas com layouts customizados
* Mantenha controle total sobre a experiência dos seus estudantes
* Integre ferramentas e recursos externos de forma contínua
* Implemente funcionalidades avançadas usando objetos de dados globais

## Como Funciona

A personalização da Área de Membros funciona através de duas interfaces complementares:

<Tabs>
  <Tab title="Editor de Tema">
    <Frame>
      <img src="https://mintcdn.com/kiwify-81/eqGeDYA02A7icNcw/images/members-area/theme-editor.webp?fit=max&auto=format&n=eqGeDYA02A7icNcw&q=85&s=57d1ce32765a9e3912a963658dd409b4" alt="Theme Editor" width="3024" height="1716" data-path="images/members-area/theme-editor.webp" />
    </Frame>

    O Editor de Tema fornece uma interface visual para personalizar seu tema sem escrever código. Mudanças feitas no Editor de Tema são refletidas no código, e vice-versa.
  </Tab>

  <Tab title="Editor de Código">
    <Frame>
      <img src="https://mintcdn.com/kiwify-81/eqGeDYA02A7icNcw/images/members-area/code-editor.webp?fit=max&auto=format&n=eqGeDYA02A7icNcw&q=85&s=38bcb38d6215a6d207fac6f08af71050" alt="Code Editor" width="3024" height="1716" data-path="images/members-area/code-editor.webp" />
    </Frame>

    O Editor de Código é um ambiente de código completo onde você pode modificar diretamente os arquivos do tema.

    Acesse o editor de código clicando no botão "Editor de Código" na barra superior do Editor de Tema.

    <Frame>
      <img src="https://mintcdn.com/kiwify-81/eqGeDYA02A7icNcw/images/members-area/main-code-button.webp?fit=max&auto=format&n=eqGeDYA02A7icNcw&q=85&s=28e87f54fa8320ca6abb76c35ae89e18" alt="Code Editor" width="1910" height="1092" data-path="images/members-area/main-code-button.webp" />
    </Frame>

    Você também pode acessar o Editor de Código clicando no botão "Editor de Código" na barra lateral ao editar uma seção. Isso fará com que o Editor de Código abra pronto para você editar o template da seção correspondente.

    <Frame>
      <img src="https://mintcdn.com/kiwify-81/eqGeDYA02A7icNcw/images/members-area/section-code-button.webp?fit=max&auto=format&n=eqGeDYA02A7icNcw&q=85&s=fc8b956ecacda70bac45e930ed36cc00" alt="Code Editor" width="1910" height="1092" data-path="images/members-area/section-code-button.webp" />
    </Frame>
  </Tab>
</Tabs>

## Próximos Passos

<CardGroup cols={3}>
  <Card title="Explorar Arquitetura" icon="puzzle-piece" href="/members-area/key-concepts/theme-architecture">
    Entenda como os componentes do tema funcionam juntos
  </Card>

  <Card title="Aprender Sobre Objetos" icon="database" href="/members-area/reference/objects">
    Aprenda como usar os objetos de dados globais
  </Card>

  <Card title="Navegar Componentes" icon="code" href="/members-area/key-concepts/theme/templates">
    Mergulhe nos detalhes de cada componente do tema
  </Card>
</CardGroup>