Плагин для WordPress — «Horizontal Menu Carousel for Elementor» поможет создать горизонтальное меню любой ширины с иконками для сайта, которое можно горизонтально перемещать.
Скачать установочный ZIP файл: horizontal-menu-carousel-for-elementor.zip
Краткое описание
Horizontal Menu Carousel for Elementor — это легкий и гибкий виджет для создания стильных горизонтальных меню-каруселей на вашем WordPress сайте. Идеально подходит для навигационных панелей, категорий товаров, сервисных меню и многого другого.
Основные возможности
Полная кастомизация дизайна
Виджет предоставляет полный контроль над внешним видом. Вы можете настроить цветовую палитру, включая фоновый цвет, цвет иконок, верхнего и нижнего текста. Типографика полностью настраивается — выбирайте шрифты, размеры, начертание и межстрочные интервалы. Отступы и размеры всех элементов можно гибко регулировать через padding и margin. Размер иконок настраивается от 16px до 50px.
Гибкая структура элементов
Каждый элемент карусели включает четыре компонента. Во-первых, это иконка с поддержкой всех библиотек Font Awesome и пользовательских SVG. Верхний текст используется для подзаголовков или описаний. Нижний текст служит основным заголовком элемента. И наконец, ссылка с поддержкой внешних переходов и атрибута nofollow.
Адаптивный дизайн
Виджет автоматически адаптируется под все устройства. На мобильных реализована плавная горизонтальная прокрутка с touch-friendly интерфейсом для сенсорных экранов. Отступы оптимизированы для разных разрешений экрана.
Производительность
Код написан максимально легко, без лишних зависимостей. CSS вынесен в отдельный файл для быстрой загрузки страниц. Плагин оказывает минимальное влияние на скорость сайта и оптимизирован для работы с большим количеством элементов.
Возможности использования
Интернет-магазины
В e-commerce плагин отлично подходит для создания меню категорий товаров, фильтров по брендам или коллекциям, а также быстрой навигации по разделам каталога.
Новостные сайты
Для новостных порталов виджет можно использовать как навигацию по рубрикам, категориям статей или тематическим разделам.
Корпоративные сайты
На корпоративных ресурсах плагин поможет организовать меню услуг, навигацию по отделам компании или создать быстрые ссылки на важные разделы сайта.
Образовательные платформы
Для образовательных проектов виджет подойдет для категоризации курсов, навигации по темам обучения или организации разделов с учебными материалами.
Технические особенности
Преимущества
Плагин прост в интеграции и работает сразу после установки Elementor. Все настройки доступны в интуитивном визуальном редакторе Elementor. Через repeater поля можно легко добавлять неограниченное количество элементов. Все изменения отображаются сразу в Live Preview режиме. Код написан в соответствии со стандартами WordPress и Elementor. Реализована поддержка навигации с клавиатуры и ARIA-атрибутов для доступности.
Что входит в комплект
В пакет включен виджет для Elementor, CSS файл со стилями, поддержка RTL (right-to-left) направления текста и готовые примеры использования.
Настройки стилей
В разделе стилей можно настроить цвет фона карусели. Для иконок доступны настройки размера (от 16 до 50px), цвета и отступов через margin. Верхний текст настраивается по цвету, типографике (шрифт, размер, начертание) и отступам через padding. Аналогичные настройки доступны для нижнего текста.
Настройки контента
Для каждого элемента карусели можно указать поле для верхнего текста, поле для нижнего текста, выбрать иконку из библиотек Font Awesome или загрузить SVG. Также настраивается URL ссылки с опциями «Открывать в новом окне» и «Добавить nofollow».
Системные требования
- WordPress 5.0 или выше
- Elementor 3.0 или выше
- PHP 7.0 или выше
Установка
Процесс установки состоит из нескольких шагов:
- Загрузите папку плагина в директорию /wp-content/plugins/
- Активируйте плагин в разделе «Плагины» административной панели WordPress
- Откройте редактор Elementor на нужной странице
- Найдите виджет «Horizontal Menu Carousel Widget» в панели виджетов
- Перетащите его на страницу и настройте по своему вкусу
Поддержка и обновления
Мы регулярно выпускаем обновления для совместимости с новыми версиями Elementor. Техническая поддержка доступна через форму обратной связи на сайте. К плагину прилагается документация с примерами использования.
Нюансы и рекомендации
Важно знать
Зависимость от Elementor
Плагин требует установленный и активированный Elementor. Без Elementor виджет работать не будет — это основное требование для функционирования.
Совместимость
Плагин работает со всеми темами, поддерживающими Elementor, и совместим с большинством популярных плагинов. Однако может потребоваться небольшая настройка CSS для идеальной интеграции с вашей конкретной темой.
Производительность
Рекомендуется использовать до 15-20 элементов в одной карусели для оптимальной работы. Если нужно больше элементов, лучше разделить их на несколько отдельных каруселей.
Адаптивность
На мобильных устройствах появляется горизонтальная прокрутка, что является задуманным поведением. Элементы не переносятся на новую строку — это особенность, а не баг. Обязательно протестируйте внешний вид на разных устройствах перед публикацией.
Советы по использованию
Используйте короткие тексты для элементов, так как длинные заголовки могут выглядеть неаккуратно в горизонтальной карусели. Подбирайте контрастные цвета для лучшей читаемости текста на фоне.
Обязательно тестируйте карусель на мобильных устройствах и проверяйте, удобно ли листать элементы пальцем. Старайтесь использовать иконки в едином стиле — например, все из одной библиотеки Font Awesome Solid.
Не перегружайте карусель элементами. Оптимальное количество для комфортного восприятия — от 5 до 10 элементов.
Примеры использования
Пример 1: Меню услуг
Первый элемент может содержать иконку портфеля, верхний текст «Консультация» и нижний текст «Бесплатно». Второй элемент — иконка палитры, «Дизайн» и «от 5000₽». Третий — иконка ноутбука, «Разработка» и «от 10000₽».
Пример 2: Категории товаров
Для интернет-магазина можно создать элемент с иконкой футболки, текстом «Новинки» сверху и «Одежда» снизу. Следующий элемент — иконка кроссовок, «Sale -50%» и «Обувь». Третий — иконка сумки, «Хиты» и «Аксессуары».
Лицензия
GPL v2 или выше — свободное использование и модификация
Контакты
Разработчик: App-web
Сайт: https://app-web.ru/
Поддержка: форма обратной связи на сайте