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

# Section Banner Default

The "Banner Default" (see demo) (opens new window) section in Lagom WHMCS Website Builder is like a big, flexible space where you can grab your website visitors' attention with eye-catching pictures and important messages. It is like a spotlight that makes a strong start to your website or shows important stuff.

This element should not be used on specific page more than once, as its title contain <h1> tag, which should be used on each page only once.

  1. Caption - Caption text shown above banner title. Leave this field empty if you do not want to display that element.
  2. Title - Banner title placed in <h1> tag. HTML tags are allowed in that field.
  3. Subtitle - Banner subtitle, where content can be customized using text editor.

# Frontend

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

  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.

# Frontend

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

Transform your website's look with the "Banner Background" option. Customize banners to match your brand or content vibe—whether elegant, vibrant, or professional. This guide shows you how, ensuring a captivating first impression.

  1. Background Type - Select a background type from the dropdown menu. This choice also influences the layout of banner content, illustrated in the examples below.
  2. Background Graphic - Personalize your banner by selecting the background graphics that will be prominently showcased. 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).

# Type 2

Left aligned banner content, with 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 ourdemo page (opens new window).

# Type 3

Left aligned banner content, with graphic placed as full background. Designed to work with custom uploaded graphics.

Graphic will be always aligned to the right side of the screen, its suggested to upload graphics where left side of the background, will not interfere with the text.

# Type 4

Center aligned banner content, with graphic filling whole banner background. This banner type works with predefined SVG Backgrounds (opens new window), as well as with custom uploaded graphics as shown in below examples. Its suggested to upload graphic with at least 1920px width.

Below is a preview of Banner Type 4 with custom uploaded SVG graphic, downloaded from vectezy.com (opens new window), prepared as example to present you how easy it is to customize our banners.

# Type 5

Center aligned banner content, with graphic filling whole banner background. This banner type has additional spacing at the bottom, it has been designed to work with our predefined SVG Backgrounds (opens new window), which has been prepared to fill the bottom banner space.

This banner type, has been used as homepage banner in our demo page (opens new window).

# Type 6

Center aligned banner content, without graphic. Can be used on informational pages, like "Legal", "News" etc.

# Section Advanced Setting

  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. Disable Background for "Predefined Lagom Illustration" - Option prepared for "Background Types" where Lagom shape is added to the background, allows to disable the default shape placed behind SVG illustrations - learn more.
  4. Section Custom Class - This setting assign custom classes to the section container - learn more.

← Banner Domain →