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

# Common Section Settings

Welcome to the comprehensive guide on Common Section Types Settings within Lagom WHMCS Website Builder (opens new window). This article delves into the shared settings and functionalities that empower you to create consistent and visually appealing web pages.

# Section Panel

The section panel displays all available settings for a specific section type in Lagom Website Builder. Every section uses the same panel, detailed below.

  1. Collapse: Show or hide the settings for a specific section added to a page.
  2. Section Name: Displays the name of the section type used for the specific section.
  3. Duplicate : Easily duplicate an already created section.
  4. Delete: Remove the section from the page.
  5. On/Off: Temporarily hide a section from the page without deleting it. Useful when working on a section you don’t want visible yet.
  6. Section Style: Choose the background style for the section. Available options:
    • Default: Transparent background.
    • Gray: Uses a gray background.
    • Primary: Uses the primary color for the background.
    • Secondary: Uses the secondary color for the background.
  7. Move Up: Change the section order by moving it up using the up arrow.
  8. Move Down: Change the section order by moving it down using the down arrow.

# Button Manager

Use the "Button Manager" function, to create and assign custom buttons in different sections with ease. Boost user engagement and enhance website conversion with effective call-to-action buttons.

# Buttons List

Displays list of created buttons, which then could be managed or removed.

  1. Add New - Opens "Button Manager" modal, which lets you add new button to the list.
  2. Edit - "Pen" icon allows you to edit existing button, once clicked "Button Manager" modal will open.
  3. Remove - "Trash" icon remove selected button.

# Configure Button

# Button Size

Allows you to choose button size, which are defined in "Style Manager" (opens new window).

List of options available for this field:

  1. Extra Small - Button with 30px height.
  2. Small - Button with 36px height.
  3. Default - Button with 44px height.
  4. Large - Button with 56px height.
  5. Extra Large - Button with 64px height.

# Button Style

Choose button style, personalize interface with various button designs. Enhance user experience.

List of options available for this field:

  1. Solid - Button with solid background.
  2. Outline - Button with transparent background and solid border.
  3. Link - Button without background and border.

# Button Type

Embrace creative control by selecting your desired button color, conveniently managed within the comprehensive "Style Manager" (opens new window) section for seamless personalization.

List of options available for this field:

  1. Primary
  2. Secondary
  3. Default
  4. Info
  5. Success
  6. Warning
  7. Danger.

# Button Text

Type in the text that you want to appear on the button you are creating. This text will be visible on the button when you are done. You can also use language strings to update the Button Text globally across your website. For detailed instructions on utilizing this feature, please refer to the "Language Strings" section.

Select the action you want the button to perform when it is clicked. This way, you can decide what happens next after someone clicks on the button you've made.

# Custom URL

When "Custom URL" option is selected, additional field will be shown, where you can enter your custom URL, which then will be assigned to this button.

# WHMCS Page

When "WHMCS Page" option is selected, additional select field will be shown. This field allows you to select a link to WHMCS or CMS page. Once selected, our addon automatically generate the URL and assign it to the button.

# WHMCS Product

When "WHMCS Product" option is selected, additional select called "Button Linked Product" will be shown below. In this select you can choose to what product or product group ordering process this button should be linked. WHMCS product and product groups can be managed in WHMCS settings (opens new window).

# Homepage

When "Homepage" option is selected, specific button will always link to the page marked as "homepage".

# Button Custom Classes

This field allows you to assign custom classes to your button, which gives you advanced possibilities to perform further customization, via CSS or JS files.

Here are few custom classes which are used in predefined CMS pages, to animate right arrow on button hover:

  1. flex-row-reverse - this call will change the order of the button elements, icons from the left side will be moved to the right.
  2. icon-animation - with this class icons will be hidden by default, they will be shown only on button hover.

# Open URL in New Window

Upon choosing "One URL in New Window," clicking the button will result in the designated URL opening in a fresh browser tab for a seamless browsing experience.

# Show icon

This feature provides you with the flexibility to select an icon for the button you've created. You can choose from a list of pre-defined icons to add visual flair to your button's design.

# Language Strings

The "Link Text" and "Button Text" fields provide an option to add language strings. This feature allows you to easily update text across multiple buttons or links on your site from a single location. For instance, if you want to globally replace the text "Get Started Now" on all buttons with "Buy Now", you can do so in a language file, rather than editing each button on each page individually via the Lagom WHMCS Website Builder. You have an option to use already existing string, or create your own string, by creating an override file.

