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

# Section Features

The "Features" (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.

# Frontend

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

# 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 - The "Features" list item presents both its title and description.
  2. Edit - The "Edit" button opens a modal where you can personalize the feature item.
  3. Remove - Removes Feature item from the list.
  4. Add New - Adds new Feature item to the list.

# 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.

# Group Features

The "Group features in multiple tabs" option enables you to generate multiple feature groups, which will subsequently appear on the frontend as distinct tabs

This is how it is going to be displayed on the frontend website:

# Manage Group

When activated, the created items will be enclosed within a group container, accompanied by additional configuration options outlined below.

  1. Group Title - Set the group name, which then will be shown as "tab", above "Product" items.
  2. Close/Edit - Click to hide or expand management options.
  3. Remove - Click to remove group and its items. IMPORTANT: all "items" from this group will be removed.
  4. Add Group - Click to create new group, where you can assign new Feature items.

# 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 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

# "Boxed" Style

# "Bordered" 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.

# Feature Slider

When "Display features as slider" is enabled additional field will be shown with following options.

# Full Width Slider

When "Full browser width slider" option is selected, features will be shown as infinite full width slider, as shown in below example.

# Slider With Arrows

When "Slider with left and right arrows" option is selected, features will be shown in container, with left and right arrows to navigate between the slides, as shown in below example.

# Section Actions

  1. Buttons - Add buttons using Button Manager modal.

These buttons will be shown below the features list, as shown in below example.

# 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 Features Sides →