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

# Section Features Sides

The "Features Sides" (see demo) (opens new window) section in Lagom WHMCS Website Builder is great for showing off what your product or service can do. List key benefits, use icons for visual appeal, keep descriptions short, and use consistent design. It is an easy way to help visitors understand what you offer.

# 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. Title and subtitle position - Choose placement of section title and subtitle, there are two options to choose with:
  5. Description - Section description, where content can be customized using text editor.

# Title and Subtitle Above Description

Example of section where "title and subtitle" is placed "above description":

# Title and Subtitle Above Section Content

Example of section where "title and subtitle" is placed "above section content":

# Features List

# Features

Present the list of generated features that will appear on the edited website page. This list offers the convenience to arrange items by dragging and dropping, allowing you to adjust their sequence.

  1. Item - Features list item, which display its title and description.
  2. Edit - The 'Edit' button opens a modal where you can personalize the feature item.
  3. Remove - Remove Feature item from the list.
  4. Add New - Add new Feature item to the list - learn more.

# Add Feature Item

# Item Title

Enter item title, which will appear on the website page as an h3 heading. HTML tags are permitted in this field. If you wish to exclude this element, leave it blank.

Here's an example of how this field will be displayed in the 'Feature' element on your website:

# Item Description

Enter item description, which will appear on the website below item title. This field display "text editor", which give you description configuration. If you wish to exclude this element, leave it blank.

Item description will be shown on the frontend as in below example:

When activated, this option links the entire item to a designated URL, based on settings in subsequent fields that appear upon activation.

  1. Show Link - Choose whether you want the feature item to include a link. If selected, additional fields will become visible.
  2. Link Text - Enter link text.
  3. Link Type - Choose link type.
    • Custom URL - When selected new field will be shown where custom rul can be entered.
    • WHMCS Page - When selected new filed will be shown with list of all available WHMCS and CMS pages.
    • Homepage - When selected, feature will be linked to the homepage.
  4. Custom URL - This field becomes visible only when the "Custom URL" link type is chosen. Different fields will be displayed for other link types.
  5. Open URL in new window - When activated, link will be opened as new browser window.

The feature link will appear on the website page, as illustrated below:

# Show Graphic

When the "Show graphics for this item" option is turned on, a list of available icons and graphics will be displayed. Learn more about "Media Modal".

The graphics for the "Feature" are displayed on website pages, as depicted below:

# Item Custom Class

Enables you to assign a personalized HTML class to the currently edited FAQ item, facilitating custom modifications through the addition of custom CSS rules.

# Features Settings

# Feature Size

Select the size at which the created "features" should be displayed on your website. Choose from a list of predefined sizes.

# "Default" Size

# "Small" Size

# "Large" Size

# Feature Icon Position

Select the position of the graphic within the "feature" item. This choice will also influence the layout of the "feature" item content.

# "Top - Center" Icon Position

# "Top - Left" Icon Position

# "Left" Icon Position

# "Right" Icon Position

# Feature Position

Choose on which side, feature items should be shown in this sections. You have two options to choose from: "Left" or "Right" placement for the "Feature" items.

# Feature Style

Determine the style you want to apply to the created "feature" items. Choose a style that maintains consistency with other section types on this page.

# "Default" Style

# "Bordered" Style

# "Boxed" Style

# Feature Columns

This setting enables you to specify the number of columns for "feature" items displayed on various device screen resolutions.

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

# Section Actions

  1. Buttons - Add buttons using Button Manager modal.
  2. Starting Price - When "Display starting price of selected product group" is activated, additional field with product groups will be shown. This field displays "starting price" from the selected product group.
  3. Product Group - Choose product group for which "starting price" will be shown.

# 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. Section Anchor - Allows to set name for the section anchor, which then could be used, to link people to specific section - learn more.
  4. Section Custom Class - This setting assign custom classes to the section container - learn more.

← Section Graphic →