Cómo personalizar la página de inicio de sesión de WordPress (5 formas rápidas) 

¿Quieres hacer una página de inicio de sesión de WordPress personalizada?

Personalizar la página de inicio de sesión de WordPress es una forma estupenda de mejorar la imagen de marca, la seguridad y la experiencia de usuario de su sitio web.

Si gestionas un sitio de socios o una tienda online, los usuarios necesitarán una página para iniciar sesión. Así que personalizar el área de inicio de sesión predeterminada de WordPress te ayudará a reflejar tu marca y ofrecer una mejor experiencia de usuario.

Este artículo le mostrará cómo personalizar la página de inicio de sesión de WordPress en sencillos pasos.

Índice

Ventajas de personalizar la página de inicio de sesión de WordPress

Dependiendo de su alojamiento, la página de inicio de sesión predeterminada de WordPress muestra el logotipo de WordPress. También indica campos de formulario para que los usuarios introduzcan sus nombres de usuario y contraseña.

Esto está bien si usted es un pequeño blogger o sitio web de pequeñas empresas, ya que es probable que la única persona con wp-admin acceso de inicio de sesión para el backend.

Pero si su sitio permite que la gente se registre e inicie sesión en su panel de control , puede sustituir la página de inicio de sesión predeterminada de WordPress y ofrecer una experiencia mejor, más profesional y fácil de usar.

Los usuarios se sienten más cómodos con un diseño de inicio de sesión y un logotipo personalizados porque reconocen su marca. En cambio, enviarles a una pantalla de inicio de sesión que no se parece en nada a tu sitio web podría parecer sospechoso.

Además, la pantalla de inicio de sesión predeterminada de WordPress no tiene nada más que los campos de entrada del formulario de inicio de sesión. Eso significa que no puedes poner fácilmente tu sello en ella.

Ejemplos de diseño de páginas de inicio de sesión personalizadas en WordPress

Los propietarios de sitios web pueden personalizar la página de inicio de sesión de WordPress de muchas maneras. Puedes añadir diferentes estilos e imágenes, enlazar con tu página de inicio, incluir llamadas a la acción para vender otros productos e incluso añadir iconos de perfiles de redes sociales.

Aquí tienes algunos ejemplos de lo que puedes hacer:

MonsterInsights WordPress Personalización de la página de inicio de sesión

MonsterInsights utiliza un diseño de 2 columnas para su página de inicio de sesión. A la izquierda está el formulario de inicio de sesión, y a la derecha hay una CTA para su producto hermano.

Este ejemplo de página de inicio de sesión incluye una atractiva imagen de fondo para crear una experiencia de inicio de sesión única.

TED Página de inicio de sesión personalizada de WordPress

La página de inicio de sesión de TED es otro ejemplo con un diseño de 2 columnas. A la izquierda hay una imagen y un titular atractivos, y la columna de la derecha ofrece múltiples formas de iniciar sesión.

Los usuarios también pueden crear una cuenta TED introduciendo su dirección de correo electrónico.

Church Motion Graphics Página de inicio de sesión personalizada

Esta página de inicio de sesión capta la atención al instante con su colorido fondo. La imagen de fondo refleja lo que hace la empresa y da a los usuarios una idea de lo que pueden esperar.

La cabecera, el pie de página y los menús de navegación son los mismos en todo el sitio. Sin embargo, el formulario de acceso es minimalista y contrasta con la brillante imagen del sitio web y el fondo claro.

Aquí tiene algunos ejemplos más de páginas de inicio de sesión para inspirarse.

Con esto en mente, vamos a explorar los diferentes métodos para personalizar su página de inicio de sesión en WordPress. Prometemos que no implicará ningún CSS o HTML personalizado complicado.

Le guiaremos a través de la creación de una página de inicio de sesión personalizada de WordPress utilizando los mejores plugins de WordPress para el trabajo, SeedProd, y WPForms.

Cómo personalizar la página de inicio de sesión de WordPress usando SeedProd

