Client Area Layout

The Client Area can display in two layouts, Desktop Mode or Responsive Mode.

Desktop Mode

Desktop Mode typically appears in desktop web browsers.

Homepage Panels in Desktop Mode

The Client Area Homepage layout in Desktop Mode

Desktop Mode renders most Client Area homepage panels in two columns.

For single-column panels, odd-numbered panels appear in the left column and even-numbered panels appear in the right column.

Panels that span both columns will render above the two-column layout, separately from the array of panels. Because of this, if a two-column panel is present, a single-column even-numbered panel can become an odd-numbered panel.

In WHMCS 8.5 and later, you can also create panels that span both columns.

Desktop Mode menu layout in the Client Area

There are two navigation bars in the Client Area:

  • The primary navigation bar contains the bulk of the menu and floats to the left of the secondary navigation bar.
  • The secondary navigation bar contains user-specific items and changes if a client is logged in to WHMCS.

There are two sidebars on every Client Area page.

  • The primary sidebar appears above the secondary sidebar on the left side of the page.
  • Sidebar content varies per page, though the primary sidebar typically displays information directly relevant to the page content while the secondary sidebar usually contains more general links.

Responsive Mode

Responsive Mode activates when the Client Area renders on a smaller screen like a phone or tablet. It renders all panels in a single column.

WHMCS rearranges the page layout in responsive mode for the best display on that device.

Homepage Panels in Responsive Mode

In Responsive Mode, the Client Area renders all panels in a single column.

The Client Area Homepage layout in Responsive Mode

All odd-numbered panels (left in Desktop Mode) display above all even-numbered panels (right in Desktop Mode).

Responsive mode activates when a visitor views the Client Area on a smaller screen, like a phone or tablet.

Responsive Mode menu layout in the Client Area

In responsive mode, the primary and secondary navigation bars appear above the primary sidebar. Under this, the page’s content displays, with the secondary sidebar at the bottom of the page.

client-area-customization client-area-menus homepage-panels client-area-sidebar

Last modified: June 14, 2024