# WHMCS Language Strings

In this example we’ll show you how you can use already existing string from WHMCS language file located in /langs/english.php.

For example, if you decide to use following variable in your button $_LANG['cPanel']['emailAccounts'] = "Email Accounts";

If the WHMCS language file does not contain the language string you would like to use, you can create an override file by following this "documentation article".

# Lagom Language Strings

In this example, we'll demonstrate how to use a language string from a language translation file, based on the following example code:

'website' => [
    'products' => [
      'product_btn' => 'Get Started Now'
    ]
  ]

Use the variable $RSLANG.website.products.product_btn. It is constructed from the main key (website), followed by the subsequent keys (products.product_btn), all separated by periods (.). You can then use this variable in the input field for your link.

# Text Editor

Selected fields in sections has an option to manage them using advanced "Text Editor", which gives you additional options to manage the content using its tools, or write your own HTML code.

  1. Text Styles - Open dropdown with list of predefined text styles like:
    • Headings - h1-h6
    • Code
    • Quote
    • Normal Text
  2. Bold - Makes highlighted text in bold style
  3. Line Through - Makes highlighted text in line through style
  4. Underline - Makes highlighted text in underline style
  5. Clear Text Style - Clears all custom styles for highlighted text
  6. Font Family - Display predefined list of different font faces, however its suggested to use default font face
  7. Text Background Color - Allows you to set background for the highlighted text
  8. Dot List - Create dotted list
  9. Number List - Create numbered list
  10. Text Alignment - Lets you choose the text alignment
  11. Table - Creates table
  12. Link - Allows to add link for highlighted text
  13. Image - Allows to add image to the description, you can choose file from your computer, or load it from specific url.
  14. Video - Allows to add video, by entering video url from: YouTube, Vimeo, Vine, Instagram, DailyMotion or Youku
  15. Full Screen - Open editor in full screen
  16. Code View - Enable "code" mode, so you can write your own HTML code

# Advanced Settings

# Combine Sections

Eliminate bottom padding and borders from a managed section, allowing the fusion of two sections. It is recommended to apply identical "Section Style" in the "Section Panel" for seamless integration.

# Frontend

Below is an example usage of this setting in our demo page (opens new window).

# Overlay Sections

This configuration pulls the section below over the currently managed section while adding an extra 200px padding at the bottom. You can adjust the pixel value by customizing the --cms-section-overlay-margin CSS variable through custom CSS rules.

Section which will be overlapped over this section, should use "Default" setting for the "Section Style" in "Section Panel". This way overlapped section will be transparent, so you will receive required result.

# Frontend

Below are an example usages of this setting in our demo pages:

  1. Product Pages (opens new window)
  1. Contact Us (opens new window)

# Disable Background Shape

Option prepared for "Background Types" where Lagom shape is added to the background.

# Frontend

# Section Anchor

Assign a distinct name to section anchors, providing the convenience of directing individuals to specific sections through purposeful linking.

Here's how you can use the above option:

  1. Offer URLs that automatically scroll to specific sections. For instance, by adding #pricing to the end of a Shared Hosting URL like this: https://demo.rsstudio.net/lagom-website-builder/shared-hosting#pricing (opens new window), you can directly lead customers to the "Product" section.
  2. By adding #pricing to the "Custom URL" field, in "Button Manager" modal, your customers will be automatically scrolled to the "Product" section, once button is clicked.

Please note that the "Anchor Name" should be entered to below field without # sign.

# Section Custom Class

This setting allows you to assign custom classes to the section container. You can input your own CSS class here and then apply the necessary styling in the theme-custom.css file, or choose from our list of predefined classes below.

You can add multiple classes to this field, for example:

# Section "Graphic"

Commonly used classes for section type "Graphic" in our predefined pages.

  • img-shadow - adds shadow to the custom image for the graphic "Type 2"
  • img-size-lg - overrides the graphics container width to 928px, for the graphic "Type 2"
  • lagom-animation lagom-animation-fadeinbottom - commonly used in our predefined pages, adds animation to the image shown in section type.

# Common Section Classes

  • section-with-h3-title - commonly used in our predefined pages, this class change size of the section title to h3.

# Additional Information Below Section Content

This option allows you to display additional information below selected section content, such as pricing notes, VAT inclusion, renewal rules, promotions, or payment terms.

Starting from version 1.1.3, this option was available for the following sections:

Starting from version 1.2.1, support for this option has been extended and now also includes:

The entered content is displayed below the main section content, regardless of the section layout, style, or internal structure. This makes it possible to provide important information without affecting the core presentation of products or pricing.

The content can be fully customized using the built-in Text Editor, which allows you to format text, add lists or links, and control content alignment to match your pricing model and legal requirements.

# Frontend

Example usage of this setting:

# Promotion Codes

With version 1.1.0, we have introduced the ability to assign WHMCS promotion codes to selected section types, including "Products" and "Featured TLDs". This feature enables you to apply promotion codes to an entire section or specific section items. When a promotion code is assigned, our addon will automatically recalculate the prices of the corresponding items based on the promotion rules configured in WHMCS (opens new window). Please note that only "Percentage" and from version "Fixed Price" types of promotion codes are supported for this feature.

From the version , Promotion Codes are available in the "Product Groups" section.

This functionality has been primarily designed for "Promotion Pages", but it can be utilized on any Website Builder page, providing you with complete flexibility in how you implement this feature.

IMPORTANT: Please note that when a promotional code set in WHMCS expires, it will NOT automatically be removed from the product URLs, and the displayed prices will remain unchanged. To update the pricing or remove expired promotions, navigate to RS Themes -> Tools and refresh the Section Cache. This is necessary because the Website Builder uses a built-in cache system, storing the generated HTML pages in the database to enhance loading speed. As a result, changes are not dynamically reflected, and the cache must be cleared manually after updates.

# For Selected Item

Promotion codes can be applied to individual section items, allowing you to selectively apply discounts without affecting all items within the section. This provides granular control over your promotions. To assign a promo code to a specific item:

  1. Apply Promotion Code to This Product: Enable this toggle to apply a promotion code to the item.
  2. Promotion List: Once enabled, an additional field will appear where you can select the desired promotion code to apply.

Note: Assigning a promo code to an individual item overrides any promo codes applied at the section level.

# For Entire Section

To simplify the promotion process, it is recommended to assign the same promotion code to all products or domains within a section. This is because WHMCS does not support multiple promotion codes being applied simultaneously at checkout. Assigning a single promo code ensures a seamless user experience and avoids potential conflicts when customers add multiple products to their cart.

  1. Apply Promotion Code to This Product: Enable this toggle to apply a promotion code to the item.
  2. Promotion List: Once enabled, an additional field will appear where you can select the desired promotion code to apply.

# Timer

The Timer feature, available in the Banner Default and the Graphic section types, can be used for any page category in Lagom WHMCS Website Builder. It allows you to add a timer element to your webpage, measuring and displaying the remaining time for an event, such as a timed promotion. You can find this option in the "Advanced Section Settings" of the respective sections. See the screenshots below for a visual guide.

# Timer Style

Select the graphic style of the timer from the options listed below.

# Default

# Bordered

# Boxed

# Separated

# Time Display

This setting lets you configure the Timer’s behavior. If you use Timer on the Promotion Page type, you will have an additional setting to synchronize the Timer display time settings with the display settings of the entire promotion page.

# Custom Settings

This option lets you configure the Timer with your preferences, including the start and end of the countdown, the countdown type, and the action to take when the countdown ends. Details on these options are provided below.

# Start Date

Set when the countdown begins.

# End Date

Set when the countdown ends.

# Countdown Type

Select the type of countdown for the timer.

  • Restart Every 24 Hours - The timer restarts every 24 hours, beginning from the time set in "Start Date". The "Start Date" must be set, and you can also set an "End Date" if you want the timer to stop at a specific time. All calculations are based on the server's time zone.
  • Synchronized with End Date - The timer counts down to the "End Date". It will only start showing if the "Start Date" has already been reached (if a "Start Date" is set). Otherwise, it starts counting down immediately.
# Action After End Date

Decide what happens when the countdown reaches the end date. Functionality unlocked after setting the "End Date".

  • Hide Timer - The Timer is being hidden.
  • Display 00:00:00:00 - The timer will stop and display zero values.

# Synchronized with Promotion Display Time

When the Timer is used on a Promotion Page, an additional option “Synchronized with Promotion Display Time” becomes available. This feature allows you to synchronize the timer from the Banner Default or Graphic sections with the overall display time settings of the entire Promotion Page. Normally, both the Timer and the Promotion Page have their own separate time settings, but this option enables them to work together, ensuring that the timer in the banner is in sync with the visibility duration of the whole promotion page. Alternatively, you can still choose to let the timer run independently if needed.

← Banner Default →