Create Custom Section Type in Lagom WHMCS Website Builder

• Before Start
• Create Section Type
  • Static Section
  • Editable Section
• Section Type Fields
  • Subsection
  • Text
  • Text Editor
  • Buttons
  • Select
  • Checkbox
  • Graphic
  • List
  • Testimonials
  • Products
  • Product Groups
  • Group
• Custom CSS Code

Lagom WHMCS Website Builder empowers you to design and craft your dream website effortlessly, but what if you desire something beyond the pre-designed section types? How about bringing your unique ideas to life by building your very own section types?

In this comprehensive documentation article, we will take you on a journey through the steps required to create your own custom section type in Lagom WHMCS Website Builder. You'll have the freedom to enter your own HTML code, enabling you to build precisely what you need, all while keeping your website as unique and personalized as your vision. Follow along as we unlock the secrets to unleashing your creativity within Lagom WHMCS Website Builder, and take control of your website like never before.

Before Start

Before diving into the process of customizing your section types in Lagom WHMCS Website Builder, it is essential to be aware that such modifications require a foundational understanding of HTML, CSS, PHP, and Smarty code. These fundamental skills are necessary to ensure a smooth and effective customization process.

If you are not proficient in these languages, we strongly advise against attempting any customization. Please be aware that our Technical Support team does not provide assistance with code customization for our products, as this goes beyond the scope of typical support services.

However, if you lack the necessary coding expertise but still wish to pursue customizations, we offer custom development services at an hourly rate. Our dedicated development team is available to assist you in bringing your vision to life. Do not hesitate to reach out for professional assistance to make your Lagom Website truly your own.

Create Section Type

The section types in Lagom WHMCS Website Builder are conveniently stored on your WHMCS server within the directory /templates/lagom2/core/cms/sections/config/. Within this directory, you will discover a range of folders housing various section types, offering you a diverse selection of options to enhance your website - explore available folders.

Static Section

The following steps explain how to create a section type with static HTML code. In simple terms, this means that the elements in this section won't be editable using the RS Themes addon. This option is ideal for customers who want to make a fixed section with their custom HTML code and do not require the ability to adjust its settings through the RS Themes addon like our pre-made section types do.

Please note, that if you implement HTML changes to the smarty file of specific section type, which is already used in pages generated by Lagom Website Builder, then you have to clear the "Section Cache". If you won't do this your changes won't be visible on pages, where this section type has been used.

To create this specific type of section, just follow these steps:

1. Go to /templates/lagom2/core/cms/sections/config/ on your WHMCS server.

2. Create new folder and name it as you need, do not use spaces, or any other special characters. In our example we'll create folder called /new-static-section.

3. In newly created folder, you have to create a configuration file called section.php, where we'll need to insert required line of code:

   • default_type - Decide whether the section you've created will appear in the RS Themes addon section list. You have two options for this variable:
     • true - Section will be visible in RS Themes addon
     • false - Section will NOT be visible in RS Themes addon
   • name - Define section name which will be shown in RS Themes addon
   • slug - Type in the file name (without the file extension) where the core section type code is located. This is important because certain section types in our system have multiple .tpl files in their section folder. Therefore, the addon needs to know which file is the main one.
   • thumb - Enter filename of the thumbnail graphic, which will be shown in RS Theme addon, in section list modal.

   Final code, will look like this:

<?php

return [
    'default_type' => true,
    'name' => 'New Static Section', 
    'slug' => 'new-static-section', 
    'thumb' => 'thumb.png'
];

4. Create smarty template file, with the same "name" as set in the section.php file, in our example template file will be named new-static-section.tpl.

5. Assign newly created section type to the Lagom WHMCS Website builder page:

Editable Section

The process of creating an editable section using the RS Themes addon is considerably more complex than generating a section with static code. This complexity arises from the necessity to become familiar with the available section fields within our addon and understand how to effectively employ them.

Please note, that if you implement HTML changes to the smarty file of specific section type, which is already used in pages generated by Lagom Website Builder, then you have to clear the "Section Cache". If you won't do this your changes won't be visible on pages, where this section type has been used.

To create editable section type, just follow these steps:

1. Go to /templates/lagom2/core/cms/sections/config/ on your WHMCS server.

2. Create new folder and name it as you need, do not use spaces, or any other special characters. In our example we'll create folder called /new-editable-section.

