Creación de un formulario de inicio de sesión de WordPress personalizado con interfaz de usuario plana

Última actualización - 8 de julio de 2021

WordPress ha existido durante un tiempo considerable. Lo que comenzó como un portal para blogueros, ahora se ha convertido en un sistema de administración de contenido responsable de operar casi la mitad del total de sitios web del mundo. Su interfaz simple pero intuitiva y sus diseños personalizables lo han convertido en la opción número uno para los desarrolladores y diseñadores web de todo el mundo que buscan construir sus sitios web desde cero.

Cualquiera que utilice WordPress tiene buen ojo para los detalles y la originalidad para mejorar la experiencia del usuario y aumentar su tasa de clics. La mayoría de los desarrolladores se centran principalmente en los temas, pero para los sitios de membresía y otras plataformas, el punto de partida es una página de inicio de sesión. Imagínese esto, si es un miembro recién registrado en un sitio web e inicia sesión en una pantalla que es similar a la de los miembros no registrados, el impacto se amortigua ligeramente y lo deja bastante insatisfecho. Sin embargo, tener una página de inicio de sesión de WordPress personalizada para adaptarse a los requisitos y la estética de su negocio deja una mejor impresión en los visitantes y despierta su interés.

Para ayudar con esto, hemos resumido algunas pautas simples para incluir sus estilos para una página de inicio de sesión personalizada de WordPress que se integre visualmente con el esquema de diseño de su sitio web.

Creación de una página de inicio de sesión de WordPress personalizada sin complemento

Se pueden realizar varios cambios en la página de inicio de sesión de WordPress actualizando el código fuente en el archivo function.php del tema elegido. Aunque, una vez que actualices WordPress estos cambios se perderán. Esto se debe a que la hoja de estilo de su tema para la página de inicio de sesión no forma parte de la configuración del tema de WordPress, lo que requiere que cree otra hoja de estilo para la página de inicio de sesión personalizada.

Comience creando una carpeta llamada "Iniciar sesión" en la carpeta de su tema y agregue un archivo .txt con el nombre custom-login-style.css . A partir de ahí, puede proceder a realizar algunas modificaciones básicas para personalizar y agregar singularidad a la página de inicio de sesión.

Cambiar el fondo

Para actualizar el color de fondo de la página o de un botón específico, seleccionará el color de fondo: #222222 y cambiará el código hexadecimal al color de su elección. Tome la ayuda de una paleta de colores para seleccionar un color que complemente la estética de su negocio y sea visualmente atractivo.

Además, si desea variar la imagen de fondo de su página de inicio de sesión, seleccione la línea de código background-image: url(logo_login.png') y reemplace logo_login.png , que es el nombre del archivo con su URL de archivo de imagen actualizada .

Las empresas que desean que sus clientes recuerden su marca pueden cambiar el logotipo de WordPress por su logotipo personalizado. Después de guardar el archivo de imagen del logotipo personalizado en su carpeta de inicio de sesión, reemplace el nombre del archivo con su logotipo personalizado en la imagen de fondo: código url('logo_login') .

Personalización del formulario de inicio de sesión ajustando el relleno y el margen

Los desarrolladores pueden ajustar el formulario de inicio de sesión para que su página sea atractiva y se ajuste adecuadamente a la apariencia de su sitio. Desde el relleno de los botones hasta el color y el tamaño de fuente de las etiquetas, etc. Puede agregar más espacio dentro del botón para que el texto no aparezca apretado aumentando el relleno; simplemente aumente los números en el código de relleno: 12px 12px 12px 12px. Si desea crear más espacio fuera del botón para que los elementos que lo rodean no estén apretados, puede hacerlo aumentando el espacio del margen en el margen del código: 12px 12px 12px 12px. Incluso algo tan simple como agregar algunos espacios en blanco puede tener un impacto colectivo en el aspecto final de su página de inicio de sesión y hacer que parezca más ordenado.

Cambiar el tamaño y el color de la fuente

Puede cambiar el tamaño de fuente del texto del párrafo, los enlaces o los campos de formulario utilizando el código font-size: 15px ajustando el número al tamaño que desee. Se puede hacer lo mismo con el color de la fuente actualizando el color en el color del código : #222222 y sustituyendo el color.

Modificación del mensaje de error de inicio de sesión

Con el aumento de los delitos cibernéticos y las estafas en Internet, los desarrolladores web y los dueños de negocios no pueden arriesgarse en sus sitios web y perder datos confidenciales. Cuando un usuario ingresa apresuradamente las credenciales de inicio de sesión incorrectas, se genera automáticamente un mensaje de error predeterminado. Si bien esto es para señalar a los usuarios este error, puede ser una brecha para que los piratas informáticos intenten descifrar los datos de inicio de sesión. Por lo tanto, la mejor manera de mantener a raya a los piratas informáticos es modificando el mensaje de error en el archivo function.php .

Para concluir, aquellos con amplios conocimientos de CSS pueden tener el máximo control sobre el estilo y la personalización de su formulario de inicio de sesión de WordPress. Pero, si su falta de habilidades de codificación limita su capacidad para crear una página de inicio de sesión personalizada, ¡no se preocupe! Hay una variedad de opciones de complementos disponibles a su disposición en el repositorio de WordPress para agilizar el proceso de desarrollo web de WordPress y hemos enumerado los más populares para usted.

Complemento personalizador de inicio de sesión

El personalizador de inicio de sesión es uno de los complementos más fáciles de usar y le permite realizar cambios directamente desde su personalizador de WordPress. Después de un proceso de instalación simple, puede acceder fácilmente desde su Tablero de WordPress en la pestaña Apariencia . Haz clic en Comenzar a personalizar y te redirigirá a la pantalla de personalización donde rediseñarás todas las áreas según tus gustos.

Personalizador de inicio de sesión de Colorlib

Colorlib Login Customizer es una herramienta ingeniosa y flexible que incluye todas las funcionalidades que se encuentran en un complemento premium, pero las ofrece de forma gratuita. Su amplia gama de características únicas lo convierte en la mejor opción para los desarrolladores web que buscan crear una solución personalizada para sus usuarios. Esto también permite la personalización a través del Personalizador de WordPress para que pueda navegar fácilmente y remodelar su página de inicio de sesión.

En resumen

Al final, hay más de un enfoque para personalizar una página de inicio de sesión y los desarrolladores de todos los niveles de experiencia pueden probarlos. Lo que importa es que la página de inicio de sesión personalizada de WordPress coincida y complemente la estética del sitio real para mejorar la experiencia del usuario. Personalizar la página de inicio de sesión de su sitio es una forma simple pero efectiva de deleitar a los clientes y crear una identidad de marca. Comenzar de manera simple y desarrollar lo básico puede transformar una pantalla simple en algo espectacular y ofrecer a los clientes una experiencia en línea personalizada que nunca antes habían visto.