Унікальні ID елементів в Elementor: як уникнути помилок у якорях, Popup і JavaScript

Що таке ID елемента в Elementor

ID — це унікальний ідентифікатор HTML-елемента на конкретній сторінці. У Elementor його зазвичай задають у налаштуваннях елемента або контейнера в розділі Advanced, у полі CSS ID. Значення вводять без символу решітки: наприклад, contact-home, а не #contact-home.

Після публікації це значення стає атрибутом id у HTML-коді. На нього можна послатися через адресу сторінки з якорем, посиланням на кшталт #contact-home, CSS або JavaScript.

Важливо розрізняти ID сторінки, запису чи шаблону WordPress і CSS ID елемента Elementor. У цьому матеріалі йдеться саме про ідентифікатор елемента всередині розмітки сторінки.

• Один ID має відповідати одному елементу в межах сторінки.
• ID чутливий до точного написання: contact і Contact — різні значення.
• Для якоря в URL використовується # перед ID, але в полі CSS ID цей символ зазвичай не вводять.

Чому дублікати ID створюють проблеми

HTML допускає атрибут id, але його значення має бути унікальним у межах документа. Коли кілька елементів мають однаковий ID, браузер, Elementor або сторонній скрипт можуть обрати не той елемент, який очікує розробник.

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

JavaScript-методи та плагіни також можуть працювати некоректно. Наприклад, скрипт, який шукає елемент за ID, може змінити лише перший знайдений блок або прив’язати подію не до тієї кнопки.

У формах наслідки можуть бути серйознішими: дублювання ID полів або зв’язку label із полем ускладнює доступність і може спричинити фокусування не на тому полі. Popup та інтеграції теж можуть реагувати на неправильний або неоднозначний селектор.

• Якір прокручує до неправильного блоку або не працює.
• Popup відкривається не з тієї кнопки чи секції.
• JavaScript змінює перший елемент замість потрібного.
• CSS або сторонній плагін застосовується непередбачувано.
• Label форми може бути пов’язаний не з тим полем.

Як правильно називати ID в Elementor

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

Для різних сторінок або частин сторінки використовуйте різні значення. Наприклад, замість двох однакових ID contact краще створити contact-home і contact-footer. Якщо форма призначена для консультації, доречнішим буде consultation-form.

Не використовуйте пробіли, кирилицю, решітку та зайві спеціальні символи. Такі значення можуть некоректно оброблятися URL, CSS-селекторами або JavaScript. Підкреслення технічно може працювати, але дефіси зазвичай легше читати в адресах і коді.

• Добре: about, services, contact-home, pricing-table, consultation-form.
• Небажано: Контакти, contact us, #contact, contact@home.
• Не починайте назву з випадкового номера, якщо він не має зрозумілого сенсу.
• Не використовуйте однаковий ID для мобільної та десктопної версій, якщо обидва блоки присутні в DOM одночасно.

Як додати та перевірити ID у редакторі Elementor

Відкрийте потрібну сторінку в Elementor і виберіть секцію, контейнер або віджет, до якого потрібно прив’язати посилання. У налаштуваннях Advanced знайдіть поле CSS ID та введіть унікальне значення без #.

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

Для пошуку потрібного блоку зручно використовувати Navigator Elementor: він допомагає знайти секцію в складній структурі сторінки. Саме значення ID перевіряйте в налаштуваннях Advanced вибраного елемента. Якщо на сторінці багато однакових блоків, послідовно відкрийте їх і порівняйте поля CSS ID.

• Відкрийте Navigator і знайдіть потрібну секцію або контейнер.
• Перейдіть до Advanced та перевірте поле CSS ID.
• Переконайтеся, що в значенні немає пробілів і символу #.
• Оновіть сторінку та протестуйте посилання на опублікованій сторінці.
• Після клонування секції одразу змініть її ID.

Приклад налаштування якоря

Для секції з формою задайте CSS ID consultation-form. У посиланні кнопки або пункті меню вкажіть #consultation-form, якщо перехід відбувається на цій самій сторінці. Для переходу з іншої сторінки використовуйте адресу сторінки з цим якорем, наприклад /contact/#consultation-form.