3. In newly created folder, you have to create a configuration file called section.php, where we'll need to insert required line of code:

   • default_type - Decide whether the section you've created will appear in the RS Themes addon section list. You have two options for this variable:
     • true - Section will be visible in RS Themes addon
     • false - Section will NOT be visible in RS Themes addon
   • name - Define section name which will be shown in RS Themes addon
   • slug - Type in the file name (without the file extension) where the core section type code is located. This is important because certain section types in our system have multiple .tpl files in their section folder. Therefore, the addon needs to know which file is the main one.
   • thumb - Enter filename of the thumbnail graphic, which will be shown in RS Theme addon, in section list modal.

4. Add required "Fields" to the section.php file - Explore available field types. For example, we'll add field with text type, where you'd be able to enter the section "Caption" text:

<?php

return [
    'default_type' => true,
    'name' => 'New Editable Section', 
    'slug' => 'new-editable-section', 
    'thumb' => 'thumb.png',
    'fields' => [
        [
            'type' => 'text',
            'name' => 'title',
            'label' => 'title',
            'placeholder' => 'Enter caption...'
        ]
    ]
];

4. Create smarty template file, with the same "name" as set in the section.php file, in our example template file will be named new-editable-section.tpl.

5. Assign newly created section type to the Lagom WHMCS Website builder page:

Section Type Fields

Here's an overview of the available field types that can be applied to editable section types. These fields enable the creation of customizable sections, which can be edited on newly created Lagom WHMCS website pages through the RS Themes addon

Subsection

This field type is special, as it won't implement any customization option to the RS Themes addon. Its designed to lets you create "sub-sections" in the RS Themes addon, to organize the fields which will be created in specific below this field type.

Backend

Example Code

Here is an example code snippet that can be used in section.php configuration file:

[
    'type' => 'subsection',
    'name' => 'subsection',
    'label' => 'Banner Description',
    'collapse' => false
],

Field Type Values

Here is a guide to the available variables and their respective values:

1. type - defines field type,
2. name - defines field name,
3. label - enter text, which you'd like to show in RS themes, for the "sub-section" heading, which will be shown as below example:
4. collapse - decide if field types shown below this "sub-section" title should be collapsible, as shown in below example video:
   • true - section will be collapsible,
   • false - section will be always visible.

Frontend

There is no frontend output for this field type.

Text

The "Text" field type will appear on the management page of a specific section type as a text input field. You can use this field to enter the necessary strings, which will then be displayed on your WHMCS page once this section type is assigned to the CMS page. In pre-defined section types, this field type is generally used for headings, or captions.

Backend

Example Code

Here is an example code snippet that can be used in section.php configuration file to:

[
    'type' => 'text',
    'name' => 'title',
    'label' => 'Title',
    'placeholder' => 'Enter title...'
],

Field Type Values

Here is a guide to the available variables and their respective values:

1. type - defines field type,
2. name - defines field name, which then will be used in section frontend, to print its value (do not use any special characters, spaces or - signs) For example, if you name this field as "title," then its value could be printed as the Smarty {$title} variable, as demonstrated in the example below,
3. label - enter text which will be shown as label above created field,
4. placeholder - enter explanation placeholder text, which will be shown in created field

Frontend

"Text" field can be used in .tpl file of currently created section, using below example code:

{if $title}
    <h2 class="section-title">{$title|unescape:'html'}</h2>
{/if}

Please note that the $title value needs to be replaced with the name value you assigned to this field.

Text Editor

The "Text Editor" field type will appear on the management page of a specific section type as a text field with additional management options. You can use this field to enter the necessary strings, which will then be displayed on your WHMCS page once this section type is assigned to the CMS page. In pre-defined section types, this field type is generally used for descriptions.

Backend

Example Code

Here is an example code snippet that can be used in section.php configuration file to:

[
    'type' => 'text-editor',
    'name' => 'subtitle',
    'label' => 'Subtitle',
    'placeholder' => 'Enter subtitle...'
],

Field Type Values

Here is a guide to the available variables and their respective values:

1. type - defines field type,
2. name - defines field name, which then will be used in section frontend, to print its value (do not use any special characters, spaces or - signs) For example, if you name this field as "title," then its value could be printed as the Smarty {$subtitle} variable, as demonstrated in the example below,
3. label - enter text which will be shown as label above created field,
4. placeholder - enter explanation placeholder text, which will be shown in created field

