CodeCanyon Vertical and Horizontal - Плагин WordPress

Руководство по CodeCanyon Vertical and Horizontal для Elementor timeline

CodeCanyon Vertical and Horizontal - это WordPress-плагин для Elementor, который помогает собирать вертикальные и горизонтальные линии времени прямо в визуальном редакторе. В этом руководстве разберём не рекламное описание, а рабочий путь: что подготовить перед установкой, как выбрать источник данных, какие настройки проверить в Elementor, как собрать реальный timeline для сайта и как понять, что результат не ломает мобильную версию, скорость и навигацию.

Главная ценность такого плагина не в том, что он рисует красивую линию с датами. Полезный timeline должен объяснять порядок событий, показывать этапы проекта, связывать записи блога или товары WooCommerce в понятную историю и не превращаться на телефоне в длинную нечитаемую ленту. Поэтому дальше будут не только шаги установки, но и логика выбора вертикального или горизонтального режима, настройки карточек, фильтрации, пагинации и проверки результата.

Отдельно важно держать в голове ограничение источников: публичная страница товара подтверждает основные возможности, демо показывает внешний результат, но отдельной полноценной документации разработчика по каждому контролу найти не удалось. Поэтому точные названия некоторых вкладок в статье сформулированы осторожно и привязаны к обычной логике Elementor: Content, Style, Advanced, настройка источника, дизайн карточки, адаптивность и проверка опубликованной страницы.

Что делает плагин и когда timeline действительно нужен

Плагин предназначен для вывода хронологических или пошаговых блоков в Elementor. По подтверждённым материалам товара он поддерживает вертикальный и горизонтальный стиль, набор готовых дизайнов, вывод обычных записей WordPress, сценарий с товарами WooCommerce и ручной timeline через повторяемые элементы Elementor. Это сразу задаёт три разные задачи, которые не стоит смешивать в одном виджете.

Первый сценарий - история или дорожная карта. Здесь timeline помогает читателю увидеть этапы: запуск компании, развитие продукта, план внедрения, процесс обучения, расписание события, историю проекта. Обычно в таком блоке важны короткие заголовки, ясные даты или этапы, изображения только там, где они усиливают смысл, и спокойная вертикальная структура. Вертикальный timeline удобнее, когда событий много или у каждого события есть небольшой текст.

Второй сценарий - подборка записей блога. Если у сайта есть серия материалов, новости, отчёты, кейсы или публикации по этапам проекта, плагин может превратить обычную ленту записей в более объясняющую структуру. В таком случае ключевыми становятся источник записей, категории, порядок сортировки, количество выводимых элементов и пагинация. Здесь особенно важно не перегружать страницу: если вывести десятки записей сразу, визуальный эффект быстро уступит место длинной прокрутке.

Третий сценарий - WooCommerce timeline. По странице товара заявлена поддержка вывода товаров WooCommerce в timeline. Это может быть полезно для коллекций, запусков, сезонных подборок, истории обновлений линейки или витрины с последовательностью релизов. Но такой блок не должен заменять каталог. Timeline лучше работает как редакционный модуль: показать ключевые товары в контексте, объяснить этапы выбора, провести пользователя от ранней модели к новой или выделить продукты внутри кампании.

Если задача сводится к обычной сетке карточек, timeline может быть лишним. Он требует более строгой редакторской дисциплины: заголовки должны быть короткими, порядок событий должен быть понятным, изображения должны быть одного стиля, а дата или этап должны помогать читателю, а не быть случайным декоративным элементом. Поэтому перед установкой стоит решить, какая история будет рассказана и почему её удобнее читать именно как timeline.

Кому подойдёт CodeCanyon Vertical and Horizontal и где он может быть лишним

Плагин лучше всего подходит сайтам, которые уже используют Elementor как основной редактор страниц. Если страницы собираются в Gutenberg, Full Site Editing или кастомной теме без Elementor, такой addon добавит лишнюю зависимость. Он также не нужен там, где timeline должен быть частью сложного приложения с фильтрами, пользовательскими правами, персональными кабинетами и серверной логикой. Это визуальный Elementor-виджет, а не отдельная система управления проектами.

