Site Members: Adding and Customizing Your Login Bar
- Adding the login bar
- Setting up the login bar
- Managing the login bar menu
- Designing the login bar
Customize the login bar that members use to sign in to your members area, along with the menu it displays. You can decide which tabs and links appear on the menu, adjust the layout, and design the element to ensure it matches the overall style of your site.
Adding the login bar
When you add a members area to your site, a login bar is automatically included in the header section. This ensures it appears on all pages, giving members quick and convenient access to their account. If you need to re-add the login bar or want to add additional login bars, you can do so effortlessly.
- Go to your editor.
- Click Add Elements
on the left side of the editor. - Click Community.
- Click Login Bar.
- Click or drag and drop the login bar to add it to your page.
Setting up the login bar
- Go to your editor.
- Click the login bar element on your page.
- Click Set Up Login Bar.
Select the relevant login bar state: Logged-in or Logged-out:
Customize the Logged-in version of your login bar:
Appearance: Choose an avatar, full, or text style. If using an avatar, select an image, initials, or custom style and adjust its size. For text and full styles, add custom button text. Choose an arrow style and size. Optionally show a greeting before the member's name and display a notification bell icon.
Layout: Select the login bar alignment and element direction.
Dropdown menu: Select the items' alignment, change the logout button text and enable the Buy Again section.
Buy Again: When enabled, you can select the number of items displayed, what happens when the button is clicked, and customize the Add to cart and Buy again button text.
Customize the Logged-out version of your login bar:
Choose an avatar, full, or text style. If using an avatar, select an image, initials, or custom style and adjust its size. For text and full styles, add custom button text.
Managing the login bar menu
- Go to your editor.
- Click the login bar element on your page.
- Click Manage Menu.
- Choose what you want to do next:
- Add more menu items:
- Click + Add Menu Item at the bottom.
- Click Link.
- Choose where you want to link to (e.g. site page, external web address) and set it up using the available options.
- Click Done.
- Rename a menu item: Double-click the menu item to enter a new name for it.
- Remove a menu item: Hover over the relevant item, click the More Actions icon
and select Remove / Hide from menu. - Reorder the menu: Hover over the relevant item, hold the Reorder icon
next to it and drag it to the relevant position.
- Add more menu items:
Designing the login bar
- Go to your editor.
- Click the login bar element on your page.
- Click the Design icon
.
- Click the Regular tab and customize the design using the following options:
- Fill Color & Opacity: Change the colors and opacity of the icons, background and notifications on the login bar.
- Borders: Change the color, opacity and width of the login bar. and menu borders.
- Corners: Change the corner radius of the login bar and menu. The bigger the radius, the rounder the corners.
- Shadow: Add and design a shadow for your login bar and menu.
- Text: Change the colors and fonts of the text on the login bar and menu.
- Click the Hover and Selected tabs to update the text color when members hover over or select it.