Cómo crear una página de inicio de sesión de WordPress personalizada (en 5 pasos)

Si crea un sitio web con una opción de inicio de sesión, es importante asegurarse de que su inicio de sesión se vea bien. Desafortunadamente, la pantalla de autenticación de WordPress predeterminada deja mucho que desear. Sin embargo, puede usar herramientas adicionales, como creadores de páginas, para crear una página de conexión que se vea profesionalmente y ofrece una mejor experiencia de usuario. En esta publicación, analizaremos más de cerca los beneficios de incluir una página de autenticación de WordPress personalizada en los sitios de sus clientes. Luego le mostraremos cómo crear uno usando nuestro complemento Beaver Builder y PowerPack Supplement. ¡Vamos a empezar!
¿Por qué podría crear una página de inicio de sesión de WordPress personalizada? Cada sitio de WordPress tiene una página de inicio de sesión. Puede acceder a esto agregando / admin /, / login / o / wp-admin / al final de la dirección de su sitio. Así es como muestra la autenticación de WordPress:

Como puede ver, esta página de conexión es bastante simple. Muestra una forma muy simple con el logotipo de WordPress y la marca. Esto no es un gran problema si su cliente solo lo usará para acceder a la parte posterior de su sitio. Sin embargo, si crea un sitio web para una empresa que permite a los usuarios conectarse a sus propias cuentas, como un sitio de membresía o una tienda electrónica, es posible que desee utilizar una alternativa más personalizada. Los clientes esperan ver una página de conexión que se ajuste a todo el sitio web.
Con una página de conexión personalizada, puede mostrar que la marca de su cliente es una página de conexión personalizada en PayPal que utiliza el logotipo y el estilo de la empresa: hay más beneficios en la creación de una página de autenticación de WordPress personalizada para el sitio web de su cliente. Para comenzar, puede Haga que los visitantes se sientan más como en casa. Una página de conexión que coincide con los colores de la marca de la compañía y el estilo general del sitio ofrece una experiencia más simple para los clientes. El uso de la página de conexión de WordPress predeterminada puede hacer que el sitio se vea un poco sospechoso, lo que puede desalentar a los visitantes a crear una cuenta o ingresar sus datos personales. Por lo tanto, una página de conexión profesional puede ayudar a los clientes a crear confianza y aumentar sus conversiones.

Una página de conexión personalizada no debe limitarse a una forma estática. Puede agregar otros elementos, como ofertas promocionales y una llamada efectiva (CTA), convirtiendo la página en una oportunidad de marketing. Una de las formas más fáciles de crear una página de autenticación de WordPress personalizada es usar un generador de páginas, como nuestro propio complemento de Beaver Builder
Beaver Builder es un generador de página de arrastrar y soltar para WordPress. Le permite crear páginas hermosas y receptivas de manera rápida y fácil por completo en la parte delantera y ver cualquier cambio que realice en tiempo real. Puede usarlo para crear cualquier tipo de contenido desde cero, incluidas las increíbles páginas de destino y los formularios de conexión.

Cómo crear una página de conexión de WordPress personalizada (en 5 pasos) ahora que expliqué por qué le gustaría usar una página de autenticación de WordPress personalizada para ver cómo hacerlo. En este tutorial, le mostraremos cómo diseñar rápidamente su propia página de conexión utilizando Beaver Builder y Powerpack Addon. Paso 1: Instale y active el complemento Beaver Builder y el suplemento Powerpack Crear una página de conexión de Beaver Builder requiere acceso tanto a nuestro complemento de Powerpack Addon. Puede instalar la versión gratuita de Beaver Builder a través de la página del complemento de WordPress. Alternativamente, puede comprar la versión completa registrándose en uno de nuestros planes de precios: después de que se haya registrado, puede descargar el complemento desde la página de mi cuenta. Para hacer esto, vaya a nuestra página inicial. En la barra de navegación superior, haga clic en su cuenta y seleccione Iniciar sesión:
Aquí verá una lista de descargas disponibles, así como su clave de licencia única. Haga clic en el enlace del complemento Beaver Builder para descargarlo. Mientras esté en la página, copie la clave de licencia e insértelo en algún lugar para facilitar el acceso (la necesitará en algunas veces):

Luego conecte al tablero de WordPress y explore los complementos> Agregar nuevo. En la parte superior de la página, haga clic en el botón de carga del complemento y seleccione el archivo:

Luego seleccione la carpeta de complemento .zip que ha descargado antes y haga clic en Instalar ahora. Después de instalar, haga clic en Activación del complemento:

Después de la acción, se le redirige a la página de configuración de Beaver Builder. Si no, puede acceder a él desde la barra lateral desde el tablero de WordPress. En la página de configuración, haga clic en la pestaña Licencia en el menú lateral e inserte la clave de licencia que copió anteriormente. Luego haga clic en la clave de licencia Guardar: Beaver Builder ahora está completamente instalado y activado en su sitio web. Como mencioné anteriormente, puede usar Beaver Builder para crear todo tipo de páginas y contenido. Sin embargo, aquí nos centraremos en la construcción de una página de autenticación personalizada.

