10Web Help Center

Hi, how can we help?

Login Widget

Copy article URL

in this article

The Login Widget makes it easy to create a custom login page, replacing the default WordPress login page.

Adding Login widget

Start by creating a new page on your site or opening an existing page in the editor.

  1. Add the Login Widget to your page by finding it on the Widgets panel and dragging to the page canvas.
  2. Configure the widget settings to adjust the widget to your desired specifications

Content tab

Form fields

  • Label: Show or hide the form label.
  • Input Size: Choose the size for the form fields.

Button

  • Text: Enter the text for the button. You can use Dynamic Tags to call from the site’s metadata or custom field.
  • Size: Select the button size.
  • Alignment: Set the button alignment.

Additional options

  • Redirect After Login: Toggle ON or OFF.
  • Lost Your Password: Choose to display the “Lost Your Password” link or not.
  • Remember Me: Choose to display the “Remember Me” checkbox or not.
  • Logged In Message: Choose to display a message to logged-in users or not.
  • Custom Label: Change the default form label and placeholder text.
    Username Label: If custom is selected, enter a text value or use dynamic tags. Password
    Label:     If custom is selected, enter a text value or use dynamic tags.

Style tab

Form

  • Rows Gap: Set the gap between each row.
  • Links Color: Choose the color of the links.
  • Links Hover Color: Choose the color of the links when hovered over.

Label

  • Spacing: Set the gap between the label and its corresponding field.
  • Text Color: Choose the color of the label text.
  • Typography: Set typography options for the label text.

Fields

  • Text Color: Choose the color of the text within the fields.
  • Typography: Set typography options for the text within the fields.
  • Background Color: Choose the background color of the fields.
  • Border Color: Choose the border color of the fields.
  • Border Width: Set the thickness of the field borders.
  • Border Radius: Set the border radius for field corner roundness.

Button

  • Text Color: Choose the button text color.
  • Typography: Set typography options for the button text.
  • Background Color: Choose the button background color.
  • Hover Mode: Set a transition duration for the button's appearance change.
  • Border Type: Select the border type (none, solid, double, dotted, dashed, or grooved).
  • Border Radius: Set the border radius for button corner roundness.
  • Text Padding: Set padding around the text in the button.
  • Text Color: Choose the color of the logged-in message text.
  • Typography: Set typography options for the logged-in message text.

Advanced tab

You can customize the widget further using the settings available in the Advanced tab. These options provide additional styling and functionality adjustments, allowing you to tailor the widget to better fit your design needs.

in this article