Хорошие задачи для плагина

Самые удачные сценарии связаны с объяснением последовательности. Для корпоративного сайта это может быть блок история компании, где каждый этап показывает событие, короткий результат и иллюстрацию. Для агентства - процесс работы с клиентом: бриф, прототип, дизайн, разработка, запуск, поддержка. Для образовательного проекта - путь ученика от первого урока до итогового результата. Для магазина - timeline запуска коллекции или подборка товаров по этапам использования.

• Нужно визуально показать последовательность событий, а не просто список материалов.
• Сайт уже использует Elementor, и редактору удобно работать через виджеты и визуальные настройки.
• Есть ограниченный набор событий: обычно от трёх до десяти элементов на один блок.
• У каждого события есть понятный заголовок, короткое описание и при необходимости изображение.
• Нужно быстро менять цвета, типографику и стиль без правки шаблонов темы.

Когда стоит выбрать другой подход

Плагин может быть лишним, если timeline нужен только один раз и его легко собрать стандартными контейнерами Elementor. Он также не лучший вариант для больших архивов, где посетителю важнее поиск, сложная фильтрация, теги, сортировка по нескольким параметрам и быстрый доступ к сотням элементов. В таких ситуациях лучше использовать каталог, фильтруемую сетку, записи с таксономиями или специализированный плагин для базы знаний.

Ещё один ограничитель - редакторская нагрузка. Timeline выглядит аккуратно только тогда, когда данные приведены к единому формату. Если одни карточки состоят из двух слов, другие из длинного абзаца, третьи имеют тяжёлые изображения, а четвёртые ведут на пустые страницы, визуальный блок начинает выглядеть случайно. Перед внедрением стоит подготовить контент, а не надеяться, что дизайн плагина сам исправит слабую структуру.

Что проверить перед установкой

Перед установкой CodeCanyon Vertical and Horizontal проверьте не только совместимость WordPress, но и реальную архитектуру страницы. Плагин работает внутри Elementor, поэтому основная зависимость - наличие активного Elementor и страницы, которую можно редактировать через этот конструктор. Если для конкретного макета нужен Elementor Pro, это уже зависит не от timeline-плагина, а от остальной страницы: шаблонов, динамических данных, theme builder и других виджетов.

Минимальная техническая подготовка

Поскольку это premium addon, установка обычно происходит через ZIP-архив в WordPress: Plugins - Add New - Upload Plugin - Install Now - Activate. WordPress официально поддерживает загрузку плагина в формате ZIP через экран добавления плагинов, а экран установленных плагинов позволяет активировать, деактивировать и удалять плагины. Перед загрузкой проверьте, что у вас именно установочный ZIP, а не общий архив с документацией, лицензией и исходными материалами.

• Сделайте резервную копию файлов и базы данных или проверьте, что хостинг уже делает свежие бэкапы.
• Убедитесь, что Elementor установлен, активирован и открывает редактор без бесконечной загрузки.
• Проверьте, есть ли на странице другие Elementor addons с timeline, carousel или swiper-логикой, чтобы не ловить конфликт похожих скриптов.
• Если планируется WooCommerce timeline, заранее подготовьте товары: изображения, короткие описания, категории и порядок публикации.
• Если планируется blog timeline, приведите записи к единому виду: миниатюры, категории, выдержки, даты публикации.

Контентная подготовка важнее установки

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

Практическая проверка перед установкой: если каждое событие нельзя объяснить в одном заголовке и одном коротком абзаце, сначала переработайте контент. Timeline должен делать последовательность яснее, а не прятать длинные описания в красивой оболочке.

Установка и первичная проверка в WordPress

После загрузки и активации плагина не спешите сразу ставить его на рабочую главную страницу. Создайте черновик или тестовую страницу, откройте её через Edit with Elementor и найдите timeline-виджет через поиск в панели элементов. У Elementor панель виджетов устроена так, что элементы группируются по категориям и фильтруются через поиск. Если новый виджет не появляется, это первый диагностический сигнал: плагин не активирован, Elementor не загружает сторонние элементы или возник конфликт с другим addon.

