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

# Section Domain Search

Welcome to the comprehensive guide on the "Domain Search" (see demo) (opens new window) section type in Lagom WHMCS Website Builder. This article explores how to integrate an interactive domain search widget into your website, enabling visitors to check domain availability directly. Discover how to enhance user engagement and provide a seamless domain search experience on your site.

# Section Description

  1. Caption - Caption text shown above section title. Leave this field empty if you do not want to display that element.
  2. Title - Section title placed in <h2> tag. HTML tags are allowed in that field.
  3. Subtitle - Section subtitle, placed below section title. Leave this field empty if you do not want to display that element.
  4. Description - Section description, where content can be customized using text editor.

# Frontend

The choices from the management section above will be displayed as depicted below

# Section Domain Field

# Domain Type

Choose what type of domain field should be used in this section type.

Available domain types:

  1. Domain Search - This field will link to the WHMCS domains search page.
  2. Domain Transfer - This field will link to the WHMCS domain transfer page.
  3. Display both fields as tabs - Both fields will be shown, under separate tabs, as shown in below screenshot.

# Domain Actions

Add buttons using Button Manager modal.

For example you can create link button, which will lead your customers to the page with TLD table showing pricing for all available TLDs in your WHMCS system.

# Domain Spotlights

When you enable "Display domain spotlight TLDs", highlighted domain TLDs will appear beneath the domain field. You can configure these TLDs on the WHMCS Domain Pricing page.

# Add Spotlight TLD

Domain TLDs displayed in this section can be managed in WHMCS settings.

  1. Go to Configuration > System Settings > Domain Pricing.
  2. Click the lightbulb icon next to the TLD you wish to spotlight. It will appear in the Spotlight TLD section at the top of the page.
  3. Repeat this process for up to 8 TLDs.
  4. Spotlighted TLDs can be dragged left and right to change the order in which they appear on the domain results page.
  5. To remove a Spotlight TLD, click the X next to the TLD in the Spotlight section at the top of the page. This action deletes the TLD from the spotlight section on the domain results page.

# Section Graphic

  1. Graphic Type - Choose background type from the dropdown list, this setting will also change the banner content layout, as can be seen in below examples.
  2. Graphic Position - Choose position of the graphic.
  3. Graphic - Choose background graphics which will be shown for the banner, learn more about "Media Manager"

# Type 1

Center aligned content, without any graphic shown in the background. This section type is used in our homepage (opens new window) in our demo.

# Type 2

This type has been designed to work with predefined "SVG Illustrations" (opens new window) provided in our package. Only default predefined illustrations will be animated as shown in our demo. Graphic in this type can be placed in four different alignment.

# Left

# Top - Center

# Bottom - Center

# Type 3

Graphic placed in predefined container (596px width and 480px height). Designed to work with custom uploaded graphics. It is suggested to upload graphic, with at least 596px width, as this is the container width, to which this graphic will be stretched.

For this banner type, we have prepared special custom classes, which can be assigned in advanced settings:

  1. img-shadow - adds shadow to the uploaded graphic, as can be seen in above example.
  2. lagom-animation lagom-animation-fadeinbottom - adds fade in animation to the graphics on page scroll, as can be seen in our demo page (opens new window).

Graphic in this background type can be placed in four different alignment

# Right

# Left

# Top - Center

# Top - Bottom

# Type 4

Graphic placed as full background is designed to work with custom uploaded graphics, and predefined "SVG Background" (opens new window) illustrations.

# Right

When "Right" alignment is selected, graphic will be always aligned to the right side of the screen, its suggested to upload graphics where left side of the background, will not interfere with the text.

# Left

When "Left" alignment is selected, graphic will be always aligned to the left side of the screen, its suggested to upload graphics where right side of the background, will not interfere with the text.

# Center

When "Center" alignment is selected, graphic filling whole banner background. This banner type works with predefined SVG Backgrounds, as well as with custom uploaded graphics as shown in below examples. Its suggested to upload graphic with at least 1920px width.

# Section Advanced 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. Disable Background for "Predefined Lagom Illustration" - Option prepared for "Background Types" where Lagom shape is added to the background, allows to disable the default shape placed behind SVG illustrations - learn more.
  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 FAQ →