Як зробити горизонтальний скрол карток на мобільному в Elementor

Коли горизонтальний скрол кращий за колонку

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

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

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

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

Підготуйте структуру контейнерів в Elementor

Створіть або виберіть батьківський контейнер, у якому розташовані всі картки. У його CSS-класах додайте cards-scroll. Кожній картці, яка є прямим дочірнім елементом цього контейнера, призначте клас cards-scroll__item.

Важливо, щоб клас cards-scroll був саме на спільному контейнері, а не на окремій картці. Клас cards-scroll__item потрібно додати всім карткам, інакше частина елементів може залишитися зі стандартною шириною або стискатися за правилами Flexbox.

Якщо картка складається з внутрішнього контейнера, клас зазвичай потрібно призначати зовнішньому контейнеру конкретної картки. Він має бути елементом, який безпосередньо лежить усередині cards-scroll. Це допомагає CSS правильно визначити ширину кожного слайда.

• Батьківський контейнер: cards-scroll.
• Кожна картка: cards-scroll__item.
• Перевірте, що класи написані без пробілів і зайвих символів.
• Не додавайте клас картки лише першому елементу — він потрібен усім слайдам.

Додайте CSS для горизонтальної прокрутки

CSS нижче вмикає горизонтальний Flex-контейнер, забороняє перенос карток на новий рядок і додає прив’язку прокрутки до початку кожної картки. Ширина 82% є лише стартовим значенням: її можна змінити залежно від дизайну та кількості інформації в картці.

Запис обгорнуто в media query, тому на десктопі Elementor зберігає звичайну сітку або розкладку, яку ви налаштували у редакторі. Брейкпоінт 767 px можна змінити, якщо мобільна версія вашого сайту переходить на іншу структуру раніше або пізніше.

• scroll-snap-type: x mandatory допомагає зупинятися на початку картки.
• flex: 0 0 82% не дає картці стискатися та задає її ширину у скролі.
• scrollbar-width і псевдоелемент WebKit приховують смугу прокрутки, але не вимикають сам скрол.
• gap відповідає за відстань між картками.

@media (max-width: 767px) {
  .cards-scroll {
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    gap: 16px;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 8px;
  }

  .cards-scroll::-webkit-scrollbar {
    display: none;
  }

  .cards-scroll > .cards-scroll__item {
    flex: 0 0 82%;
    min-width: 0;
    scroll-snap-align: start;
    box-sizing: border-box;
  }
}

Де розмістити код

Якщо у вашій збірці Elementor доступне поле Custom CSS для контейнера, код можна додати там. В іншому випадку використовуйте загальні додаткові CSS сайту або стилі дочірньої теми. У Custom CSS Elementor селектори класів зазвичай достатньо записати саме так, як у прикладі.

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

Як зберегти нормальну сітку на десктопі

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

Зазвичай найпростіший підхід — залишити налаштування контейнера Elementor для планшета й десктопа, а мобільні правила додати лише в межах @media. Якщо для карток раніше були задані фіксовані ширини, перевірте, чи не конфліктують вони з flex-basis. Правило flex: 0 0 82% має визначати ширину картки в мобільному скролі, але сторонні стилі з !important можуть завадити.

Для планшетів не обов’язково використовувати той самий відсоток. На ширшому екрані можна залишити дві картки в ряд, повернути звичайний перенос або встановити іншу ширину слайда. Рішення залежить від кількості тексту та реальної ширини картки.

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

Зробіть скрол зрозумілим і зручним

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

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

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

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

Типові помилки та перевірка результату

Якщо картки все одно стискаються, найчастіше клас додано не тому елементу або на дочірній контейнер впливають налаштування Elementor. Переконайтеся, що cards-scroll__item призначено зовнішньому контейнеру картки, а селектор .cards-scroll > .cards-scroll__item відповідає реальній структурі.

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

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

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

• Картки переносяться на новий рядок — перевірте flex-wrap: nowrap.
• Картки надто вузькі — перевірте flex: 0 0 82% і сторонні width або max-width.
• Не видно частини наступної картки — зменште ширину контейнера картки або його горизонтальні відступи.
• Скрол обрізається — перевірте overflow: hidden у зовнішніх контейнерах.
• Десктоп зламався — переконайтеся, що всі правила розміщені всередині media query.