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

# Tema Padrão

> Conhecendo o tema padrão e suas partes

O tema padrão da Kiwify conta com seis tipos de seção, que podem ser totalmente customizadas de acordo com suas preferências.

## Login

Exibe o botão de login da Kiwify com layout, imagem de título e imagem de fundo. Expõe os seguintes parâmetros para o Editor de Temas:

* `variant`: controla o layout -- *sidebar* ou fundo completo

  <Columns cols={2}>
    <Frame caption="Layout de fundo completo">
      <img src="https://mintcdn.com/kiwify-81/eqGeDYA02A7icNcw/images/members-area/default-theme/login-full.webp?fit=max&auto=format&n=eqGeDYA02A7icNcw&q=85&s=1bbaeb395e646ead4d83e62d129fb0db" alt="layout full" width="1505" height="882" data-path="images/members-area/default-theme/login-full.webp" />
    </Frame>

    <Frame caption="Layout sidebar">
      <img src="https://mintcdn.com/kiwify-81/eqGeDYA02A7icNcw/images/members-area/default-theme/login-sidebar.webp?fit=max&auto=format&n=eqGeDYA02A7icNcw&q=85&s=281aa1a5308b262bf0f284721590b45d" alt="layout sidebar" width="1505" height="882" data-path="images/members-area/default-theme/login-sidebar.webp" />
    </Frame>
  </Columns>
* `image_background`: imagem exibida no fundo da tela de login (opcional)
* `image_header`: imagem exibida acima do botão de login (opcional; usa o logotipo da área de membros como *fallback*)

Essa seção utiliza o snippet `auth-button` para exibir o botão de login, que é um simples *wrapper* para o botão de login implementado nativamente na Área de Membros Kiwify.

## Banner