Antes de seguir adelante, querrá repetir los mismos pasos para instalar y activar el suplemento PowerPack. Simplemente descargue la carpeta ZIP y cárguela a la página del complemento de WordPress. Una vez instalado, vaya a Configuración> PowerPack. Luego ingrese la clave de licencia y actualice el complemento de suplemento a la última versión:

Paso 2: Cree una nueva página en WordPress ahora que tiene todo configurado, puede crear su página de autenticación. Desde el tablero de WordPress, vaya a páginas> Agregar nuevo:

Luego da un nombre a la nueva página. Para este tutorial, llamarlo solo “página de conexión”. Cuando esté listo, haga clic en Iniciar Beaver Builder:
Muestra el editor frontal de Beaver Builder, que le brinda una vista previa en vivo del aspecto de la página. Ahora que ha creado la página de inicio de sesión, el siguiente paso es personalizarla. Paso 3: Personalice su página de inicio de sesión con Beaver Builder, puede hacer mucho en el editor de Beaver Builder. Para mantener cosas simples, para nuestro ejemplo crearemos una apariencia básica de la página de conexión en dos columnas. Para continuar, comience haciendo clic en la pestaña de fila en el panel lateral, luego deslice y coloque las 2 columnas en la página: ahora agregaremos una imagen a la columna izquierda. Vaya a la pestaña Módulo, seleccione el módulo de foto y colóquelo en la columna izquierda. En el panel de configuración de fotos, haga clic en Seleccione la foto y suba una imagen que desea mostrar en su página de inicio de sesión:

Por ejemplo, puede elegir el logotipo de su cliente o un gráfico personalizado. También puede cambiar el tamaño de la imagen y ajustar los bordes según sea necesario. En la columna derecha, ingrese un módulo de título y cambie el texto en lo que desea decir:


Haga clic en la pestaña Estilo para ajustar la fuente, el color, el tamaño, el peso y otras características:

Luego agregue el formulario de inicio de sesión. Vuelva a la pestaña Módulo y busque el “formulario de conexión” haciendo clic en el icono del microscopio junto a los módulos estándar. Allí, elija el módulo de formulario de autenticación enumerado en módulos PowerPack y agregue bajo el título:

En este momento, debe tener todos los artículos que necesita para una página de conexión personalizada simple. Siéntase libre de cambiar el aspecto y agregar cualquier otro módulo que desee usar. Paso 4: Cambiar el diseño del paso final es hacer que su página de conexión se vea un poco más visualmente atractiva. Beaver Builder es una herramienta muy flexible y potente, por lo que tiene opciones casi ilimitadas cuando se trata de personalizar el aspecto de sus páginas. Por ejemplo, puede cambiar el color de fondo y la ubicación del botón de conexión para que coincida con la marca: aquí hay algunos Otro estilo cambia a considerar:

Ajuste la visibilidad del botón Recuérdame del formulario de autenticación.

Cambiar espaciado, coloración, borde, bordes, llenado y radio de diferentes elementos en la página.

Agregue un borde o sombra al cuadro de columna para darle a su página una cierta profundidad visual.

Puede hacer mucho, por lo que le recomendamos que se familiarice con todas las diferentes configuraciones disponibles. También puede jugar con los elementos de estilo para que su página de autenticación se vea exactamente como desee. Por ejemplo, así es como la página final podría cuidar algunos cambios:

Cuando haya terminado de hacer cambios, todo lo que tiene que hacer es hacer clic en la esquina superior derecha y luego presione la publicación:
Felicitaciones: ¡ha terminado de crear y diseñar la página personalizada de autenticación de WordPress! Todo lo que queda por hacer es establecer la nueva página como una página de autenticación de WordPress predeterminada. Paso 5: Establezca la página personalizada como página de inicio de sesión de WordPress para establecer la nueva página de inicio de sesión personalizada como página de autenticación de WordPress, deberá cambiarla en la configuración de WordPress. Para hacer esto, vuelva al tablero de WordPress y haga clic en Configuración> Powerpack: luego seleccione Autenticación/Grabar en la esquina superior derecha. Elija el departamento de página de inicio de sesión y elija la página de autenticación recién creada:
¡Presione Guardar los cambios y listo! Esto establecerá su nueva página como una página de autenticación de WordPress. También puede seguir el mismo proceso para configurar una página de registro personalizada. Conclusión Si crea una tienda de comercio electrónico, un sitio de membresía o cualquier otro sitio web con cuentas de clientes, es esencial crear una página de autenticación de WordPress personalizada. Una página bien diseñada puede mejorar la experiencia del usuario, puede ayudar con los esfuerzos de su cliente e incluso aumentar las conversiones. Recapitulemos cómo crear una página de conexión de WordPress personalizada con Beaver Builder y Powerpack en cinco pasos:
Instale y active Beaver Builder y Powerpack.
Crea una nueva página.

Personalice su página de inicio de sesión agregando un encabezado, una foto y un formulario de conexión.

Cambie su diseño para que coincida con su marca.

Establezca su página personalizada como página de autenticación de WordPress.