Cómo crear una página de registro de usuario de WordPress personalizada

¿Está buscando una manera de personalizar la página de registro de usuario de WordPress de su sitio web? Has aterrizado en la página correcta. En este artículo, lo guiaré a través del proceso de creación de una página de registro de usuario de WordPress personalizada utilizando Elementor Page Builder.

Hay múltiples razones para permitir que los usuarios se registren en su sitio web utilizando el formulario de registro de usuario. Habilitar los registros es fácil, pero crear una página de registro de usuarios visualmente atractiva requiere un poco de trabajo.

En este tutorial, lo guiaré a través de un proceso paso a paso para habilitar los registros de usuarios en su sitio web y crear una página de registro de usuarios diseñada a medida.

Antes de eso, vamos a responder a esta pregunta.

¿Por qué crear una página de registro de usuario personalizada en WordPress?

Si está habilitando el registro de usuarios para su foro, sitio web o sitio web de productos, una página de registro personalizada puede agregar mucho valor al diseño general de su sitio web.

El diseño predeterminado de la página de inicio de sesión de WP tiene la marca y el logotipo de WordPress, que no coincide con el diseño de marca de ningún sitio web.

La creación de un diseño personalizado le permitirá brindar una experiencia de usuario más consistente para el proceso de registro.

Además, obtiene muchas más opciones para modificar la funcionalidad del formulario. Por ejemplo, puedes:

• Agregue más campos de formulario para obtener más información sobre el usuario que se registra.
• Cambia el diseño y los aspectos visuales del formulario.
• Habilite la autenticación ReCAPTCHA.
• Definir acciones después de un registro exitoso
• Cree notificaciones de mensajes de correo electrónico personalizadas.
• Muestre su mensaje de éxito personalizado al finalizar con éxito.
• Oculte el formulario a los usuarios registrados y muestre un mensaje personalizado en su lugar.

Ahora sabemos por qué es beneficioso crear una página de registro de usuario personalizada; Veamos cómo puedes crear uno en tu sitio web.

Cómo crear una página de registro de usuario de WordPress personalizada

En esta sección, veremos un proceso paso a paso para crear una página de registro de usuario personalizada utilizando el generador de páginas de Elementor.

Herramientas que necesitará

En este tutorial, necesitaremos complementos instalados y activados en su sitio web.

Complemento Elementor

Dado que crearemos una página utilizando el generador de páginas de Elementor, asegúrese de que esté instalado y activado en su sitio web. También puede optar por la versión Elementor Pro, pero la versión gratuita también funcionará.

Complemento PowerPack para Elementor

Permitir registro de usuario de WordPress

Lo primero que debe hacer es habilitar las membresías en su sitio web. Para esto, vaya a Configuración> General en su panel de administración de WordPress. Aquí verás las opciones de membresía.

Haga clic en la casilla de verificación para habilitar los registros. Ahora seleccione el rol para el que desea que el usuario se registre.

Usted selecciona cualquiera de estos roles de usuario:

• Abonado
• Autor
• Editor
• Contribuyente
• Administrador

Cada función de usuario tiene diferentes permisos, y puede modificarlos aún más con un complemento de terceros.

Si no está seguro de qué rol de usuario elegir, le recomendaría que elija el rol de Suscriptor . Esto se debe a que tienen acceso limitado y no pueden crear publicaciones.

Seleccione el rol de usuario que desea establecer para cada registro y haga clic en el botón Guardar .

Ahora podemos continuar y comenzar a crear nuestra página de registro de usuario.

Creación de una nueva página de registro de usuario

Paso 1: en primer lugar, agregue una nueva página. Para esto, vaya al panel de administración de WP y vaya a Páginas> Agregar nuevo. Ahora asigne un nombre propio a su página de registro y haga clic en el botón Editar con Elementor .

Paso 2: ahora, una vez que esté en el editor, comience cambiando el diseño de la página a Ancho completo o Lienzo . Para ello, haga clic en el icono de la rueda ⚙ en la esquina inferior izquierda de la página y seleccione el diseño de la página como ancho completo.

Paso 3: ahora agregue un diseño de columna en su página. Estoy agregando un diseño de 3 columnas para mi página.

Paso 4: agreguemos el aspecto más crucial de la página: el widget de registro de usuario. Busque el widget " Registro de usuario " en la lista de widgets. Asegúrese de ver el ícono PP en la esquina superior izquierda del widget.

Una vez que haya agregado el widget, verá opciones para personalizar el formulario.

Paso 5: Pestaña de contenido