SeedProd es el mejor constructor de páginas de aterrizaje de WordPress y constructor de temas con funcionalidad de "próximamente" y modo de mantenimiento. Al igual que Elementor, te permite crear cualquier tipo de página de destino o tema en WordPress con su constructor de arrastrar y soltar fácil de usar para principiantes.

Con montones de temas de WordPress y plantillas de páginas de aterrizaje con capacidad de respuesta, puedes hacer cosas impresionantes:

• Próximamente
• Páginas de mantenimiento
• Páginas de ventas
• Páginas de inscripción al seminario
• Páginas de captación de clientes potenciales
• Páginas de error 404
• Páginas de agradecimiento en WordPress
• Páginas de inicio de sesión personalizadas

Con el modo de página de inicio de sesión y el bloque de formulario de inicio de sesión incorporados, puedes transformar por completo tu página de inicio de sesión de WordPress. Los usuarios pueden iniciar y cerrar sesión rápidamente, y funciona con cualquier tema de WordPress.

Lo mejor de todo, SeedProd es rápido, libre de hinchazón, y no ralentizará su sitio web. A diferencia de otros plugins constructores de páginas de aterrizaje, su objetivo es generar clientes potenciales y resultados para su negocio.

Nota: Existe una versión gratuita de SeedProd en WordPress.org. Sin embargo, usaremos SeedProd Pro por las funciones avanzadas de personalización y los modos de página de inicio de sesión.

Siga los pasos que se indican a continuación para personalizar la página de inicio de sesión predeterminada de WordPress con el personalizador de páginas de inicio de sesión de SeedProd.

Paso 1: Instalar y activar SeedProd

El primer paso es descargar el plugin SeedProd e instalarlo en su sitio web WordPress.

Si no estás familiarizado con ello, consulta esta guía paso a paso para instalar un plugin de WordPress.

Después de instalar y activar el plugin, verás la página de bienvenida de SeedProd en tu panel de control de WordPress. Aquí es donde puedes introducir los detalles de tu licencia y ver el vídeo de inicio rápido.

Después de introducir su clave de licencia, haga clic en el botón Crear su primera página.

Paso 2: Editar la página de inicio de sesión de WordPress

Después de hacer clic para crear una nueva página en SeedProd, verá el siguiente resumen:

Estos son los diferentes modos de página que puede habilitar en SeedProd. Para este tutorial, necesitamos el modo de página de inicio de sesión.

Así que sigue adelante y haz clic en Editar página bajo el encabezado Página de inicio de sesión.

Paso 3: Elegir una plantilla personalizada de página de inicio de sesión de WordPress

Verás la biblioteca de plantillas de páginas de aterrizaje de SeedProd en la siguiente pantalla. Cada plantilla es multipropósito, y puedes personalizarlas en el constructor visual de páginas.

Incluye plantillas de mensajes de error 404, plantillas de páginas de ventas, próximas páginas, etc.

Al hacer clic en el botón Inicio de sesión se muestran todas las plantillas de página de inicio de sesión que puede utilizar. Pasa el ratón por encima de la plantilla que más te guste y haz clic en el icono de la marca.

Para esta guía, elegiremos Login Page 8.

Después de elegir su plantilla de página de inicio de sesión de WordPress, verá una ventana emergente que le pedirá que introduzca un nombre de página personalizado y una URL.

Haga clic en el botón Guardar y empezar a editar la página para iniciarla en el editor de arrastrar y soltar.

Paso 4: Personalizar la página de inicio de sesión de WordPress

El editor de páginas de aterrizaje de arrastrar y soltar de SeedProd tiene 2 secciones distintas. A la izquierda verás los bloques y secciones de la página que puedes utilizar. Y en el lado derecho hay una vista previa en vivo de su página de destino.

Para añadir nuevo contenido a tu página de inicio de sesión, arrastra un bloque de la izquierda y suéltalo en tu página. Por ejemplo, puedes añadir un logotipo de inicio de sesión a tu página con unos pocos clics.