Базовая последовательность

1. Откройте Plugins - Add New и загрузите установочный ZIP.
2. После установки нажмите Activate и убедитесь, что WordPress не показал сообщение о критической ошибке.
3. Создайте тестовую страницу, чтобы не менять публичный макет до проверки.
4. Откройте страницу в Elementor и найдите timeline-виджет по слову timeline.
5. Перетащите виджет в пустой контейнер и оставьте несколько тестовых элементов.
6. Нажмите Update, откройте страницу в новой вкладке и проверьте результат без режима редактора.

Если на тестовой странице всё отображается корректно, можно переходить к настройке. Если виджет появляется в редакторе, но на публичной странице выглядит иначе, проблема чаще связана с кешем, стилями темы, оптимизацией CSS/JS или разницей между предпросмотром и реальной страницей. В этом случае не меняйте все настройки подряд. Сначала сохраните текущий вариант, очистите кеш Elementor через Clear Files & Data, затем проверьте страницу в приватном окне браузера.

Что считать успешной первичной проверкой

Успех установки - это не просто активный плагин в списке. Виджет должен находиться в Elementor, добавляться на страницу, сохраняться после обновления, отображаться в публичной части сайта и не ломать консоль браузера явными JavaScript-ошибками. Также проверьте, что после деактивации плагина страница не падает целиком: timeline может пропасть или превратиться в пустой блок, но остальной макет должен оставаться доступным.

Как работает выбор источника: custom, blog posts и WooCommerce

Самая важная настройка для CodeCanyon Vertical and Horizontal - не цвет линии и не эффект карточек, а источник данных. Публичные материалы товара подтверждают три источника: обычные записи блога, товары WooCommerce и custom timeline через повторяемое поле Elementor. У каждого источника своя логика, поэтому нельзя один раз настроить виджет и затем механически использовать его для всех страниц.

Custom timeline для ручной истории

Ручной режим лучше выбирать, когда события не являются обычными записями WordPress. Например, вы хотите показать этапы работы агентства, историю бренда, план запуска продукта, программу курса или путь клиента. В таком сценарии редактор сам заполняет элементы: заголовок, описание, дату или этап, изображение, ссылку. Плюс ручного режима - полный контроль. Минус - данные не обновляются автоматически, и при изменении общей структуры придётся редактировать виджет вручную.

Для ручного режима сразу определите единый формат. Если один этап называется Discovery, второй Разработка сайта для клиента с нуля, а третий просто Launch, блок будет выглядеть неаккуратно. Лучше выбрать стиль названий: короткое действие, результат или этап. Например: Бриф, Прототип, Дизайн, Запуск, Поддержка. Внешние подписи можно писать по-русски, а реальные UI labels Elementor оставлять в исходном виде.

Blog posts timeline для редакционной ленты

Режим записей полезен, когда timeline должен автоматически подхватывать материалы сайта. Он подходит для новостей, кейсов, истории проекта, серии релизов или публичного журнала обновлений. Здесь важно не только выбрать тип контента, но и ограничить количество записей. По странице товара заявлен контроль числа записей и фильтр по категориям, поэтому логичный рабочий подход такой: создайте отдельную категорию, назначьте её нужным материалам и выводите только эту группу.

Такой подход лучше, чем выводить все записи подряд. Если timeline тянет материалы из общей ленты блога, в нём могут оказаться нерелевантные новости, служебные публикации, короткие анонсы или записи без миниатюр. В результате блок перестаёт рассказывать историю. Категория или отдельная подборка помогают держать смысл и порядок.

WooCommerce timeline для витрины с логикой последовательности

WooCommerce timeline стоит использовать осторожно. Он хорошо работает, когда товарная подборка действительно имеет порядок: развитие линейки, сезонный запуск, набор из нескольких шагов, комплектация, товары для разных этапов задачи. Если же посетителю нужно сравнить десятки товаров по цене, атрибутам и наличию, обычный каталог или фильтруемая сетка будут удобнее.

