Cómo crear una página de inicio de sesión personalizada de WordPress utilizando el complemento de inicio de sesión personalizado de Caldera

Cómo crear una página de inicio de sesión personalizada de WordPress utilizando el complemento de inicio de sesión personalizado de Caldera

La página de inicio de sesión personalizada de WordPress no es un concepto nuevo, pero los complementos han ido y venido, allanando el camino para algunas de las opciones de página de inicio de sesión personalizadas con mejor diseño. Aun así, quiero mostrarle cómo crear su propia página de inicio de sesión personalizada de WordPress con la ayuda del complemento de inicio de sesión personalizado de Caldera.

Este es un complemento premium, pero en mi comparación, obtiene algunas herramientas maravillosamente intuitivas para cargar rápidamente fotos de alta resolución y cambiar casi todas las opciones de color en la página de inicio de sesión, lo que a menudo no es posible con los complementos de página de inicio de sesión gratuitos. Primero, vaya al sitio web del complemento de inicio de sesión personalizado de Caldrea aquí y descargue la herramienta. Siga leyendo para aprender cómo implementar la página de inicio de sesión personalizada.

Cómo crear una página de inicio de sesión personalizada de WordPress

Paso 1: Instale y active el complemento de inicio de sesión personalizado de Caldera

En su panel de WordPress, vaya a Complementos> Agregar nuevo y navegue hasta el botón Cargar complemento. La siguiente página le brinda un área donde puede hacer clic en el botón Elegir archivo, que abrirá una página donde puede encontrar el archivo del complemento en su computadora. Busque el archivo donde lo coloque en su computadora y selecciónelo para traerlo a su tablero.

Este es un archivo ZIP, por lo que no es necesario descomprimir ni extraer ninguno de los archivos del archivo ZIP para cargarlo. Haga clic en el botón Instalar ahora para continuar.

Se abrirá una nueva página donde puede hacer clic en el enlace Activar complemento para que el complemento funcione en su sitio web.

Paso 2: encontrar la configuración para comenzar su diseño

El siguiente paso es averiguar dónde cambiar la configuración y cómo deberían verse sus formularios de inicio de sesión personalizados. Desplácese sobre el botón Apariencia en el lado izquierdo de su panel de WordPress. Seleccione la opción Inicio de sesión personalizado para continuar. Siempre que haya comprado el complemento en el sitio web de inicio de sesión personalizado de Caldera, no es necesario registrar el producto en su panel de WordPress.

Paso 3: personalice la configuración de la ventana principal de la página de inicio de sesión

La primera pestaña para verificar se titula Panel, donde puede comenzar cambiando el título y el logotipo de la página. Para este tutorial, estoy administrando la página de inicio de sesión para mi propio portafolio personal, pero puedo ver que los desarrolladores la usan para todos sus clientes. Por lo tanto, cambiaría el título de la página por el nombre de la empresa. Haga clic en el enlace Cargar junto al campo Logotipo y seleccione el logotipo personalizado que desea mostrar. Esto funciona muy bien para la marca e incluso para rastrear a sus propios clientes cuando inicia sesión en sus backends. No dude en elegir una imagen en miniatura o en tamaño completo para el logotipo.

login_panel_options

Desplácese hacia abajo para cambiar el color de fondo del logotipo, el relleno del logotipo y el enlace del logotipo / texto. El color de fondo simplemente rodea el logotipo, el relleno cambia la extensión del logotipo y el vínculo del logotipo / texto le permite insertar un vínculo si desea que las personas sean redirigidas cuando hagan clic en el logotipo. Esto se puede hacer hacia el front-end del sitio o sus páginas de soporte si está ejecutando una empresa de diseño de sitios web.

first_login_customization_run

A medida que nos desplazamos un poco hacia abajo en la página del panel, notará algunas opciones para agregar aún más fotos al formulario de inicio de sesión. El fondo de pantalla del panel ocupa toda el área detrás de los campos de su nombre de usuario y contraseña y la completa con una foto. Experimente con diferentes fotos, pero encontré que cuanto menos detallada es la imagen, mejor, ya que está oscurecida por el texto y los cuadros, por lo que una imagen de personas no se ve bien.