Carrossel de imagens com passagem automática de slides. Utiliza a biblioteca [Embla Carousel](https://www.embla-carousel.com/) para controle de slides. [Saiba mais sobre as bibliotecas disponíveis](/members-area/key-concepts/theme-architecture#bibliotecas-disponíveis).

<Frame>
  <img src="https://mintcdn.com/kiwify-81/eqGeDYA02A7icNcw/images/members-area/default-theme/banner.webp?fit=max&auto=format&n=eqGeDYA02A7icNcw&q=85&s=bafd26aca40515fc14ec329c048486dd" alt="banner" width="1660" height="490" data-path="images/members-area/default-theme/banner.webp" />
</Frame>

Quando há mais de um slide, exibe setas para avançar e retroceder slides, e um controle de acesso direto aos slides na parte inferior.

Expõe um único parâmetro:

* `slides_delay`: quantos segundos o componente deve esperar até trocar para o slide seguinte, quando há mais de um

Os slides podem ser no máximo 3, e são representados como [blocos](/members-area/key-concepts/theme/sections#blocos-de-seção), que podem ter os seguintes parâmetros:

* `mobile_image`: imagem do slide na versão mobile; caso ausente, a imagem desktop é exibida no mobile também
* `desktop_image`: imagem do slide na versão desktop; caso ausente, a imagem mobile é exibida no desktop também

<Warning>
  Caso nenhuma das imagens esteja presente, a seção aparecerá quebrada para o usuário final.
</Warning>

## Cursos

Carrossel com links para cursos da área de membros. Cada link é exibido na forma de um card com a imagem e, opcionalmente, o nome do curso. Expõe os seguintes parâmetros para o Editor de Temas:

* `title`: título exibido no topo da seção
* `items_variant`: modo de exibição dos títulos dos conteúdos; pode ter os seguintes valores:
  * `content_over`: título sempre visível sobre a imagem do curso
  * `content_hidden`: título não é exibido
  * `mouse_hover`: título é exibido sobre a imagem do curso apenas ao passar o mouse sobre o card
* `items_layout`: formato de exibição dos cards; pode ter os valores `portrait` (retrato) ou `landscape` (paisagem). Vide
* `all_accessible_courses`: booleano que controla quais cursos serão exibidos na seção; se seu valor for verdadeiro, todos os cursos aos quais o usuário tem acesso serão exibidos, em ordem alfabética; se for falso, serão exibidos os cursos referenciados nos blocos da seção

Essa seção pode conter blocos, indicando quais cursos devem ser exibidos na seção e em qual ordem. Cada bloco contém apenas uma propriedade: `course_id`.

Caso um curso referenciado em um bloco não seja acessível ao usuário final, ele será exibido mesmo assim. Se o curso tiver venda na área de membros configurada, o usuário final será capaz de clicar no link para realizar a compra.

## Módulos

Carrossel com links para módulos de um curso da área de membros. Cada link é exibido na forma de um card com a imagem e, opcionalmente, o nome do módulo. Expõe os seguintes parâmetros para o Editor de Temas:

* `title`: título exibido no topo da seção
* `items_variant`: modo de exibição dos títulos dos conteúdos; pode ter os seguintes valores:
  * `content_over`: título sempre visível sobre a imagem do curso
  * `content_hidden`: título não é exibido
  * `mouse_hover`: título é exibido sobre a imagem do curso apenas ao passar o mouse sobre o card
* `items_layout`: formato de exibição dos cards; pode ter os valores `portrait` (retrato) ou `landscape` (paisagem)
* `course_id`: identificador do curso cujos módulos serão listados nessa seção

Caso um módulo do curso não seja acessível ao usuário final, ele será exibido mesmo assim. Se o curso tiver venda na área de membros configurada, o usuário final será capaz de clicar no link para realizar a compra do curso completo.

## Aulas

Carrossel com links para aulas de um curso da área de membros. Cada link é exibido na forma de um card com a imagem e, opcionalmente, o nome da aula. Expõe os seguintes parâmetros para o Editor de Temas:

* `title`: título exibido no topo da seção
* `items_variant`: modo de exibição dos títulos dos conteúdos; pode ter os seguintes valores:
  * `content_over`: título sempre visível sobre a imagem do curso
  * `content_hidden`: título não é exibido
  * `mouse_hover`: título é exibido sobre a imagem do curso apenas ao passar o mouse sobre o card
* `items_layout`: formato de exibição dos cards; pode ter os valores `portrait` (retrato) ou `landscape` (paisagem)
* `module_id`: identificador do módulo cujas aulas serão listadas nessa seção

Caso o módulo selecionado não seja acessível ao usuário final, a seção inteira não é exibida.

## Continuar Assistindo

Carrossel com links para aulas recomendadas para o usuário final continuar assistindo (vide objeto [last\_watched\_lessons](/members-area/reference/objects/last_watched_lessons)). Cada link é exibido na forma de um card com a imagem e, opcionalmente, o nome da aula. Expõe os seguintes parâmetros para o Editor de Temas:

* `items_layout`: formato de exibição dos cards; pode ter os valores `portrait` (retrato) ou `landscape` (paisagem)

Caso não haja nenhuma aula para continuar assistindo, a seção inteira não é exibida.

## Cards

As seções de cursos, módulos, aulas e "continuar assistindo" são bem similares: exibem links para conteúdo da área de membros na forma de cards. Para evitar duplicação de código, esses links estão implementados nos snippets `cards` e `cards-item`.

O snippet `cards` é responsável por exibir o título, configurar o carrossel e percorrer a lista de links, chamando o snippet `cards-item` para cada link.

Ele recebe alguns argumentos que o tornam bastante flexível:

* `section_items`: lista de objetos que serão exibidos; mais detalhes abaixo
* `is_horizontal`: booleano que indica se os cards devem assumir o layout horizontal ou vertical

  <Columns col={2}>
    <Frame caption="Card horizontal">
      <img src="https://mintcdn.com/kiwify-81/eqGeDYA02A7icNcw/images/members-area/default-theme/horizontal-card.webp?fit=max&auto=format&n=eqGeDYA02A7icNcw&q=85&s=db0b0e718a5887cbd9c5de0275ff8b69" alt="card horizontal" width="275" height="403" data-path="images/members-area/default-theme/horizontal-card.webp" />
    </Frame>

    <Frame caption="Card vertical">
      <img src="https://mintcdn.com/kiwify-81/eqGeDYA02A7icNcw/images/members-area/default-theme/vertical-card.webp?fit=max&auto=format&n=eqGeDYA02A7icNcw&q=85&s=004fbf53588a339bdead61f55274c9ee" alt="card vertical" width="275" height="403" data-path="images/members-area/default-theme/vertical-card.webp" />
    </Frame>
  </Columns>
* `should_display_progress`: booleano que indica se a barra de progresso deve ser exibida ou não
* `percentage_field`: propriedade dentro do campo `user_data` de cada item de `section_items` que contém o valor a ser exibido na barra de progresso
* `path_format`: string que indica o formato da URL para a qual o conteúdo aponta. Exemplos:
  * `{id}`: a URL final será o ID do item
  * `{course_id}/{id}`: a URL final será o valor do campo `course_id` do item, seguido da barra e do ID do item

Ele também precisa que sejam repassados os seguintes objetos globais para ele:

* `section`
* `is_preview`

O snippet `cards-item` recebe esses mesmos parâmetros exceto o `section_items`. No lugar, recebe o parâmetro `item`, que é basicamente um dos itens da lista `section_items`. Esse parâmetro `item` deve ser um objeto e pode ter as seguintes propriedades:

* `thumbnail_slider_cover`, `logo_url` e `thumbnail`: URL para a imagem do card. Qualquer um dos três nomes pode ser usado
* `user_data`: objeto do tipo [user\_data](/members-area/reference/objects/user_data) ou, no caso do item ser uma aula, [lesson\_user\_data](/members-area/reference/objects/lesson_user_data)
* `custom_offer`: objeto do tipo [custom\_offer](/members-area/reference/objects/custom_offer)
* `course_id`: ID do curso ao qual o item pertence, no caso de módulos e aulas
* `module_id`: ID do módulo ao qual a aula pertence
* `id`: ID do curso, módulo ou aula
* `name`: nome do curso, módulo ou aula, a ser exibido no card