Для товарного timeline заранее проверьте миниатюры и короткие описания. Карточка timeline не должна конкурировать с полноценной карточкой товара. Её задача - зацепить, объяснить место товара в истории и дать переход к подробной странице. Если на сайте используется кеширование или оптимизация изображений, после настройки обязательно проверьте, что изображения товаров не подгружаются слишком поздно и не вызывают заметные скачки высоты блока.

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

Настройка timeline должна идти от содержания к внешнему виду. Частая ошибка - начать с цветов, а потом пытаться вписать в красивый шаблон неподходящий текст. В Elementor удобнее сначала настроить источник и структуру карточек, затем ориентацию, затем типографику и только после этого декоративные детали. Так проще понять, что именно ломает результат, если блок выглядит плохо.

Источник и количество элементов

Для blog timeline и WooCommerce timeline задайте источник, категорию или другую доступную фильтрацию, количество элементов и порядок. Если плагин позволяет использовать AJAX pagination, включайте её только тогда, когда timeline действительно содержит больше элементов, чем разумно показывать сразу. AJAX pagination делает взаимодействие мягче, потому что дополнительные элементы подгружаются без полной перезагрузки страницы, но она не заменяет нормальную структуру контента.

Для типового сайта начните с небольшого числа элементов. Для вертикальной истории обычно хватает пяти - семи карточек. Для горизонтального timeline лучше начинать с трёх - пяти элементов в видимой логике, потому что горизонтальная прокрутка требует больше внимания от пользователя. Если событий больше, разделите историю на несколько тематических блоков или используйте вертикальный режим.

Ориентация: вертикальная или горизонтальная

Вертикальный стиль подходит для длинных историй, процессов и материалов, где пользователь читает сверху вниз. Он лучше работает на мобильных устройствах, потому что естественно превращается в последовательную ленту. Горизонтальный стиль полезен для коротких наборов: этапы проекта, ключевые даты, дорожная карта, товарная линейка, компактная презентация. Но горизонтальный режим нужно особенно внимательно проверять на телефоне: стрелки, точки, автопрокрутка и ширина карточек должны оставаться понятными.

Карточки, заголовки и метаданные

В карточке timeline важны три слоя: маркер времени, заголовок и объяснение. Дата или этап должны быть визуально заметны, но не крупнее смысла события. Заголовок должен помещаться в одну - две строки. Описание лучше держать коротким, особенно в горизонтальном режиме. Если карточка содержит изображение, проверьте единое соотношение сторон, иначе один элемент будет выше другого и сломает ритм.

Если плагин даёт настройки title/meta/content, не включайте всё подряд. Для блога можно показать дату и заголовок, а автора скрыть, если он не важен. Для WooCommerce можно оставить название товара и короткое описание, но не перегружать timeline всеми деталями каталога. Для custom timeline можно вообще заменить дату на этап: Step 1, Milestone, Launch или русскую подпись вне UI, если это не реальный элемент интерфейса.

Цвета и типографика

По странице товара заявлены широкие настройки цветов и типографики. Используйте их для согласования timeline с темой, но не делайте каждую карточку отдельным цветовым событием без причины. Один акцентный цвет для линии и маркеров, спокойный фон карточек, хороший контраст текста и одинаковые отступы обычно дают более профессиональный результат, чем яркая палитра для каждого элемента.

Проверяйте не только красивый вид в редакторе, но и читаемость. Откройте страницу в приватном окне, уменьшите ширину браузера и посмотрите, не становятся ли даты слишком мелкими. В Elementor responsive editing позволяет менять параметры для разных размеров экрана, а значения могут наследоваться от больших экранов к меньшим. Поэтому после настройки desktop-вида обязательно проверьте tablet и mobile.

Анимация, AJAX и автопрокрутка

Если в выбранном дизайне есть анимация появления, горизонтальная прокрутка, стрелки или AJAX pagination, включайте эти эффекты по одному. Сначала сохраните базовый timeline без сложного поведения, затем добавьте один интерактивный элемент и проверьте публичную страницу. Так проще понять, что вызывает ошибку: стиль карточек, скрипт слайдера, кеш, минификация или конфликт с другим Elementor addon.