fotos

También puede cambiar el borde, el separador y los colores del texto para que sea más fácil distinguir entre la imagen del panel y la imagen de fondo. Descubrí que se veía bien si dejaba la configuración predeterminada, pero veo muchas organizaciones jugando con los colores para que se vea bien.

La característica final y más emocionante para cargar imágenes es para el fondo. He trabajado con algunas otras herramientas de personalización de la página de inicio de sesión y algunas de ellas tuvieron problemas porque estiraron demasiado la imagen o forzaron la imagen a un efecto de mosaico, según el tamaño y la resolución de la imagen de fondo.

change_background_images

El complemento de inicio de sesión personalizado de Caldera funcionó bien con casi todas las imágenes que intenté cargar como fondo. Tome una foto más grande de su computadora y cárguela en el tablero. Puede cambiar el tamaño de las imágenes en su página de inicio de sesión. Para el logotipo, me quedaría con el tamaño de la miniatura. La imagen de fondo del panel funciona mejor para un tamaño mediano, y la imagen de fondo de la página se ve bien con una configuración grande o normal, dependiendo del tamaño de la imagen original.

Siéntase libre de ver cómo funciona la configuración de fondo en mosaico para usted, pero en mi opinión, esto siempre deja una página desordenada y distraída. Una vez que haya subido sus fotos y cambiado la configuración de color, haga clic en el botón Guardar cambios para continuar.

Desafortunadamente, el complemento no ofrece un botón de vista previa en el panel de control, por lo que deberá cerrar la sesión de su panel de WordPress cada vez que desee hacer un cambio y ver cómo se ve. Así que cierre sesión en su cuenta para ver qué sucedió en la página de inicio de sesión. Como puede ver, realmente depende de las imágenes que cargue en la página de inicio de sesión, ya que muchas fotos chocan. Sin embargo, una simple optimización de los bordes o un cambio de foto permite un diseño más agradable.

Producto final

Paso 4: cambiar botones y campos

Haga clic en la pestaña Botones y campos para ver una lista larga de configuraciones de color. Estos van desde el fondo del botón de inicio de sesión hasta el color del marco de entrada.

botones_y_campos

Nuevamente, todo depende del tipo de marca que elija. Así que elige según tus preferencias de diseño. Todo lo que tiene que hacer es hacer clic en el botón Seleccionar color y elegir entre el esquema de color proporcionado. El complemento también ofrece un campo para insertar un código de color predefinido.

Elige color

Una vez que haya creado los colores perfectos para sus botones y campos, haga clic en el botón Guardar cambios y cierre la sesión de su panel de WordPress para ver los cambios.

Paso 5: configurar sus notas

La pestaña Notas es bastante similar a la opción Botones y campos, ya que es solo una lista de configuraciones de color en las que puede hacer clic y cambiar. La nota de información es para información general, mientras que la ventana emergente con mensajes de error aparece si no inicia sesión con las credenciales correctas. Una vez más, los ajustes preestablecidos suelen ser adecuados, pero puede generar sus propios colores.

Notices_errors_and_footer

La última configuración de esta página es el pie de página. Si es necesario, ingrese una instrucción en el campo Texto de pie de página. Puede usar esto para obtener información de derechos de autor o incluso para proporcionar datos de contacto si dirige un negocio de diseño de sitios web y desea que sus clientes siempre recuerden cómo ponerse en contacto con usted. Una vez que haya elegido el color del texto del pie de página, haga clic en el botón Guardar cambios para continuar.

Paso 6: Importación y exportación de contenido desde el inicio de sesión personalizado de Caldera

El complemento de inicio de sesión personalizado de Caldera tiene un enlace adicional en la parte superior de la página de configuración para importar o exportar contenido. Esta práctica función es en realidad uno de los aspectos más destacados, ya que supongo que muchos diseñadores de sitios web querrán crear páginas de inicio de sesión similares para sus clientes.

