# Tela de login da área de membros

Quando entramos na tela de bloqueio, podemos ter tanto uma imagem na lateral, bem com uma imagem de fundo. 

Essa tela é o primeiro contato do aluno com o seu produto, por isso, é interessante que ela seja bem atraente pois, é onde começa a experiência do aluno com o seu conteúdo! 

Para configurar, comece entrando na sua <mark style="color:blue;">**área de membros**</mark>**.** Se você quiser modificar uma área já criada, basta ir em <mark style="color:blue;">**editar**</mark>. Caso você esteja começando do zero, basta ir em <mark style="color:blue;">**+criar área de membros**</mark>, conforme a imagem:

<figure><img src="https://2164836145-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LtoLBvE-NBxibKO0U39%2Fuploads%2FKfBdAL3IRoI6CZdyaucy%2Fimage.png?alt=media&#x26;token=de13754f-2e6b-43f7-9eee-b03a69795a15" alt=""><figcaption><p>Home > área de membros</p></figcaption></figure>

Agora, basta clicar na "portinha", conforme imagem, e você terá acesso as configurações da tela de login.

<figure><img src="https://2164836145-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LtoLBvE-NBxibKO0U39%2Fuploads%2FB7SynGJkqkRgnsodOOjF%2Fimage.png?alt=media&#x26;token=68b5a9a3-fa31-4423-b846-789917831689" alt="" width="563"><figcaption><p>Home > área de membros > <strong>criar área de membro</strong></p></figcaption></figure>

{% hint style="warning" %}
As telas de login possuem duas opções, a imagem de fundo e a imagem na lateral. Além disto, precisam ser configuradas na versão desktop e mobile.&#x20;
{% endhint %}

### Imagem no fundo - Desktop

Para iniciar, selecione a versão desktop e a imagem de fundo, como mostra na figura:

<figure><img src="https://2164836145-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LtoLBvE-NBxibKO0U39%2Fuploads%2FtGPdcMsGBBPL4vZzYYg6%2Fimage.png?alt=media&#x26;token=04785281-650c-44d8-827f-3efc6322bb74" alt="" width="563"><figcaption><p>Home > área de membros > <strong>criar área de membro</strong></p></figcaption></figure>

Passando o mouse por cima da imagem, abrirá um ícone de inserção de figura, clique nele, conforme ilustra o print  a seguir:

<figure><img src="https://2164836145-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LtoLBvE-NBxibKO0U39%2Fuploads%2F1d1vXFD8KEXdT5X5l4Ps%2Fimage.png?alt=media&#x26;token=4d2388b1-b66b-4f3e-a4b9-42055558004e" alt="" width="563"><figcaption><p>Home > área de membros > <strong>criar área de membro</strong></p></figcaption></figure>

Clicando neste botão, você será direcionado para a tela de <mark style="color:blue;">**Configurar imagem,**</mark> então, você deve anexar ou baixar a sua foto de fundo

<figure><img src="https://2164836145-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LtoLBvE-NBxibKO0U39%2Fuploads%2FJKMpAVzZAG25ignG1tZM%2Fimage.png?alt=media&#x26;token=4be600a5-4338-40dd-aeb3-774eaad143b5" alt="" width="352"><figcaption><p>Home > área de membros > <strong>criar área de membro</strong></p></figcaption></figure>

{% hint style="info" %}
Recomendamos que sua imagem tenha pelo menos 1920px de largura e 1080px de altura e esteja nos seguintes formatos: .png, .jpg, .jpeg, .gif, .webp.
{% endhint %}

Após escolher a imagem, clique em <mark style="color:blue;">**enviar 1 arquivo**</mark>

<figure><img src="https://2164836145-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LtoLBvE-NBxibKO0U39%2Fuploads%2FUrgBIztaewI3gjaNvyO9%2Fimage.png?alt=media&#x26;token=c28d3439-9ca4-4a29-a261-c515c847d37e" alt="" width="334"><figcaption><p>Home > área de membros > <strong>criar área de membro</strong></p></figcaption></figure>

Prontinho, a foto foi aplicada ao fundo!&#x20;

<figure><img src="https://2164836145-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LtoLBvE-NBxibKO0U39%2Fuploads%2FZyS5lmQgvWWx4cGkLRVh%2Fimage.png?alt=media&#x26;token=2970cc4e-766b-4568-9d4b-7b6aa08cf57d" alt="" width="375"><figcaption><p>demonstração/exemplo da aplicação</p></figcaption></figure>

### Imagem na lateral

Agora, selecione a versão desktop e a <mark style="color:blue;">**imagem na lateral**</mark>, como mostra na figura:

