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

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

Personalizar la página de inicio de sesión de WordPress es una excelente manera de mejorar la marca, la seguridad y la experiencia del usuario de tu sitio web.

Si tienes un sitio de membresía o una tienda en línea, los usuarios necesitarán una página para iniciar sesión. Por lo tanto, 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 te mostrará cómo personalizar la página de inicio de sesión de WordPress en pasos sencillos.

Tabla de Contenidos

¿Beneficios de personalizar tu página de inicio de sesión de WordPress?

Dependiendo de tu hosting, 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ñas.

Esto está bien si eres un pequeño bloguero o un sitio web de pequeñas empresas, ya que probablemente seas la única persona con acceso de inicio de sesión a wp-admin en el backend.

Pero si tu sitio permite a la gente registrarse e iniciar sesión en tu panel, puedes reemplazar 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 y logotipo de inicio de sesión personalizados porque reconocen tu marca. Mientras tanto, enviarlos 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 dejar tu sello fácilmente.

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

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

Aquí tienes algunos ejemplos de lo que puedes hacer:

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

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 imagen de fondo atractiva para crear una experiencia de inicio de sesión única.

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

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 varias formas de iniciar sesión.

Los usuarios también pueden registrarse para obtener una cuenta de TED introduciendo sus direcciones de correo electrónico.

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

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 el negocio 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 inicio de sesión es minimalista, contrastando la brillante imagen del sitio web con un fondo claro.

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

Teniendo esto en cuenta, exploremos los diferentes métodos para personalizar tu página de inicio de sesión en WordPress. Prometemos que no implicará ningún CSS o HTML personalizado complicado.

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

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

SeedProd es el mejor constructor de páginas de destino y constructor de temas de WordPress con funcionalidad de modo de cuenta atrás y 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 toneladas de temas receptivos de WordPress y plantillas de páginas de destino, puedes crear impresionantes:

• Páginas de "próximamente"
• Páginas de mantenimiento
• Páginas de ventas
• Páginas de registro de seminarios web
• Páginas de captura de leads
• Páginas de error 404
• Páginas de agradecimiento de WordPress
• Páginas de inicio de sesión personalizadas

Con el modo de página de inicio de sesión front-end integrado y el bloque de formulario de inicio de sesión, puedes transformar completamente 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 es que SeedProd es rápido, no tiene código innecesario y no ralentizará tu sitio web. A diferencia de otros plugins de creación de páginas de destino, su enfoque está en generar leads y resultados para tu negocio.

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

Sigue los pasos a continuación para estilizar la página de inicio de sesión predeterminada de WordPress con el personalizador de páginas de inicio de sesión personalizadas de SeedProd.

Paso 1: Instalar y Activar SeedProd

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

Si no estás familiarizado con eso, 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 área de administración 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 tu clave de licencia, haz clic en el botón Crear tu primera página.

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

Después de hacer clic para crear una nueva página en SeedProd, verás la siguiente descripción general:

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

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

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

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

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

Hacer clic en el botón Inicio de sesión muestra todas las plantillas de páginas de inicio de sesión que puedes usar. Simplemente pasa el ratón sobre la plantilla que más te guste y haz clic en el icono de la marca de verificación.

Para esta guía, elegiremos la Página de inicio de sesión 8.

Despu uevo00e9s de elegir tu plantilla de p uevo00e1gina de inicio de sesi uevo00f3n de WordPress, ver uevo00e1s una ventana emergente que te pedir uevo00e1 que introduzcas un nombre y una URL de p uevo00e1gina personalizada.

Haz clic en el bot uevo00f3n Guardar y empezar a editar p uevo00e1gina para lanzarla en el editor de arrastrar y soltar.

Paso 4: Personaliza tu p uevo00e1gina de inicio de sesi uevo00f3n de WordPress

El editor de p uevo00e1ginas de destino de arrastrar y soltar de SeedProd tiene 2 secciones distintas. Ver uevo00e1s los bloques y secciones de p uevo00e1gina que puedes usar a la izquierda. Y en el lado derecho hay una vista previa en vivo de tu p uevo00e1gina de destino.