Безопасное правило настройки: любое поведение, которое меняет высоту блока, подгружает элементы или двигает карточки, проверяйте после очистки кеша и на мобильном экране. Визуальный эффект не должен мешать чтению истории.

Практический пример: дорожная карта услуги в Elementor

Разберём предметный сценарий: сайт агентства хочет показать процесс запуска клиентского проекта. Цель - сделать блок из пяти этапов, который объясняет порядок работы и помогает посетителю понять, что будет происходить после заявки. Для этого лучше выбрать custom timeline, потому что этапы не являются записями блога или товарами.

Цель и подготовка

Нужен блок на странице услуги: Бриф, Прототип, Дизайн, Разработка, Запуск. Для каждого этапа заранее готовим короткое описание длиной примерно одно - два предложения. Изображения можно не использовать, если они не добавляют смысла. Вместо случайных стоковых картинок лучше применить иконки или оставить чистую текстовую карточку с хорошими отступами.

Перед настройкой создайте черновик страницы или копию существующей секции. Это позволит спокойно менять виджет, не ломая рабочую страницу. Если сайт уже использует глобальные цвета Elementor, зафиксируйте основной акцентный цвет и шрифт заголовков. Timeline должен выглядеть частью страницы, а не отдельным импортированным блоком.

Шаги настройки

1. Откройте страницу услуги через Edit with Elementor.
2. Добавьте новый контейнер в том месте, где timeline логически продолжает описание услуги.
3. Найдите timeline-виджет и перетащите его в контейнер.
4. В источнике выберите ручной custom timeline, если такой режим доступен в вашей версии виджета.
5. Добавьте пять элементов и заполните заголовки, короткие описания и этапы.
6. Выберите вертикальный режим, потому что посетитель будет читать процесс сверху вниз.
7. Настройте цвет линии, маркеров, заголовков и текста так, чтобы они совпадали с дизайн-системой страницы.
8. Сохраните страницу, откройте её вне редактора и проверьте desktop, tablet и mobile.

Проверка результата

На публичной странице пользователь должен быстро понять порядок работы без раскрытия дополнительных инструкций. Если для понимания нужно читать длинные абзацы, сократите текст. Если timeline выглядит как декоративный список без ясного результата, добавьте к каждому этапу конкретное действие или итог: получаем структуру, согласуем макет, публикуем страницу. Хороший timeline отвечает не только на вопрос что происходит, но и на вопрос что меняется после этого этапа.

Проверьте клики по ссылкам, если они есть. Если карточки ведут на отдельные материалы или форму заявки, переход должен быть очевидным. Но не превращайте каждую карточку в агрессивную кнопку. В timeline на странице услуги достаточно одного основного призыва ниже блока, а сами этапы должны объяснять процесс.

Нюанс, который часто портит блок

Самая частая проблема ручного timeline - разные размеры карточек. Один этап получает длинный текст, второй - короткий, третий - изображение, четвёртый - ссылку, пятый - ещё один абзац. На desktop это может выглядеть терпимо, а на mobile превращается в рваную ленту. Держите единый формат: один заголовок, одно описание, один дополнительный элемент максимум. Если этапу нужно больше текста, лучше вынести подробности в отдельный раздел страницы.

Blog posts и WooCommerce: как не превратить timeline в тяжёлую ленту

Режимы записей и товаров привлекательны тем, что данные подтягиваются из WordPress. Но автоматизация полезна только тогда, когда источник хорошо подготовлен. Если записи создавались без единой структуры, timeline покажет эту небрежность ещё заметнее: разные миниатюры, обрезанные заголовки, пустые выдержки, случайные категории и неправильный порядок.

Blog posts timeline

Для записей блога сначала создайте отдельную категорию, например Project updates или русскую категорию для конкретной серии. Назначьте её только тем публикациям, которые действительно должны попасть в timeline. Затем в виджете выберите вывод записей и ограничьте количество. Если плагин позволяет включить category filter, используйте его, когда посетителю полезно переключаться между группами событий. Если фильтр нужен только администратору для выбора источника, не показывайте его на странице.

