Como personalizar a página de login do Elementor Cloud

Blair Jersyer Element. Jul 27, 2022

Se você está usando o Elementor Cloud há algum tempo, pode ter visto uma página de login que parece " simples ". Embora seja verdade que gostamos de simplicidade, gostamos de ter um item original e único. Quando se trata da página de login que funciona como a entrada de uma casa, ela deve ser diferente das portas de entrada de outras casas.

Neste tutorial, mostraremos como personalizar a página de login de um site da Elementor Cloud. Mas primeiro, vamos ver se você realmente precisa disso.

Por que criar uma página de login personalizada?

Por que de fato! Bem, como mencionei acima, todos nós queremos ter algo único que se destaque. Vamos imaginar que você crie um site de comércio eletrônico que tenha bastante sucesso com a adesão. Você ficará bem em ter uma página de login que se pareça com outras páginas de login do Elementor Cloud? Absolutamente não.

Uma das vantagens de ter uma página inicial personalizada é fortalecer sua marca na mente do cliente, o que obviamente é um bom ponto. Vamos agora pular para a maneira que você pode usar para personalizar sua página de login.

Create Amazing Websites

Com o melhor criador de páginas gratuito Elementor

Comece agora

LoginPress

O LoginPress é um plugin WordPress gratuito que permite que você personalize sua página de login do WordPress e não apenas. Graças a este módulo, você poderá alterar seu plano de fundo, seu formulário de login e adicionar outros mecanismos de autenticação (pro). Por exemplo, você pode permitir que seu usuário use o Google, Twitter, Linkedin, etc.

Este plugin é gratuito no repositório do WordPress, mas também possui uma versão premium que inclui vários recursos e está disponível por US$ 49 por ano.

Características principais

  • Fundos de login personalizados
  • Logotipo personalizado
  • Login social
  • Adicionar rodapé da página de login
  • Botões bonitos
  • Diversos estilos de formulários de login
  • Página não autorizada
  • Mensagens de boas-vindas personalizadas

Alterando o plano de fundo da página de login do Elementor Cloud

Começaremos alterando a página Elementor Cloud que é principalmente branca. Depois de baixar o plugin (mesmo a versão gratuita), você verá um menu chamado " LoginPress ". A partir daí, clicaremos em " Customizer ".

Isso abrirá um personalizador semelhante ao personalizador de temas. A partir daí, você clicará em " Background ".

Por padrão, os plugins vêm com um plano de fundo predefinido que você pode usar. Mas você também pode enviar seu próprio plano de fundo, se quiser.

Quando terminar, salve suas alterações.

Como ocultar o botão de login do Elementor

O botão de login permite que qualquer pessoa que tenha uma conta Elementor faça login (enquanto precisa ser concedido para acessar o site). Você pode achar essa opção desnecessária, especialmente se quiser que seu cliente sempre faça login com a conta que você criou para ele.

Aqui usaremos a opção CSS para ocultar a seção que mostra o botão de login do Elementor.

Você precisará colar o seguinte código na área de texto CSS:

.lwe-button-container {
    display: none !important;
}

A partir deste momento, você deve ter uma página de login parecida com o que segue.

Como ocultar a barra de administração do Elementor

Acima da página de login, você pode ver uma barra de administração que mostra links para a marca Elementor e Elementor junto com o nome do seu site. Se você quiser ocultar isso, na mesma seção CSS, você pode adicionar o seguinte trecho de CSS:

.e-admin-bar {
    display:none!important;
}

Fazer isso irá definir a forma perto do topo, o que não é realmente bonito. O que queremos a seguir é centralizar o formulário para que, tanto no celular quanto no desktop, pareça mais atraente.

Para isso, precisaremos colar o seguinte código na seção CSS também.

body.login {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

Como adicionar um logotipo personalizado

Infelizmente para nós, as opções de logotipo não funcionam na página de login do Elementor Cloud . A razão disso é porque não é criado pelo WordPress, mas pela Elementor. Portanto, o plug-in não atualiza efetivamente esse logotipo.

Para alterar o logotipo, primeiro precisamos ocultar o ícone do WordPress e injetar nosso logotipo. O código a seguir ocultará o ícone padrão do WordPress.


#wp-logo i.dashicons {
    display:none !important;
}

Agora usando JavaScript, vamos injetar nosso logotipo. A primeira coisa a fazer aqui é carregar seu logotipo na mídia e copiar o URL para o seu logotipo.

Agora na mesma seção há um CSS, vamos injetar o seguinte código JavaScript.

// we'll create the image
let image = document.createElement( 'img' );
image.src = 'https://codewatchers.elementor.cloud/wp-content/uploads/2022/07/site-logo-1.png';

// we'll give some style but this is optional
image.style.cssText="background:#333;margin: 15px 0;";

// we'll add the image to the logo section
document.querySelector( '#wp-logo' ).appendChild( image );

// we'll disable the default logo height
document.querySelector( '#wp-logo' ).style.cssText="height:auto";

Ao final, você terá uma página de login parecida com esta:

Solução de problemas

Editar o plano de fundo pode não funcionar. Você precisará editar o plano de fundo usando um código CSS. Primeiro, como anteriormente, você precisará fazer upload do plano de fundo que deseja usar e adicioná-lo ao snippet CSS:

body.login {
    background-image: url(https://codewatchers.elementor.cloud/wp-content/plugins/loginpress/img/gallery/img-3.jpg) !important;
    position: relative;
}

Certifique-se de substituir o texto "ttps://codewatchers.elementor..../gallery/img-3.jpg" pelo seu plano de fundo real e salve suas configurações.

Esperamos que, ao final deste tutorial, você possa personalizar sua página de login do Elementor Cloud .

Divi WordPress Theme