Configuring the User - Login system page settings

This article will walk you through configuring the Login page in DecoNetwork's Website Editor. In this guide, we'll show you how to access and customize the Login page from PAGES tab under the SYSTEM PAGES section. You'll learn how to adjust various settings to adjust the structure and design of your Login form to better suit your brand and user experience. Whether you're looking to update visual elements or fine-tune functionality, this tutorial will provide you with the tools and knowledge to create a Login page that meets your website's specific requirements.

In this article, you will learn how...

• To configure the Login system page settings
• To edit fields of the login form
• To configure the design settings for the login form

To configure the Login system page settings:

1. Click on the PAGES button in the Website Editor Toolbar.
   
2. Click on the + icon at the left of the User tab to expand the User pages menu.
   
3. Click on the Login page tab.
   
4. Mouse over the Login form widget in the content area of the Login page.
5. Click on the down arrow beside the lock icon.
6. Choose the Login Settings item from the drop-down menu.
   

   The Login Settings popup will be displayed, with the Properties Tab selected.

   
7. Configure the login form.
   1. Enter a title for your login form in the Panel Title field.
   2. Enter a label for the login button in the Button Label field.
   3. Set the login form options.
      • Show Remember Option: when this checkbox is ticked, a Remember me checkbox will be displayed on the login form. This setting will allow website visitors to choose whether their username and password are remembered so that they do not have to re-type them when returning to your site.
      • Show Forgot Password Link: when this checkbox is ticked, the Forgot your password link will be displayed on the login form. This setting will display a link on the form which allows your website visitors to reset their passwords.
      • Show Signup Link: when this checkbox is ticked, the Create account link will be displayed on the login form, allowing your website visitors to access the create account page if they do not already have an account.
      • Show Login Via Email Button: when this checkbox is ticked, a Login Via Email button will appear on the login form, including the form accessed from the checkout address page. This feature allows visitors with an existing account to log in using their email address. Clicking on the button takes users to the Login Email Token page, where they can enter their email address and receive a login link with an embedded token sent to their inbox. By default, this option is enabled.
        • Login Via Email Button Label: this field allows you to customize the text displayed on the Login Via Email button. This label lets you tailor the button's name to better align with your site's branding or user experience goals.

        You can customize both the Login Email Token page and the email that is sent to customers. Tailoring these elements allows you to enhance the user experience and align the messaging with your brand.

   4. Edit the login form fields. (See below for instructions).
8. Click OK.
9. Click on the Save button and then click on the Publish button at the right of the Page Settings Bar.

To edit fields of the login form:

1. Click on the Configure button to the right of the field you want to edit.
   
2. Configure the settings for the field.
   

   Each field will have the following settings:

   • Label: the title of the field.
   • Description: lets you enter a description to explain to your website visitor how to complete the field.
   • Start new line at this field: tick this checkbox to display this field on a new line.
   • Container Width: lets you set the width of the field container as a percentage of the width of its parent container. You can use the slider or enter a percentage value into the Container Width field.
3. Click OK to accept the changes.
4. Click OK to save the form.
5. Click on the Save button and then click on the Publish button at the right of the Page Settings Bar.

To configure the design settings for the login form:

1. Click on the Design tab in the Login popup.
   
2. Select a Login Layout style for the form.
   • Label Above: displays labels above fields in the login form.
   • Label Left: displays labels to the left of fields in the login form.
3. Configure the heading font and color.
   1. Click on the font name to configure the font style using the Font popup. See the Configuring Font Settings for Widget Panel Titles article for instructions.
   2. Click on the color spot to choose a text color using the Color popup. See the Using the Color Popup article for instructions.
4. Configure the label font and color.
   1. Click on the font name to configure the font style using the Font popup. See the Configuring Font Settings for Text article for instructions.
   2. Click on the color spot to choose a text color using the Color popup. See the Using the Color Popup article for instructions.
5. Configure the input field style.

   The procedure for configuring the input field is the same as in the Style Editor. See the Style Editor article for instructions.

6. Configure the submit button style.

   The procedure for configuring the submit button style is the same as for editing the button style in the Style Editor. See the Style Editor article for instructions.

7. Click OK to save the changes.
8. Click on the Save button and then click on the Publish button at the right of the Page Settings Bar.