Login & Registration Page

 

 

 

Magento 2 Login & 

Registration Page  

User Guide Version 1.0 

   

1

Login & Registration Page

 

Table of Contents 

I) Introduction …………………………………………………………………………………..3 

II) Where to Find Extension…………………………………………………………………..4 

III) Create Layouts ……………………………………………………………………………..5 

1. Page Information ………………………………………………………………………….7 

2. What to Display …………………………………………………………………………...8 

IV) Elements…………………………………………………………………………………...10 

1. Login Form……………………………………………………………………………….10 

2. Registration Form………………………………………………………………………..12 

3. New Customers Block…………………………………………………………………..14 

4. Button…………………………………………………………………………………….16 

5. Single Image ……………………………………………………………………………..19 

V) Multi-Store & Language Support ………………………………………………………25 

VI) Support….……………………….…………………………………………………………29 

 

2

Login & Registration Page

I) Introduction 

Magento 2 Login & Registration Page extension allows using drag & drop to build 

layout for login & registration pages without touching any line of code. 

● Customize login & registration page layout with drag & drop 

● 10+ elements 

● Pre-built templates 

● Fully responsive 

● 100% compatible with: Ultimo theme, Porto theme & Magezon Page Builder. 

NOTE: Login & Registration Page extension was developed on a core builder based on 

which we built all of our builder extensions. The core builder includes elements and 

settings that all builder extensions have in common. For a detailed guide, please refer to: 

https://magezon.com/pub/media/productfile/magezon-core-builder-user_guides.pdf. 

In this guide, we’ll focus on elements and settings that are specific to Login & 

Registration Page extension. 

 

 

 

 

3

Login & Registration Page

II) Where to Find Extension After installing the extension, navigate to Store > Settings > Configuration.  

On the left panel, span MAGEZON EXTENSIONS and choose Login & Registration 

Page.  

On the right section, you can see General Settings that include: 

 

● Current Version of the extension. 

● Enable Login & Registration Page: choose Yes/No to enable/disable the 

extension.  

● Login Page: select a layout that’s applied to the login page on frontend. Choose 

None to keep the default layout. 

● Registration Page: select a layout that’s applied to the registration page on 

frontend. Choose None to keep the default layout.  

4

Login & Registration Page

III) Create Layouts  Navigate to Customers > Login & Registration Pages to land on the page where you 

can create a new layout and manage all layouts you created.  

 

5

Login & Registration Page

 

- As can be seen in the image above, you can view all created layouts in a grid. 

- To create a new layout, click Add New Page button on the top-right corner. The edit 

page of the new layout looks like this: 

6

Login & Registration Page

1. Page Information

● Page Name: enter layout name.  

● Type: choose page type to apply the layout with 2 options: Login or Registration. 

E.g. If you choose Login, the login page on frontend will be displayed in this layout.  

● 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 (this layout is available only after the extension is 

installed). 

 

 

7

Login & Registration Page

2. What to Display

Where you create and customize layout for login/registration pages using drag & drop 

interface.  

 

● Click the plus icon on the top bar to add elements from a popup: 

 

 

8

Login & Registration Page

● Click the icon next to plus icon to view and select a pre-built template.  

 

 

 

 

 

 

 

 

 

 

 

 

9

Login & Registration Page

IV) Elements NOTE: Here we only list elements that are specific to Login & Registration Page 

extension and mention settings that are specific to these elements. For other elements and 

settings, you can look at Magezon Core Builder guide. 

1. Login Form

Used to display Magento 2 default login form: 

 

10

Login & Registration Page

>> Login Form element on frontend:  

 

 

 

 

 

 

 

 

11

Login & Registration Page

2. Registration Form

Used to display Magento 2 default registration form: 

 

 

 

 

12

Login & Registration Page

>> Registration Form element on frontend:

13

Login & Registration Page

3. New Customers Block

Used to display new customers block: 

 

 

 

 

 

14

Login & Registration Page

>> New Customers Block element on frontend: 

 

 

 

 

 

 

 

 

15

Login & Registration Page

4. Button

You can use this element to add Create an Account button.  

- General tab:  

 

● Text: add text inside the button. 

● Link: click Select Url button to add a link.  

