O bloco Formulário de Login permite adicionar um formulário de login WordPress totalmente funcional diretamente a qualquer página SeedProd. Este bloco é ideal para criar páginas de login personalizadas, portais de membros e áreas de acesso restrito sem depender da página de login padrão do WordPress.
O bloco inclui campos para nome de usuário e senha, um botão de login, uma caixa de seleção “Lembrar-me”, um link para recuperar senha perdida e controle total sobre o estilo, a tipografia e as cores dos campos — tudo personalizável sem precisar escrever código.
Adicionando o bloco Formulário de login às suas páginas
Siga estas etapas para adicionar um bloco de formulário de login à sua página SeedProd:
Passo 1: Adicione o bloco
Em Design > Blocos, arraste e solte o bloco Formulário de login na seção desejada da sua página.
Etapa 2: Configurar as definições de conteúdo
Depois de adicionado, clique no bloco Formulário de login para abrir suas configurações. A guia Conteúdo está organizada em quatro seções: Campos, Botão, Ação de sucesso e Opções adicionais.
Campos:
- Rótulo para o campo Usuário: personalize o texto do rótulo exibido acima do campo de entrada do nome de usuário ou e-mail.
- Espaço reservado para o campo Usuário: defina o texto do espaço reservado exibido dentro do campo de entrada do nome de usuário ou e-mail quando ele estiver vazio.
- Rótulo para o campo Senha: personalize o texto do rótulo exibido acima do campo de entrada da senha.
- Espaço reservado para o campo Senha: defina o texto do espaço reservado exibido dentro do campo de entrada de senha quando ele estiver vazio.
Botão:
- Texto do botão: Personalize o rótulo exibido no botão de envio de login.
Ação de sucesso:
- URL de redirecionamento: insira uma URL para redirecionar o usuário após um login bem-sucedido. Deixe em branco para usar o comportamento padrão de redirecionamento do WordPress.
- Texto de login: Insira a mensagem exibida no lugar do formulário de login quando o usuário já estiver conectado. Use
{user}como um espaço reservado e será substituído pelo nome de exibição do usuário.
Opções adicionais:
- Lembrar rótulo do usuário: personalize o texto do rótulo da caixa de seleção “Lembrar-me” (por exemplo, “Lembrar-me”).
- Texto do link para senha perdida: personalize o texto do link para senha perdida exibido abaixo do formulário (por exemplo, “Esqueceu sua senha?”).
Etapa 3: Escolha um modelo (opcional)
A guia Modelos oferece um conjunto de predefinições de estilos de campo pré-concebidos. Clique em qualquer modelo para aplicar instantaneamente uma combinação de configurações de fundo, borda e raio do campo. As predefinições disponíveis incluem estilos de campo de entrada Claro, Sem borda, Borda larga, Cinza, Escuro, Borda inferior e Transparente.
Etapa 4: Personalizar o design
Na guia Avançado, você pode ajustar as cores, a tipografia e o tamanho de todos os elementos do formulário. A guia está organizada em quatro seções: Cores, Formulário, Campos e Botão.
Cores:
- Cor do link: defina a cor dos links “Lembrar-me” e “Senha perdida”.
- Cor do texto do rótulo: defina a cor do texto do rótulo do campo.
- Cor do texto do campo: defina a cor do texto digitado nos campos de entrada.
- Cor de fundo do campo: defina a cor de fundo dos campos de entrada.
- Cor da borda do campo: defina a cor da borda dos campos de entrada.
- Cor de fundo do botão: defina a cor de fundo do botão de login.
Formulário:
- Fonte do rótulo: escolha a família e a variante da fonte para os rótulos dos campos.
- Tamanho do texto do rótulo: defina o tamanho da fonte dos rótulos dos campos entre 10 e 30 px.
- Espaçamento entre linhas: defina o espaçamento vertical entre as linhas do formulário de 0 a 30 px.
- Alinhamento: defina o alinhamento horizontal de todo o formulário — Esquerda, Centro ou Direita.
Campos:
- Fonte do campo: escolha a família e a variante da fonte para o texto dentro dos campos de entrada.
- Tamanho do campo: defina o tamanho geral dos campos de entrada — Pequeno, Médio ou Grande.
- Largura do campo: defina a largura dos campos de entrada como uma porcentagem de 10 a 100%.
- Espaçamento da etiqueta: defina o espaçamento entre a etiqueta e o campo de entrada de 0 a 30 px.
- Largura da borda do campo: defina a largura da borda para cada lado dos campos de entrada (superior, direito, inferior, esquerdo) independentemente.
- Raio da borda do campo: defina o raio dos cantos dos campos de entrada de 0 a 50 px.
Botão:
- Fonte do botão: escolha a família e a variante da fonte para o texto do botão de login.
- Tamanho do botão: defina o tamanho geral do botão de login — Pequeno, Médio ou Grande.
- Raio da borda do botão: defina o raio do canto do botão de login de 0 a 50 px.
Você também pode controlar o espaçamento, as classes CSS personalizadas, a visibilidade do dispositivo e as animações de entrada nas seções restantes da guia Avançado.
Etapa 5: Salve suas alterações
Depois de terminar de configurar o bloco Formulário de login e personalizar sua aparência, certifique-se de salvar seu trabalho.
Você adicionou com sucesso um bloco de formulário de login à sua página! Um formulário de login bem projetado gera confiança e facilita o acesso dos membros ao seu conteúdo. Use a guia Modelos para obter predefinições rápidas de estilo de campo ou acesse a guia Avançado para combinar todas as cores, fontes e tamanhos com a sua marca.