Astra + Gutenberg : un moyen simple de personnaliser le bloc d'enregistrement de la connexion

existent WordPress Lors de la construction d'un site web, l'expérience de connexion et d'enregistrement des utilisateurs a un impact direct sur le taux de conversion. En utilisant le thème Astra et l'éditeur Gutenberg, vous pouvez facilement créer de magnifiques formulaires de connexion/inscription frontaux sans écrire de code. Dans cet article, nous allons présenter comment configurer rapidement ces fonctionnalités avec Astra + Gutenberg, ce qui convient au commerce électronique, aux sites d'adhésion et à de nombreux autres scénarios.

I. Pourquoi Astra + Gutenberg pour le login et l'enregistrement ?

Astra est un thème WordPress léger et rapide qui fonctionne bien avec une variété d'éditeurs de pages, y compris Gutenberg, qui est livré avec lui. Par rapport aux méthodes traditionnelles qui nécessitent du code ou des plugins, la capacité d'Astra à ajouter des formulaires de connexion directement par le biais de blocs permet d'obtenir un site plus unifié et mieux entretenu.

Gutenberg Il s'agit d'un éditeur par glisser-déposer fourni avec WordPress, qui permet de construire rapidement des pages grâce à des opérations modulaires simples, et qui est particulièrement convivial pour les débutants.

II. préparation de la réalisation de la connexion et de l'enregistrement

Avant de commencer, procédez comme suit :

• Installé et activé Thème Astra

• utiliser Éditeur Gutenberg(activée par défaut)
• Installez l'un des plug-ins recommandés :
  • Gestionnaire d'utilisateurs WP
  • Enregistrement de l'utilisateur
  • Fenêtre contextuelle de connexion/signature

Astuce : Chacun de ces plugins peut être utilisé pour insérer des formulaires de connexion/inscription dans Gutenberg à l'aide de shortcodes ou de blocs.

Etapes pour ajouter un bloc d'enregistrement de connexion dans Gutenberg

Étape 1 : Installer le plugin et activer la fonction de connexion et d'enregistrement

Prenons l'exemple du plugin WP User Manager :

• Allez dans Backend → Plugins → Add Plugin, recherchez "WP User Manager".

• Une fois installé et activé, le système génère automatiquement la page suivante :
  • Connexion
  • Registre
  • Compte

Il est également possible de personnaliser l'affichage de la page à l'aide de codes courts, par exemple :

[wpum_login_form] Afficher le formulaire de connexion
[wpum_register_form] Afficher le formulaire d'inscription

Étape 2 : Utiliser Gutenberg Ajouter un bloc de formulaire

• Créer une nouvelle page ou modifier une page existante

• Cliquez sur le bouton "➕" et recherchez le bloc "Short Codes".
• bâton [wpum_login_form] peut-être [wpum_register_form]

• Sauvegarder et prévisualiser la page

Si vous utilisez un plugin qui prend en charge les blocs (par exemple User Registration), vous pouvez ajouter directement les blocs exclusifs fournis, ce qui vous permet de modifier intuitivement les champs et les styles du formulaire.

IV. conseils pratiques pour améliorer l'expérience de l'utilisateur

1. ajouter des boutons de navigation

utiliser Astra Ajouter un bouton "Connexion/enregistrement" en haut de la page ou dans la barre de navigation pour renvoyer à la page de connexion/enregistrement de l'installation.

2. l'enregistrement de la connexion par pop-up (facultatif)

L'installation de plug-ins tels que Login/Signup Popup peut être réalisée en cliquant sur le bouton pour faire apparaître la fenêtre de connexion sans passer par la page, ce qui permet d'améliorer le taux de rétention des utilisateurs.

3) Recommandations pour l'optimisation de la mise en page

En utilisant le paramètre de largeur de conteneur d'Astra avec Gutenberg Le bloc de mise en page en colonnes peut être utilisé pour centrer le formulaire et embellir la mise en page. Vous pouvez également ajouter une image de fond ou utiliser une colonne divisée pour afficher l'image + le formulaire afin d'améliorer l'attrait visuel.

V. Problèmes courants et solutions

questions	guérir
Pas de saut à la page d'accueil après la connexion	Définir manuellement "After Login" dans les paramètres du plugin.redirectionsLien"
Manque de cohérence dans les styles et les thèmes des formulaires	Dans Apparence → Personnalisation → Extras CSS Ajouter un style personnalisé à l'élément
Erreur de forme et de contenu en cas de changement de langue	Configurer les traductions des pages de formulaire avec WPML ou TranslatePress

VI. résumé

faire passer (un projet de loi, une inspection, etc.) Astra + Gutenberg pour mettre en œuvre rapidement une belle page de connexion et d'enregistrement frontale sans écrire de code. Cette approche convient à la fois aux constructeurs de sites novices et aux développeurs intermédiaires à avancés qui cherchent à simplifier le flux d'utilisateurs de leur site.

Contactez nous
Vous n'arrivez pas à lire le tutoriel ? Contactez-nous pour une réponse gratuite ! Aide gratuite pour les sites personnels et les sites de petites entreprises !	Service clientèle WeChat
① Tel : 020-2206-9892
② QQ咨询：1025174874
(iii) Courriel : info@361sale.com
④ Horaires de travail : du lundi au vendredi, de 9h30 à 18h30, jours fériés.