Astra + Gutenberg: una forma sencilla de personalizar el bloque de registro de inicio de sesión

existe WordPress Al construir un sitio web, la experiencia de inicio de sesión y registro del usuario tiene un impacto directo en la tasa de conversión. Usando el tema Astra y el editor Gutenberg, puedes crear fácilmente hermosos formularios de inicio de sesión/registro sin escribir código. En este artículo, presentaremos cómo configurar rápidamente estas funciones con Astra + Gutenberg, que es adecuado para el comercio electrónico, los sitios de membresía y muchos otros escenarios.

I. ¿Por qué Astra + Gutenberg para el inicio de sesión y el registro?

Astra es un tema de WordPress ligero y rápido que funciona bien con una variedad de editores de páginas, incluido Gutenberg, que viene con él. En comparación con los métodos tradicionales que requieren código o plugins, la capacidad de Astra para añadir formularios de inicio de sesión directamente a través de bloques hace que el sitio esté más unificado y mejor mantenido.

Gutenberg Es un editor de arrastrar y soltar que viene con WordPress, que permite construir páginas rápidamente mediante sencillas operaciones modulares, y es especialmente amigable para los novatos.

II. Preparación para la realización del inicio de sesión y el registro

Antes de empezar, haz lo siguiente:

• Instalado y activado Tema Astra

• hacer uso de Editor Gutenberg(activado por defecto)
• Instale uno de los plug-ins recomendados:
  • Gestor de usuarios WP
  • Registro de usuarios
  • Ventana emergente de inicio de sesión/registro

Consejo: Cada uno de estos plugins se puede utilizar para insertar formularios de inicio de sesión/registro en Gutenberg utilizando shortcodes o bloques.

Pasos para añadir un bloque de registro de inicio de sesión en Gutenberg

Paso 1: Instale el plugin y active la función de inicio de sesión y registro

Tomemos como ejemplo el plugin WP User Manager:

• Vaya a Backend → Plugins → Añadir plugin, busque "WP User Manager".

• Una vez instalado y activado, el sistema generará automáticamente la siguiente página:
  • Inicio de sesión
  • Regístrese en
  • Cuenta

También es posible personalizar la visualización en la página mediante códigos cortos, por ejemplo:

[wpum_login_form] Mostrar formulario de registro
[wpum_register_form] Mostrar formulario de registro

Paso 2: Utilice Gutenberg Añadir un bloque de formulario

• Crear una página nueva o modificar una existente

• Pulse el botón "➕" y busque el bloque "Códigos cortos".
• palo [wpum_login_form] tal vez [wpum_register_form]

• Guardar y previsualizar la página

Si utiliza un plugin que admite bloques (por ejemplo, Registro de usuarios), puede añadir directamente los bloques exclusivos proporcionados, lo que le permitirá editar intuitivamente los campos y estilos de los formularios.

IV. Consejos prácticos para mejorar la experiencia del usuario

1. Añadir botones de navegación

hacer uso de Astra Añade un botón "Iniciar sesión/registrarse" en la parte superior de la página o en la barra de navegación para enlazar con la página de inicio de sesión/registro de la configuración.

2. Registro de inicio de sesión emergente (opcional)

La instalación de plug-ins como Login/Signup Popup se puede lograr haciendo clic en el botón para que aparezca la ventana de inicio de sesión sin saltar a la página, lo que es adecuado para mejorar la tasa de retención de usuarios.

3. Recomendaciones para optimizar el diseño de la página

Utilizando el ajuste de anchura de contenedor de Astra con Gutenberg El bloque de diseño de columna puede utilizarse para centrar el formulario y embellecer el diseño. También puede añadir una imagen de fondo o utilizar una columna dividida para mostrar la imagen + el formulario para mejorar el atractivo visual.

V. Problemas comunes y soluciones

cuestiones	curar
No se salta a la página de inicio tras iniciar sesión	Establezca manualmente "Después de iniciar sesión" en la configuración del plugin.redirigeEnlace"
Incoherencia en los estilos y temas de los formularios	En Apariencia → Personalización → Extras. CSS Añade un estilo personalizado al
Error de contenido del formulario de cambio multilingüe	Configuración de traducciones de páginas de formularios con WPML o TranslatePress

VI. Resumen

pasar (una factura o inspección, etc.) Astra + Gutenberg para implementar rápidamente una hermosa página de inicio de sesión y registro sin escribir código. Este enfoque es adecuado tanto para constructores de sitios novatos como para desarrolladores intermedios y avanzados que buscan simplificar el flujo de usuarios de su sitio.

Contacte con nosotros
¿No puede leer el tutorial? Póngase en contacto con nosotros para obtener una respuesta gratuita. Ayuda gratuita para sitios personales y de pequeñas empresas	Servicio de atención al cliente WeChat
① Tel: 020-2206-9892
② QQ咨询：1025174874
(iii) Correo electrónico: info@361sale.com
④ Horario de trabajo: de lunes a viernes, de 9:30 a 18:30, días festivos libres