Выдержки записей должны быть короткими. Timeline - не архив блога, а навигационный и объясняющий блок. Для длинной статьи достаточно заголовка, даты и одного предложения. Если запись важная, ссылка поведёт пользователя на полную страницу. Если все тексты целиком вывести в timeline, поисковая и пользовательская ценность блока снизится: посетитель будет прокручивать длинную страницу без ясных точек выбора.

WooCommerce timeline

Для WooCommerce timeline лучше выбирать не весь каталог, а небольшую смысловую подборку. Например, линейку товаров по этапам использования: базовый комплект, расширение, профессиональная версия, аксессуары. В карточке timeline должно быть понятно, почему товары стоят именно в таком порядке. Если порядок не имеет значения, лучше использовать обычный блок товаров WooCommerce.

Проверьте, как выводятся изображения товаров. Если миниатюры разного размера, подготовьте единый формат в медиабиблиотеке или настройках темы. Если у товаров длинные названия, сократите их на уровне данных или используйте более широкий контейнер. Не стоит прятать проблему дизайна уменьшением шрифта до мелкого размера: на телефоне такой timeline станет непригодным.

Проверка результата: скорость, SEO и мобильная версия

Страница товара заявляет responsive и SEO-friendly подход, но в реальной работе эти свойства зависят не только от плагина. На итог влияют тема, изображения, количество карточек, кеширование, другие Elementor addons и настройки оптимизации. Поэтому проверять нужно не обещание, а фактическое поведение на вашей странице.

Мобильная проверка

Откройте страницу в responsive mode Elementor и отдельно в обычном браузере с узкой шириной. Не ограничивайтесь редактором: иногда публичная страница отличается из-за кеша или оптимизации. Проверьте, что карточки не выходят за экран, маркеры не перекрывают текст, горизонтальный timeline не требует слишком точных свайпов, а стрелки и точки не закрывают заголовки. Если вертикальный режим выглядит стабильнее, для длинной истории лучше выбрать его.

Проверка скорости

Timeline с изображениями может увеличить вес страницы. Уменьшите изображения до разумного размера, используйте сжатие, не вставляйте огромные исходники из камеры и не выводите слишком много карточек. Если у вас включена минификация и объединение JavaScript, после настройки проверьте, работает ли горизонтальная прокрутка, AJAX pagination и фильтр категорий. При сбое сначала временно отключайте оптимизацию для проверки, а не удаляйте timeline.

Проверка SEO и доступности

Timeline должен оставаться содержательным HTML-блоком, а не картинкой с текстом. Заголовки событий, описания и ссылки должны быть настоящим текстом на странице. Не прячьте важные факты только внутри изображений. Для картинок добавляйте понятные alt-тексты, особенно если изображение помогает объяснить событие. Если timeline выводит записи или товары, проверьте, что ссылки ведут на релевантные страницы, а не на пустые черновики или дубли.

Для SEO важно не количество красивых карточек, а ясная структура. Если timeline расположен на странице услуги, перед ним должен быть контекст: что это за процесс и зачем он показан. После блока полезно дать следующий шаг: прочитать кейс, перейти к форме, посмотреть товар или открыть раздел с подробностями. Без такого контекста timeline остаётся декоративным элементом.

Совместимость с темой, кешем и другими Elementor addons

Timeline-виджеты часто используют JavaScript для горизонтальной прокрутки, пагинации, анимаций и динамического изменения высоты. Это нормальная часть таких блоков, но именно она чаще всего конфликтует с агрессивной оптимизацией. Если на сайте уже установлены несколько наборов Elementor addons, в них могут быть похожие библиотеки и стили. Поэтому после добавления CodeCanyon Vertical and Horizontal стоит провести не общую, а точечную проверку.

Что проверять после включения кеша

