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

# Section Graphic

The "Graphic" (see demo) (opens new window) section type in Lagom WHMCS Website Builder offers a visually impactful way to display your product features. By using the "Graphic" section effectively, you can engage visitors with compelling visual content, convey messages through images, and create an immersive experience that resonates with your audience.

# 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

# Title and Subtitle Above Section Content

# Section Actions

  1. Buttons - Add buttons using Button Manager modal.
  2. Starting Price - When you activate "Display starting price of selected product group", an additional field with product groups will appear. This field showcases the 'starting price' derived from the chosen product group.
  3. Choose Product - Select a particular product or product group from the list. This will display its price next to the button, as illustrated in the example below.
  1. Choose product group price display - This option lets you control how the billing cycle is shown for a specific product group. You can either display a fixed billing cycle (for example, "Annually") or select "Cheapest billing cycle". When you choose "Cheapest billing cycle", the system will automatically display the billing cycle with the lowest monthly cost.

# Frontend

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

# Section Graphic

  1. Graphic Type - Choose background type from the dropdown list, this setting will also change the banner content layout, as can be seen in below examples.
    • Type 1 - Predefined Lagom Illustration
    • Type 2 - Custom graphic in predefined container
    • Type 3 - Custom graphic filling full background
  2. Graphic Position - Select the placement of the section graphic. Choose from various predefined positions to ensure proper section flow on your website page.
  3. Graphic - Choose background graphics which will be shown for the banner, learn more about "Media Manager"

# Type 1

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). Graphic in this type can be placed in four different alignment.

# Left

# Top - Center

# Bottom - Center

# Type 2

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:

  1. img-shadow - adds shadow to the uploaded graphic, as can be seen in above example.
  2. 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).

Graphic in this background type can be placed in four different alignment

# Right

# Left

# Top - Center

# Bottom - Center

# Type 3

Graphic placed as full background is designed to work with custom uploaded graphics and predefined "SVG Background" (opens new window) illustrations.

# Right

# Left

# Center

# 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. Enable Timer - Introduces the ability to set a timer for when the section is displayed. For general use, the timer triggers the visibility of the section at specified times. For detailed information on this feature's setup and additional configurations available specifically in the Promotions category, please refer to the detailed section in our Website Promotion Pages documentation.
  4. Section anchor - Assign a distinct name to section anchors, providing the convenience of directing individuals to specific sections through purposeful linking. For more information, refer to our Common Settings guidelines.
  5. Section Custom Class - This setting assign custom classes to the section container - learn more.

← Section Key Features →