ID чи CSS-клас: що вибрати для повторюваних елементів

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

Наприклад, усім карткам тарифів можна призначити клас pricing-card. Один і той самий клас буде коректним для десяти карток, оскільки він описує групу елементів. Якщо потрібно звернутися до конкретної секції через меню або скрипт, їй додайте окремий ID, наприклад pricing.

Один елемент може одночасно мати унікальний ID і спільний клас. Наприклад, секція може мати ID pricing та клас section-dark. Це нормальна схема: ID ідентифікує конкретний блок, а клас описує його стиль або належність до групи.

• ID: один конкретний блок, якорі, точкові JavaScript-дії.
• Клас: повторювані стилі, групи елементів, спільні модифікатори.
• Не використовуйте ID як заміну класу для масового оформлення.

.pricing-card {
  border-radius: 12px;
}

#pricing {
  scroll-margin-top: 80px;
}

Як знайти дублікати ID на готовій сторінці

Якщо ви підозрюєте проблему, почніть із перевірки секцій, які копіювалися з інших сторінок або шаблонів. Особливу увагу приділіть типовим назвам: contact, about, services, home, pricing, form.

Дублікати можна перевірити через інструменти розробника браузера. Відкрийте потрібну сторінку, натисніть F12 або скористайтеся командою перегляду коду та виконайте JavaScript у консолі. Скрипт нижче покаже ID, які зустрічаються більше одного разу.

Перевірку потрібно виконувати на опублікованій сторінці. У редакторі Elementor можуть бути службові елементи, а частина контенту може відрізнятися через умови відображення, Popup або адаптивні налаштування.

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

const ids = [...document.querySelectorAll('[id]')].map(el => el.id);
const duplicates = [...new Set(ids.filter((id, i) => ids.indexOf(id) !== i))];
console.log(duplicates);

Що робити після виявлення дубліката

Знайдіть усі елементи з таким значенням у Navigator та налаштуваннях Advanced. Залиште ID тому блоку, на який уже посилаються меню, кнопки або скрипти, а іншим призначте нові назви. Якщо ID використовувався в коді або зовнішній інтеграції, перед зміною перевірте всі посилання на нього.

Типові помилки після клонування секцій

Клонування — найпоширеніше джерело дублікатів. Elementor копіює структуру та налаштування елемента, тому разом із дизайном часто переноситься і CSS ID. Візуально обидві секції можуть виглядати правильно, але HTML-ідентифікатори вже конфліктують.

Ще одна помилка — додавання # у поле CSS ID. Для посилання решітка потрібна, а для самого значення ідентифікатора — ні. Якщо в полі записати #contact, посилання #contact фактично шукатиме інше значення і може не спрацювати.

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

• Скопіювали секцію — одразу перейменуйте її ID.
• Не змінюйте ID без перевірки меню, кнопок і скриптів, які на нього посилаються.
• Не покладайтеся лише на візуальний вигляд сторінки.
• Не створюйте декілька версій одного блоку з однаковим ID, навіть якщо одна з них прихована на певному пристрої.

Практичний чекліст перед публікацією

Перевірку ID варто включити до стандартного контролю сторінки перед запуском або після масштабного редагування. Це особливо важливо для лендингів із великою кількістю якорів, форм, Popup і власного JavaScript.

Окремо протестуйте посилання з меню, кнопок і зовнішніх сторінок. Переконайтеся, що прокручування приводить до потрібної секції, а фіксована шапка не перекриває її заголовок. За потреби для цільової секції можна задати scroll-margin-top через CSS, як у прикладі вище.

• Усі ID написані латиницею та без пробілів.
• Кожне значення зустрічається на сторінці лише один раз.
• Повторювані блоки використовують CSS-класи, а не однакові ID.
• Якорі з меню та кнопок ведуть до правильних секцій.
• Форми, Popup і JavaScript перевірені після клонування або зміни ID.
• Опублікована сторінка протестована після очищення кешу.