Exportar e importar

En lugar de cambiar la configuración de cada sitio, exporte Tome el diseño de su primer sitio web e importe el archivo a sus otros paneles de clientes. Desafortunadamente, la función de exportación no incluye ninguno de los archivos de imagen de los que hablamos en los pasos anteriores, pero al menos puede transferir las opciones de color.

Una descripción general rápida del complemento de inicio de sesión personalizado de Caldera

Disfruto de una página de inicio de sesión personalizada bien diseñada porque rompe la monotonía del antiguo logotipo de WordPress y el fondo simple que ves todos los días. Dejando a un lado las preferencias personales, el complemento Caldera Custom Login hace un gran trabajo para los diseñadores de sitios web porque la marca es una gran parte de la generación de negocios y facilita la vida de los clientes.

El bueno

Caldera pugin es fácil de encontrar en su panel de WordPress, y la página de configuración solo muestra tres pestañas adicionales para una navegación rápida. Incluso el diseñador menos informado del mundo encontraría este complemento bastante rudimentario. Todas las funciones de ajuste de color e imagen están incluidas como se esperaba, y las fotos no se estiran ni se ven raras. Sin mencionar que puede ayudar a distinguir entre fotos enmarcadas y esquemas de color más oscuros o más claros.

El malo

Todavía tengo que averiguar por qué el texto de mi pie de página no aparece en mis páginas de inicio de sesión. Esta es una buena opción de marca o mensajería para las empresas de diseño, pero no parece funcionar para mí. La función de exportación deja las fotos fuera de la ecuación, lo que aumenta la cantidad de trabajo involucrado en el envío de un diseño de página de inicio de sesión. Sin embargo, esto es algo que no puede evitar ya que otro sitio requiere una carga de fotos completamente nueva.

Mi último comentario es el hecho de que debe cerrar la sesión de su panel de control para obtener una vista previa de los cambios. Una ventana de vista previa en el tablero sería una buena adición, ya que se vuelve tedioso cerrar la sesión y volver a iniciarla todo el tiempo.

La línea de fondo

El complemento de inicio de sesión personalizado de Caldera hace bien su trabajo y se niega a recibir más, y eso es una gran noticia. ¿Por qué? Dado que es un complemento de inicio de sesión simple, los usuarios no deberían sentirse molestos por una docena de páginas de configuración o demasiadas opciones con las que perder el tiempo.

Los diseños de la página de inicio de sesión se ven elegantes y cómodos en la página. Las empresas de diseño web se benefician del complemento implementándolo en todos los sitios de los clientes. Esto ayuda a sus clientes a saber que están en la página de inicio de sesión correcta. Sin mencionar que las empresas de diseño de sitios web pueden incluso utilizar algunas de sus propias marcas con fines de marketing.

CalderaWP es una empresa de complementos creíble. Entonces, si alguna vez tiene alguna pregunta o problema con el complemento de inicio de sesión personalizado de Caldera, puede enviarles un mensaje o leer la página de documentación.

También puede consultar algunas de las otras ofertas de CalderaWP, incluidos Caldera Forms, el complemento Users for Caldera Forms y Caldera Clarity (un creador de diseño visual) para FacetWP (cupón de descuento del 15%).

Si tiene alguna pregunta sobre la creación de una página de inicio de sesión personalizada de WordPress utilizando el complemento de inicio de sesión personalizado de Caldera, envíenos una línea en la sección de comentarios a continuación.

¡Si te ha gustado no dudes en compartirlo!

Deja un comentario

Esta web utiliza cookies propias y de terceros para su correcto funcionamiento y para fines analíticos y para mostrarte publicidad relacionada con sus preferencias en base a un perfil elaborado a partir de tus hábitos de navegación. Al hacer clic en el botón Aceptar, acepta el uso de estas tecnologías y el procesamiento de tus datos para estos propósitos. Más información
Privacidad