Frontend

"Text" field can be used in .tpl file of currently created section, using below example code:

{if $subtitle}
    <p class="section-subtitle">{$subtitle|unescape:'html'}</p>
{/if}

Please note that the $subtitle value needs to be replaced with the name value you assigned to this field.

Buttons

The "Buttons" field type will appear on the management page of a specific section type as list, where you can add multiple buttons, via the management modal.

Backend

Example Code

Here is an example code snippet that can be used in section.php configuration file to:

[
    'type' => 'buttons',
    'name' => 'buttons',
    'label' => 'Buttons',
]

Field Type Values

Here is a guide to the available variables and their respective values:

1. type - defines field type,
2. name - defines field name, which then will be used in section frontend, to print its value (do not use any special characters, spaces or - signs) For example, if you name this field as "title," then its value could be printed as the Smarty {$buttons} variable, as demonstrated in the example below,
3. label - enter text which will be shown as label above created field.

Frontend

"Button" field can be used in .tpl file of currently created section, using below example code:

{if !empty($buttons)}
    <div class="section-actions-buttons">
        {foreach $buttons as $button}
            {include file="{$smarty.current_dir}/../../common/button.tpl"}
        {/foreach}  
    </div>
{/if}

As can be seen in above example, at the beginning we're checking if the button list has at least one button created. Then we're using an include tag (opens new window), to include common button.tpl file, which is used to load the button element.

Please note that the $buttons variable needs to be replaced with the name value you assigned to this field.

Example Usage of Button Field

Below is a short video, showing example usage of this field type, in new-editable-section.tpl file, which has been created in this documentation article.

Select

The "Select" field type will appear on the management page of a specific section type as a select field with additional management options. You can use this field to choose between different options from the list, based on this you can display different styles for whole section, or specific section element.

Backend

Example Code

Here is an example code snippet that can be used in section.php configuration file to:

[
    'type' => 'select',
    'name' => 'graphic_type',
    'label' => 'Graphic type',
    'options' => [
        [
            'name' => 'Type 1 - Predefined Lagom illustration',
            'value' => 'type-1'
        ],
        [
            'name' => 'Type 2 - Custom graphics in predefined container',
            'value' => 'type-2'
        ],
        [
            'name' => 'Type 3 - Custom graphics filling full background',
            'value' => 'type-3'
        ]
    ],
],

Field Type Values

Here is a guide to the available variables and their respective values:

1. type - defines field type,
2. name - defines field name, which then will be used in section frontend, to print its value (do not use any special characters, spaces or - signs) For example, if you name this field as "title," then its value could be printed as the Smarty {$graphic_type} variable, as demonstrated in the example below,
3. label - enter text which will be shown as label above created field,
4. options - enter explanation placeholder text, which will be shown in created field:
   • name - set "name" of specific option, this name will be shown in management page of this section.
   • value - set value, which ten will be printed on the frontend. For example, if you name this field as "type-1," then this value will be printed when you use {$graphic_type} variable.

Frontend

"Select" field can be used in .tpl file of currently created section, using below example code:

{if $graphic_type == "type-1"}
    <div class="section-shape">
        {include file="{$smarty.current_dir}/../../../../../assets/svg-illustrations/cms/section-shape.tpl"}
    </div>
{/if}

Please note that the $graphic_type value needs to be replaced with the name value you assigned to this field.

Checkbox

The "Checkbox" field type will appear on the management page of a specific section type as a "switcher" element. You can use this field to enable or disable specific elements, in section type which you creating.

Backend

Example Code

Here is an example code snippet that can be used in section.php configuration file to:

[
    'type' => 'checkbox',
    'name' => 'show_spotlight_tlds',
    'label' => 'Display domain spotlight TLDs',
],

Field Type Values

Here is a guide to the available variables and their respective values:

1. type - defines field type,
2. name - defines field name, which then will be used in section frontend, to print its value (do not use any special characters, spaces or - signs) For example, if you name this field as "title," then its value could be printed as the Smarty {$show_spotlight_tlds} variable, as demonstrated in the example below,
3. label - enter text which will be shown as label above created field.

Frontend

"Checkbox" field can be used in .tpl file of currently created section, using below example code:

{if $show_spotlight_tlds}
   Show Domain TLDS
{/if}

Please note that the $show_spotlight_tlds value needs to be replaced with the name value you assigned to this field.

Graphic

The "Graphic" field type will appear on the management page of a specific section type as element where you'd be able to assign graphic of your choice. All available graphics in Lagom Website Builder will be shown in modal, where you can select already available graphics, or upload your own with few simple clicks.

Backend

Example Code

Here is an example code snippet that can be used in section.php configuration file to:

[

    'type' => 'graphic',
    'name' => 'graphic',
    'label' => 'Graphic',
],

Field Type Values

Here is a guide to the available variables and their respective values:

1. type - defines field type,
2. name - defines field name, which then will be used in section frontend, to print its value (do not use any special characters, spaces or - signs). For example, if you name this field as "title," then its value could be printed as the Smarty {$graphic} variable, as demonstrated in the example below,
3. label - enter text which will be shown as label above created field.

Frontend

"Text" field can be used in .tpl file of currently created section, using below example code:

{if $graphic.graphic}
    {include file="{$smarty.current_dir}/../../common/graphic.tpl" graphic=$graphic.graphic type=$graphic.type}
{/if} 

As can be seen in above example, at the beginning we're checking if the graphic has been assigned to the graphic field, by creating the {if $graphic.graphic} rule. Then we're using an include tag (opens new window), to include common graphic.tpl file, which is used to load the graphic element. We need to pass following values to the included file:

1. $graphic.graphic - contains selected graphic name,
2. $graphic.type - contains selected graphic type, this value depend on the "tab" selected in the "Media Manager" modal:

Please note that the $graphic value needs to be replaced with the name value you assigned to this field.

Example Usage of Graphic Field

Below is a short video, showing example usage of this field type, in new-editable-section.tpl file, which has been created in this documentation article.

Above example shows only how to display element in the frontend, further style modification need to be made in custom CSS file.

List

The "List" field type will appear on the management page of a specific section type as a and element to which you can assign multiple items, with predefined management options. Each list "item" can be managed in modal, where you can set predefined settings to this element

Backend

Example Code

Here is an example code snippet that can be used in section.php configuration file to:

[
    'type' => 'list',
    'name' => 'item-list',
    'label' => 'Item List',
    'icons' => true,
    'link' => true,
]

Field Type Values

Here is a guide to the available variables and their respective values, available for this field type:

1. type - defines field type,

2. name - defines field name, which then will be used in section frontend, to print its value (do not use any special characters, spaces or - signs),

3. label - enter text which will be shown as label above created field,

4. icons - decide if "icon" related fields should be shown in the modal:

   • true - icon section will be shown
   • false - icon section will be hidden

5. link - decide if "link" related fields should be shown in the modal:

   • true - link section will be shown
   • false - link section will be hidden

Frontend

"List" field can be used in .tpl file of currently created section, using below example code:

{if $item_list}
    {foreach $item_list as $item}
        {if $item.title}<p>{$item.title}</p>{/if}
        {if $item.description}<p>{$item.description}</p>{/if}
        {if $item.custom_url}<p>{$item.custom_url}</p>{/if}
        {if $item.link_type}<p>{$item.link_type}</p>{/if}
        {if $item.link_text}<p>{$item.link_text}</p>{/if}
        {if $item.custom_classes}<p>{$item.custom_classes}</p>{/if}
    {/foreach}
{/if}

Tip: To print all available values, for this field type, you can use following code:

<pre>
    {$item_list|@print_r}
</pre>

Please note that the $item_list value needs to be replaced with the name value you assigned to this field.

Testimonials

Documentation for this field type is still in progress..

Products

Documentation for this field type is still in progress..

Product Groups

Documentation for this field type is still in progress..

Group

Documentation for this field type is still in progress..

Custom CSS Code

When adding custom HTML code to custom section types, it is essential to apply the correct CSS rules to ensure that the newly created code displays correctly on the page you are creating. Our theme offers two methods for adding custom CSS code:

1. Style Manager: This is a quick and convenient way to add custom CSS rules through the RS Themes addon. You can learn more about this in the documentation article.
2. Custom CSS File: Alternatively, you can create a theme-custom.css file, which will be included in the theme when it is created. More information on this can be found in the documentation article.