# 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
- 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.
- Title and Subtitle Position - Choose placement of section title and subtitle, there are two options to choose with:
- Description - Section description, where content can be customized using text editor.
# Title and Subtitle Above Description
# Title and Subtitle Above Section Content
# Section Actions
- Buttons - Add buttons using Button Manager modal.
- Starting Price - When "Display starting price of selected product group" is activated, additional field with product groups will be shown. This field displays "starting price" from the selected product group.
- Product Group - Choose product group for which "starting price" will be shown.
# Frontend
The choices from the management section above will be displayed as depicted below
# Section Graphic
- 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.
- Graphic Position - Select the placement of the section graphic. Choose from various predefined positions to ensure proper section flow on your website page.
- 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.
# Right
# 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:
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).
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
- 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.
- 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.
- Section Custom Class - This setting assign custom classes to the section container - learn more.