# Section Key Features
Elevate your Lagom WHMCS Website Builder projects by harnessing the power of the "Key Features" (see demo) (opens new window) section type. Designed to provide a visually compelling and organized representation of your offerings, this feature empowers you to highlight the core strengths and unique aspects of your services.
With the "Key Features" section type, you have the flexibility to showcase essential attributes, benefits, and functionalities of your products or services in a captivating and easily digestible format. Whether you are presenting software features, service packages, or product highlights, this section type enables you to craft impactful content that resonates with your audience.
# Section Description
- Caption - Caption text shown above section title. Leave this field empty if you do not want to display that element.
- Title - Section title placed in
<h2>tag. HTML tags are allowed in that field. - Subtitle - Section subtitle, placed below section title. Leave this field empty if you do not want to display that element. Content can be customized using text editor.
# Key Features List
# Features List
Each "Key Feature" is presented as an individual "Group" within the item list. You have the flexibility to rearrange these items by utilizing the up and down arrows displayed on the left side.
- Feature Group Heading - Group heading shows basic information about added item and its management actions.
- Edit - The "Edit" button collapse the group and shows its management options.
- Remove - Removes group item from the list.
- Add Group - Adds new group to the list.
# Features Management
# Title
Please input the feature title that will be displayed on your website, according to the "Feature List Type" you select in the subsequent settings.
This element will be displayed on the front-end website as depicted below, although its appearance may vary depending on the "Feature List Type" selected.
# 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, although its appearance may vary depending on the "Feature List Type" selected.
# Buttons
Generate call-to-action buttons that will appear beneath the description of each "Key Feature." Once "Add New" action will be clicked "Button Manager" modal will be opened, with advanced button management options .
Created action will be shown as in below example:
# Graphic
When you decide to assign a graphic to the "Key Feature", click on "Add New" button so "Media Modal" will show up.
The graphics for the "Key Feature" are displayed on website pages, as depicted below:
# Key Features Settings
# Features List Type
Select the preferred display style for the features on your generated website page; you have three different types to choose from.
# "Type 1" - Default List
This is a list of items where all elements are entirely visible. Therefore, it is advisable to employ brief descriptions with a limited number of items for this specific "type" of "features list."
# "Type 2" - Accordion List
This is a list of items that functions similarly to an accordion element. Only the presently active item is displayed in full view, while for all other items, only the titles will be shown.
# "Type 3" - Tabs displayed below section header
The feature titles are presented as "tabs" beneath the section header, while the remaining feature elements will be displayed either below, to the left, or to the right.
# Features List Style
Select the preferred style for the features list, with three different options available. Please note that this setting applies exclusively to "Feature List Type 1-2."
# "Default" Style
# "Bordered" Style
# "Boxed" Style
# Features Graphic Type
Select the type of graphic you intend to use for this section. You have two options to choose from.
# "Type 1" - Predefined Lagom Illustration
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 (opens new window).
# "Type 2" - Custom Graphic in Predefined Container
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:
img-shadow- adds shadow to the uploaded graphic, as can be seen in above example.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).
# Features Graphic Position
Choose on which content side key feature graphic should be shown in the website section which you are currently creating. You have two options to choose from.
# "Left" Position
# "Right" Position
# 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.
# Section Advanced Settings
- 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.
- Overlay Section Below on This Section - This setting pull below section over this section, moreover it adds additional bottom padding - learn more.
- Feature Custom Class - Allows you to assign custom class to all feature items added to this section.
- Section Anchor - Allows to set name for the section anchor, which then could be used, to link people to specific section - learn more.
- Section Custom Class - This setting assign custom classes to the section container - learn more.