> ## Knowledge Base Index
> Fetch the complete knowledge base index at: https://help.weblium.com/sitemap.xml
> Use this file to discover available pages before exploring further.
> Pure-Markdown content can be obtained by appending a '.md' suffix to the content URLs listed in the sitemap (without the trailing slash).

# Додавання кастомного блоку

Редактор Weblium дозволяє створювати сайт за допомогою заздалегідь розроблених блоків, які містять в собі набір елементів. Якщо вам не підходить жоден із готових варіантів у нашій галереї, ви можете створити блок з нуля за допомогою кастомного блоку.

Подивіться коротке відео про те, як працювати з кастомним блоком:

${youtube}[Робота з кастомним блоком | Конструктор сайтів Weblium](PXzLFMK4v8Y)

### Додавання кастомного блоку на сайт

1. Наведіть на порожній простір на сторінці в редакторі і натисніть на кнопку «Додати блок»:

![](https://storage.crisp.chat/users/helpdesk/website/fa84b4d83a50e800/pereroblenij-kastom-1-ukr_thupzd.png)

2. Перейдіть до вкладки **Порожні блоки** у галереї блоків та виберіть **Custom block**: 

![](https://storage.crisp.chat/users/helpdesk/website/fa84b4d83a50e800/pereroblenij-kastom-2-ukr_epd746.png)

### Додавання елементів до кастомного блоку

Після того, як ви додали кастомний блок на сайт, вам потрібно наповнити його елементами. Елементи — основні складові кожного блоку. У нас є такі елементи як галерея, роздільники, список та багато іншого.

1. Наведіть курсор миші на кастомний блок, натисніть на «плюс» і виберіть потрібні елементи у pop-up вікні:

![](https://storage.crisp.chat/users/helpdesk/website/fa84b4d83a50e800/image_4qhfed.png)

| ${color}[#1aa900](Підказка:) перегляньте статтю [Керування елементами](https://help.weblium.com/uk/article/keruvannya-elementami-1ok28k/), щоб дізнатися про всі можливі налаштування елементів.

### Додавання колонок до кастомного блоку

Якщо ви плануєте додати у блок кілька елементів — наприклад, зображення, текст і кнопки, — тоді вам буде зручніше розмістити їх в окремих колонках. Так ви зможете налаштувати положення кожного елемента або змінити розмір контейнера, в якому він знаходиться.

1. Наведіть мишкою на край вже наявної колонки і натисніть на «плюс»:

![](https://storage.crisp.chat/users/helpdesk/website/fa84b4d83a50e800/image_1k302ae.png)

2. Ви також можете регулювати ширину колонок за допомогою роздільників, які знаходяться поруч з ними. Для цього наведіть мишкою на порожній простір між колонками, натисніть на роздільник і потягніть його в потрібну сторону:

![](https://storage.crisp.chat/users/helpdesk/website/fa84b4d83a50e800/image_ic768x.png)

3. Крім цього, ви можете видалити або продублювати всю колонку, натиснувши на три крапки у правому верхньому куті: 

![](https://storage.crisp.chat/users/helpdesk/website/fa84b4d83a50e800/image_ws5rlw.png)

### Зміна вигляду колонки

1. Щоб відкрити налаштування колонки, наведіть на неї і натисніть на «шестерню» у правому верхньому куті:

![](https://storage.crisp.chat/users/helpdesk/website/fa84b4d83a50e800/image_14lgzp9.png)

2. У вкладці **Вигляд** ви зможете змінити відстань між колонками в блоці, вирівняти елементи в колонці, налаштувати відступи між межами колонки і межами елемента в ній, а також змінити її стиль, застосувавши до неї закруглені кути:

![](https://storage.crisp.chat/users/helpdesk/website/fa84b4d83a50e800/image_13wnav4.png)

||| ${color}[#ffa800](Важливо:) параметри відступів та стилю можна редагувати тільки тоді, коли у колонки є фон.
 
### Зміна фону колонки

1. Щоб відкрити налаштування колонки, наведіть на неї і натисніть на «шестерню» у правому верхньому куті:

![](https://storage.crisp.chat/users/helpdesk/website/fa84b4d83a50e800/image_14lgzp9.png)

2. Перейдіть у вкладку **Фон** і виберіть колір або зображення для фону колонки:

![](https://storage.crisp.chat/users/helpdesk/website/fa84b4d83a50e800/image_1qydfb4.png)

3. Після додавання зображення вам відкриються нові опції для редагування — наприклад, накладення фільтру або корекція кольору:

![](https://storage.crisp.chat/users/helpdesk/website/fa84b4d83a50e800/image_khinwv.png)

| ${color}[#1aa900](Підказка:) перегляньте статтю про [Зміну дизайну блока](https://help.weblium.com/uk/article/zmina-dizajnu-bloku-1tpp5tl/) для продовження роботи над створенням сайту.