En la pestaña Contenido, puede realizar cambios en la funcionalidad del formulario. Echemos un vistazo a las subsecciones:

Campos de formulario: aquí puede agregar o eliminar campos de su formulario de registro. Si desea agregar nuevos campos, puede hacer clic en el botón "+ Agregar nuevo". Puede seleccionar el tipo de campos de la lista y darle un nombre, marcador de posición, valor predeterminado, etc., fácilmente. Además, puede cambiar el tamaño de los campos de entrada, habilitar/deshabilitar la etiqueta y la marca requerida.

Botón de registro: puede cambiar el texto, el tamaño, el ancho, la alineación y el icono del botón de registro.

reCAPTCHA: si tiene la clave API reCAPTCHA configurada en la configuración de PowerPack, puede habilitar Google reCAPTCHA en su formulario.

Acción después del registro: una vez que el formulario se envía correctamente, puede redirigir al usuario, iniciar sesión automáticamente y enviar un correo electrónico de registro exitoso.

Notificación por correo electrónico: la subsección de notificaciones por correo electrónico le permite personalizar el correo electrónico que se envía cuando un usuario se registra para un rol de usuario. También puede configurar "De correo electrónico" y "De nombre".

Mensaje de éxito: puede optar por mostrar el mensaje de error en la posición del formulario. Cuando un usuario se registra con éxito, se muestra con un mensaje. También puede personalizar el texto del mensaje.

Opciones adicionales: Aquí, puede optar por ocultar el formulario a los usuarios registrados. Puede seleccionar el rol de usuario para el que se está registrando el usuario y habilitar/deshabilitar opciones como inicio de sesión, contraseña perdida y medidor de seguridad de la contraseña.

Adelante, haz los cambios que quieras. La mayoría de las opciones se explican por sí mismas y puede seguir adelante y hacer el cambio que desee.

Aquí están los cambios que hice en el formulario:

• Se agregó la casilla de verificación Términos de servicio en el formulario usando el botón "+ Agregar elemento" y seleccionando el tipo como Consentimiento .
• Cambió el texto del botón y agregó un ícono en el botón Registrar.
• Se modificó el mensaje de éxito para los usuarios registrados.
• Establezca el nuevo rol de usuario como Suscriptor .

Si quieres ver los cambios que hice en la pestaña Contenido, puedes verlo en este video:

Ahora, para los cambios de estilo, dirígete a la pestaña Estilo . Aquí podrá realizar cambios en el aspecto de diseño del formulario.

Paso 6: Pestaña Estilo

Puede realizar cambios de tipografía, cambios de borde, cambios de diseño como relleno, espaciado, colores, etc., para cada aspecto del formulario.

Continúe y realice los cambios de estilo que desee. Si desea ver los cambios que hice en mi página de registro de usuario, puede consultar el video que compartí anteriormente.

Una vez que hice los cambios que mencioné anteriormente, esta es la razón por la cual mi formulario de registro se ve así:

Ahora debe hacer que la página coincida con el tema general de su sitio web. Para eso, comience a diseñar el resto de la página.

Esta área depende totalmente de usted, y puede diseñarla como desee, ya que puede variar de persona a persona. Para mi sección, aquí está el diseño que creé.

Para crear un diseño similar, haga estos cambios:

• Agregue una imagen de fondo a la sección del formulario y alinéela correctamente desde la configuración de la Sección.
• Agregue una superposición de fondo a la sección para resaltar el formulario.
• Cambie el fondo del formulario y cambie las esquinas de los bordes a redondeadas.
• Agregue un título y un subtítulo para que el formulario complete la página.

Asegúrese de que el diseño y el estilo sean coherentes para todos los elementos de la página.

Una vez que haya terminado, continúe y publique la página.

Probando la página

Para probar la página, cierre sesión en su cuenta de WordPress o abra la página en modo incógnito. Ahora intente crear una nueva cuenta de usuario ingresando todos los campos y haciendo clic en el botón Registrar.

Debería poder crear una nueva cuenta de usuario al registrarse.

¿Que sigue?

Un usuario registrado con éxito tiene una cuenta en su sitio web y es probable que inicie sesión tarde o temprano. Para eso también, querrá una página de inicio de sesión de usuario atractiva que coincida con la apariencia general del sitio web.

Para ello, puede utilizar el widget de formulario de inicio de sesión de PowerPack. Este widget le permite personalizar la página de inicio de sesión de usuario de su sitio web de WordPress con el editor de Elementor.

Puede ver este video para ver cómo personalizar la página de inicio de sesión de su sitio web:

Si te ha resultado útil este tutorial, ¡compártelo!