> ## 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).

# Додавання CSS-класів до елементів

Ви можете додати до 5 значень атрибуту **class** до майже кожного елементу на вашому сайті. За допомогою CSS-класів можна здійснювати необхідні вам зміни елементів шляхом додавання CSS-коду.

| ${color}[#1aa900](Підказка:) ви можете додати необхідний вам CSS-код за допомогою [цієї інструкції](https://help.weblium.com/uk/article/dodavannya-css-kodu-na-sajt-mibux7/). Додавання коду доступне лише для сайтів із платними підписками.

${youtube}[Додавання CSS-класів до елементів | Конструктор сайтів Weblium](oKn8Zu7nQ-0)

# Додавання CSS-класів
Ви можете додати CSS-класи до більшості елементів на вашому сайті: кнопки, зображення, іконки, текст, меню сайту, контактні форми тощо. Для цього виконайте наступні дії:
1. Відкрийте налаштування необхідного вам елемента. Приклади відкриття налаштувань:

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

2. Перейдіть до вкладки **Просунуті** та уведіть необхідне ім'я класу для елемента у полі розділу **Імена CSS-класів**:

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

||| ${color}[#f97700](Важливо:) кожний CSS-клас повинен починатися з префікса "wl-" (без лапок). Це необхідно, аби відрізнити ваші власні класи від тих, що використовує наша платформа. 
|| ${color}[#ffa800](Примітка:) мінімальна довжина імені класу — 4 символи (разом з префіксом "wl-"), максимальна довжина — 25 символів.

3. Ви можете додати більше CSS-класів до елемента за допомогою кнопки **Додати клас**:

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

|| ${color}[#ffa800](Примітка:) ви можете додати максимум 20 CSS-класів до одного елемента.

4. Готово. Тепер ви можете використовувати цей CSS-клас під час [додавання власного коду](https://help.weblium.com/uk/article/dodavannya-storonnogo-kodu-na-sajt-1xn3zwp/) на ваш сайт. Приклад:

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

[Опублікуйте](https://help.weblium.com/uk/article/publikaciya-sajtu-16hom55/) ваш сайт, аби зміни набули чинності.

|| ${color}[#ffa800](Примітка:) наша служба підтримки не надає допомогу зі створення або редагування власного коду. Ми можемо лише надати вам інструкцію про те, як вставити ваш код на сайт.