Home / Widgets

User Account Widget

Tech Writers Team @ Ucraft

Last updated on Sep 02, 2024

The User Account widget is a graphical UI element that allows users to create accounts (sign up) or log in to existing accounts (sign in) on your website. The widget plays a crucial role in facilitating user registration, login, and account management, enhancing the user experience.

Adding a User Account Widget

To add a User Account widget:

  1. Go to the Visual Editor by clicking Design on the Dashboard top panel or by navigating from Dashboard > Channels > Design.
  2. Go to the Widgets list on the Visual Editor Left Panel.

  3. Type the widget name in the search bar, or expand the User Account group to access the User Account widget.

  4. Drag and drop the User Account widget onto the Header.

Upon placement on the Header, the User Account widget appears as a combination of two UI elements:

  • Sign In
  • Sign Up

By default, the design preset of the Button widget is applied to the widget, and the elements (Sign In and Sign Up buttons) within the widget inherit the widget design. The User Account widget and each of its elements have different modes, which you can find under the Mode dropdown on the Styles tab of the relevant Property Panel.

Modes of the User Account Widget and its Elements

The User Account widget and its elements have specific Modes. You can customize the appearance and behavior of the widget and its elements for each Mode to fine-tune the appearance and behavior of the User Account widget and its elements, ensuring that they provide visual cues to your customers and improve their interaction with your website.

  • Customize the design of the User Account widget for the following specific modes:
    • Guest Mode - the widget in the Guest Mode is visible to the customers who are not currently logged in to their accounts or do not have accounts.\ In this mode the Sign In and Sign Up buttons are displayed to your customers. Once customers click any of the buttons, they are automatically redirected to the respective system page.\ Check Sign In Widgets and Sign Up Widgets to design the relevant pages.

    • Logged In - the widget in the Logged In mode is displayed with the design you have preset for this mode to the signed in customers.

The User Account widget in the Logged In mode gives access to the User Account Drawer.

You can modify the styling of the menu items by using the Property Panel of the Drawer Inner.

Another way to customize the menu items in the Drawer is to modify the styling of the first menu item in the Drawer, using its Property Panel. The styling defined for the first menu item is automatically applied to all the other ones in the Drawer.

  • Customize the design of the Sign In and Sign Up elements for the following modes:
    • Normal
    • Loading

The Loading mode is important to provide feedback to your customers and manage their expectations while the button is processing the necessary data for sign-in or sign-up functionality.

Configuring the User Account Widget and its Elements

To design the appearance and behavior of the User Account widget, activate the widget Property Panel comprised of the Styles and Settings tab by clicking it.

  1. Go to the widget Styles to configure the general styling features (see Global Styles) to achieve the desired visual and functional outcomes.
    • The widget Styles in the Logged In mode include a widget-specific feature: Display, that allows you to design the widget display (Name and Avatar, Avatar Only, and Name Only).

Note: The system uses the initials of the full name and avatar that you have provided during registration.

2. Go to the widget Settings to set its and its avatar visibility (see Visibility Settings) on the website based on criteria such as your customers' location, session status, device type, browser, language preference, etc., to tailor it to specific user segments or conditions.

Note: The design preset for the User Account widget is automatically applied to its elements, Sign In and Sign Up buttons, which can also be customized individually.

To modify the design of Sign In and Sign Up elements in each mode access each element Styles and Content.

  1. Go to the element Styles to configure the general styling features (see Global Styles) to achieve the desired visual and functional outcomes.
    • Customize the element-specific stylistic feature General to set its display (Label Only, Left Icon, Right Icon, and Icon Only).

Note: You can access the UI elements in the Design System From the upper-right corner of the Property Panel and choose one as a base for the User Account widget or its Sing In/Sign Up elements or create a new UI element and style it accordingly.

You can use the Dotted Menu on the Property Panel:

  • to access Reset Styles to discard the changes made to the Sign In and Sign Up elements and restore their default style.

  • to access Override Styles to apply the changes made to the Sing In/Sign Up element (font, size, alignment, etc.) to the base element and the elements that are derived from it.

    2. Go to the element Content to:

    • Select the label icon to be displayed with the styling of the element: either from General Icons or My Icons, inheriting the Vectors uploaded in the Media section;
    • Write the text to be displayed with the styling of the element.

💡 If you have questions or concerns, contact us directly via the Live Chat box in the lower right corner. Our Support Team will provide you with top-notch quality support 24/7.