Si hace clic en cualquier bloque de su página, podrá personalizar el contenido. Por ejemplo, al hacer clic en el formulario de inicio de sesión se muestra la configuración del bloque Inicio de sesión de SeedProd en el panel izquierdo.

En esa área, puede personalizar las etiquetas del formulario de inicio de sesión, mostrar y ocultar los campos de nombre y contraseña, y personalizar el texto del botón y la casilla de verificación.

Puede elegir entre varios estilos de formulario de inicio de sesión al hacer clic en la pestaña Plantillas.

Esta es una manera fácil de personalizar su formulario sin ningún conocimiento técnico. Solo tienes que elegir el estilo que prefieras, que se mostrará al instante en tu formulario.

Añadir contenido extra a tu página de inicio de sesión es igual de fácil. Puedes añadir botones, columnas, imágenes y otros elementos centrados en el diseño a cualquier bloque estándar.

Por otro lado, los Bloques Avanzados ayudan a generar clientes potenciales para su negocio.

Con unos pocos clics, puedes incrustar:

• Regalos
• Formularios de contacto
• Formularios Optin
• Temporizadores de cuenta atrás
• Barras de progreso
• Botones de perfil social
• Botones para compartir en redes sociales
• Productos WooCommerce
• Y mucho más.

Esta es una forma fantástica de convertir tu página de inicio de sesión en una máquina de generación de leads. Por ejemplo, puedes mostrar a los usuarios un sorteo en tu página de inicio de sesión para aumentar tus seguidores en redes sociales, incrementar la notoriedad de tu marca e incluso aumentar tu lista de correo electrónico.

Aparte de los bloques individuales, SeedProd también tiene Secciones de página de destino. Estas son áreas de la página que no necesita construir manualmente, bloque por bloque. Puede ver las diferentes secciones haciendo clic en la pestaña Secciones.

A partir de ahí, puedes elegir una nueva:

• Cabecera
• Área del héroe
• Llamamiento a la acción
• Sección FAQ
• Características
• Pie de página

Y añádalos a su página automáticamente.

Querrás cambiar el fondo, las fuentes y los colores de tu página de inicio de sesión. Lleva mucho tiempo hacer esto individualmente para cada bloque de tu página.

Afortunadamente SeedProd le permite controlar estos ajustes globalmente. Simplemente haga clic en el icono de engranaje en la esquina inferior derecha de la pantalla para ver el panel de configuración global.

En la pestaña Fuentes, puedes cambiar las fuentes y pesos de la cabecera y el cuerpo. Solo tienes que elegir un nuevo tamaño o grosor de fuente en los menús desplegables.

Puede explorar la biblioteca de combinaciones de fuentes de SeedProd haciendo clic en el botón Temas de fuentes.

Esto te mostrará qué fuentes quedan mejor juntas para que puedas hacer clic una vez y añadirlas a tu página.

Puede seleccionar diferentes colores para enlaces globales, encabezados, texto, botones y fondos con la herramienta de selección de colores.

También puede hacer clic en el botón Paletas de colores para elegir entre más de 20 combinaciones de colores.

La sección Fondo ofrece una forma sencilla de personalizar el fondo de la página de inicio de sesión. Puede establecer un color de fondo sólido o degradado o cargar una imagen de fondo de ancho completo.

Haz clic en el icono de la papelera en el panel de configuración del fondo para eliminar la imagen existente.

Puede hacer clic en el botón Usar su propia imagen para seleccionar una nueva imagen de su ordenador o de la biblioteca multimedia de WordPress. A partir de ahí, puedes ajustar el tamaño del fondo, la repetición del fondo y otras opciones.

También puedes añadir un fondo de vídeo o una presentación de diapositivas de fondo seleccionando el conmutador de cada ajuste.

No olvide hacer clic en Guardar para almacenar los ajustes de personalización.

Paso 5: Configure su página de inicio de sesión de WordPress

Con el diseño de su página de inicio de sesión en su lugar, es el momento de configurar algunos ajustes necesarios.

