# Builder

{% hint style="info" %}
**Add section -> Builder**
{% endhint %}

{% embed url="<https://www.youtube.com/watch?v=l6T_pXQVaWw&list=PLj-506KaR_vcQjwcpC6yII-1JY0bSj7df&index=10>" %}

&#x20;The “Builder” section on the Home page is a massive section, which allows you to add different content blocks, such as promo boxes (banners), various sliders, pages, product columns, videos, space for a vertical menu, etc. This section can be added to any place on the home page, either straight after the header or before the footer, etc. We will get deeper into each of these blocks in the next sections.

## Builder

&#x20;In this section, you can configure the settings for all content blocks.

### Title

&#x20;Here you can add a **Title** for your builder section, which will be shown on the page. You can customize its font and add a link if needed:

<figure><img src="https://1204500216-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-McsaSlZSE2uMqzAxy2S%2Fuploads%2F6GR9CPyK5HBch4PUTY2j%2Fbuilder_title.png?alt=media&#x26;token=39c3d81b-0fe0-4b7a-9e0c-2849433c20f1" alt=""><figcaption></figcaption></figure>

### Content width

&#x20;This option enables you to choose the width of the content on the desktop. It may be either full or boxed. If it is full the image of this section is displayed in full width on the home page. Once it is boxed, you will see some space between the image and the home page on the left and right sides. In our example, we will show you the boxed width of the content:

<figure><img src="https://1204500216-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-McsaSlZSE2uMqzAxy2S%2Fuploads%2FfRylDHhjBzb8ph5o4n5Z%2Fbuilder_width.png?alt=media&#x26;token=af1c2fde-9676-4609-b035-81dfb18aef80" alt=""><figcaption></figcaption></figure>

## Column Settings <a href="#column-settings" id="column-settings"></a>

&#x20; Here you can choose how many items should be shown in one row on the desktop, using a dropdown menu **“Size of the columns”**.

&#x20; The option **“Size of the columns on mobile”** allows you to set the number of items in the row on mobile: “1 item in the row” or “2 items in the row”.  In our example, we will show you “2 items in the row”:&#x20;

![](https://1204500216-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-McsaSlZSE2uMqzAxy2S%2F-MduvKg5PXtQeqDApZDl%2F-Mduvi5TzLq7rXVjrWqo%2F02-01-2items-per-row-on-mobile.png?alt=media\&token=24aea82c-09b3-4f88-95e1-e3486895f6a8)

&#x20;In the dropdown list of **“Margins for the columns”**, you can choose the type of margins for the columns.\
&#x20;The position of the columns can also be set in this section. Just use a dropdown list of the **”Align of columns”** and select the proper option.\
&#x20;The option **“Disable column paddings”** allows you to remove space between the columns in the builder section.\
&#x20;In the **“Mobile content precedence”** you can decide in which order the content blocks should be displayed in the mobile version, by writing the order, e.g.: “2,1,3”.

## Customization <a href="#customization" id="customization"></a>

{% hint style="warning" %}
**Please note**, this is an advanced option, you should have developer skills to work with CSS styles, or hire a developer to complete this task for your store.
{% endhint %}

### **Customization class**

&#x20; You may add a custom CSS class to the Builder section. It helps if you need to apply custom changes.

&#x20; Add the Builder section, add content, and configure the section.&#x20;

![](https://1204500216-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-McsaSlZSE2uMqzAxy2S%2F-MduvKg5PXtQeqDApZDl%2F-Mduy-LhKH114NNBNlu7%2Fdoc02-01-home-builder-custom-class-01.png?alt=media\&token=272d4bb0-6f52-4a6f-b944-21976e320621)

&#x20;In case you need to add additional styles, you may use the **customization class** option.

{% hint style="warning" %}
**Please note**, the customization class should be unique, it may include Latin letters, numbers, and dashes. Spaces and other chars are not allowed. &#x20;
{% endhint %}

![](https://1204500216-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-McsaSlZSE2uMqzAxy2S%2F-MduvKg5PXtQeqDApZDl%2F-Mduy5XscehITPV2-t7R%2Fdoc02-01-home-builder-custom-class-02.png?alt=media\&token=83db15ec-397b-4b39-81d7-68943793a0f3)

&#x20;Enable the **custom.css** file at the *Theme settings -> Developer.*

<figure><img src="https://1204500216-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-McsaSlZSE2uMqzAxy2S%2Fuploads%2FDl5TTvIABSEnwrVKszZV%2Fcustom%20css_file.png?alt=media&#x26;token=6b14c6bc-9048-45f2-829a-2e7dce2bbf13" alt=""><figcaption></figcaption></figure>

&#x20;Open the source file editor by pressing the dotted \[...] button next to the theme name at the top left of the theme editor, then hit **“Edit code”**.

<figure><img src="https://1204500216-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-McsaSlZSE2uMqzAxy2S%2Fuploads%2FOr3VoyHiuWwhuYnnig6S%2Fedit%20code.png?alt=media&#x26;token=533ff458-7988-4519-b1cb-cd8935f9645b" alt=""><figcaption></figcaption></figure>

&#x20;Find and open the **assets/custom.min.css** file:

![](https://1204500216-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-McsaSlZSE2uMqzAxy2S%2F-MduyUq9Cf7PP9fpeAy6%2F-MduzAEjBOyH82aP32Zu%2Fdoc02-01-home-builder-custom-class-05.png?alt=media\&token=7014453c-0f56-44f1-8b17-ce60dce096d7)

&#x20;Add your custom CSS class and custom styles.

&#x20;The example code shows how to add a background color and top padding.

&#x20;[<mark style="color:blue;">**Read more information about the CSS**</mark>](https://www.w3schools.com/css/)

{% hint style="warning" %}
**Please note,** if you see the **CSS** term for the first time, you should hire a person who is familiar with it. &#x20;
{% endhint %}

![](https://1204500216-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-McsaSlZSE2uMqzAxy2S%2F-MduyUq9Cf7PP9fpeAy6%2F-MduzMPX4HMV2PB_MxML%2Fdoc02-01-home-builder-custom-class-06.png?alt=media\&token=f60f1c83-a47f-45a1-aa55-37e7df868244)

&#x20;The result.&#x20;

![](https://1204500216-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-McsaSlZSE2uMqzAxy2S%2F-MduyUq9Cf7PP9fpeAy6%2F-MduzaAxALaw_oUQqvKM%2Fdoc02-01-home-builder-custom-class-07.png?alt=media\&token=64e3a70b-f689-4281-9277-07c0e1a20432)