Tuesday , April 16 2024
Home > Magezon Extensions > Other Extensions > Magento 2 Login & Registration Page Builder: All You Should Know

Magento 2 Login & Registration Page Builder: All You Should Know

The ultimate guide to using Magento 2 Login & Registration Page

Sometimes, the default Magento 2 login and registration page doesn’t satisfy all your needs. You want to customize them so that, for example, they better match your overall website or offer a better user experience. 

Magezon Login & Registration Page Builder will be a smart solution for this. With a simple drag & drop interface, you can quickly build layouts for the login and registration page. No coding knowledge is required.

In this post, let me walk you through the ultimate guide to using this extension. So keep reading!

Step 1: Build Layouts for Login/Registration Page

After install Login & Registration Page Builder on your site, navigate to Customers > Login & Registration Pages from the admin panel:

Access layout grid Magento 2 Login & Registration Page

You will access a grid containing all created layouts: 

Layout grid

To create a new layout, click on Add New Page button on the top right corner:

Add new layout

The edit page of the new layout will be opened: 

Layout edit page

1. Page Information

In this section, you need to customize general information of the layout:

Page Name: specify the name of the layout.

Type: set the type to Login or Registration.

– Layout: choose layout type from 6 options: 

  • Empty
  • 1 column
  • 2 columns with left bar
  • 2 columns with right bar
  • 3 columns
  • 1 column Full Width (used to create full width content).

2. What To Display

This section is where you create a custom layout for the login/registration page. 

2.1 Use Templates

If you don’t know where to start, simply begin with our pre-made templates. 

First, click on the template icon on the top bar:

Access all templates

A popup window will appear and give you access to all templates. Currently, there is one template for the login page and one template for the registration page:

Login & registration page templates

The chosen template will be imported to the builder section. And you can customize it the way you want. 

2.2 Build From Scratch

If none of the templates are what you need, simply start to build the layout from scratch. 

2.2.1 Add elements

To add an element to the builder section, click the plus icon on the top bar:

Access all elements in Magento 2 Login & Registration Page

Choose an element from the popup window: 

Elements in Magento 2 Login & Registration Page

There are 2 types of elements: 

Core elements: belong to Magezon’s Core Builder library. And you can find these elements in every builder extension

  • Row
  • Text Block
  • Section
  • Heading
  • Separator
  • Empty Space
  • Generate Block
  • Magento Widget

Login & Registration Page elements: belong to Login & Registration Page extension only. 

  • Single Image: used to add image.
  • Button: used to add button.
  • Login Form: used to display Magento 2 default login form.
  • Registration Form: used to display Magento 2 default registration form.
  • New Customers Block: used to display New Customers block.
2.2.2 Create multiple columns

To quickly add multiple columns, you can find quick access at the bottom of the builder section:

Quickly create multiple columns in Magento 2 Login & Registration Page

For more options, first add a Row element to the builder section. Then hover over the row: Row > Row Layout and choose your desired layout:

Row layout in Magento 2 Login & Registration Page

You can hover over Column and click Edit to open the column settings. In the Responsive Options, you can edit column width for different screen sizes. For more details, please visit here

Column responsive options in Magento 2 Login & Registration Page

Below is an example layout of login page:

Login page layout example in Magento 2 Login & Registration Page

– We set Type to Login and choose 1 column Layout.

– The layout consists of one row with 2 columns: 

  • The first column contains Single Image and New Customers Block elements.
  • The second column contains Heading and Login Form elements. 

Below is an example layout of registration page:

Registration page layout example in Magento 2 Login & Registration Page

With the registration page, we choose Registration Type and 1 column Full Width Layout.

The layout consists of one row with 2 columns:

– The first column contains nothing. The second column contains Heading and Registration Form elements.

– With the row, we customize the following settings:

  • In the General tab, we set Appearance to Full Width Row (Please note that only when combined with 1 column Full Width Layout will your content be full width). The Column Equal Height is turned on so that 2 columns have the equal height. And Content Position is set to Middle so that the content in the second column is centered vertically.
General tab in Row element settings in Magento 2 Login & Registration Page
  • In the Design Options, we set the top and bottom padding to 50px. We also set the Background Image, Background Style and Background Position.
Design Options in Row element settings

Step 2: Assign Layout to Login/Registration Page

The next step is to apply a specific layout to your login and registration page. To do this, please go to Stores > Settings > Configuration:

Access the extension configuration

In the left panel, expand MAGEZON EXTENSIONS and click on Login & Registration Page

After that, select a specific option for Login Page & Registration Page from a drop-down. (All created layouts will be listed in the dropdown of each page type).

Assign a specific layout to login and registration page

In this case, we set the Login Page to Login layout and Registration Page to Registration layout. And here are the 2 pages on the frontend:

  • Login Page:
Login page in Magento 2 Login & Registration Page
  • Registration Page:
Registration page in Magento 2 Login & Registration Page
You may also be interested in:
1. The Ultimate Guide to Magezon Page Builder
2. How to Use Magento 2 Category Page Builder
4. How to Create FAQs with Magezon Magento 2 FAQ Extension

To Sum Up 

This post is a step-by-step guide on how to use Magezon Login & Registration Page Builder. If you have any further questions or need any assistance, please feel free to leave us a comment below. 

Optimize Your Magento Store With Powerful Extensions

Looking for fast, efficient and well-coded extensions to build or optimize your Magento stores for sales boosting? Then visit Magezon website and grab necessary add-ons for yours today!

About Trang Vu

Trang Vu
Min is a content marketer with more than 2-year experience in Magento. She has great patience and high concentration ability to deal with every pressure at work.

Check Also

Step-by-step tutorial on using Category Page Builder

How to Build Magento Category Pages With Magezon’s Dedicated Builder

Not want to use the default layout of Magento 2 category pages? Want to customize …

Leave a Reply