Lagom WHMCS Client Theme Documentation
Docs v2.x
/ /website-builder/ /extensions/ /module-integration/ /order-form/

# Section Location List

Welcome to the "Location List" section type in Lagom WHMCS Website Builder. This feature lets you show where your hosting services’ servers are located on an interactive map, grid of boxes or list, which you cancustomize to fit your branding and improve the user experience on different devices.

Follow this guide to set up the display options smoothly and integrate this section effectively into your site. By the end, you will be ready to show server locations clearly, improving transparency for your users.

Check out this feature in our Location List Demo (opens new window).

# Section Description

  1. Caption - Provide a brief section caption to appear above the main title in a smaller font. You can skip this if you do not wish to display this element.
  2. Title - Elevate page clarity and visual hierarchy using section titles. Optionally skip for not displaying this element.
  3. Subtitle - Add concise text to clarify section content, enhancing context and user understanding. Content can be customized using a text editor (opens new window). You can also skip this if you do not want to display this element.

# Location List

In this section, you can manage the list of locations that will be displayed on your website. Here you can add locations from the predefined catalogue of locations we have prepared for you, or add a custom location. You can rearrange these items easily through a drag-and-drop system, adjusting their order as needed.

  1. Locations - Locations list, which displays a list of locations added to this section.
  2. Add Location - Add a new location to the list.
  3. Edit - The "Edit" button opens a modal where you can personalize the already added location to the list.
  4. Remove - Remove the location from the list.

# Add/Edit Location

# Select Location

This option allows you to choose a location from a predefined catalogue of locations or create your own by selecting "Custom Location". See below for more information on how to set up a custom location.

# Custom Location

By choosing this option, you can create a custom location that does not appear in the predefined list, allowing you to specify unique details and positioning on the map.

  1. Location Title - Specify the title for your custom location.
  2. Location Description - Use the text editor to craft a description for your custom location.
    • By default, in the location box, the Location Description appears after the Location Title, separated by a comma (,). For example:
    Switzerland, Zurich
    • If you prefer to display the Location Description on a new line, use the <br> tag in the Location Title to hide the comma separator and place the description directly below the title. For example:
    Switerland
Zurich
    • You can also use the <br> tag directly in the Location Description for additional line breaks.
  3. Position Top - Set the "X" coordinate for the pin on your map. Necessary to complete when using "Type 1 - Map" Location List Type setting.
  4. Position Left - Set the "Y" coordinate for the pin on your map. Necessary to complete when using "Type 1 - Map" Location List Type setting. For guidance on selecting coordinates, see the information below.

How to Determine Pin Coordinates for a Custom Location?

To find the coordinates for a custom location, add any Location List section type to your webpage. Then, use your browser's Developer Tools to inspect the map element and identify the approximate location for your pin. For step-by-step guidance, please refer to the instructional video below.

# Location Status

Select the status for the selected location. You can choose from the following statuses - None, New and Coming Soon.

Allows you to add a link to your location. Choose from predefined pages or specify a custom URL.

  1. Item link type - Specify the type of link for the location.
  2. Custom URL - When selected, a new field will appear where a custom URL can be entered.
  3. WHMCS Page - When selected, a new field will display a list of all available WHMCS and CMS pages.
  4. Homepage - When selected, the location will link to the website's homepage.
  5. Open URL in new window - When activated, the link will open in a new browser window.

# Media Library

In this section, you can choose a flag from our prepared list or upload your own flag. Accepted formats include PNG, JPG, SVG, and GIF with the max file size of 100 MB.

# Advanced Settings

# Item Custom Class

This setting assigns custom classes to the location container - learn more.

# Location Settings

# Location List Type

Choose how the Location List will appear on your website. You can choose from two types, that automatically adjust based on the screen resolution your customers are using. See below for more details on how the appearance changes across different devices for each Location List Type.

# Type 1 - Map

This type displays a world map with marked locations for resolutions above 992 px. For screens between 991 px and 768 px, it switches to a boxed layout, and below 768 px, the layout changes to a list format, making it more user-friendly on mobile devices. The location is displayed as a “pin” on the world map, and when hovering over it, a box with the location's information appears. The display settings for this box can be configured in the Location Boxes Settings section described below.

This option also includes settings for "Map Style" and "Pointer Style," allowing you to customize the geographic display.

  1. Map Style - Choose the display style of the world map. Available options are "Default" and "Primary".
  2. Pointer Style - Choose the style of the pointer displayed on the map. Options include "Pin" and "Point".

# Type 2 - Boxes

This type displays location information in a visually appealing grid of boxes, ideal for showcasing multiple locations at once. On mobile devices (below 768 px), the layout automatically switches to a list format. The boxes can be customized using the options described in the Location Boxes Settings section below.

# Display Graphic Map in Background

This option allows you to display a world map in the background when the Location List is shown in a boxed format. It applies to “Type 1 - Map” for resolutions between 991 px and 768 px, and “Type 2 - Boxes” for resolutions above 768 px.

# Location Boxes Settings

Configure the appearance of the boxes in which location information is displayed.

  1. Location box size - Choose the size of the box element with the location displayed on the webpage. Options include - "Default", "Small", and "Large".
  2. Location box style - This option allows you to select the display style of the location box. The available options are - “Default”, “Boxed”, and “Bordered”. This setting does not apply to the location boxes on “Type 1 - Map” when hovering over the location pins.
  3. Location box icon position - Choose the placement of the flag icon for the location. Options include - "Left", "Right", and "Top Center".

# Location Columns Settings

  1. Columns on desktop - Define the number of columns for locations displayed on screens wider than 1320px.
  2. Columns on tablet horizontal - Specify the number of columns for locations displayed on screens with widths ranging from 992px to 1319px.
  3. Columns on tablet vertical - Choose the number of columns for locations displayed on screens with widths ranging from 768px to 991px.
  4. Columns on mobile - Set amount of columns with locations, shown on screens with width smaller than 767px.

# Section Actions

In this section you are able to add additional CTA buttons which will be shown below product boxes. Learn more how to add buttons using Add Button Manager modal.

# Advanced Section Settings

  1. Combine This Section With Section Below - When activated it will remove bottom padding and border from this section. This setting was designed to combine two sections into single section - learn more.
  2. Overlay Section Below on This Section - This setting pull below section over this section, moreover it adds additional bottom padding - learn more.
  3. Boxes Custom Class - Allows you to assign custom class to all box items generated in this section - learn more (opens new window).
  4. Section Anchor - Allows to set name for the section anchor, which then could be used, to link people to specific section - learn more.
  5. Section Custom Class - This setting assign custom classes to the section container - learn more.

← Section Products →