En primer lugar, conecte su servicio de marketing por correo electrónico. Esto es útil si tiene un formulario de suscripción en su página de inicio de sesión y desea recopilar las direcciones de correo electrónico de los usuarios.

Para ello, haz clic en la pestaña Conectar de la parte superior de la pantalla, elige tu servicio de correo electrónico preferido y sigue los pasos para vincular tu cuenta.

SeedProd se integra con los servicios de boletines por correo electrónico más conocidos, como:

• ActiveCampaign
• AWeber
• Monitor de campaña
• Contacto constante
• ConvertKit
• Goteo
• GetResponse
• iContact
• Mad Mimi
• Sendy
• Mailchimp

No hay necesidad de preocuparse si usted no tiene un proveedor de correo electrónico. Puede seguir recopilando direcciones de correo electrónico con la función de gestión de suscriptores de SeedProd.

Cada vez que alguien se suscribe a través de su página de destino, sus datos se almacenan automáticamente en su sitio web de WordPress. Puedes ver tus suscriptores dirigiéndote a SeedProd " Suscriptores desde tu panel de WordPress.

El siguiente paso es hacer clic en la pestaña Configuración de la página, en la parte superior de la pantalla.

En esta página, puede cambiar los siguientes ajustes en su página de destino:

• Detalles generales - Cambia el nombre y la URL de tu página, y establécela como borrador o publicada.
• SEO - Edite el título SEO de su página, meta descripción, etc., a través de un plugin SEO como All in One SEO.
• Analítica - Vea el rendimiento de su página de inicio de sesión utilizando un plugin de analítica como MonsterInsights.
• Scripts - Introduzca scripts de seguimiento y retargeting como cookies o píxeles de seguimiento de Facebook.

Recuerde hacer clic en el botón Guardar antes de pasar al siguiente paso.

Paso 6: Compruebe que su página de inicio de sesión es compatible con dispositivos móviles

Cualquier página web que publiques debe ser responsive para móviles. Si no lo es, a los usuarios móviles les resultará más difícil navegar y utilizar tu sitio web.

Además de nuestras plantillas de páginas de aterrizaje móviles, SeedProd tiene una práctica opción de vista previa móvil. Esto le permitirá asegurarse de que su página de inicio de sesión se ve muy bien en todos los dispositivos.

Para ver la vista previa móvil de su página de inicio de sesión de WordPress, haga clic en el icono de vista previa móvil situado en la parte inferior de la pantalla.

Esto muestra su página de inicio de sesión como la verían los usuarios móviles. Con la vista de escritorio, puede editarla como lo haría, y SeedProd guardará los cambios en ambas vistas.

Paso 7: Publique su página de inicio de sesión personalizada de WordPress

Ahora que ha creado su página de inicio de sesión personalizada de WordPress y la ha comprobado en dispositivos móviles, es el momento de activarla. Para ello, haz clic en la flecha hacia abajo situada junto al botón verde Guardar y selecciona Publicar.

A continuación, verás una ventana emergente que te informa de que tu página está activa.

Haz clic en el botón Ver página en directo para ver cómo queda.

Lo último que debe hacer es activar el modo de página de inicio de sesión en el área de administración de WordPress.

Haga clic en el icono "X" para salir del constructor de páginas y ver el panel de control de su página de destino SeedProd.

A continuación, bajo el epígrafe Página de inicio de sesión, cambie el conmutador de inactivo a Activo.

¡Enhorabuena! Ahora cualquiera que visite su página de inicio de sesión de WordPress verá su diseño personalizado.

Personalizar la página de inicio de sesión de WordPress usando WPForms

El segundo método para personalizar la pantalla de inicio de sesión de WordPress que cubriremos hoy implica el uso del popular plugin WPForms.

WPForms es el mejor constructor de formularios drag-and-drop para WordPress. Y lo que tal vez no sepas es que puedes usar su práctico complemento Formulario de registro de usuario para crear una página de inicio de sesión para tu sitio web.

