Step-by-Step Tutorial: Visitor Interface in Website Admin Settings


Welcome to the Visitor Interface tutorial! Follow these steps to customize the side menu, mobile menu, navigation menu, and theming for your website's core visitor interface elements.

Under Website Admin you’ll find Settings in the side menu, clicking settings will expand to show Visitor Interface. Click Visitor Interface.

1. Interface Theme

  • The first item is Interface Theme, where you can select a theme for the core interface elements of your website, such as buttons and input fields as  

    • Classic squared interface elements (sharper defined edges)

    • Modern rounded interface elements (smoother curved edges)


2. User Authentication Button Settings 

  • The User Authentication buttons are the Log In / Sign Up buttons found in the top right of your website.

In this section, you can control how authentication buttons will be displayed on your website. You also have the option to customize the labels of these buttons to suit your preferences

  • ‘Button presentation’ lets you Select how authentication buttons will be displayed

    • Classic Buttons: Displays clean and legible authentication buttons.

    • Styled as NavLinks: Authentication buttons match the style of your navigation menu.

    • Integrated as NavLinks: Authentication buttons are part of your navigation menu and collapse into the "More Nav" group when space is limited.

  • ‘Which buttons’ will determine which buttons will appear by default. 
    (Note: Either option for Log In / Sign Up will still appear in the modal popup after a button is pressed. This setting just sets the initial display in case there is a preference.) 

    • Both buttons: Your website will have both a Log In and a Sign Up button. 

    • Log In button: Your website will have just a Log In button. 

    • Sign Up button: Your website will have just a Sign Up button.

Log In button label lets you adjust the text on this button
Sign Up button label lets you adjust the text on this button


3. User Modal Menu Styling 

  • When a registered user is signed in, this will style the User Menu sidebar found on the right. 

  • Choose colors for the User Modal Sidebar Menu from presets

    • Set the color for the user modal menu. (the overall interface color)

    • Set the highlight method for the user modal menu.(the edges of the interface color)

Note: Use of ‘Primary’ and ‘Secondary’ will use the same colors you’ve set for your website as the ‘Primary’ and ‘Secondary’ colors. Set what colors are used when Primary and Secondary are chosen by going into the Edit Mode of your website and adjusting the Template Color Palette (paint roller icon) for your Primary and Secondary colors of your website.


4. Mobile Navigation Styling 

  • Set the color for the mobile navigation menu will set the overall interface color specific to the Mobile view of your website


  • Set the header color for the navigation menu specific to the Mobile view of your website.


Note: As mentioned before- Use of ‘Primary’ and ‘Secondary’ will use the same colors you’ve set for your website as the ‘Primary’ and ‘Secondary’ colors.


5. Agent Info Panel Settings 

  • The user modal menu contains an agent info panel area. Use these options to customize its presentation.

    • Change the focus of the agent info panel will change the display and contact info to be the assigned agent, website owner, or company.

    • Change how the agent info panel displays names will display the full name, a ‘Your Agent’ placeholder, or be set to hide name if desired.

    •  Change how the agent info panel abbreviates names would adjust the name Tom Smith as:

      • First name and last name ( Tom Smith )

      • First Name ( Tom )

      • First name initial and last name ( T. Smith )

      • First Name and last name initial ( Tom S. )

      • Initials only ( T.S. )

    • Change how the agent info panel handles names that do not fit on a single line will adjust if the text wraps to the line below or trail off with an ellipsis (...) truncated

    • Change how the agent info panel displays emails will display the contact email as written, use a “Contact Us” placeholder, or be set to hide email if desired

    • Change how the contact agent panel handles emails that do not fit on a single line will adjust if the text wraps to the line below or trail off with an ellipsis (...) truncated

    • Change how the agent info panel displays phone numbers will display the contact email as written, use a “Call Now” placeholder, or be set to hide phone number if desired

    • Change the agent info panel image will adjust if the Agent Photo is shown, Company logo is shown, or be set to hide image if desired.

    • Change the mask around the agent info panel image will frame the photo by the selected shape and style selected. The options are

      • Circle

      • Square

      • Squircle (square with rounded edges)

      • Rectangular Portrait

      • Rectangular Landscape

      • No Image Mask


Once you’ve configured all options, click "Save"


Congratulations! You’ve completed customizing the Visitor Interface settings for your website. 

If you’d like to learn more, explore our other tutorial videos or subscribe to our channel for updates and tips. And remember, our Elite Service Team is here to help! Give us a call at 866-645-7700, Monday to Friday, 8 AM to 7 PM Central Time. We’re happy to assist!

Not currently a customer? Learn more by scheduling a demo with one of our experienced marketing consultants: https://webhosts.ihouseelite.com/Web/WebTestdrive/start/?rcode=youtube