Para a uevo00f1adir nuevo contenido a tu p uevo00e1gina de inicio de sesi uevo00f3n, arrastra un bloque desde la izquierda y su uevo00e9ltalo en tu p uevo00e1gina. Por ejemplo, puedes a uevo00f1adir un logotipo de inicio de sesi uevo00f3n a tu p uevo00e1gina con unos pocos clics.

Al hacer clic en cualquier bloque de tu p uevo00e1gina, puedes personalizar el contenido. Por ejemplo, al hacer clic en el formulario de inicio de sesi uevo00f3n se muestran los ajustes del bloque de inicio de sesi uevo00f3n de SeedProd en el panel izquierdo.

En esa uevo00e1rea, puedes personalizar las etiquetas de tu formulario de inicio de sesi uevo00f3n, mostrar y ocultar los campos de nombre y contrase uevo00f1a, y personalizar el texto del bot uevo00f3n y la casilla de verificaci uevo00f3n.

Puedes elegir entre varios estilos de formulario de inicio de sesi uevo00f3n diferentes al hacer clic en la pesta uevo00f1a Plantillas.

Esta es una forma f uevo00e1cil de personalizar tu formulario sin ning uevo00fan conocimiento t uevo00e9cnico. Simplemente elige tu estilo preferido, que se muestra instant uevo00e1neamente en tu formulario.

A uevo00f1adir contenido extra a tu p uevo00e1gina de inicio de sesi uevo00f3n es igual de f uevo00e1cil. Puedes a uevo00f1adir botones, columnas, im uevo00e1genes y otros elementos centrados en el dise uevo00f1o a cualquier bloque est uevo00e1ndar.

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

Con unos pocos clics, puedes incrustar:

• Sorteos
• Formularios de contacto
• Formularios de suscripción
• Temporizadores de cuenta atrás
• Barras de progreso
• Botones de perfil social
• Botones para compartir en redes sociales
• Productos de WooCommerce
• Y m ilde;s.

Esta es una forma fant uevo00e1stica de convertir tu p uevo00e1gina de inicio de sesi uevo00f3n en una m uevo00e1quina de generaci uevo00f3n de clientes potenciales. Por ejemplo, puedes mostrar a los usuarios un sorteo en tu p uevo00e1gina de inicio de sesi uevo00f3n para aumentar tus seguidores en redes sociales, incrementar el reconocimiento de marca e incluso impulsar tu lista de correo electr uevo00f3nico.

Adem uevo00e1s de los bloques individuales, SeedProd tambi uevo00e9n tiene Secciones de p uevo00e1ginas de destino. Estas son uevo00e1reas de la p uevo00e1gina que no necesitas construir manualmente, bloque a bloque. Puedes ver las diferentes secciones haciendo clic en la pesta uevo00f1a Secciones.

Desde all uevo00ed, puedes elegir una nueva:

• Encabezado
• uevo00c1rea de presentaci uevo00f3n
• Llamada a la acción
• Secci uevo00f3n de preguntas frecuentes
• uevo00c1rea de caracter uevo00edsticas
• Pie de página

Y a uevo00f1adirlas a tu p uevo00e1gina autom uevo00e1ticamente.

Querr uevo00e1s cambiar el fondo, las fuentes y los colores de tu p uevo00e1gina de inicio de sesi uevo00f3n. Lleva mucho tiempo hacer esto individualmente para cada bloque de tu p uevo00e1gina.

Afortunadamente, SeedProd te permite controlar estas configuraciones globalmente. Simplemente haz clic en el icono del engranaje en la esquina inferior derecha de tu pantalla para ver tu panel de Configuraci uevo00f3n Global.

En la pesta uevo00f1a Fuentes, puedes cambiar las fuentes y los pesos de tus encabezados y cuerpo. Simplemente elige un nuevo tama uevo00f1o de fuente o peso de los men uevo00fa desplegables.

Puedes explorar la biblioteca de combinaciones de fuentes de SeedProd haciendo clic en el bot uevo00f3n Temas de Fuentes.

