Lagom WHMCS Client Theme Documentation
Docs v2.x
/ /website-builder/ /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.

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

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" 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're creating. This text will be visible on the button when you're done.

Select the action you want the button to perform when it's 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.

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

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

← Banner Default →