O bloco Formulário de Login permite que você adicione um formulário de login do WordPress totalmente funcional diretamente a qualquer página do SeedProd. Este bloco é ideal para criar páginas de login personalizadas, portais de membros e áreas com acesso restrito sem depender da página de login padrão do WordPress.
O bloco inclui campos de nome de usuário e senha, um botão de login, uma caixa de seleção “Lembrar-me”, um link de senha perdida e controle total sobre a estilização dos campos, tipografia e cores — tudo personalizável sem escrever código.
Adicionando o Bloco de Formulário de Login às suas Páginas
Siga estas etapas para adicionar um bloco de Formulário de Login à sua página do SeedProd:
Etapa 1: Adicionar 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
Após adicionar, clique no bloco Formulário de Login para abrir suas configurações. A aba Conteúdo é 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 de nome de usuário ou e-mail.
- Placeholder para o campo Usuário: Defina o texto de placeholder exibido dentro do campo de entrada de 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 de senha.
- Placeholder para o campo Senha: Defina o texto de placeholder 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 de redirecionamento padrão do WordPress.
- Texto para Usuário Logado: Insira a mensagem exibida no lugar do formulário de login quando o usuário já estiver logado. Use
{user}como placeholder e ele será substituído pelo nome de exibição do usuário.
Opções Adicionais:
- Rótulo Lembrar Usuário: Personalize o texto do rótulo para a caixa de seleção “Lembrar-me” (por exemplo, “Lembrar-me”).
- Texto do Link Senha Perdida: Personalize o texto do link de senha perdida exibido abaixo do formulário (por exemplo, “Esqueceu sua senha?”).
Etapa 3: Escolha um Modelo (Opcional)
A aba Templates oferece um conjunto de predefinições de estilo de campo pré-projetadas. Clique em qualquer template para aplicar instantaneamente uma combinação de configurações de fundo, borda e raio dos campos. As predefinições disponíveis incluem estilos de campo de entrada Claro, Sem Borda, Borda Larga, Cinza, Escuro, Borda Inferior e Transparente.
Etapa 4: Personalize o Design
Na aba Avançado, você pode ajustar finamente as cores, tipografia e dimensionamento de todos os elementos do formulário. A aba é organizada em quatro seções: Cores, Formulário, Campos e Botão.
Cores:
- Cor do Link: Defina a cor dos links “Lembrar-me” e de 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 de 10 a 30px.
- Espaçamento de Linha: Defina o espaçamento vertical entre as linhas do formulário de 0 a 30px.
- 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 do Rótulo: Defina o espaçamento entre o rótulo e o campo de entrada de 0 a 30px.
- Largura da Borda do Campo: Defina a largura da borda para cada lado dos campos de entrada (Superior, Direita, Inferior, Esquerda) de forma independente.
- Raio da Borda do Campo: Defina o raio do canto dos campos de entrada de 0 a 50px.
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 50px.
Você também pode controlar o espaçamento, classes CSS personalizadas, visibilidade do dispositivo e animações de entrada nas seções restantes na aba Avançado.
Etapa 5: Salvar suas alterações
Depois de terminar de configurar o bloco de 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 aba Modelos para obter predefinições rápidas de estilo de campo ou mergulhe na aba Avançado para combinar cada cor, fonte e tamanho com sua marca.