Esto te mostrar uevo00e1 qu uevo00e9 fuentes quedan mejor juntas para que puedas hacer clic una vez y a uevo00f1adirlas a tu p uevo00e1gina.

Puedes seleccionar diferentes colores para enlaces globales, encabezados, texto, botones y fondos con la herramienta de selecci uevo00f3n de color.

O, puedes hacer clic en el bot uevo00f3n Paletas de Colores para elegir entre m uevo00e1s de 20 esquemas de color.

La sección Fondo proporciona una forma sencilla de personalizar el fondo de tu página de inicio de sesión. Puedes establecer un color de fondo sólido o un degradado, o cargar una imagen de fondo de pantalla completa.

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

Puedes hacer clic en el botón Usar tu propia imagen para seleccionar una nueva imagen de tu ordenador o de la biblioteca de medios de WordPress. Desde allí, 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 interruptor para cada configuración.

Recuerda hacer clic en Guardar para almacenar la configuración de tu personalización.

Paso 5: Configura los ajustes de tu página de inicio de sesión de WordPress

Con el diseño de tu página de inicio de sesión listo, es hora de configurar algunos ajustes necesarios.

Primero, conecta tu servicio de marketing por correo electrónico. Esto es útil si tienes un formulario de suscripción en tu página de inicio de sesión y deseas recopilar las direcciones de correo electrónico de los usuarios.

Para ello, haz clic en la pestaña Conectar en 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 servicios populares de boletines de noticias por correo electrónico, incluyendo:

• ActiveCampaign
• AWeber
• Campaign Monitor
• Constant Contact
• ConvertKit
• Drip
• GetResponse
• iContact
• Mad Mimi
• Sendy
• Mailchimp

No te preocupes si no tienes un proveedor de correo electrónico. Aún puedes recopilar 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 tu página de destino, sus datos se almacenan automáticamente en tu sitio web de WordPress. Puedes ver tus suscriptores yendo a SeedProd » Suscriptores desde tu panel de WordPress.

El siguiente paso es hacer clic en la pestaña Ajustes de página en la parte superior de la pantalla.

En esta página, puedes cambiar la siguiente configuración en tu página de destino:

• Detalles generales – Cambia el nombre y la URL de tu página, y configúrala como borrador o publicada.
• SEO – Edita el título SEO de tu página, la meta descripción, etc., a través de un plugin de SEO como All in One SEO.
• Analíticas – Consulta el rendimiento de tu página de inicio de sesión utilizando un plugin de analíticas como MonsterInsights.
• Scripts – Introduce scripts de seguimiento y retargeting como cookies o píxeles de seguimiento de Facebook.

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

Paso 6: Comprueba que tu página de inicio de sesión de WordPress es compatible con dispositivos móviles

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

Además de nuestras plantillas de páginas de destino adaptables a dispositivos móviles, SeedProd tiene una práctica opción de vista previa móvil. Esto te permitirá asegurarte de que tu página de inicio de sesión se vea genial en todos los dispositivos.

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

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

Paso 7: Publica tu 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 hora de publicarla. Haga clic en la flecha hacia abajo junto al botón verde Guardar y seleccione Publicar para hacerlo.

Después, verá una ventana emergente que le indicará que su página está en vivo.

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

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

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

Luego, en el encabezado Página de inicio de sesión, cambie el interruptor 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 con 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 de arrastrar y soltar para WordPress. Y lo que quizás no sepa es que puede usar su útil complemento de registro de usuarios para crear una página de inicio de sesión para su 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.

Por lo tanto, si no necesita un plugin de formularios dedicado a la creación de páginas de inicio de sesión, siga este tutorial paso a paso para crear un formulario de inicio de sesión personalizado de WordPress usando WPForms. La guía también le dirá cómo agregar un enlace de "contraseña perdida" a su formulario y mostrar su formulario de inicio de sesión usando un shortcode.

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

Si prefiere realizar cambios o agregar estilos personalizados a su página de inicio de sesión existente en lugar de crear una página de inicio de sesión completamente nueva o usar un plugin de inicio de sesión de WordPress, puede hacerlo. Este método implica agregar código al archivo functions.php de su tema o a un plugin específico del sitio.

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

