CSS-класи в Elementor: як створити один стиль для повторюваних елементів

Що таке CSS-клас і навіщо він потрібен в Elementor

CSS-клас — це назва, за якою браузер знаходить елементи сторінки та застосовує до них визначені стилі. Наприклад, клас card-link можна призначити всім карткам, які мають однакову поведінку: легке підняття під час наведення, тінь і плавну анімацію.

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

Клас не змінює структуру сторінки та не є видимим для відвідувача. Він працює як маркер, який пов’язує елемент Elementor із CSS-правилами.

• менше дублювання стилів і ручної роботи;
• однаковий вигляд усіх елементів групи;
• швидке внесення змін у майбутньому;
• зручніше налаштування адаптивної поведінки;
• простішій супровід сторінки іншими розробниками або контент-менеджерами.

Як додати CSS-клас до віджета в Elementor

Спочатку відкрийте сторінку в редакторі Elementor і виберіть потрібний віджет, контейнер або секцію. Далі перейдіть до вкладки «Додатково» та знайдіть поле «CSS-класи». Назви окремих пунктів можуть дещо відрізнятися залежно від версії Elementor і типу вибраного елемента.

У поле впишіть назву класу без крапки. Наприклад, правильно: card-link. Запис .card-link використовується вже в CSS-селекторі, але не в полі Elementor.

Якщо одному елементу потрібні кілька класів, їх можна вказати через пробіл: card-link featured. Це дає змогу поєднувати базовий стиль із додатковим модифікатором.

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

• Віджет або контейнер → «Додатково» → «CSS-класи».
• Вводьте назву класу без крапки та без спеціальних символів.
• Використовуйте зрозумілі назви: card-link, pricing-card, button-primary.
• Не застосовуйте одну назву для елементів, які повинні мати принципово різні стилі.

Де розмістити CSS-правила

Сам клас лише позначає елемент. Щоб він впливав на вигляд сторінки, потрібно додати CSS-правила. Варіант розміщення залежить від конфігурації сайту та доступних функцій Elementor.

Якщо у вашій версії та тарифі Elementor доступний Custom CSS, правила можна додати на рівні конкретного віджета, сторінки або шаблону. Для глобальних стилів зручніше використовувати «Додаткові CSS» у налаштуваннях теми або редактора WordPress. Назва та розташування цього пункту можуть відрізнятися залежно від теми й версії WordPress.

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

• Для повторюваного стилю на всьому сайті — глобальна таблиця стилів або «Додаткові CSS».
• Для стилю однієї сторінки — CSS цієї сторінки, якщо така можливість доступна.
• Для одного конкретного елемента — локальний CSS, але лише коли стиль справді не повторюється.
• Після публікації очистіть кеш сайту, плагіна оптимізації або CDN, якщо зміни не відображаються.

Приклад базового стилю для карток або посилань

Нижче наведено простий приклад класу card-link. Він додає плавний перехід, легке підняття картки під час наведення та тінь. Крапка перед назвою класу в CSS обов’язкова.

.card-link {\n  transition: transform 0.2s ease, box-shadow 0.2s ease;\n}\n\n.card-link:hover {\n  transform: translateY(-3px);\n  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);\n}

Як зробити стиль зручним для мобільних пристроїв

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

Адаптивні правила можна додати до того самого класу через медіазапит. Наприклад, на вузьких екранах зменшити тінь, прибрати переміщення або змінити відступи. Це краще, ніж окремо редагувати кожну картку в Elementor.

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

• Перевіряйте клас на реальному смартфоні або в режимі адаптивного перегляду.
• Не покладайтеся лише на hover для важливої інформації чи навігації.
• Зберігайте достатній контраст тексту та фону після додавання тіні або прозорості.
• Перевіряйте, чи не з’являється горизонтальне прокручування через transform або надмірні відступи.

@media (max-width: 767px) {\n  .card-link:hover {\n    transform: none;\n    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.08);\n  }\n}\n\n@media (prefers-reduced-motion: reduce) {\n  .card-link {\n    transition: none;\n  }\n}

Як комбінувати базові класи та модифікатори

Один клас не зобов’язаний описувати всі варіанти дизайну. Зручно створити базовий клас для спільних властивостей, а додаткові класи використовувати для окремих варіантів.

Наприклад, усі картки можуть мати однакову анімацію через card-link, а важливі картки — додатковий клас featured. В Elementor ці назви вказуються через пробіл, а в CSS комбінуються як окремі селектори.

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

• card-link — спільна поведінка всіх карток;
• featured — додатковий акцент для вибраних карток;
• compact — компактний варіант із меншими відступами;
• dark — варіант для темного фону.

.card-link {\n  transition: transform 0.2s ease, box-shadow 0.2s ease;\n}\n\n.card-link:hover {\n  transform: translateY(-3px);\n}\n\n.card-link.featured {\n  border: 2px solid #2563eb;\n}\n\n.card-link.compact {\n  padding: 16px;\n}

Типові помилки під час роботи з CSS-класами

Найчастіша помилка — додавання крапки в поле CSS-класів Elementor. Крапка потрібна тільки в таблиці стилів. Якщо в полі записати .card-link, селектор стане некоректним для очікуваного використання.

Інша проблема — клас призначено батьківському контейнеру, хоча стилі мають діяти на внутрішню кнопку або заголовок. У такому випадку потрібно перевірити HTML-структуру в інструментах розробника браузера та за потреби використовувати дочірній селектор.

Також CSS може не спрацьовувати через вищу специфічність іншого правила, inline-стиль або кеш. Не починайте одразу з !important: спершу перевірте, яке правило перекреслює ваш стиль.

Обережно використовуйте загальні назви на кшталт box, item або block. Вони можуть збігтися з класами теми, плагіна чи іншої частини сайту. Краще застосовувати більш специфічні назви з префіксом проєкту або компонента.

• Немає крапки в полі Elementor, але є крапка в CSS-селекторі.
• Назви класів пишуться без пробілів усередині; пробіл розділяє різні класи.
• Після зміни CSS перевірте кеш браузера, WordPress і плагіна оптимізації.
• Не використовуйте !important без необхідності.
• Переконайтеся, що клас доданий саме до того рівня, який потрібно стилізувати.

Перевірка результату перед публікацією

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

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

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

• Клас присутній у розмітці потрібного елемента.
• CSS-файл або блок стилів завантажується без помилок.
• Правило не перекреслене стилем із більшою специфічністю.
• Десктопна, планшетна та мобільна версії виглядають коректно.
• Фокус клавіатури, контраст і доступність не погіршилися.