Con más de 3 millones de propietarios de sitios web que utilizan WPForms para crear formularios y encuestas más inteligentes, puede estar seguro de que está en buenas manos.

Así que si no necesitas un plugin de formularios dedicado a crear páginas de inicio de sesión, sigue este tutorial paso a paso para crear un formulario de inicio de sesión personalizado en WordPress usando WPForms. La guía también te dirá cómo añadir un enlace de contraseña perdida a tu formulario y mostrar tu formulario de inicio de sesión usando un shortcode.

Cómo personalizar manualmente la página de inicio de sesión de WordPress

Si prefieres hacer cambios o añadir un estilo personalizado a tu página de inicio de sesión existente en lugar de crear una nueva página de inicio de sesión o utilizar un plugin de inicio de sesión de WordPress, puedes hacerlo. Este método consiste en añadir código al archivo functions.php de tu tema o en un plugin específico del sitio.

Es más difícil que utilizar un constructor de páginas o el personalizador de WordPress, por lo que puede que no se adapte a tus necesidades.

Si eres nuevo en esto, puedes consultar esta guía sobre cómo añadir fragmentos de código en WordPress. Esto es para que no rompas tu sitio web accidentalmente.

Ahora añade el siguiente código al archivo functions.php de tu tema:

//Custom login page
function clp_login_head() {
         
    echo '<style>'; //Begin custom styles
    echo '.login #nav a, .login #backtoblog a { color: # !important; }'; //Login page link color
    echo '.login h1 a { background:url("' . get_bloginfo('stylesheet_directory') . '/images/IMAGE GOES HERE"); width: px; height: px; }'; //Login page logo
    echo '.login .button-primary { background:#; border-color:#; }'; //Login page button color
    echo '</style>'; //End custom styles
         
}
add_action('login_head', 'clp_login_head');

Puede cambiar el CSS y la URL de la imagen utilizando el código anterior. Esto añadirá un estilo personalizado a su página de inicio de sesión de WordPress.

Muestre su formulario de inicio de sesión de WordPress en cualquier lugar sin un plugin

Puede añadir este código al archivo de plantilla de su tema si desea mostrar su formulario de inicio de sesión de WordPress en cualquier página sin un plugin de inicio de sesión de WordPress, widget de inicio de sesión de barra lateral o área de pie de página.

<?php
          wp_login_form();
?>

Este código sólo mostrará la página de inicio de sesión general de WordPress en el lugar donde añada el código.

Si desea añadir una página de formulario personalizada de WordPress con campos y opciones adicionales, puede utilizar este código:

<?php $args = array(
        'echo' => true,
        'redirect' => 'http://wpsnipp.com',
        'form_id' => 'loginform',
        'label_username' => __( 'Username' ),
        'label_password' => __( 'Password' ),
        'label_remember' => __( 'Remember Me' ),
        'label_log_in' => __( 'Log In' ),
        'id_username' => 'user_login',
        'id_password' => 'user_pass',
        'id_remember' => 'rememberme',
        'id_submit' => 'wp-submit',
        'remember' => true,
        'value_username' => NULL,
        'value_remember' => false );
wp_login_form($args);
?>

Personalizar el logotipo y la URL de inicio de sesión de WordPress

No siempre es necesario crear una página de inicio de sesión personalizada para su sitio web WordPress. A veces, basta con cambiar el logotipo y el enlace al logotipo en la página de inicio de sesión predeterminada.

Si desea cambiar el logotipo de la pantalla de inicio de sesión por el suyo propio, puede utilizar fácilmente un plugin para WordPress.

Para ello, primero instale y active el plugin Colorlib Login Customizer. Después de activarlo, vaya a Apariencia " Personalizar desde el administrador de WordPress y haga clic en el nuevo elemento 'Colorlib Login Customizer'.

El personalizador cargará la pantalla de inicio de sesión predeterminada de WordPress con los ajustes de personalización a la izquierda y una vista previa en vivo a la derecha.

