Astra + Gutenberg: a simple way to customize the login registration block

exist WordPress When building a website, the user login and registration experience has a direct impact on the conversion rate. Using Astra theme and Gutenberg editor, you can easily create beautiful front-end login/registration forms without writing code. In this article, we will introduce how to quickly set up these features with Astra + Gutenberg, which is suitable for e-commerce, membership sites and many other scenarios.

I. Why Astra + Gutenberg for login and registration?

Astra is a lightweight and fast WordPress theme that works well with a variety of page editors (including Gutenberg, which comes with it). Compared to traditional methods that require code or plugins, Astra's ability to add login forms directly through blocks makes for a more unified and better maintained site.

Gutenberg It's a drag-and-drop editor that comes with WordPress, which makes it possible to quickly build pages through simple modularization, and is especially friendly to newbies.

II. Preparation for the realization of login and registration

Before you start, do the following:

• Installed and enabled Astra Theme

• utilization Gutenberg Editor(enabled by default)
• Install one of the recommended plugins:
  • WP User Manager
  • User Registration
  • Login/Signup Popup

Tip: Each of these plugins can be used to insert login/registration forms into Gutenberg using shortcodes or blocks.

Steps to add a login registration block in Gutenberg

Step 1: Install the plugin and enable the login and registration feature

Take the WP User Manager plugin as an example:

• Go to Backend → Plugins → Add Plugins and search for "WP User Manager".

• Once installed and enabled, the system will automatically generate the following page:
  • Login
  • Register
  • Account

It is also possible to customize the display in the page using a short code, for example:

[wpum_login_form] Show login form
[wpum_register_form] Show registration form

Step 2: Use Gutenberg Adding a form block

• Create a new page or edit an existing page

• Click on the "➕" button and search for the "Short Codes" block.
• stick [wpum_login_form] maybe [wpum_register_form]

• Save and preview the page

If you are using a plugin that supports blocks (e.g. User Registration), you can directly add the provided exclusive block, which enables you to intuitively edit form fields and styles.

IV. Practical Tips to Enhance User Experience

1. Adding navigation buttons

utilization Astra Add a "Login/Register" button at the top of the page or in the navigation bar to link to the login/register page of the setup.

2. Pop-up login registration (optional)

Installation of plug-ins such as Login/Signup Popup can be realized by clicking the button to pop up the login window without jumping to the page, which is suitable for improving the user retention rate.

3. Page layout optimization recommendations

Using Astra's container width setting with the Gutenberg The column layout block can be used to center the form and beautify the layout. You can also add a background image or use a split column to display the image + form to enhance the visual appeal.

V. Common problems and solutions

concern	cure
No jump to homepage after login	Manually set "After Login" in the plugin settings.redirectsLink"
Form styles and themes are not harmonized	In Appearance → Customize → Extra CSS Add custom styles to the
Multi-language switching form content error	Setting up Form Page Translations with WPML or TranslatePress

VI. Summary

pass (a bill or inspection etc) Astra + Gutenberg to quickly implement an aesthetically pleasing front-end login and registration page without writing any code. This approach is suitable for both novice website builders and intermediate to advanced developers who want to simplify the user flow of their website.

Contact Us
Can't read the tutorial? Contact us for a free answer! Free help for personal, small business sites!	Customer Service
① Tel: 020-2206-9892
② QQ咨询：1025174874
(iii) E-mail: info@361sale.com
④ Working hours: Monday to Friday, 9:30-18:30, holidays off