> For the complete documentation index, see [llms.txt](https://docs.grano.app/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.grano.app/conteudo/lms/setup-do-cliente/landing-page.md).

# Landing Page

Agora os Clientes da Grano podem criar, via LMS, suas Landing Pages personalizadas para captação de novos usuários. Ao divulgar essa página, qualquer usuário poderá se cadastrar e navegar livremente nas trilhas e conteúdos pré-definidos pelo Cliente.

É uma maneira rápida e simples de distribuir conteúdos (aqueles que o Cliente queira disponibilizar em formato aberto), sem a necessidade de um pré-cadastro ou carga manual de logins via LMS.

Confira o exemplo da Landing Page da Grano para entender seu funcionamento: <https://edu.grano.app/cadastro/trial>&#x20;

{% hint style="danger" %}
**Atenção:** A URL da Landing Page é pública, ou seja, qualquer pessoa com acesso ao link dessa Landing Page poderá fazer a inscrição na plataforma.
{% endhint %}

## <mark style="color:blue;">Como cadastrar e configurar uma Landing Page</mark>

No menu [**Lista - Landing pages**](https://manager.grano.app/admin/landings) clique em "Adicionar Landing Page"

<div align="left"><figure><img src="/files/6HZk7Xa5elMxcSQA34Br" alt=""><figcaption></figcaption></figure></div>

No campo <mark style="background-color:yellow;">**Alias**</mark> adicione o texto que você quer que fique na URL da Landing Page. O padrão é ***nomedocliente.grano.app/cadastro/alias*** \
Por exemplo, o Alias da Landing Page da Grano é **trial**, então a nossa URL fica ***edu.grano.app/cadastro/trial***

<div align="left"><figure><img src="/files/nBye6jF8kDEi7JCgpkFz" alt=""><figcaption></figcaption></figure></div>

No campo <mark style="background-color:yellow;">**Título**</mark>, você pode adicionar um título para a sua Landing Page. Esse campo é opcional.

<div align="left"><figure><img src="/files/EC1dgwZR0JAoFLkebA8T" alt=""><figcaption></figcaption></figure></div>

No campo <mark style="background-color:yellow;">**Subtítulo**</mark>, você pode adicionar um título para a sua Landing Page. Esse campo é opcional.

<div align="left"><figure><img src="/files/14U7Os3olzHtGj3B5r0a" alt=""><figcaption></figcaption></figure></div>

No campo <mark style="background-color:yellow;">**Texto**</mark> você pode adicionar o conteúdo que aparecerá **logo abaixo do seu Título e Subtítulo**, ou seja, aparecerá ao lado esquerdo da sua página. Aqui você pode adicionar texto e imagens.

<div align="left"><figure><img src="/files/EOWB9jZK5P0X6bxr7Qz1" alt=""><figcaption></figcaption></figure></div>

No campo <mark style="background-color:yellow;">**Texto - Direita (Texto de apoio)**</mark> você pode adicionar o conteúdo que aparecerá **logo acima do formulário de contato**, ou seja, que aparecerá ao lado direito da sua página.

<div align="left"><figure><img src="/files/6FGmcq2u8ptSg14wzkpo" alt=""><figcaption></figcaption></figure></div>

Agora é hora de adicionar as imagens do **Header e do Footer** para personalizar a sua Landing Page.

Para o <mark style="color:orange;">**header**</mark>, você pode produzir imagens mais elaboradas, que tenham o seu logo, imagens, ilustrações, etc.&#x20;

No campo <mark style="background-color:yellow;">**Imagem - Header (1920x...)**</mark> adicione uma imagem jpg que tenha 1920px de largura. A altura é livre, então você pode escolher o tamanho que desejar. *Essa imagem aparecerá no desktop.*

No campo <mark style="background-color:yellow;">**Imagem - Header - Mobile (1125x...)**</mark> adicione uma imagem jpg que tenha 1125px de largura. A altura é livre, então você pode escolher o tamanho que desejar. *Essa imagem aparecerá no mobile.*

<div align="left"><figure><img src="/files/ChJk0PyvZNckI73gUBIC" alt=""><figcaption></figcaption></figure></div>

Para o <mark style="color:orange;">**footer**</mark>, é recomendado produzir uma imagem mais simples, considerando que o menu possui cor, texto e disposição fixos. Certifique-se de que a cor do footer apresente contraste adequado com o texto branco do menu.

No campo <mark style="background-color:yellow;">**Imagem - Footer (1920x...)**</mark> adicione uma imagem jpg que tenha 1920px de largura. A altura é livre, então você pode escolher o tamanho que desejar. *Essa imagem aparecerá na desktop.*&#x20;

No campo <mark style="background-color:yellow;">**Imagem - Footer - Mobile (1125x...)**</mark> adicione uma imagem jpg que tenha 1125px de largura. A altura é livre, então você pode escolher o tamanho que desejar. *Essa imagem aparecerá no mobile.*

<div align="left"><figure><img src="/files/PKT5uRsP4st6mpj5QGZn" alt=""><figcaption></figcaption></figure></div>

Para adicionar as imagens você deve clicar em **Browse** e selecionar o arquivo no seu computador.&#x20;

{% hint style="info" %}
Apesar de permitir qualquer altura **não recomendamos** que a altura do cabeçalho e rodapé (header e footer) ultrapasse 25% da altura total da página para não afetar a usabilidade da página e a experiência do usuário.
{% endhint %}

Agora é o momento de cadastrar o conteúdo para a página de sucesso, que será exibida imediatamente após o usuário concluir o formulário de inscrição.

No campo <mark style="background-color:yellow;">**Título - Sucesso**</mark>, você pode adicionar um título para a página de sucesso da sua Landing Page. Esse campo é opcional.

<div align="left"><figure><img src="/files/vwhs9Q7JtR9lYgYfmrYC" alt=""><figcaption></figcaption></figure></div>

No campo <mark style="background-color:yellow;">**Subtítulo - Sucesso**</mark>, você pode adicionar um subtítulo para a página de sucesso da sua Landing Page. Esse campo é opcional.

<div align="left"><figure><img src="/files/rnrwLGlSVcMcSdCz5U0p" alt=""><figcaption></figcaption></figure></div>

No campo <mark style="background-color:yellow;">**Texto - Sucesso**</mark> você pode adicionar o conteúdo que aparecerá **logo abaixo do seu Título e Subtítulo** da página de sucesso, Esse conteúdo aparecerá no lado esquerdo da página. Neste espaço, é possível adicionar texto e imagens.

É recomendado incluir uma instrução para informar aos usuários que eles receberão um e-mail para ativar a conta e criar a senha.

<div align="left"><figure><img src="/files/KvL4OYuimHMilOv4kdVH" alt=""><figcaption></figcaption></figure></div>

No campo <mark style="background-color:yellow;">**Texto - Direita - Sucesso**</mark> você pode adicionar o conteúdo que aparecerá ao lado direito da sua página. Esse campo é opcional e ele **não é mostrado no mobile.**

<div align="left"><figure><img src="/files/dAeGKuerQGVYU5z0blmf" alt=""><figcaption></figcaption></figure></div>

Nos campos <mark style="background-color:yellow;">**SEO - Título da Página**</mark> e <mark style="background-color:yellow;">**SEO - Descrição da Página**</mark>, adicione os textos de SEO que aparecerão nas buscas do Google.

<div align="left"><figure><img src="/files/sJ4kdYHkuRZm0YBqLTAW" alt=""><figcaption></figcaption></figure></div>

Para restringir o acesso à sua Landing Page apenas para **e-mails corporativos**, basta ativar a opção no campo <mark style="background-color:yellow;">**"Email Corporativo"**</mark>. Isso permitirá que somente os usuários com endereços de e-mail corporativos possam acessar a página.

<div align="left"><figure><img src="/files/Zn3c8qCvk1CMkX3enm9m" alt=""><figcaption></figcaption></figure></div>

No campo Dias de Acesso, você poderá colocar os dias de acesso que esse usuário terá na plataforma.

<div align="left"><figure><img src="/files/Ewjw3K01f5oEb0PkIQ55" alt=""><figcaption></figcaption></figure></div>

Após atingir os dias de limite de acesso, na seção [**"Usuários - Landing Pages"**](https://manager.grano.app/admin/landing_users) informará a data que o usuário expirou (a partir do cadastro do usuário). No sistema, o bloqueio de usuários não ocorre automaticamente. Você deve desabilitar manualmente o acesso do usuário na data desejada.

Se você desejar desabilitar ou esconder o formulário da Landing Page para que ninguém mais possa fazer inscrições, basta ativar a opção no campo "<mark style="background-color:yellow;">**Desabilitar Formulário?**</mark><mark style="background-color:yellow;">"</mark>. Isso impedirá que novas inscrições sejam realizadas através da página.

<div align="left"><figure><img src="/files/QHhytOvRVjQFmRjxaSfb" alt=""><figcaption></figcaption></figure></div>

{% hint style="warning" %}
**Atenção:** O formulário da Landing Page **não é editável**; todos os campos e textos são fixos. A única opção disponível é habilitar/desabilitar.
{% endhint %}

<mark style="background-color:yellow;">**Tags:**</mark> Para que os usuários tenham acesso aos seus conteúdos, é necessário vincular uma ou mais tags na Landing Page.

{% hint style="info" %}
Indicamos que você crie uma **tag específica** para identificar que o usuário fez o acesso via Landing Page. Você pode [criar uma tag](/conteudo/estrutura-e-conteudos/tags.md) custom chamada Landing Page, por exemplo.
{% endhint %}

Clique em Adicionar Tag:

<div align="left"><figure><img src="/files/zi3g6xYVeHBoAKG82CO2" alt=""><figcaption></figcaption></figure></div>

Escolha a tag desejada:

<div align="left"><figure><img src="/files/dEa5vTSkgzpkPKzTmddE" alt=""><figcaption></figcaption></figure></div>

Clique em Salvar Tag:

<div align="left"><figure><img src="/files/pNt8aQV35q03j4xhY044" alt=""><figcaption></figcaption></figure></div>

Repita o processo caso queira vincular mais tags.

{% hint style="danger" %}
Não é recomendado utilizar a funcionalidade [Inscrições vs. Tags](/conteudo/lms/setup-do-cliente/inscricao-vs.-tags.md) junto com a LP, pois pode causar um conflito de informações que pode prejudicar o acesso do seu usuário
{% endhint %}

Ao final do processo, não se esqueça de clicar em **Salvar Landing Page.**

![](/files/7C9be4GrU9vbjGFLlHPN)

Na lista de Landing Pages, o sistema cria um QRCode para que você possa compartilhar, se desejar.

Clique no ícone do QRCode

<div align="left"><figure><img src="/files/Nt5bORjuF9GJiffllNrq" alt=""><figcaption></figcaption></figure></div>

Você será direcionado para uma página, onde poderá salvar a imagem do QRCod. Exemplo: <https://manager.grano.app/admin/landings/1/qrcode>

![](/files/npHtri0tgcGOZscD4jFl)

## <mark style="color:blue;">Confira um exemplo de Landing Page:</mark>

**Landing Page - Desktop:**

<figure><img src="/files/uRa2uyDf5Uo4AjijgWO2" alt=""><figcaption></figcaption></figure>

**Página de Sucesso - Desktop:**

<figure><img src="/files/8HkrZFStTaMQv12GGiQq" alt=""><figcaption></figcaption></figure>

**Landing Page - Mobile:**

![](/files/7Dr6mk30CwITIbhFgEOH)

**Página de Sucesso - Mobile:**

![](/files/iB8zGjvBFaKPJ1DM7Z7m)

{% hint style="info" %}
Caso você não tenha acesso a essa funcionalidade no LMS ou tenha alguma dúvida na hora do cadastro, entre em contato com o Time Grano no <hello@grano.app>
{% endhint %}

***

> *© 2026 Grano Edtech LTDA. Todos os direitos reservados.*