Как сделать горизонтальный скролл карточек на мобильных устройствах в 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.