Сначала сохраните страницу без минификации и убедитесь, что timeline работает. Затем включите кеш, минификацию и отложенную загрузку по одному. После каждого шага проверяйте публичную страницу в приватном окне. Если горизонтальный timeline перестал двигаться, фильтр не реагирует или AJAX pagination не подгружает элементы, вернитесь к последней стабильной настройке и попробуйте исключить скрипты Elementor или конкретного addon из объединения, если ваш плагин кеша это позволяет.

Тема и глобальные стили

Некоторые темы задают стили для списков, ссылок, изображений и контейнеров слишком широко. Из-за этого карточки timeline могут получать неожиданные отступы, цвета или размеры. В Elementor сначала проверьте настройки самого виджета и глобальные стили. Если конфликт остаётся, добавьте отдельный CSS class к контейнеру или виджету в Advanced - CSS Classes и применяйте правку только к этому блоку.

Без подтверждённых CSS-классов самого плагина не стоит писать правила, которые зависят от внутренних селекторов. Безопаснее ограничиться вашей собственной обёрткой. Например, если вы назначили контейнеру класс vh-timeline-safe, можно аккуратно нормализовать изображения и перенос длинных ссылок внутри этого блока:

.vh-timeline-safe img {
  max-width: 100%;
  height: auto;
}

.vh-timeline-safe a {
  overflow-wrap: anywhere;
}

@media (max-width: 767px) {
  .vh-timeline-safe {
    line-height: 1.5;
  }
}

Такой фрагмент не трогает ядро WordPress, файлы плагина или тему. Его можно добавить в место для пользовательского CSS вашей темы, дочерней темы или Elementor Pro, если он используется на сайте. Проверка простая: обновите страницу, очистите кеш, посмотрите один проблемный timeline на desktop и mobile. Откат тоже безопасный - удалить этот фрагмент и очистить кеш.

Частые проблемы и диагностика

Большинство проблем с timeline-плагинами делится на четыре группы: виджет не появляется в Elementor, блок не сохраняется, публичная страница отличается от редактора, интерактивные элементы не работают после кеширования. Диагностировать их лучше последовательно, иначе легко перепутать конфликт темы, кеша и источника данных.

Виджет не появился в панели Elementor

Симптом: плагин активирован, но поиск по timeline в панели Elementor ничего не показывает. Возможная причина - активирован не тот ZIP, Elementor не загружает сторонние виджеты, возник конфликт или плагин требует зависимость, которая не включена. Сначала проверьте экран Plugins - Installed Plugins, затем откройте новую пустую страницу в Elementor. Если на новой странице виджета тоже нет, проблема не в макете конкретной страницы.

Исправление начинайте с безопасных шагов: убедитесь, что Elementor активен, переустановите правильный ZIP, временно отключите похожие Elementor addons на тестовой копии сайта. Если после отключения конфликтующего addon виджет появился, не включайте всё обратно сразу. Возвращайте плагины по одному и проверяйте редактор.

В редакторе всё красиво, а на сайте стили сломаны

Симптом: в Elementor timeline выглядит правильно, но на публичной странице цвета, отступы или карточки отличаются. Возможные причины - кеш, устаревшие сгенерированные CSS-файлы Elementor, стили темы или оптимизация. Elementor рекомендует очищать файлы и данные через инструменты, когда изменения не отображаются корректно. После этого очистите кеш сайта и браузера.

Если проблема остаётся, проверьте тему: временно посмотрите страницу с базовой темой на staging-копии или используйте Safe Mode для диагностики редактора. Не правьте файлы плагина. Если нужна CSS-правка, ограничивайте её своим классом контейнера.

Горизонтальный timeline не листается

Симптом: карточки видны, но стрелки, точки, свайп или автопрокрутка не работают. Возможная причина - конфликт JavaScript, отложенная загрузка, объединение скриптов или ошибка другого плагина на странице. Откройте консоль браузера и проверьте, появляются ли ошибки после загрузки страницы. Затем временно отключите оптимизацию JS и проверьте снова.

Если после отключения оптимизации всё заработало, не нужно отказываться от timeline. Настройте исключения в плагине кеша или отключите только проблемный режим объединения. Если не помогает, временно смените горизонтальный вид на вертикальный и проверьте, исчезает ли проблема. Это покажет, связан ли сбой именно со slider-поведением.