Si es nuevo en esto, puede consultar esta guía sobre cómo agregar fragmentos de código en WordPress. Esto es para que no rompa su sitio web accidentalmente.

Ahora agregue el siguiente código al archivo functions.php de su 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 usando el código anterior. Esto agregará estilos personalizados 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 agregar 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, un widget de inicio de sesión en la barra lateral o un área de pie de página.

<?php
          wp_login_form();
?>

Este código solo mostrará la página de inicio de sesión general de WordPress en el lugar donde agregue el código.

Si desea agregar una página de formulario de inicio de sesión personalizado de WordPress con campos y opciones adicionales, puede usar 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 tiene que crear una página de inicio de sesión personalizada para su sitio web de WordPress. A veces, puede simplemente cambiar el logotipo y el enlace del logotipo en la página de inicio de sesión predeterminada.

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

Para ello, primero instala y activa el plugin Colorlib Login Customizer. Después de activarlo, navega a Apariencia » Personalizar desde tu panel de WordPress y haz clic en el nuevo elemento ‘Colorlib Login Customizer’.

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

Para reemplazar el logo predeterminado de WordPress por el tuyo, haz clic en la pestaña Opciones del logo.

Ahora puedes ocultar el logo de WordPress, subir tu logo personalizado y cambiar su URL y texto.

Adicionalmente, puedes cambiar el tamaño del texto y el ancho y alto de tu logo.

Si lo deseas, puedes incluso personalizar completamente la página de inicio de sesión predeterminada de WordPress con columnas, imágenes de fondo, colores personalizados y más. Asegúrate de publicar los cambios cuando estés satisfecho con el logo de tu nueva 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 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 puedes usar para modificar estos mensajes de error de inicio de sesión. Por ejemplo, podrías querer añadir más detalles a los mensajes predeterminados para mostrar cómo solucionarlo.

Sin embargo, si bien esto puede ayudar a los usuarios legítimos a acceder a sus cuentas, puede ayudar inadvertidamente a los hackers. 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, es posible que desees una notificación de error más generalizada. Para modificar estas, elige Mensajes de error en el menú Personalizador de WordPress:

Desde allí, puedes hacer los cambios que desees en el mensaje de error de inicio de sesión. Son compatibles con el formato HTML, lo que te permite incluir características estilísticas como negritas o cursivas en texto importante.

Probar tu página de inicio de sesión personalizada

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

• Carga de página: Comprueba si la página se carga correctamente sin fallos ni elementos rotos.
• Logo y diseño: Asegúrate de que el nuevo logo y diseño aparezcan como se espera.
• Prueba de funcionalidad: Intenta iniciar sesión con tu nombre de usuario y contraseña. Asegúrate de que el proceso sea fluido y exitoso.
• Mensajes de error: Introduce credenciales de inicio de sesión incorrectas y comprueba si los mensajes de error se muestran correctamente.
• Función Olvidé mi contraseña: Prueba la función "Olvidé mi contraseña" para asegurarte de que envía correctamente un correo electrónico con el enlace para restablecer la contraseña.
• URL personalizada: Si has establecido una URL personalizada para la página de inicio de sesión, verifica que redirige correctamente a la nueva página de inicio de sesión.
• Adaptabilidad: Comprueba el aspecto y la sensación de la página en diferentes dispositivos (móvil, tableta y escritorio) para asegurarte de que es adaptable y fácil de usar.

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

¡Eso es todo!

Ahora sabes cómo crear una página de inicio de sesión personalizada de WordPress. Puedes mantener tu sitio de WordPress con un aspecto profesional y ofrecer una excelente experiencia de usuario a tus clientes.

Prueba SeedProd hoy mismo para personalizar fácilmente tu página de inicio de sesión de WordPress. Con SeedProd, puedes cambiar los colores, las fuentes, el logotipo y mucho más, todo sin escribir código.

¡Gracias por leer! Nos encantaría conocer tu opinión, así que únete a la conversación en YouTube, X y Facebook para obtener más consejos y contenido útil para hacer crecer tu negocio.