Para sustituir el logotipo predeterminado de WordPress por el suyo, haga clic en la pestaña Opciones de logotipo.

Ahora puede ocultar el logotipo de WordPress, cargar su logotipo personalizado y cambiar su URL y texto.

Además, puede cambiar el tamaño del texto y la anchura y altura de su logotipo.

Si lo desea, puede incluso personalizar completamente la página de inicio de sesión predeterminada de WordPress con columnas, imágenes de fondo, colores personalizados y mucho más. Asegúrate de publicar los cambios cuando estés satisfecho con el nuevo logotipo de tu página de inicio de sesión.

Personalizar el mensaje de error de la página de inicio de sesión de WordPress

Si un usuario introduce un nombre de usuario o una contraseña incorrectos en WordPress, verá notificaciones de error predeterminadas. Estos mensajes, como "Nombre de usuario no válido" o "La dirección de correo electrónico no es correcta", explican claramente cuál es el problema.

LoginPress es una herramienta que puede utilizar para modificar estos mensajes de error de inicio de sesión. Por ejemplo, es posible que desee añadir más detalles a los mensajes predeterminados para mostrar cómo solucionarlo.

Sin embargo, aunque esto puede ayudar a los usuarios auténticos a acceder a sus cuentas, puede ayudar inadvertidamente a los piratas informáticos. A menudo intentan infiltrarse en sitios web utilizando combinaciones de nombres de usuario y contraseñas populares. Las notificaciones de error predeterminadas pueden ayudar a los hackers a saber cuándo han introducido el nombre de usuario o la contraseña correctos.

Como medida de protección, puede que desee una notificación de error más generalizada. Para modificarlas, seleccione Mensajes de error en el menú Personalizador de WordPress:

A partir de ahí, puede realizar los cambios que desee en el mensaje de error de inicio de sesión. Son compatibles con el formato HTML, lo que le permite incluir características estilísticas como negrita o cursiva en texto significativo.

Prueba de la página de inicio de sesión personalizada

La prueba es un paso esencial en el proceso de personalización de la página de inicio de sesión de WordPress. He aquí una breve guía sobre cómo realizar la prueba:

• Carga de la página: Compruebe si la página se carga correctamente, sin fallos ni elementos rotos.
• Logotipo y diseño: Asegúrese de que el nuevo logotipo y diseño aparecen como se espera.
• Prueba de funcionalidad: Intente iniciar sesión con su nombre de usuario y contraseña. Asegúrese de que el proceso se realiza correctamente y sin problemas.
• Mensajes de error: Introduzca credenciales de inicio de sesión incorrectas y compruebe si los mensajes de error se muestran correctamente.
• Olvidé mi contraseña: Pruebe la función "Olvidé la contraseña" para asegurarse de que envía correctamente un correo electrónico con el enlace para restablecer la contraseña.
• URL personalizada: Si ha establecido una URL personalizada para la página de inicio de sesión, compruebe que redirige correctamente a la nueva página de inicio de sesión.
• Capacidad de respuesta: Comprueba el aspecto de la página en diferentes dispositivos (móvil, tableta y ordenador de sobremesa) para asegurarte de que es responsiva y fácil de usar.

Personalizar la página de inicio de sesión de WordPress Preguntas frecuentes

¡Eso es!

Ahora ya sabe cómo crear una página de inicio de sesión personalizada en WordPress. Podrás mantener el aspecto profesional de tu sitio WordPress y ofrecer una excelente experiencia de usuario a tus clientes.

Pruebe SeedProd hoy para personalizar fácilmente su página de inicio de sesión de WordPress. Con SeedProd, puede cambiar los colores, fuentes, logotipo, y más, todo sin escribir ningún código.

Gracias por leernos. Nos encantaría conocer tu opinión, así que no dudes en dejarnos un comentario con tus preguntas y comentarios.

También puede seguirnos en YouTube, X (antes Twitter) y Facebook para obtener más contenidos útiles para hacer crecer su negocio.