top_ua
Вхід
Ваш Бітрікс24
Вхід
Авторизуйтеся, щоб увійти
до Бітрікс24 вашої компанії.
Вхід

Підтримка24

Як використовувати CSS для сайту та магазину

Рейтинг:

Бітрікс24.Сайти підтримують роботу з користувальницьким CSS. Ви завжди можете налаштувати зовнішній вигляд елементів саме так, як вам буде необхідно.

CSS дозволяє вручну визначити зовнішній вигляд сайту. Цей інструмент вимагає певних знань і досвіду. Якщо ви не знаєте, що це таке - рекомендую спочатку ознайомитися з навчальними матеріалами, яких багато в інтернеті. Наприклад Довідником CSS.

Розглянемо кілька базових прикладів роботи з користувальницьким CSS.

Підбір кольору елементів

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

У нас є блок з текстом, якому потрібно надати особливий колір.

Для роботи потрібно обов'язково опублікувати сторінку.

Перейдіть в режим перегляду коду опублікованої сторінки.

Для зміни кольору тексту нам потрібно використовувати ID і клас даного блоку.

Якщо не вказувати ID блоку, то зміни застосуються до всіх однакових блоків на сторінці.
#block3965 .landing-block-node-title
{
color: #000080 ;
}

Для зміни кольору фону виберемо цей блок по його класу і уточнимо, що нам потрібен тільки тег section всередині цього блоку.

#block3965.block-27-one-col-fix-title-and-text-2 section
{
background-color: #F5FFFA;
}

Відкрийте Налаштування сторінки і додайте отримані коди в поле CSS-код.

Публікувати сторінку заново не потрібно - просто оновіть її та блок матиме потрібний вигляд :)

Щоб перевизначити деякі базові властивості, може знадобитися ключове слово !important (наприклад color: #E9AD99 !important). Якщо зміни не застосувались, то додайте слово в рядок.

Як можна приховати якийсь елемент блоку?

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

Перейдіть в перегляд коду сторінки.

Не забудьте спочатку опублікувати сторінку.

Тепер додамо в налаштуваннях сторінки код.

.landing-block-node-price-button
{
display: none;
}

Збережемо зміни та оновимо опубліковану сторінку.

Додавання користувальницького CSS в коробковій версії Бітрікс24 доступне з версії модуля сайтів 18.5.8. Перед роботою перевірте поточну версію та оновіть її, якщо це необхідно.
Дякую, допомогло! Дякуємо :) Не допомогло Дуже шкода :(
Дізнайтесь, чому:
Це не те, що я шукаю
Дуже складно і незрозуміло