<figure><img src="https://2164836145-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LtoLBvE-NBxibKO0U39%2Fuploads%2Fi0KgFJQtwVsbnZ4k4vOH%2Fimage.png?alt=media&#x26;token=d6e8db57-b901-4493-a36c-2e64df3ea78a" alt="" width="563"><figcaption><p>Home > área de membros > <strong>criar área de membro</strong></p></figcaption></figure>

Passando o mouse por cima da <mark style="color:blue;">**imagem lateral**</mark>, abrirá um ícone de inserção de figura, clique nele, conforme ilustra o print  a seguir:

<figure><img src="https://2164836145-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LtoLBvE-NBxibKO0U39%2Fuploads%2FZlFU1BE1ZZ7Mu27vqefA%2Fimage.png?alt=media&#x26;token=edb3700b-7120-4e25-a217-656837ea4991" alt="" width="563"><figcaption><p>Home > área de membros > <strong>criar área de membro</strong></p></figcaption></figure>

Clicando neste botão, você será direcionado para a tela de <mark style="color:blue;">**Configurar imagem,**</mark> então, você deve anexar ou baixar a sua foto da lateral.

<figure><img src="https://2164836145-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LtoLBvE-NBxibKO0U39%2Fuploads%2FJKMpAVzZAG25ignG1tZM%2Fimage.png?alt=media&#x26;token=4be600a5-4338-40dd-aeb3-774eaad143b5" alt="" width="352"><figcaption><p>Home > área de membros > <strong>criar área de membro</strong></p></figcaption></figure>

{% hint style="info" %}
Recomendamos que sua imagem tenha pelo menos 960px de largura e 540px de altura e esteja nos seguintes formatos: .png, .jpg, .jpeg, .gif, .webp.
{% endhint %}

Após escolher a imagem, clique em <mark style="color:blue;">**enviar 1 arquivo**</mark>

<figure><img src="https://2164836145-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LtoLBvE-NBxibKO0U39%2Fuploads%2FUrgBIztaewI3gjaNvyO9%2Fimage.png?alt=media&#x26;token=c28d3439-9ca4-4a29-a261-c515c847d37e" alt="" width="334"><figcaption><p>Home > área de membros > <strong>criar área de membro</strong></p></figcaption></figure>

Prontinho, a foto foi aplicada na lateral!&#x20;

<figure><img src="https://2164836145-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LtoLBvE-NBxibKO0U39%2Fuploads%2FMYrL83GkFNdKHjdUgpk2%2Fimage.png?alt=media&#x26;token=85c67c7f-028e-42f0-b7f0-892d316e4b85" alt="" width="375"><figcaption><p>demonstração/exemplo da aplicação</p></figcaption></figure>

### Imagem no fundo - Mobile

Para iniciar, selecione a versão mobile e a <mark style="color:blue;">**imagem de fundo**</mark>, como mostra na figura:

<figure><img src="https://2164836145-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LtoLBvE-NBxibKO0U39%2Fuploads%2FtW3X0QlYjFgIl8Iqf0gn%2Fimage.png?alt=media&#x26;token=0f62ee54-0ff9-4173-a6c7-53450adee142" alt="" width="563"><figcaption><p>Home > área de membros > <strong>criar área de membro</strong></p></figcaption></figure>

Passando o mouse por cima da imagem,  abrirá um ícone de inserção de figura, clique nele, conforme ilustra o print  a seguir:

<figure><img src="https://2164836145-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LtoLBvE-NBxibKO0U39%2Fuploads%2FzRd5KsVGok0cw1KC9gZw%2Fimage.png?alt=media&#x26;token=4cc7a79c-2302-4067-b7b3-fab1a428f512" alt="" width="254"><figcaption><p>Home > área de membros > <strong>criar área de membro</strong></p></figcaption></figure>

Clicando neste botão, você será direcionado para a tela de <mark style="color:blue;">**Configurar imagem,**</mark> então, você deve anexar ou baixar a sua foto de fundo

<figure><img src="https://2164836145-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LtoLBvE-NBxibKO0U39%2Fuploads%2FJKMpAVzZAG25ignG1tZM%2Fimage.png?alt=media&#x26;token=4be600a5-4338-40dd-aeb3-774eaad143b5" alt="" width="352"><figcaption><p>Home > área de membros > <strong>criar área de membro</strong></p></figcaption></figure>

{% hint style="info" %}
Recomendamos que sua imagem tenha pelo menos 1920px de largura e 1080px de altura e esteja nos seguintes formatos: .png, .jpg, .jpeg, .gif, .webp.
{% endhint %}

Após escolher a imagem, clique em <mark style="color:blue;">**enviar 1 arquivo**</mark>

<figure><img src="https://2164836145-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LtoLBvE-NBxibKO0U39%2Fuploads%2FUrgBIztaewI3gjaNvyO9%2Fimage.png?alt=media&#x26;token=c28d3439-9ca4-4a29-a261-c515c847d37e" alt="" width="334"><figcaption><p>Home > área de membros > <strong>criar área de membro</strong></p></figcaption></figure>