AJAX pagination или фильтр категорий не подгружает элементы

Симптом: первая группа карточек отображается, но новые элементы не появляются после клика по пагинации или фильтру. Возможные причины - кеширование AJAX-запросов, конфликт security-плагина, неверная категория, недостаточно опубликованных элементов. Сначала убедитесь, что в выбранной категории действительно больше записей или товаров, чем показано на странице.

Затем проверьте страницу без кеша и с отключённой минификацией. Если AJAX работает только для администратора, но не для гостя, проверьте правила кеша и security-плагин. Если функция не критична, безопасный откат - уменьшить количество элементов и отключить AJAX pagination, оставив статичный timeline.

На мобильном карточки слишком длинные или накладываются

Симптом: desktop-версия выглядит хорошо, но на телефоне текст переносится плохо, маркеры закрывают карточку или горизонтальный блок требует неудобной прокрутки. Возможная причина - слишком длинные заголовки, разные изображения, неподходящий режим или наследование desktop-типографики. В Elementor responsive editing можно менять стили для разных устройств, но сначала сократите контент.

Исправление: уменьшите количество текста, приведите изображения к одному формату, проверьте вертикальный режим, настройте отступы и размеры шрифта для mobile. Если блок всё равно перегружен, разделите timeline на две секции или замените его на обычный список для мобильной версии.

Лучшие практики для живого сайта

Когда timeline готов, задача не заканчивается. Такой блок часто связан с контентом, который меняется: появляются новые этапы, товары, публикации, кейсы. Чтобы через несколько месяцев он не превратился в устаревшую витрину, задайте простые правила поддержки.

Держите один источник правды

Если timeline строится из записей, не дублируйте те же события вручную в custom mode. Пусть источником будет категория или набор записей. Если timeline ручной, не пытайтесь параллельно вести похожий список в блоге. Дублирование быстро приводит к расхождениям: в одном месте дата обновлена, в другом забыта, ссылка ведёт на старую страницу.

Не перегружайте визуальные эффекты

Timeline должен помогать читать. Если анимация, автопрокрутка, стрелки, точки, тени и яркие маркеры спорят за внимание, пользователь хуже понимает последовательность. Для деловых страниц обычно достаточно одного акцентного цвета, аккуратных маркеров и хороших отступов. Сложные эффекты оставляйте для коротких промо-блоков, где timeline играет роль презентации.

Проверяйте после обновлений

После обновления WordPress, Elementor, темы, кеш-плагина или самого addon проверьте страницу с timeline. Особое внимание - горизонтальному режиму и AJAX pagination. Если что-то сломалось, сначала очистите кеш Elementor и сайта, затем проверьте консоль браузера и только потом ищите конфликт. Не обновляйте все плагины на рабочем сайте без возможности отката.

Когда CodeCanyon Vertical and Horizontal будет удачным выбором

CodeCanyon Vertical and Horizontal стоит использовать, если вам нужен timeline именно внутри Elementor, с выбором вертикального и горизонтального представления, готовыми дизайнами, ручными элементами, выводом записей и возможностью связать блок с WooCommerce-сценарием. Он особенно полезен для страниц услуг, историй бренда, дорожных карт, редакционных серий и небольших товарных подборок, где порядок событий помогает принять решение.

Перед публикацией пройдите короткий финальный чек: правильный источник данных, ограниченное количество карточек и проверка публичной страницы. Дополнительно посмотрите единый формат заголовков, читаемость на телефоне, очищенный кеш и понятный следующий шаг для пользователя. Если эти пункты выполнены, можно переходить к тестированию на реальном сайте и загрузить CodeCanyon Vertical and Horizontal из блока загрузки.

Если же вам нужен огромный архив с расширенной фильтрацией, отдельная база событий, работа без Elementor или строгий контроль шаблонов на уровне темы, лучше сравнить специализированные альтернативы. Timeline хорош тогда, когда он объясняет последовательность. Если последовательности нет, даже самый красивый виджет не заменит нормальную структуру контента.