● Add Icon: add icon inside the button. Choose Icon from 2 Icon Library: 

Awesome 5 & Open Iconic.  

16

Login & Registration Page

● Element Auto Width: If you have multiple buttons on different rows that are next 

to each other, turn on this function to display these buttons on the same row. 

● Icon Position: display the icon on the Left/Right of button text.  

- Button Design tab:  

 

 

 

17

Login & Registration Page

● Button Style: choose from 4 styles: Modern, Flat, 3D and Gradient. 

● Button Size: choose from 5 sizes: Mini, Small, Normal, Large and Extra Large.  

● Set Full Width Button: if enabled, the button will cover the full width of the 

container element (e.g. column).  

● Specify Border Width (px), Border Radius (px) & Border Style.  

● Colors: specify button Text Color, Background Color and Border Color when 

normal and on hover.  

>> Button element on frontend: 

18

Login & Registration Page

5. Single Image

Used to add an image.  

- General tab:  

 

 

19

Login & Registration Page

● Image Source: add image from Media library or use External link.  

>> If you set Image Source as Media library, you’ll add Image and Hover Image 

(the image that is displayed when you hover over the main Image). 

 

>> If you set Image Source as External link, you’ll add image address in External 

link field. 

 

 

 

 

20

Login & Registration Page

● On click action: specify what will happen when the image is clicked. You can: 

>> Open the image in a Magnific Popup: 

 

>> Open Custom Link: 

 

21

Login & Registration Page

>> Open Video or Map:  

 

● Set Image Style as Default, Outline, Shadow1, Shadow2 or 3D Shadow.  

● Set Image Hover Effect as Zoom In, Lift Up or Zoom Out.  

● Customize Image Width and Image Height.  

● Enter image Alternative Text & Image ID.  

● Enter image Title and Description.  

● Content Position: choose position for image content (Title & Description).  

● Set Content Alignment as Left, Right or Center.  

● Display Content on Hover: if enabled, image Title and Description is only 

displayed on hover.  

 

 

22

Login & Registration Page

- Style tab:  

● Content Padding: set padding between content (Title & Description) and the 

container.  

● Content Fullwidth: set the content to cover full width of the image.  

● Set Text Color (color for title & description) and Background Color of the text. 

● Specify Title Font Size, Title Font Weight, Description Font Size and 

Description Font Weight.  

23

Login & Registration Page

● Set Border Radius, Border Width, Border Style & Border Color (border that 

surrounds the image).  

● Overlay Color: choose color that covers the image. 

● Hover Overlay Color: choose overlay color on hover (you need to set Overlay 

Color so that this hover overlay color works).  

>> Single Image element on frontend:  

 

 

 

24

Login & Registration Page

V) Multi-Store & Language Support Login & Registration Page extension supports multiple stores and languages. It means 

you can apply different layouts for login & registration pages on different store views. 

Please follow these steps to set layout for each store view.  

* Suppose that your website has 2 store views: English & France. And you created 2 

layouts for the login page, one for English store view and the other for France store view. 

Similarly, you have 2 layouts for the registration page, one for English store view and the 

other for France store view.  

 

Step 1: Go to Store > Settings > Configuration. On the left panel, span MAGEZON 

EXTENSIONS and choose Login & Registration Page.  

25

Login & Registration Page

 

Step 2: Click the drop-down icon next to Default Config and choose one specific store 

view. For example, we choose English. 

 

26

Login & Registration Page

Step 3: After you choose a specific store view, General Settings section will be like this:  

 

Untick Use Website checkbox next to Login Page and Registration Page fields to be able 

to edit. In this case, we choose Login - English layout for Login Page and Registration - 

English for Registration Page.  

 

Take similar steps for France store view. Remember to Save Config after making 

changes. 

27

Login & Registration Page

>> Login page in English store view:  

 

● Login page in France store view:  

 

28

Login & Registration Page

VI) Support If you have any questions or need any support, feel free to contact us via the following 

ways. We will get back to you within 24 hours since you submit your support request. 

● Submit contact form. 

● Email us at support@magezon.com. 

● Submit a ticket. 

● Contact us through Skype: support@magezon.com. 

● Contact us via live chat on our website.

 

29