Prontinho, a foto foi aplicada ao fundo!&#x20;

### Imagem na lateral - Mobile

Agora, selecione a versão mobile e a imagem na lateral, como mostra na figura:

<figure><img src="https://2164836145-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LtoLBvE-NBxibKO0U39%2Fuploads%2Fnc4xG9z1BNKcJPpUlTN6%2Fimage.png?alt=media&#x26;token=3988c385-f67f-4d0d-94e6-8422c0908393" alt="" width="563"><figcaption><p>Home > área de membros > <strong>criar área de membro</strong></p></figcaption></figure>

Passando o mouse por cima da imagem na parte superior, abrirá um ícone de inserção de figura, clique nele, conforme ilustra o print  a seguir:

<figure><img src="https://2164836145-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LtoLBvE-NBxibKO0U39%2Fuploads%2FCdLM5UAl9mWmIgBb32NA%2Fimage.png?alt=media&#x26;token=8922e7e7-dcf7-4933-9030-7f5db059a473" alt="" width="256"><figcaption><p>Home > área de membros > <strong>criar área de membro</strong></p></figcaption></figure>

Clicando neste botão, você será direcionado para a tela de <mark style="color:blue;">**Configurar imagem,**</mark> então, você deve anexar ou baixar a sua foto da lateral.

<figure><img src="https://2164836145-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LtoLBvE-NBxibKO0U39%2Fuploads%2FJKMpAVzZAG25ignG1tZM%2Fimage.png?alt=media&#x26;token=4be600a5-4338-40dd-aeb3-774eaad143b5" alt="" width="352"><figcaption><p>Home > área de membros > <strong>criar área de membro</strong></p></figcaption></figure>

{% hint style="info" %}
Recomendamos que sua imagem tenha pelo menos 500px de largura e 1000px de altura e esteja nos seguintes formatos: .png, .jpg, .jpeg, .gif, .webp.
{% endhint %}

Após escolher a imagem, clique em <mark style="color:blue;">**enviar 1 arquivo**</mark>

<figure><img src="https://2164836145-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LtoLBvE-NBxibKO0U39%2Fuploads%2FUrgBIztaewI3gjaNvyO9%2Fimage.png?alt=media&#x26;token=c28d3439-9ca4-4a29-a261-c515c847d37e" alt="" width="334"><figcaption><p>Home > área de membros > <strong>criar área de membro</strong></p></figcaption></figure>

Prontinho, a foto foi aplicada!&#x20;

### Botão de login - configuração

Além das fotos para ilustrar a tela de bloqueio, é possível colorir o botão de <mark style="color:blue;">**Entrar**</mark>, que dá acesso ao produto.

<figure><img src="https://2164836145-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LtoLBvE-NBxibKO0U39%2Fuploads%2FFYhgC3dpKw8OX2Kgq7UL%2Fimage.png?alt=media&#x26;token=ad4c8a83-5801-4571-b9ee-7d727ab07601" alt="" width="302"><figcaption><p>Home > área de membros > <strong>criar área de membro</strong></p></figcaption></figure>

Basta selecionar a <mark style="color:blue;">**cor do botão**</mark> e a <mark style="color:blue;">**cor do texto do botão**</mark>:

<figure><img src="https://2164836145-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LtoLBvE-NBxibKO0U39%2Fuploads%2FEGZxp4qud4IA2Wme5sYn%2Fimage.png?alt=media&#x26;token=3e2926d3-facc-4f87-a346-6b35383198e9" alt=""><figcaption><p>Home > área de membros > <strong>criar área de membro</strong></p></figcaption></figure>

### Visualizar outras configurações

Ao acessar a opção de visualizar as configurações de entrada, você será direcionado para a página onde é possível definir como o usuário acessará a plataforma.&#x20;

Nessa área, é possível escolher entre formulário simples ou completo, habilitar autenticação utilizando o CPF e até restringir novos cadastros apenas para quem receber um convite. Essas opções ajudam a controlar e personalizar a forma de acesso de acordo com as necessidades do seu negócio.

Saiba mais em [configurar-a-plataforma](https://help.curseduca.com/configuracoes/inicio/configurar-a-plataforma "mention")

<figure><img src="https://2164836145-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LtoLBvE-NBxibKO0U39%2Fuploads%2FyshcRrOfgSjBnFCaozIt%2Fimage.png?alt=media&#x26;token=3b14b0dc-e814-4b25-bf8b-651e5f34744d" alt=""><figcaption></figcaption></figure>

Isso é tudo! Sua <mark style="color:blue;">**tela de login**</mark> está configurada. Feito o passo a passo é só clicar em <mark style="color:blue;">**publicar**</mark>, prontinho, suas configurações já estão na vitrine.